@xaypay/tui 0.0.74 → 0.0.75
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 +213 -107
- package/dist/index.js +213 -107
- 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/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
|
@@ -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" />
|
package/tui.config.js
CHANGED
|
@@ -361,5 +361,18 @@ module.exports = {
|
|
|
361
361
|
putFileHere: 'Տեղադրել ֆայլը այստեղ', // for file place text
|
|
362
362
|
hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)', // for file place background color when hover on file place and there is a choosen file
|
|
363
363
|
listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
|
|
364
|
+
},
|
|
365
|
+
// default properties for <Modal /> component
|
|
366
|
+
MODAL: {
|
|
367
|
+
radius: '14px', // for modal border radius
|
|
368
|
+
headerSize: '20px', // for modal header font size
|
|
369
|
+
imageWidth: '600px', // for modal image width on images mode
|
|
370
|
+
headerWeight: '600', // for modal header font weight
|
|
371
|
+
imageHeight: '300px', // for modal image height on images mode
|
|
372
|
+
headerHeight: '27px', // for modal header height
|
|
373
|
+
headerColor: '#00236a', // for modal header color
|
|
374
|
+
backgroundColor: 'white', // for modal background color
|
|
375
|
+
padding: '10px 20px 20px', // for modal padding
|
|
376
|
+
layerBackgroundColor: 'rgba(0,0,0,0.4)', // for modal parent layer background color
|
|
364
377
|
}
|
|
365
378
|
};
|