Skip to content

Commit 820e243

Browse files
JonathangarridoJonathangarrido
committed
feat(organisms): modal multiple
1 parent 2f30e37 commit 820e243

File tree

7 files changed

+308
-145
lines changed

7 files changed

+308
-145
lines changed

‎src/documentation/pages/Organisms/Modals.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { ModalAlertDemo, ModalDemo } from '@/documentation/components/Organisms/
44
export const ViewModals = (): JSX.Element => {
55
return (
66
<>
7+
<div>
8+
<p>ejemplo multiple</p>
9+
</div>
710
<MyHeading>Modales</MyHeading>
811
<MyText>
912
Para los modales, tenemos dos tipos de componentes: Modal y ModalAlert. Cada uno tiene sus{' '}

‎src/organisms/Modals/Modal/Modal.tsx‎

Lines changed: 12 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
import {
2-
Box,
3-
Modal as ChakraModal,
4-
ModalCloseButton,
5-
ModalContent as ChakraModalContent,
6-
ModalHeader,
7-
ModalOverlay,
8-
useMediaQuery,
9-
} from '@chakra-ui/react'
1+
import { Modal as ChakraModal, ModalOverlay } from '@chakra-ui/react'
102

11-
import { vars } from '@/theme'
123
import { IModal } from '../types'
4+
import { ModalContentBase } from './ModalContentBase'
135

146
export const uiKitModalIsDesktop = 641
157

@@ -25,11 +17,6 @@ export const Modal = ({
2517
fixedButtons = false,
2618
autoFocus = false,
2719
}: IModal): JSX.Element => {
28-
const py = '32px'
29-
const px = '24px'
30-
31-
const [isDesktop] = useMediaQuery(`(min-width: ${uiKitModalIsDesktop}px)`)
32-
3320
const isInside = scrollBehavior === 'inside' || fixedButtons
3421

3522
return (
@@ -42,83 +29,18 @@ export const Modal = ({
4229
onClose={onClose}
4330
scrollBehavior={isInside ? 'inside' : 'outside'}
4431
autoFocus={autoFocus}
32+
blockScrollOnMount={false}
4533
>
4634
<ModalOverlay />
47-
<ChakraModalContent
48-
maxH={isInside ? '100dvh' : 'auto'}
49-
minH={isDesktop ? '300px' : '100dvh'}
50-
padding={0}
51-
width="100%"
52-
sx={{
53-
bgColor: vars('colors-neutral-white'),
54-
borderRadius: isDesktop ? '8px' : 0,
55-
mt: isDesktop ? '48px' : 0,
56-
mb: isDesktop ? '48px' : 0,
57-
marginX: isDesktop ? 'auto' : 0,
58-
maxH: isInside ? 'calc(100dvh - 96px)' : 'auto',
59-
maxWidth: isDesktop ? '690px' : '100%',
60-
61-
...(fixedButtons && {
62-
'.uikit-modalContent': {
63-
pb: 0,
64-
},
65-
'.uikit-modalButtons': {
66-
py: py,
67-
px: px,
68-
},
69-
}),
70-
...(withoutMargin && {
71-
'.uikit-modalContent': {
72-
pt: 0,
73-
px: 0,
74-
},
75-
'.uikit-modalButtons': {
76-
px: px,
77-
},
78-
}),
79-
}}
80-
>
81-
<ModalHeader
82-
bg={vars('colors-main-deepSkyBlue')}
83-
borderTopRadius={isDesktop ? '8px' : 0}
84-
color={vars('colors-neutral-white')}
85-
fontFamily="Roboto"
86-
fontSize={isDesktop ? '20px' : '18px'}
87-
fontWeight={700}
88-
lineHeight={1}
89-
mb={withoutMargin ? 0 : '32px'}
90-
paddingY={px}
91-
textAlign="center"
92-
>
93-
{title}
94-
</ModalHeader>
95-
{closeOnOverlayClick && (
96-
<ModalCloseButton
97-
background="transparent!important"
98-
border="none"
99-
color={vars('colors-neutral-white')}
100-
h="12px"
101-
p="22px"
102-
right={0}
103-
top={0}
104-
w="12px"
105-
_focus={{
106-
boxShadow: 'none',
107-
}}
108-
_focusVisible={{
109-
boxShadow: `inset 0 0 0 2px ${vars(
110-
'colors-alert-deepSkyBlue'
111-
)}, inset 0 0 0 4px ${vars('colors-neutral-white')}`,
112-
}}
113-
/>
114-
)}
115-
{fixedSubtitle?.trim() && (
116-
<Box as="p" fontSize="14px" lineHeight="19px" mb={py} textAlign="center" px={px}>
117-
{fixedSubtitle}
118-
</Box>
119-
)}
120-
{children}
121-
</ChakraModalContent>
35+
<ModalContentBase
36+
isInside={isInside}
37+
fixedButtons={fixedButtons}
38+
withoutMargin={withoutMargin}
39+
title={title}
40+
closeOnOverlayClick={closeOnOverlayClick}
41+
fixedSubtitle={fixedSubtitle}
42+
children={children}
43+
/>
12244
</ChakraModal>
12345
</>
12446
)

‎src/organisms/Modals/Modal/ModalContentBase.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import {
2+
Box,
3+
ModalCloseButton,
4+
ModalContent as ChakraModalContent,
5+
ModalHeader,
6+
useMediaQuery,
7+
} from '@chakra-ui/react'
8+
9+
import { vars } from '@/theme'
10+
import { IModalContentBase } from '../types'
11+
import { uiKitModalIsDesktop } from './Modal'
12+
13+
export const ModalContentBase = ({
14+
isInside,
15+
fixedButtons,
16+
withoutMargin,
17+
title,
18+
closeOnOverlayClick,
19+
fixedSubtitle,
20+
children,
21+
}: IModalContentBase): JSX.Element => {
22+
const [isDesktop] = useMediaQuery(`(min-width: ${uiKitModalIsDesktop}px)`)
23+
const py = '32px'
24+
const px = '24px'
25+
26+
return (
27+
<ChakraModalContent
28+
maxH={isInside ? '100dvh' : 'auto'}
29+
minH={isDesktop ? '300px' : '100dvh'}
30+
padding={0}
31+
width="100%"
32+
sx={{
33+
bgColor: vars('colors-neutral-white'),
34+
borderRadius: isDesktop ? '8px' : 0,
35+
mt: isDesktop ? '48px' : 0,
36+
mb: isDesktop ? '48px' : 0,
37+
marginX: isDesktop ? 'auto' : 0,
38+
maxH: isInside ? 'calc(100dvh - 96px)' : 'auto',
39+
maxWidth: isDesktop ? '690px' : '100%',
40+
41+
...(fixedButtons && {
42+
'.uikit-modalContent': {
43+
pb: 0,
44+
},
45+
'.uikit-modalButtons': {
46+
py: py,
47+
px: px,
48+
},
49+
}),
50+
...(withoutMargin && {
51+
'.uikit-modalContent': {
52+
pt: 0,
53+
px: 0,
54+
},
55+
'.uikit-modalButtons': {
56+
px: px,
57+
},
58+
}),
59+
}}
60+
>
61+
<ModalHeader
62+
bg={vars('colors-main-deepSkyBlue')}
63+
borderTopRadius={isDesktop ? '8px' : 0}
64+
color={vars('colors-neutral-white')}
65+
fontFamily="Roboto"
66+
fontSize={isDesktop ? '20px' : '18px'}
67+
fontWeight={700}
68+
lineHeight={1}
69+
mb={withoutMargin ? 0 : '32px'}
70+
paddingY={px}
71+
textAlign="center"
72+
>
73+
{title}
74+
</ModalHeader>
75+
{closeOnOverlayClick && (
76+
<ModalCloseButton
77+
background="transparent!important"
78+
border="none"
79+
color={vars('colors-neutral-white')}
80+
h="12px"
81+
p="22px"
82+
right={0}
83+
top={0}
84+
w="12px"
85+
_focus={{
86+
boxShadow: 'none',
87+
}}
88+
_focusVisible={{
89+
boxShadow: `inset 0 0 0 2px ${vars('colors-alert-deepSkyBlue')}, inset 0 0 0 4px ${vars(
90+
'colors-neutral-white'
91+
)}`,
92+
}}
93+
/>
94+
)}
95+
{fixedSubtitle?.trim() && (
96+
<Box as="p" fontSize="14px" lineHeight="19px" mb={py} textAlign="center" px={px}>
97+
{fixedSubtitle}
98+
</Box>
99+
)}
100+
{children}
101+
</ChakraModalContent>
102+
)
103+
}

‎src/organisms/Modals/ModalAlert/ModalAlert.tsx‎

Lines changed: 5 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
1-
import {
2-
Box,
3-
Modal as ChakraModal,
4-
ModalBody,
5-
ModalContent,
6-
ModalOverlay,
7-
useMediaQuery,
8-
} from '@chakra-ui/react'
1+
import { Box, Modal as ChakraModal, ModalOverlay } from '@chakra-ui/react'
92

103
import { IModalAlert } from '../types'
114

12-
import { Loading } from './Loading'
13-
import { alertColorStates } from '@/organisms/Alerts/utils/alertStates'
145
import { vars } from '@/theme'
6+
import { ModalAlertContent } from './ModalAlertContent'
157

168
export const ModalAlertNew = ({
179
autoFocus = false,
@@ -23,8 +15,6 @@ export const ModalAlertNew = ({
2315
description,
2416
status,
2517
}: IModalAlert): JSX.Element => {
26-
const [isDesktop] = useMediaQuery('(min-width: 641px)')
27-
2818
return (
2919
<>
3020
<ChakraModal
@@ -36,49 +26,9 @@ export const ModalAlertNew = ({
3626
autoFocus={autoFocus}
3727
>
3828
<ModalOverlay />
39-
<ModalContent
40-
borderRadius="8px"
41-
p={0}
42-
m="10vh auto 0"
43-
sx={{
44-
maxWidth: isDesktop ? '589px' : '343px',
45-
}}
46-
>
47-
<ModalBody
48-
p="32px"
49-
display="flex"
50-
flexDirection="column"
51-
alignItems="center"
52-
textAlign="center"
53-
gap="16px"
54-
fontFamily="Roboto"
55-
>
56-
{type === 'loading' ? (
57-
<Loading />
58-
) : (
59-
<Box display="flex" justifyContent="center">
60-
{alertColorStates[status ?? 'info'].icon}
61-
</Box>
62-
)}
63-
{title && (
64-
<Box
65-
as="p"
66-
fontWeight="700"
67-
fontSize={isDesktop ? '20px' : '18px'}
68-
lineHeight="24px"
69-
mb={0}
70-
>
71-
{title}
72-
</Box>
73-
)}
74-
{description && (
75-
<Box as="p" fontSize="16px" lineHeight="24px" mb={0}>
76-
{description}
77-
</Box>
78-
)}
79-
</ModalBody>
80-
{type !== 'loading' && children ? children : <></>}
81-
</ModalContent>
29+
<ModalAlertContent type={type} title={title} description={description} status={status}>
30+
{children}
31+
</ModalAlertContent>
8232
</ChakraModal>
8333
</>
8434
)

‎src/organisms/Modals/ModalAlert/ModalAlertContent.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Box, ModalBody, ModalContent, useMediaQuery } from '@chakra-ui/react'
2+
3+
import { IModalAlertContent } from '../types'
4+
5+
import { Loading } from './Loading'
6+
import { alertColorStates } from '@/organisms/Alerts/utils/alertStates'
7+
8+
export const ModalAlertContent = ({
9+
type,
10+
title,
11+
description,
12+
status,
13+
children,
14+
}: IModalAlertContent): JSX.Element => {
15+
const [isDesktop] = useMediaQuery('(min-width: 641px)')
16+
17+
return (
18+
<ModalContent
19+
borderRadius="8px"
20+
p={0}
21+
m="10vh auto 0"
22+
sx={{
23+
maxWidth: isDesktop ? '589px' : '343px',
24+
}}
25+
>
26+
<ModalBody
27+
p="32px"
28+
display="flex"
29+
flexDirection="column"
30+
alignItems="center"
31+
textAlign="center"
32+
gap="16px"
33+
fontFamily="Roboto"
34+
>
35+
{type === 'loading' ? (
36+
<Loading />
37+
) : (
38+
<Box display="flex" justifyContent="center">
39+
{alertColorStates[status ?? 'info'].icon}
40+
</Box>
41+
)}
42+
{title && (
43+
<Box
44+
as="p"
45+
fontWeight="700"
46+
fontSize={isDesktop ? '20px' : '18px'}
47+
lineHeight="24px"
48+
mb={0}
49+
>
50+
{title}
51+
</Box>
52+
)}
53+
{description && (
54+
<Box as="p" fontSize="16px" lineHeight="24px" mb={0}>
55+
{description}
56+
</Box>
57+
)}
58+
</ModalBody>
59+
{type !== 'loading' && children ? children : <></>}
60+
</ModalContent>
61+
)
62+
}

0 commit comments

Comments
 (0)