@mrshmllw/smores-react 2.17.7 → 2.17.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Modal/Modal.js +16 -92
- package/dist/Modal/Modal.js.map +1 -1
- package/package.json +1 -1
package/dist/Modal/Modal.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { theme } from '../theme';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
@@ -8,20 +8,10 @@ import { Text } from '../Text';
|
|
|
8
8
|
import useBodyScrollLock from './useBodyScrollLock';
|
|
9
9
|
export const Modal = ({ title = '', icon = '', children, showModal = false, handleClick, drawer = true, cross = true, width, containerClass, portalContainer = document.body, }) => {
|
|
10
10
|
const modalRef = useRef(null);
|
|
11
|
-
const hasOpened = useRef(false);
|
|
12
|
-
const [opened, setOpened] = useState(false);
|
|
13
11
|
useBodyScrollLock({ node: modalRef.current, showModal });
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
if (!hasOpened.current && showModal) {
|
|
18
|
-
hasOpened.current = true;
|
|
19
|
-
setOpened(true);
|
|
20
|
-
}
|
|
21
|
-
}, [showModal]);
|
|
22
|
-
return createPortal(React.createElement(Wrapper, { showModal: showModal, ref: modalRef, className: opened ? 'opened' : '' },
|
|
23
|
-
React.createElement(Overlay, { showModal: showModal, onClick: handleClick }),
|
|
24
|
-
React.createElement(Container, { showModal: showModal, drawer: drawer, width: width || '460px', className: containerClass },
|
|
12
|
+
return createPortal(React.createElement(Wrapper, { showModal: showModal, ref: modalRef },
|
|
13
|
+
React.createElement(Overlay, { onClick: handleClick }),
|
|
14
|
+
React.createElement(Container, { drawer: drawer, width: width || '460px', className: containerClass },
|
|
25
15
|
React.createElement(Box, { flex: true, alignItems: "flex-start", justifyContent: "space-between", mb: "8px" },
|
|
26
16
|
React.createElement(TitleElements, { flex: true, direction: "column" },
|
|
27
17
|
icon !== '' && (React.createElement(Icon, { render: icon, size: 42, color: "secondary", mb: "16px" })),
|
|
@@ -31,7 +21,7 @@ export const Modal = ({ title = '', icon = '', children, showModal = false, hand
|
|
|
31
21
|
React.createElement(Box, { flex: true, direction: "column" }, children))), portalContainer);
|
|
32
22
|
};
|
|
33
23
|
const Wrapper = styled(Box)(({ showModal }) => css `
|
|
34
|
-
display: flex;
|
|
24
|
+
display: ${showModal ? 'flex' : 'none'};
|
|
35
25
|
position: absolute;
|
|
36
26
|
z-index: 999;
|
|
37
27
|
top: 0;
|
|
@@ -40,79 +30,18 @@ const Wrapper = styled(Box)(({ showModal }) => css `
|
|
|
40
30
|
width: 100%;
|
|
41
31
|
justify-content: center;
|
|
42
32
|
align-items: center;
|
|
43
|
-
transform: scale(0);
|
|
44
|
-
animation: ${showModal ? '' : 'quickScaleDown 0s .5s linear forwards'};
|
|
45
|
-
|
|
46
|
-
&.opened {
|
|
47
|
-
transform: scale(1);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@keyframes fadeIn {
|
|
51
|
-
0% {
|
|
52
|
-
opacity 0;
|
|
53
|
-
}
|
|
54
|
-
100% {
|
|
55
|
-
opacity: 0.4;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
@keyframes fadeOut {
|
|
60
|
-
0% {
|
|
61
|
-
opacity: 0.4;
|
|
62
|
-
}
|
|
63
|
-
100% {
|
|
64
|
-
opacity 0;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
@keyframes scaleUp {
|
|
69
|
-
0% {
|
|
70
|
-
transform: scale(0.8) translateY(1000px);
|
|
71
|
-
opacity: 0;
|
|
72
|
-
}
|
|
73
|
-
100% {
|
|
74
|
-
transform: scale(1) translateY(0px);
|
|
75
|
-
opacity: 1;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
@keyframes scaleDown {
|
|
80
|
-
0% {
|
|
81
|
-
transform: scale(1) translateY(0px);
|
|
82
|
-
opacity: 1;
|
|
83
|
-
}
|
|
84
|
-
100% {
|
|
85
|
-
transform: scale(0.8) translateY(1000px);
|
|
86
|
-
opacity: 0;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@keyframes quickScaleDown {
|
|
91
|
-
0% {
|
|
92
|
-
transform: scale(1);
|
|
93
|
-
}
|
|
94
|
-
99.9% {
|
|
95
|
-
transform: scale(1);
|
|
96
|
-
}
|
|
97
|
-
100% {
|
|
98
|
-
transform: scale(0);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
`);
|
|
102
|
-
const Overlay = styled.div(({ showModal }) => css `
|
|
103
|
-
position: fixed;
|
|
104
|
-
background: ${theme.colors.secondary};
|
|
105
|
-
cursor: pointer;
|
|
106
|
-
opacity: 0;
|
|
107
|
-
top: 0;
|
|
108
|
-
bottom: 0;
|
|
109
|
-
left: 0;
|
|
110
|
-
right: 0;
|
|
111
|
-
animation: ${showModal
|
|
112
|
-
? `fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards`
|
|
113
|
-
: `fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards`};
|
|
114
33
|
`);
|
|
115
|
-
const
|
|
34
|
+
const Overlay = styled.div `
|
|
35
|
+
position: fixed;
|
|
36
|
+
background: ${theme.colors.secondary};
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
opacity: 0.4;
|
|
39
|
+
top: 0;
|
|
40
|
+
bottom: 0;
|
|
41
|
+
left: 0;
|
|
42
|
+
right: 0;
|
|
43
|
+
`;
|
|
44
|
+
const Container = styled.div(({ drawer, width }) => css `
|
|
116
45
|
background: ${theme.colors.white};
|
|
117
46
|
border: 1px solid ${theme.colors.outline};
|
|
118
47
|
box-sizing: border-box;
|
|
@@ -123,11 +52,6 @@ const Container = styled.div(({ drawer, width, showModal }) => css `
|
|
|
123
52
|
position: fixed;
|
|
124
53
|
max-height: calc(100vh - 64px);
|
|
125
54
|
overflow: auto;
|
|
126
|
-
opacity: 0;
|
|
127
|
-
|
|
128
|
-
animation: ${showModal
|
|
129
|
-
? `scaleUp .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;`
|
|
130
|
-
: `scaleDown .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards`};
|
|
131
55
|
|
|
132
56
|
${drawer === true &&
|
|
133
57
|
css `
|
package/dist/Modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,MAAM,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AA0BnD,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,cAAc,EACd,eAAe,GAAG,QAAQ,CAAC,IAAI,GAChC,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE7C,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;IAExD,OAAO,YAAY,CACjB,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ;QAC1C,oBAAC,OAAO,IAAC,OAAO,EAAE,WAAW,GAAI;QACjC,oBAAC,SAAS,IACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,IAAI,OAAO,EACvB,SAAS,EAAE,cAAc;YAEzB,oBAAC,GAAG,IACF,IAAI,QACJ,UAAU,EAAC,YAAY,EACvB,cAAc,EAAC,eAAe,EAC9B,EAAE,EAAC,KAAK;gBAER,oBAAC,aAAa,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;oBACnC,IAAI,KAAK,EAAE,IAAI,CACd,oBAAC,IAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,WAAW,EAAC,EAAE,EAAC,MAAM,GAAG,CAC7D;oBACD,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,MAAM,IAC7C,KAAK,CACD,CACO;gBACf,KAAK,IAAI,CACR,oBAAC,aAAa,IAAC,OAAO,EAAE,WAAW;oBACjC,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,EAAE,GAAI,CACrC,CACjB,CACG;YACN,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IACzB,QAAQ,CACL,CACI,CACJ,EACV,eAAe,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;eACT,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;;;;;;GASvC,CACF,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;gBAEV,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;CAOrC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAC1B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;kBACV,KAAK,CAAC,MAAM,CAAC,KAAK;wBACZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;iBAK3B,KAAK;;;;;MAKhB,MAAM,KAAK,IAAI;IACjB,GAAG,CAAA;;;;;;;;;;;;KAYF;GACF,CACF,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;gBAEhB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;kBAKrB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;;CAMxC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAEhC,CAAA"}
|