@xaypay/tui 0.0.74 → 0.0.76
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/index.es.js +236 -126
- package/dist/index.js +236 -126
- package/package.json +1 -1
- package/src/components/icon/CloseSlide.js +19 -0
- package/src/components/icon/Next.js +21 -0
- package/src/components/icon/Prev.js +21 -0
- package/src/components/input/index.js +23 -19
- package/src/components/modal/index.js +173 -111
- package/src/components/modal/modal.module.css +14 -65
- package/src/components/modal/modal.stories.js +6 -2
- package/src/stories/configuration.stories.mdx +16 -0
- package/src/stories/static/modal-usage.png +0 -0
- package/src/stories/usage.stories.mdx +5 -1
- package/tui.config.js +13 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const SvgCloseSlide = ({ title, titleId, ...props }) => (
|
|
3
|
+
<svg
|
|
4
|
+
width="18"
|
|
5
|
+
height="18"
|
|
6
|
+
viewBox="0 0 18 18"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
aria-labelledby={titleId}
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
{title ? <title id={titleId}>{title}</title> : null}
|
|
13
|
+
<path
|
|
14
|
+
d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
|
|
15
|
+
fill="#fff"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
export default SvgCloseSlide;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const SvgNext = ({ title, titleId, ...props }) => (
|
|
3
|
+
<svg
|
|
4
|
+
width="24"
|
|
5
|
+
height="24"
|
|
6
|
+
viewBox="0 0 24 24"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
aria-labelledby={titleId}
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
{title ? <title id={titleId}>{title}</title> : null}
|
|
13
|
+
<path
|
|
14
|
+
fillRule="evenodd"
|
|
15
|
+
clipRule="evenodd"
|
|
16
|
+
d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.4-11.443a.854.854 0 0 0 .198-.548.855.855 0 0 0-.146-.539l-4.137-5.134a.857.857 0 0 0-1.251-.12.856.856 0 0 0-.129 1.207l3.701 4.586-3.838 4.587a.856.856 0 0 0 .739 1.4.858.858 0 0 0 .58-.305l4.284-5.134Z"
|
|
17
|
+
fill="#fff"
|
|
18
|
+
/>
|
|
19
|
+
</svg>
|
|
20
|
+
);
|
|
21
|
+
export default SvgNext;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const SvgPrev = ({ title, titleId, ...props }) => (
|
|
3
|
+
<svg
|
|
4
|
+
width="24"
|
|
5
|
+
height="24"
|
|
6
|
+
viewBox="0 0 24 24"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
aria-labelledby={titleId}
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
{title ? <title id={titleId}>{title}</title> : null}
|
|
13
|
+
<path
|
|
14
|
+
fillRule="evenodd"
|
|
15
|
+
clipRule="evenodd"
|
|
16
|
+
d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0ZM8.6 11.443a.855.855 0 0 0-.198.548c-.013.19.038.38.146.539l4.137 5.133a.857.857 0 0 0 1.251.12.856.856 0 0 0 .129-1.206l-3.701-4.586 3.838-4.587a.856.856 0 0 0-.739-1.4.858.858 0 0 0-.58.305l-4.284 5.134Z"
|
|
17
|
+
fill="#fff"
|
|
18
|
+
/>
|
|
19
|
+
</svg>
|
|
20
|
+
);
|
|
21
|
+
export default SvgPrev;
|
|
@@ -153,28 +153,32 @@ export const Input = ({
|
|
|
153
153
|
setInnerErrorMessage('');
|
|
154
154
|
}
|
|
155
155
|
|
|
156
|
-
if (value !== undefined
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
setInnerValue(value.substr(0, 8));
|
|
156
|
+
if (value !== undefined) {
|
|
157
|
+
if (value === null) {
|
|
158
|
+
setInnerValue('');
|
|
159
|
+
} else {
|
|
160
|
+
setInnerValue(value);
|
|
161
|
+
if (type === 'tel') {
|
|
162
|
+
if (!phoneNumberRegex.test(value)) {
|
|
163
|
+
telErrorMessage && setInnerErrorMessage(telErrorMessage);
|
|
164
|
+
setInnerValue('');
|
|
166
165
|
} else {
|
|
167
|
-
|
|
166
|
+
setInnerErrorMessage('');
|
|
167
|
+
if (value.length > 8) {
|
|
168
|
+
setInnerValue(value.substr(0, 8));
|
|
169
|
+
} else {
|
|
170
|
+
setInnerValue(value);
|
|
171
|
+
}
|
|
168
172
|
}
|
|
169
|
-
}
|
|
170
|
-
}
|
|
173
|
+
}
|
|
171
174
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
+
if (maxLength && value.length > maxLength && type !== 'tel') {
|
|
176
|
+
setInnerValue(value.substr(0, maxLength));
|
|
177
|
+
}
|
|
175
178
|
|
|
176
|
-
|
|
177
|
-
|
|
179
|
+
if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
|
|
180
|
+
!regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('')
|
|
181
|
+
}
|
|
178
182
|
}
|
|
179
183
|
}
|
|
180
184
|
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
|
|
@@ -327,7 +331,6 @@ Input.propTypes = {
|
|
|
327
331
|
name: PropTypes.string,
|
|
328
332
|
change: PropTypes.func,
|
|
329
333
|
color: PropTypes.string,
|
|
330
|
-
value: PropTypes.string,
|
|
331
334
|
width: PropTypes.string,
|
|
332
335
|
label: PropTypes.string,
|
|
333
336
|
required: PropTypes.bool,
|
|
@@ -373,6 +376,7 @@ Input.propTypes = {
|
|
|
373
376
|
leftIcon: PropTypes.arrayOf(PropTypes.element),
|
|
374
377
|
rightIcon: PropTypes.arrayOf(PropTypes.element),
|
|
375
378
|
type: PropTypes.oneOf(Object.values(InputTypes)),
|
|
379
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
|
|
376
380
|
};
|
|
377
381
|
|
|
378
382
|
Input.defaultProps = {
|
|
@@ -2,23 +2,41 @@ import React, { useState, useEffect } from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
|
|
5
|
+
import { compereConfigs } from "./../../utils";
|
|
6
|
+
import styles from './modal.module.css';
|
|
7
|
+
|
|
8
|
+
import SvgNext from './../icon/Next';
|
|
9
|
+
import SvgPrev from './../icon/Prev';
|
|
5
10
|
import SvgCloseIcon from './../icon/CloseIcon';
|
|
6
|
-
import
|
|
11
|
+
import SvgCloseSlide from './../icon/CloseSlide';
|
|
7
12
|
|
|
8
13
|
export const Modal = ({
|
|
9
14
|
type,
|
|
10
15
|
data,
|
|
16
|
+
radius,
|
|
17
|
+
padding,
|
|
11
18
|
setShow,
|
|
12
19
|
selected,
|
|
13
20
|
children,
|
|
21
|
+
minWidth,
|
|
22
|
+
minHeight,
|
|
14
23
|
className,
|
|
15
24
|
headerText,
|
|
25
|
+
imageWidth,
|
|
26
|
+
headerSize,
|
|
27
|
+
imageHeight,
|
|
28
|
+
headerColor,
|
|
29
|
+
headerWeight,
|
|
30
|
+
headerHeight,
|
|
31
|
+
backgroundColor,
|
|
32
|
+
layerBackgroundColor,
|
|
16
33
|
}) => {
|
|
17
|
-
const classProps = classnames(className);
|
|
18
|
-
|
|
19
34
|
const [select, setSelect] = useState(0);
|
|
20
35
|
const [innerData, setInnerData] = useState([]);
|
|
21
36
|
|
|
37
|
+
const configStyles = compereConfigs();
|
|
38
|
+
const classProps = classnames(className);
|
|
39
|
+
|
|
22
40
|
const handleCloseModal = () => {
|
|
23
41
|
setShow(false)
|
|
24
42
|
};
|
|
@@ -81,13 +99,13 @@ export const Modal = ({
|
|
|
81
99
|
<div
|
|
82
100
|
onClick={handleCloseModal}
|
|
83
101
|
style={{
|
|
84
|
-
position: 'fixed',
|
|
85
102
|
top: '0px',
|
|
86
103
|
left: '0px',
|
|
87
104
|
zIndex: 999,
|
|
88
105
|
width: '100%',
|
|
89
106
|
height: '100vh',
|
|
90
|
-
|
|
107
|
+
position: 'fixed',
|
|
108
|
+
backgroundColor: layerBackgroundColor ? layerBackgroundColor : configStyles.MODAL.layerBackgroundColor
|
|
91
109
|
}}
|
|
92
110
|
>
|
|
93
111
|
<div
|
|
@@ -98,10 +116,9 @@ export const Modal = ({
|
|
|
98
116
|
}}
|
|
99
117
|
>
|
|
100
118
|
<div
|
|
101
|
-
className={classProps}
|
|
119
|
+
className={`${classProps} ${styles['animation__modal']}`}
|
|
102
120
|
onClick={handleStopClosing}
|
|
103
121
|
style={{
|
|
104
|
-
position: 'absolute',
|
|
105
122
|
top: '0px',
|
|
106
123
|
left: '0px',
|
|
107
124
|
right: '0px',
|
|
@@ -110,135 +127,168 @@ export const Modal = ({
|
|
|
110
127
|
maxWidth: '95%',
|
|
111
128
|
overflow: 'auto',
|
|
112
129
|
maxHeight: '95vh',
|
|
130
|
+
position: 'absolute',
|
|
113
131
|
width: 'fit-content',
|
|
114
|
-
borderRadius: '14px',
|
|
115
132
|
height: 'fit-content',
|
|
116
133
|
boxSizing: 'border-box',
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
134
|
+
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
135
|
+
minWidth: type === 'content' ? minWidth ? minWidth : '' : '',
|
|
136
|
+
minHeight: type === 'content' ? minHeight ? minHeight : '' : '',
|
|
137
|
+
padding: type === 'content' ? padding ? padding : configStyles.MODAL.padding : '10px',
|
|
138
|
+
backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
|
|
120
139
|
}}
|
|
121
140
|
>
|
|
122
141
|
<div
|
|
123
142
|
style={{
|
|
124
|
-
|
|
143
|
+
position: 'relative',
|
|
125
144
|
width: '100%',
|
|
126
|
-
height: '
|
|
127
|
-
alignItems: 'center',
|
|
128
|
-
backgroundColor: '#fbfbfb',
|
|
129
|
-
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
|
|
130
|
-
}}
|
|
131
|
-
>
|
|
132
|
-
{
|
|
133
|
-
headerText && type === 'content' && <p
|
|
134
|
-
style={{
|
|
135
|
-
color: '#00236a',
|
|
136
|
-
fontSize: '20px',
|
|
137
|
-
fontWeight: '600',
|
|
138
|
-
overflow: 'hidden',
|
|
139
|
-
whiteSpace: 'nowrap',
|
|
140
|
-
textOverflow: 'ellipsis',
|
|
141
|
-
margin: '0px 16px 0px 0px',
|
|
142
|
-
maxWidth: 'calc(100% - 30px)'
|
|
143
|
-
}}
|
|
144
|
-
>{headerText}</p>
|
|
145
|
-
}
|
|
146
|
-
<div
|
|
147
|
-
onClick={handleCloseModal}
|
|
148
|
-
style={{
|
|
149
|
-
width: '14px',
|
|
150
|
-
height: '14px',
|
|
151
|
-
cursor: 'pointer'
|
|
152
|
-
}}
|
|
153
|
-
>
|
|
154
|
-
<SvgCloseIcon />
|
|
155
|
-
</div>
|
|
156
|
-
</div>
|
|
157
|
-
|
|
158
|
-
<div
|
|
159
|
-
style={{
|
|
160
|
-
display: 'flex',
|
|
161
|
-
paddingTop: '10px',
|
|
162
|
-
alignItems: 'center',
|
|
163
|
-
boxSizing: 'border-box',
|
|
164
|
-
justifyContent: 'center'
|
|
145
|
+
height: '100%'
|
|
165
146
|
}}
|
|
166
147
|
>
|
|
167
148
|
{
|
|
168
149
|
type === 'content'
|
|
169
|
-
?
|
|
170
|
-
children ? children : ''
|
|
171
|
-
:
|
|
150
|
+
?
|
|
172
151
|
<div
|
|
173
152
|
style={{
|
|
174
|
-
width: '100%'
|
|
153
|
+
width: '100%',
|
|
154
|
+
display: 'flex',
|
|
155
|
+
alignItems: 'center',
|
|
156
|
+
height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
|
|
157
|
+
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
|
|
175
158
|
}}
|
|
176
159
|
>
|
|
177
160
|
{
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
}}
|
|
191
|
-
src={item.url}
|
|
192
|
-
/>
|
|
193
|
-
)
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
})
|
|
161
|
+
headerText && type === 'content' && <p
|
|
162
|
+
style={{
|
|
163
|
+
overflow: 'hidden',
|
|
164
|
+
whiteSpace: 'nowrap',
|
|
165
|
+
textOverflow: 'ellipsis',
|
|
166
|
+
margin: '0px 16px 0px 0px',
|
|
167
|
+
maxWidth: 'calc(100% - 30px)',
|
|
168
|
+
fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
|
|
169
|
+
color: headerColor ? headerColor : configStyles.MODAL.headerColor,
|
|
170
|
+
fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
|
|
171
|
+
}}
|
|
172
|
+
>{headerText}</p>
|
|
197
173
|
}
|
|
198
174
|
<div
|
|
175
|
+
onClick={handleCloseModal}
|
|
199
176
|
style={{
|
|
200
|
-
|
|
177
|
+
width: '14px',
|
|
178
|
+
height: '14px',
|
|
179
|
+
cursor: 'pointer'
|
|
201
180
|
}}
|
|
202
181
|
>
|
|
203
|
-
<
|
|
204
|
-
onClick={handleGoTo}
|
|
205
|
-
data-go='prev'
|
|
206
|
-
style={{
|
|
207
|
-
padding: '8px',
|
|
208
|
-
outline: 'none',
|
|
209
|
-
cursor: 'pointer',
|
|
210
|
-
marginRight: '10px',
|
|
211
|
-
borderRadius: '6px',
|
|
212
|
-
alignItems: 'center',
|
|
213
|
-
display: 'inline-flex',
|
|
214
|
-
justifyContent: 'center',
|
|
215
|
-
backgroundColor: 'white',
|
|
216
|
-
transform: 'rotate(180deg)',
|
|
217
|
-
border: '1px solid #979090'
|
|
218
|
-
}}
|
|
219
|
-
>
|
|
220
|
-
<SvgNextarrow />
|
|
221
|
-
</button>
|
|
222
|
-
<button
|
|
223
|
-
onClick={handleGoTo}
|
|
224
|
-
data-go='next'
|
|
225
|
-
style={{
|
|
226
|
-
padding: '8px',
|
|
227
|
-
outline: 'none',
|
|
228
|
-
cursor: 'pointer',
|
|
229
|
-
borderRadius: '6px',
|
|
230
|
-
alignItems: 'center',
|
|
231
|
-
display: 'inline-flex',
|
|
232
|
-
justifyContent: 'center',
|
|
233
|
-
backgroundColor: 'white',
|
|
234
|
-
border: '1px solid #979090'
|
|
235
|
-
}}
|
|
236
|
-
>
|
|
237
|
-
<SvgNextarrow />
|
|
238
|
-
</button>
|
|
182
|
+
<SvgCloseIcon />
|
|
239
183
|
</div>
|
|
240
184
|
</div>
|
|
185
|
+
:
|
|
186
|
+
<button
|
|
187
|
+
onClick={handleCloseModal}
|
|
188
|
+
style={{
|
|
189
|
+
position: 'absolute',
|
|
190
|
+
top: '23px',
|
|
191
|
+
width: '18px',
|
|
192
|
+
right: '23px',
|
|
193
|
+
height: '18px',
|
|
194
|
+
border: 'none',
|
|
195
|
+
outline: 'none',
|
|
196
|
+
cursor: 'pointer',
|
|
197
|
+
backgroundColor: 'transparent'
|
|
198
|
+
}}
|
|
199
|
+
>
|
|
200
|
+
<SvgCloseSlide />
|
|
201
|
+
</button>
|
|
241
202
|
}
|
|
203
|
+
|
|
204
|
+
<div
|
|
205
|
+
style={{
|
|
206
|
+
display: 'flex',
|
|
207
|
+
alignItems: 'center',
|
|
208
|
+
boxSizing: 'border-box',
|
|
209
|
+
justifyContent: 'center',
|
|
210
|
+
paddingTop: type === 'content' ? '10px' : '0px'
|
|
211
|
+
}}
|
|
212
|
+
>
|
|
213
|
+
{
|
|
214
|
+
type === 'content'
|
|
215
|
+
?
|
|
216
|
+
children ? children : ''
|
|
217
|
+
:
|
|
218
|
+
<div
|
|
219
|
+
style={{
|
|
220
|
+
width: '100%',
|
|
221
|
+
display: 'flex',
|
|
222
|
+
alignItems: 'center'
|
|
223
|
+
}}
|
|
224
|
+
>
|
|
225
|
+
{
|
|
226
|
+
innerData && innerData.length > 0 && innerData.map((item, index) => {
|
|
227
|
+
if (select === index) {
|
|
228
|
+
if (!item.hasOwnProperty('url')) {
|
|
229
|
+
alert('Please add url property in data prop on each element');
|
|
230
|
+
} else {
|
|
231
|
+
return (
|
|
232
|
+
<img
|
|
233
|
+
style={{
|
|
234
|
+
objectFit: 'cover',
|
|
235
|
+
objectPosition: 'center',
|
|
236
|
+
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
237
|
+
width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
|
|
238
|
+
height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
|
|
239
|
+
}}
|
|
240
|
+
src={item.url}
|
|
241
|
+
key={item.id ? item.id : index}
|
|
242
|
+
/>
|
|
243
|
+
)
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
})
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
{
|
|
250
|
+
innerData && innerData.length > 1 && <>
|
|
251
|
+
<button
|
|
252
|
+
onClick={handleGoTo}
|
|
253
|
+
data-go='prev'
|
|
254
|
+
style={{
|
|
255
|
+
position: 'absolute',
|
|
256
|
+
left: '14px',
|
|
257
|
+
width: '24px',
|
|
258
|
+
height: '24px',
|
|
259
|
+
padding: '0px',
|
|
260
|
+
border: 'none',
|
|
261
|
+
outline: 'none',
|
|
262
|
+
cursor: 'pointer',
|
|
263
|
+
top: 'calc(50% - 12px)',
|
|
264
|
+
backgroundColor: 'transparent'
|
|
265
|
+
}}
|
|
266
|
+
>
|
|
267
|
+
<SvgPrev />
|
|
268
|
+
</button>
|
|
269
|
+
<button
|
|
270
|
+
onClick={handleGoTo}
|
|
271
|
+
data-go='next'
|
|
272
|
+
style={{
|
|
273
|
+
position: 'absolute',
|
|
274
|
+
width: '24px',
|
|
275
|
+
right: '14px',
|
|
276
|
+
height: '24px',
|
|
277
|
+
border: 'none',
|
|
278
|
+
padding: '0px',
|
|
279
|
+
outline: 'none',
|
|
280
|
+
cursor: 'pointer',
|
|
281
|
+
top: 'calc(50% - 12px)',
|
|
282
|
+
backgroundColor: 'transparent'
|
|
283
|
+
}}
|
|
284
|
+
>
|
|
285
|
+
<SvgNext />
|
|
286
|
+
</button>
|
|
287
|
+
</>
|
|
288
|
+
}
|
|
289
|
+
</div>
|
|
290
|
+
}
|
|
291
|
+
</div>
|
|
242
292
|
</div>
|
|
243
293
|
</div>
|
|
244
294
|
</div>
|
|
@@ -250,9 +300,21 @@ Modal.propTypes = {
|
|
|
250
300
|
data: PropTypes.array,
|
|
251
301
|
type: PropTypes.string,
|
|
252
302
|
setShow: PropTypes.func,
|
|
303
|
+
radius: PropTypes.string,
|
|
304
|
+
padding: PropTypes.string,
|
|
253
305
|
selected: PropTypes.number,
|
|
306
|
+
minWidth: PropTypes.string,
|
|
307
|
+
minHeight: PropTypes.string,
|
|
254
308
|
className: PropTypes.string,
|
|
255
309
|
headerText: PropTypes.string,
|
|
310
|
+
imageWidth: PropTypes.string,
|
|
311
|
+
headerSize: PropTypes.string,
|
|
312
|
+
headerColor: PropTypes.string,
|
|
313
|
+
imageHeight: PropTypes.string,
|
|
314
|
+
headerWeight: PropTypes.string,
|
|
315
|
+
headerHeight: PropTypes.string,
|
|
316
|
+
backgroundColor: PropTypes.string,
|
|
317
|
+
layerBackgroundColor: PropTypes.string,
|
|
256
318
|
};
|
|
257
319
|
|
|
258
320
|
Modal.defaultProps = {
|
|
@@ -1,73 +1,22 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
height: 100%;
|
|
5
|
-
top: 0;
|
|
6
|
-
left: 0;
|
|
7
|
-
z-index: 9;
|
|
8
|
-
background: rgba(0,0,0,0.4);
|
|
9
|
-
}
|
|
10
|
-
.modal-top {
|
|
11
|
-
display: flex;
|
|
12
|
-
flex-direction: row;
|
|
13
|
-
padding: 4px 10px 4px 0;
|
|
14
|
-
width: 100%;
|
|
15
|
-
background: #fbfbfb;
|
|
16
|
-
height: 44px;
|
|
17
|
-
box-sizing: border-box;
|
|
18
|
-
}
|
|
19
|
-
.modal-title {
|
|
20
|
-
flex: 1 1;
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
font-size: 20px;
|
|
24
|
-
padding-right: 20px;
|
|
25
|
-
line-height: 24px;
|
|
26
|
-
font-weight: 500;
|
|
27
|
-
color: #3C393E;
|
|
28
|
-
}
|
|
29
|
-
.close-btn {
|
|
30
|
-
flex: 0 0 auto;
|
|
31
|
-
width: 24px;
|
|
32
|
-
height: 100%;
|
|
33
|
-
display: flex;
|
|
34
|
-
align-items: center;
|
|
35
|
-
justify-content: center;
|
|
36
|
-
cursor: pointer;
|
|
37
|
-
}
|
|
38
|
-
.modal-section {
|
|
39
|
-
flex: 1 1;
|
|
40
|
-
width: 100%;
|
|
41
|
-
height: 100%;
|
|
42
|
-
display: flex;
|
|
43
|
-
align-items: center;
|
|
44
|
-
justify-content: center;
|
|
45
|
-
padding: 10px 0;
|
|
46
|
-
}
|
|
47
|
-
.modal-content {
|
|
48
|
-
position: absolute;
|
|
49
|
-
width: fit-content;
|
|
50
|
-
padding: 10px;
|
|
51
|
-
min-height: 130px;
|
|
52
|
-
top: 110px;
|
|
53
|
-
left: 0;
|
|
54
|
-
right: 0;
|
|
55
|
-
margin: auto;
|
|
56
|
-
display: flex;
|
|
57
|
-
align-items: center;
|
|
58
|
-
flex-direction: column;
|
|
59
|
-
height: auto;
|
|
60
|
-
background: rgba(255,255,255,1);
|
|
61
|
-
border-radius: 8px;
|
|
62
|
-
animation: show-popup 240ms;
|
|
63
|
-
overflow: hidden;
|
|
1
|
+
.animation__modal {
|
|
2
|
+
animation: show-popup 150ms;
|
|
3
|
+
-webkit-animation: show-popup 150ms;
|
|
64
4
|
}
|
|
5
|
+
|
|
65
6
|
@keyframes show-popup {
|
|
66
7
|
0% {
|
|
67
|
-
transform: translate3d(0, -
|
|
8
|
+
transform: translate3d(0, -50%, 0);
|
|
9
|
+
-webkit-transform: translate3d(0, -50%, 0);
|
|
10
|
+
-moz-transform: translate3d(0, -50%, 0);
|
|
11
|
+
-ms-transform: translate3d(0, -50%, 0);
|
|
12
|
+
-o-transform: translate3d(0, -50%, 0);
|
|
68
13
|
}
|
|
69
14
|
100% {
|
|
70
|
-
transform: translate3d(0, 0, 0);
|
|
71
15
|
opacity: 1;
|
|
16
|
+
transform: translate3d(0, 0, 0);
|
|
17
|
+
-webkit-transform: translate3d(0, 0, 0);
|
|
18
|
+
-moz-transform: translate3d(0, 0, 0);
|
|
19
|
+
-ms-transform: translate3d(0, 0, 0);
|
|
20
|
+
-o-transform: translate3d(0, 0, 0);
|
|
72
21
|
}
|
|
73
22
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {useState} from "react";
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import { Modal } from "./index";
|
|
3
3
|
|
|
4
4
|
export default {
|
|
@@ -55,7 +55,11 @@ const Template = ({ headerText, className }) => {
|
|
|
55
55
|
style={{ cursor: 'pointer', padding: '8px', fontSize: '16px' }}
|
|
56
56
|
>Change type to {type === 'content' ? 'images' : 'content'}</button>
|
|
57
57
|
{show && (
|
|
58
|
-
<Modal type={type} selected={0} data={data} setShow={setShow}
|
|
58
|
+
<Modal type={type} selected={0} data={data} setShow={setShow} minHeight='400px' minWidth='600px' className={className}>
|
|
59
|
+
<p>
|
|
60
|
+
Children content
|
|
61
|
+
</p>
|
|
62
|
+
</Modal>
|
|
59
63
|
)}
|
|
60
64
|
</>
|
|
61
65
|
);
|
|
@@ -564,4 +564,20 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
564
564
|
hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)', // for file place background color when hover on file place and there is a choosen file
|
|
565
565
|
listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
|
|
566
566
|
}
|
|
567
|
+
```
|
|
568
|
+
|
|
569
|
+
### Modal
|
|
570
|
+
```
|
|
571
|
+
{
|
|
572
|
+
radius: '14px', // for modal border radius
|
|
573
|
+
headerSize: '20px', // for modal header font size
|
|
574
|
+
imageWidth: '600px', // for modal image width on images mode
|
|
575
|
+
headerWeight: '600', // for modal header font weight
|
|
576
|
+
imageHeight: '300px', // for modal image height on images mode
|
|
577
|
+
headerHeight: '27px', // for modal header height
|
|
578
|
+
headerColor: '#00236a', // for modal header color
|
|
579
|
+
backgroundColor: 'white', // for modal background color
|
|
580
|
+
padding: '10px 20px 20px', // for modal padding
|
|
581
|
+
layerBackgroundColor: 'rgba(0,0,0,0.4)', // for modal parent layer background color
|
|
582
|
+
}
|
|
567
583
|
```
|
|
Binary file
|
|
@@ -11,6 +11,7 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
11
11
|
import fileImage from './static/file-usage.png';
|
|
12
12
|
import captcha from './static/captcha-usage.png';
|
|
13
13
|
import inputImage from './static/input-usage.png';
|
|
14
|
+
import modalImage from './static/modal-usage.png';
|
|
14
15
|
import buttonImage from './static/button-usage.png';
|
|
15
16
|
import selectImage from './static/select-usage.png';
|
|
16
17
|
import toastImage from './static/toaster-usage.png';
|
|
@@ -165,4 +166,7 @@ import autocompleteImage from './static/autocomplete-usage.png';
|
|
|
165
166
|
<img src={fileImage} alt="file image" />
|
|
166
167
|
|
|
167
168
|
### NewFile in Single Mode
|
|
168
|
-
<img src={fileSingleImage} alt="file image" />
|
|
169
|
+
<img src={fileSingleImage} alt="file image" />
|
|
170
|
+
|
|
171
|
+
### Modal
|
|
172
|
+
<img src={modalImage} alt="file image" />
|