@xaypay/tui 0.0.72 → 0.0.74
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 +481 -268
- package/dist/index.js +481 -268
- package/package.json +1 -1
- package/src/components/icon/Close.js +19 -0
- package/src/components/icon/index.js +1 -2
- package/src/components/modal/index.js +231 -66
- package/src/components/modal/modal.stories.js +22 -7
- package/src/components/newAutocomplete/NewAutocomplete.stories.js +3 -2
- package/src/components/newAutocomplete/index.js +12 -2
- package/src/components/newFile/index.js +12 -6
- package/src/components/newFile/newFile.stories.js +1 -1
- package/src/components/pagination/index.js +74 -3
- package/src/components/pagination/pagination.module.css +13 -1
- package/src/components/pagination/pagination.stories.js +4 -2
- package/src/components/select/index.js +9 -2
- package/src/components/select/select.stories.js +0 -1
- package/src/components/typography/index.js +1 -1
- package/src/components/typography/typography.stories.js +2 -1
- package/src/stories/configuration.stories.mdx +3 -0
- package/tui.config.js +11 -17
package/dist/index.es.js
CHANGED
|
@@ -65,9 +65,9 @@ function styleInject(css, ref) {
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
var css_248z$
|
|
69
|
-
var styles$
|
|
70
|
-
styleInject(css_248z$
|
|
68
|
+
var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
|
|
69
|
+
var styles$b = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
|
|
70
|
+
styleInject(css_248z$d);
|
|
71
71
|
|
|
72
72
|
const File = ({
|
|
73
73
|
name,
|
|
@@ -129,15 +129,15 @@ const File = ({
|
|
|
129
129
|
document.querySelector(`.${name}`).value = "";
|
|
130
130
|
};
|
|
131
131
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
|
|
132
|
-
className: `${styles$
|
|
132
|
+
className: `${styles$b['file-form-title']} ile-form-title-rem`
|
|
133
133
|
}, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
|
|
134
134
|
style: {
|
|
135
135
|
color: "#ee0000"
|
|
136
136
|
}
|
|
137
137
|
}, "*")), /*#__PURE__*/React__default.createElement("div", {
|
|
138
|
-
className: classnames(`${styles$
|
|
138
|
+
className: classnames(`${styles$b['file-form-wrap']} file-form-wrap-rem`, image ? styles$b['active'] : '')
|
|
139
139
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
140
|
-
className: `${styles$
|
|
140
|
+
className: `${styles$b['file-form']} file-form-rem ${error || errorMessage ? styles$b['error'] : ''}`,
|
|
141
141
|
onClick: () => document.querySelector(`.${name}`).click()
|
|
142
142
|
}, /*#__PURE__*/React__default.createElement("input", {
|
|
143
143
|
hidden: true,
|
|
@@ -146,23 +146,23 @@ const File = ({
|
|
|
146
146
|
disabled: disabled,
|
|
147
147
|
onChange: e => handleCheckFile(e)
|
|
148
148
|
}), image ? /*#__PURE__*/React__default.createElement("div", {
|
|
149
|
-
className: `${styles$
|
|
149
|
+
className: `${styles$b['upload-file-content']} upload-file-content-rem`
|
|
150
150
|
}, image === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgPdf, null) : /*#__PURE__*/React__default.createElement("img", {
|
|
151
151
|
src: image,
|
|
152
152
|
alt: fileName
|
|
153
153
|
})) : /*#__PURE__*/React__default.createElement("div", {
|
|
154
|
-
className: `${styles$
|
|
154
|
+
className: `${styles$b['file-form-inner-upload']} ile-form-inner-upload-rem`
|
|
155
155
|
}, /*#__PURE__*/React__default.createElement("img", {
|
|
156
156
|
src: "../../assets/upload.svg",
|
|
157
157
|
alt: ""
|
|
158
158
|
}), /*#__PURE__*/React__default.createElement("span", {
|
|
159
|
-
className: `${styles$
|
|
159
|
+
className: `${styles$b['upload-info']} upload-info-rem`
|
|
160
160
|
}, /*#__PURE__*/React__default.createElement("span", {
|
|
161
|
-
className: `${styles$
|
|
161
|
+
className: `${styles$b['upload-info-txt']} upload-info-txt-rem`
|
|
162
162
|
}, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default.createElement("span", {
|
|
163
|
-
className: `${styles$
|
|
163
|
+
className: `${styles$b['upload-info-size']} upload-info-size-rem`
|
|
164
164
|
}, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), !disabled && /*#__PURE__*/React__default.createElement("div", {
|
|
165
|
-
className: `${styles$
|
|
165
|
+
className: `${styles$b['delete-upload-icon']} delete-upload-icon-rem`,
|
|
166
166
|
onClick: handleRemoveFile
|
|
167
167
|
}, /*#__PURE__*/React__default.createElement("i", {
|
|
168
168
|
className: "icon-delete"
|
|
@@ -189,14 +189,14 @@ File.defaultProps = {
|
|
|
189
189
|
fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
|
|
190
190
|
};
|
|
191
191
|
|
|
192
|
-
var css_248z$
|
|
193
|
-
var styles$
|
|
194
|
-
styleInject(css_248z$d);
|
|
195
|
-
|
|
196
|
-
var css_248z$c = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
|
|
197
|
-
var styles$a = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
|
|
192
|
+
var css_248z$c = ".table-module_table-wrap__KKAnM{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 10px 30px rgba(0,35,106,.06);overflow:hidden;width:100%}.table-module_table-wrap__KKAnM:not(:first-child){margin-top:30px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:first-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:first-child{flex:0 0 auto;width:60px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(2),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(2){flex:0 0 auto;width:120px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(3),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(3){flex:0 0 auto;width:170px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(4),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(4){flex:0 0 auto;width:126px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(5),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(6),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(8),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(5),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(6),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(8){flex:0 0 auto;width:100px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:last-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:last-child{flex:0 0 auto;width:104px}.table-module_table-top__tfEKM{background:#00236a;height:44px;width:100%}.table-module_table-top__tfEKM .table-module_table-items__UpFg2{align-items:center;color:#fff;display:flex;flex:1 1;font-size:15px;justify-content:center;line-height:17px;text-align:center}.table-module_table-bottom-inner__0Pus0{background:#fff;min-height:40px;width:100%}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2{align-items:center;border-bottom:1px solid #eee;display:flex;flex:1 1;font-size:14px;justify-content:center;line-height:16px;padding:4px;text-align:center}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:not(:last-child){border-right:1px solid #eee}";
|
|
193
|
+
var styles$a = {"table-wrap":"table-module_table-wrap__KKAnM","table-bottom-inner":"table-module_table-bottom-inner__0Pus0","table-items":"table-module_table-items__UpFg2","table-top":"table-module_table-top__tfEKM"};
|
|
198
194
|
styleInject(css_248z$c);
|
|
199
195
|
|
|
196
|
+
var css_248z$b = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
|
|
197
|
+
var styles$9 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
|
|
198
|
+
styleInject(css_248z$b);
|
|
199
|
+
|
|
200
200
|
const Checkbox = ({
|
|
201
201
|
disabled,
|
|
202
202
|
required,
|
|
@@ -210,7 +210,7 @@ const Checkbox = ({
|
|
|
210
210
|
onClick,
|
|
211
211
|
...props
|
|
212
212
|
}) => {
|
|
213
|
-
const classProps = classnames(styles$
|
|
213
|
+
const classProps = classnames(styles$9.checkbox, className, 'checkbox-input-rem');
|
|
214
214
|
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
215
215
|
const [data, setData] = useState(parseData);
|
|
216
216
|
useEffect(() => {
|
|
@@ -243,7 +243,7 @@ const Checkbox = ({
|
|
|
243
243
|
} : '';
|
|
244
244
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, data.map(element => {
|
|
245
245
|
return /*#__PURE__*/React__default.createElement("label", {
|
|
246
|
-
className: `${styles$
|
|
246
|
+
className: `${styles$9["checkbox-wrap"]} checkbox-wrap-rem`,
|
|
247
247
|
key: element.value
|
|
248
248
|
}, /*#__PURE__*/React__default.createElement("input", _extends({
|
|
249
249
|
type: "checkbox",
|
|
@@ -257,9 +257,9 @@ const Checkbox = ({
|
|
|
257
257
|
onClick: onClick ? onClick : () => {},
|
|
258
258
|
defaultChecked: element.checked
|
|
259
259
|
}, props)), /*#__PURE__*/React__default.createElement("span", {
|
|
260
|
-
className: `${styles$
|
|
260
|
+
className: `${styles$9["checkmark"]} checkmark-rem`
|
|
261
261
|
}), element[keyNames.label] ? /*#__PURE__*/React__default.createElement("label", {
|
|
262
|
-
className: styles$
|
|
262
|
+
className: styles$9.labelCheckbox,
|
|
263
263
|
for: element[keyNames.id]
|
|
264
264
|
}, element[keyNames.label]) : "");
|
|
265
265
|
}));
|
|
@@ -301,23 +301,23 @@ const Table = ({
|
|
|
301
301
|
return true;
|
|
302
302
|
} : "";
|
|
303
303
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
304
|
-
className: `${styles$
|
|
304
|
+
className: `${styles$a["table-wrap"]} table-wrap-rem`
|
|
305
305
|
}, config.isHeader && hearderData.map((header, key) => {
|
|
306
306
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
307
|
-
className: `${styles$
|
|
307
|
+
className: `${styles$a["table-top"]} table-top-rem`,
|
|
308
308
|
key: key
|
|
309
309
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
310
|
-
className: `${styles$
|
|
310
|
+
className: `${styles$a["table-items"]} table-items-rem`
|
|
311
311
|
}, header));
|
|
312
312
|
}), /*#__PURE__*/React__default.createElement("div", {
|
|
313
|
-
className: `${styles$
|
|
313
|
+
className: `${styles$a["table-bottom"]} table-bottom-rem`
|
|
314
314
|
}, tbodyData.map((item, key) => {
|
|
315
315
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
316
|
-
className: `${styles$
|
|
316
|
+
className: `${styles$a["table-bottom-inner"]} table-bottom-inner-rem`,
|
|
317
317
|
key: key
|
|
318
318
|
}, keyNames.map((keyName, keyNameKey) => {
|
|
319
319
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
320
|
-
className: `${styles$
|
|
320
|
+
className: `${styles$a["table-items"]} table-items-rem`,
|
|
321
321
|
key: keyNameKey
|
|
322
322
|
}, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React__default.createElement(Checkbox, {
|
|
323
323
|
onClick: e => {
|
|
@@ -333,7 +333,7 @@ const Table = ({
|
|
|
333
333
|
className: keyName.icon
|
|
334
334
|
}), item[keyName.name]));
|
|
335
335
|
}), actions && /*#__PURE__*/React__default.createElement("div", {
|
|
336
|
-
className: `${styles$
|
|
336
|
+
className: `${styles$a["table-items"]} table-items-rem`
|
|
337
337
|
}, actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
|
|
338
338
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
339
339
|
key: key
|
|
@@ -369,12 +369,246 @@ Table.defaultProps = {
|
|
|
369
369
|
hearderData: []
|
|
370
370
|
};
|
|
371
371
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
372
|
+
const SvgCloseIcon = ({
|
|
373
|
+
title,
|
|
374
|
+
titleId,
|
|
375
|
+
...props
|
|
376
|
+
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
377
|
+
width: "14",
|
|
378
|
+
height: "14",
|
|
379
|
+
viewBox: "0 0 14 14",
|
|
380
|
+
fill: "none",
|
|
381
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
382
|
+
"aria-labelledby": titleId
|
|
383
|
+
}, props), title ? /*#__PURE__*/React.createElement("title", {
|
|
384
|
+
id: titleId
|
|
385
|
+
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
386
|
+
d: "m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z",
|
|
387
|
+
fill: "#3C393E"
|
|
388
|
+
}));
|
|
375
389
|
|
|
376
|
-
|
|
377
|
-
|
|
390
|
+
const SvgNextarrow = ({
|
|
391
|
+
title,
|
|
392
|
+
titleId,
|
|
393
|
+
...props
|
|
394
|
+
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
395
|
+
width: "6",
|
|
396
|
+
height: "12",
|
|
397
|
+
viewBox: "0 0 6 12",
|
|
398
|
+
fill: "none",
|
|
399
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
400
|
+
"aria-labelledby": titleId
|
|
401
|
+
}, props), title ? /*#__PURE__*/React.createElement("title", {
|
|
402
|
+
id: titleId
|
|
403
|
+
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
404
|
+
d: "M.851 11.998a.847.847 0 0 1-.847-.776.86.86 0 0 1 .193-.626l3.808-4.584L.333 1.419A.857.857 0 0 1 .46.213a.849.849 0 0 1 1.241.128l4.106 5.132a.859.859 0 0 1 0 1.086l-4.25 5.132a.85.85 0 0 1-.706.307Z",
|
|
405
|
+
fill: "#3C393E"
|
|
406
|
+
}));
|
|
407
|
+
|
|
408
|
+
const Modal = ({
|
|
409
|
+
type,
|
|
410
|
+
data,
|
|
411
|
+
setShow,
|
|
412
|
+
selected,
|
|
413
|
+
children,
|
|
414
|
+
className,
|
|
415
|
+
headerText
|
|
416
|
+
}) => {
|
|
417
|
+
const classProps = classnames(className);
|
|
418
|
+
const [select, setSelect] = useState(0);
|
|
419
|
+
const [innerData, setInnerData] = useState([]);
|
|
420
|
+
const handleCloseModal = () => {
|
|
421
|
+
setShow(false);
|
|
422
|
+
};
|
|
423
|
+
const handleStopClosing = e => {
|
|
424
|
+
e.stopPropagation();
|
|
425
|
+
};
|
|
426
|
+
const handleGoTo = e => {
|
|
427
|
+
const goTo = e.target.getAttribute('data-go');
|
|
428
|
+
if (goTo === 'next') {
|
|
429
|
+
if (select >= data.length - 1) {
|
|
430
|
+
setSelect(0);
|
|
431
|
+
} else {
|
|
432
|
+
setSelect(select + 1);
|
|
433
|
+
}
|
|
434
|
+
} else {
|
|
435
|
+
if (select <= 0) {
|
|
436
|
+
setSelect(data.length - 1);
|
|
437
|
+
} else {
|
|
438
|
+
setSelect(select - 1);
|
|
439
|
+
}
|
|
440
|
+
}
|
|
441
|
+
};
|
|
442
|
+
useEffect(() => {
|
|
443
|
+
if (type === 'images') {
|
|
444
|
+
if (data) {
|
|
445
|
+
if (data.length === 0) {
|
|
446
|
+
alert('Please fill data prop');
|
|
447
|
+
} else {
|
|
448
|
+
setInnerData(data);
|
|
449
|
+
}
|
|
450
|
+
} else {
|
|
451
|
+
alert('Please add data prop on Modal component');
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
}, [type, data, data?.length]);
|
|
455
|
+
useEffect(() => {
|
|
456
|
+
if (selected) {
|
|
457
|
+
if (selected <= 0) {
|
|
458
|
+
setSelect(0);
|
|
459
|
+
} else if (selected >= data.length - 1) {
|
|
460
|
+
setSelect(data.length - 1);
|
|
461
|
+
} else {
|
|
462
|
+
setSelect(selected);
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
}, [selected]);
|
|
466
|
+
useEffect(() => {
|
|
467
|
+
return () => {
|
|
468
|
+
setSelect(0);
|
|
469
|
+
setInnerData([]);
|
|
470
|
+
};
|
|
471
|
+
}, []);
|
|
472
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
473
|
+
onClick: handleCloseModal,
|
|
474
|
+
style: {
|
|
475
|
+
position: 'fixed',
|
|
476
|
+
top: '0px',
|
|
477
|
+
left: '0px',
|
|
478
|
+
zIndex: 999,
|
|
479
|
+
width: '100%',
|
|
480
|
+
height: '100vh',
|
|
481
|
+
backgroundColor: 'rgba(0,0,0,0.4)' // TODO: config
|
|
482
|
+
}
|
|
483
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
484
|
+
style: {
|
|
485
|
+
position: 'relative',
|
|
486
|
+
width: '100%',
|
|
487
|
+
height: '100vh'
|
|
488
|
+
}
|
|
489
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
490
|
+
className: classProps,
|
|
491
|
+
onClick: handleStopClosing,
|
|
492
|
+
style: {
|
|
493
|
+
position: 'absolute',
|
|
494
|
+
top: '0px',
|
|
495
|
+
left: '0px',
|
|
496
|
+
right: '0px',
|
|
497
|
+
bottom: '0px',
|
|
498
|
+
margin: 'auto',
|
|
499
|
+
maxWidth: '95%',
|
|
500
|
+
overflow: 'auto',
|
|
501
|
+
maxHeight: '95vh',
|
|
502
|
+
width: 'fit-content',
|
|
503
|
+
borderRadius: '14px',
|
|
504
|
+
height: 'fit-content',
|
|
505
|
+
boxSizing: 'border-box',
|
|
506
|
+
backgroundColor: 'white',
|
|
507
|
+
padding: '10px 20px 20px'
|
|
508
|
+
// TODO: animation
|
|
509
|
+
}
|
|
510
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
511
|
+
style: {
|
|
512
|
+
display: 'flex',
|
|
513
|
+
width: '100%',
|
|
514
|
+
height: '27px',
|
|
515
|
+
alignItems: 'center',
|
|
516
|
+
backgroundColor: '#fbfbfb',
|
|
517
|
+
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
|
|
518
|
+
}
|
|
519
|
+
}, headerText && type === 'content' && /*#__PURE__*/React__default.createElement("p", {
|
|
520
|
+
style: {
|
|
521
|
+
color: '#00236a',
|
|
522
|
+
fontSize: '20px',
|
|
523
|
+
fontWeight: '600',
|
|
524
|
+
overflow: 'hidden',
|
|
525
|
+
whiteSpace: 'nowrap',
|
|
526
|
+
textOverflow: 'ellipsis',
|
|
527
|
+
margin: '0px 16px 0px 0px',
|
|
528
|
+
maxWidth: 'calc(100% - 30px)'
|
|
529
|
+
}
|
|
530
|
+
}, headerText), /*#__PURE__*/React__default.createElement("div", {
|
|
531
|
+
onClick: handleCloseModal,
|
|
532
|
+
style: {
|
|
533
|
+
width: '14px',
|
|
534
|
+
height: '14px',
|
|
535
|
+
cursor: 'pointer'
|
|
536
|
+
}
|
|
537
|
+
}, /*#__PURE__*/React__default.createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default.createElement("div", {
|
|
538
|
+
style: {
|
|
539
|
+
display: 'flex',
|
|
540
|
+
paddingTop: '10px',
|
|
541
|
+
alignItems: 'center',
|
|
542
|
+
boxSizing: 'border-box',
|
|
543
|
+
justifyContent: 'center'
|
|
544
|
+
}
|
|
545
|
+
}, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default.createElement("div", {
|
|
546
|
+
style: {
|
|
547
|
+
width: '100%'
|
|
548
|
+
}
|
|
549
|
+
}, innerData && innerData.length > 0 && innerData.map((item, index) => {
|
|
550
|
+
if (select === index) {
|
|
551
|
+
if (!item.hasOwnProperty('url')) {
|
|
552
|
+
alert('Please add url property in data prop on each element');
|
|
553
|
+
} else {
|
|
554
|
+
return /*#__PURE__*/React__default.createElement("img", {
|
|
555
|
+
style: {
|
|
556
|
+
width: '600px',
|
|
557
|
+
height: '300px',
|
|
558
|
+
objectFit: 'cover',
|
|
559
|
+
objectPosition: 'center'
|
|
560
|
+
},
|
|
561
|
+
src: item.url
|
|
562
|
+
});
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
}), /*#__PURE__*/React__default.createElement("div", {
|
|
566
|
+
style: {
|
|
567
|
+
marginTop: '10px'
|
|
568
|
+
}
|
|
569
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
570
|
+
onClick: handleGoTo,
|
|
571
|
+
"data-go": "prev",
|
|
572
|
+
style: {
|
|
573
|
+
padding: '8px',
|
|
574
|
+
outline: 'none',
|
|
575
|
+
cursor: 'pointer',
|
|
576
|
+
marginRight: '10px',
|
|
577
|
+
borderRadius: '6px',
|
|
578
|
+
alignItems: 'center',
|
|
579
|
+
display: 'inline-flex',
|
|
580
|
+
justifyContent: 'center',
|
|
581
|
+
backgroundColor: 'white',
|
|
582
|
+
transform: 'rotate(180deg)',
|
|
583
|
+
border: '1px solid #979090'
|
|
584
|
+
}
|
|
585
|
+
}, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)), /*#__PURE__*/React__default.createElement("button", {
|
|
586
|
+
onClick: handleGoTo,
|
|
587
|
+
"data-go": "next",
|
|
588
|
+
style: {
|
|
589
|
+
padding: '8px',
|
|
590
|
+
outline: 'none',
|
|
591
|
+
cursor: 'pointer',
|
|
592
|
+
borderRadius: '6px',
|
|
593
|
+
alignItems: 'center',
|
|
594
|
+
display: 'inline-flex',
|
|
595
|
+
justifyContent: 'center',
|
|
596
|
+
backgroundColor: 'white',
|
|
597
|
+
border: '1px solid #979090'
|
|
598
|
+
}
|
|
599
|
+
}, /*#__PURE__*/React__default.createElement(SvgNextarrow, null))))))));
|
|
600
|
+
};
|
|
601
|
+
Modal.propTypes = {
|
|
602
|
+
data: PropTypes.array,
|
|
603
|
+
type: PropTypes.string,
|
|
604
|
+
setShow: PropTypes.func,
|
|
605
|
+
selected: PropTypes.number,
|
|
606
|
+
className: PropTypes.string,
|
|
607
|
+
headerText: PropTypes.string
|
|
608
|
+
};
|
|
609
|
+
Modal.defaultProps = {
|
|
610
|
+
type: 'content'
|
|
611
|
+
};
|
|
378
612
|
|
|
379
613
|
const _ = require('lodash');
|
|
380
614
|
const compereConfigs = () => {
|
|
@@ -399,175 +633,9 @@ const compereConfigs = () => {
|
|
|
399
633
|
return _.merge(packageConfig, projectConfig);
|
|
400
634
|
};
|
|
401
635
|
|
|
402
|
-
|
|
403
|
-
p: 'p',
|
|
404
|
-
h1: 'h1',
|
|
405
|
-
h2: 'h2',
|
|
406
|
-
h3: 'h3',
|
|
407
|
-
h4: 'h4',
|
|
408
|
-
h5: 'h5',
|
|
409
|
-
h6: 'h6',
|
|
410
|
-
span: 'span'
|
|
411
|
-
};
|
|
412
|
-
const Typography = ({
|
|
413
|
-
size,
|
|
414
|
-
color,
|
|
415
|
-
weight,
|
|
416
|
-
radius,
|
|
417
|
-
border,
|
|
418
|
-
cursor,
|
|
419
|
-
variant,
|
|
420
|
-
onClick,
|
|
421
|
-
children,
|
|
422
|
-
textAlign,
|
|
423
|
-
fontStyle,
|
|
424
|
-
className,
|
|
425
|
-
textShadow,
|
|
426
|
-
lineHeight,
|
|
427
|
-
colorHover,
|
|
428
|
-
fontFamily,
|
|
429
|
-
textTransform,
|
|
430
|
-
textDecoration,
|
|
431
|
-
backgroundColor,
|
|
432
|
-
...props
|
|
433
|
-
}) => {
|
|
434
|
-
const configStyles = compereConfigs();
|
|
435
|
-
const classProps = classnames(className);
|
|
436
|
-
const [isHover, setIsHover] = useState(false);
|
|
437
|
-
const [validVariant, setValidVariant] = useState(false);
|
|
438
|
-
useEffect(() => {
|
|
439
|
-
if (!Object.values(TypographyType).includes(variant)) {
|
|
440
|
-
setValidVariant(true);
|
|
441
|
-
}
|
|
442
|
-
}, [variant]);
|
|
443
|
-
const handleMouseEnter = () => {
|
|
444
|
-
setIsHover(true);
|
|
445
|
-
};
|
|
446
|
-
const handleMouseLeave = () => {
|
|
447
|
-
setIsHover(false);
|
|
448
|
-
};
|
|
449
|
-
const tagT = /*#__PURE__*/React__default.createElement(variant, {
|
|
450
|
-
style: {
|
|
451
|
-
border: border ? border : configStyles.TYPOGRAPHY.border,
|
|
452
|
-
cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
|
|
453
|
-
borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
|
|
454
|
-
fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
|
|
455
|
-
fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
|
|
456
|
-
textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
|
|
457
|
-
textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
|
|
458
|
-
fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
|
|
459
|
-
lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight' + variant],
|
|
460
|
-
fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily' + variant],
|
|
461
|
-
textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
|
|
462
|
-
textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
|
|
463
|
-
backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor' + variant],
|
|
464
|
-
color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
|
|
465
|
-
},
|
|
466
|
-
...props,
|
|
467
|
-
className: classProps,
|
|
468
|
-
onClick: onClick ? onClick : _ => _,
|
|
469
|
-
onMouseEnter: handleMouseEnter,
|
|
470
|
-
onMouseLeave: handleMouseLeave
|
|
471
|
-
}, [children]);
|
|
472
|
-
return validVariant ? 'Please set Typography valid variant' : tagT;
|
|
473
|
-
};
|
|
474
|
-
Typography.propTypes = {
|
|
475
|
-
size: PropTypes.string,
|
|
476
|
-
color: PropTypes.string,
|
|
477
|
-
onClick: PropTypes.func,
|
|
478
|
-
weight: PropTypes.string,
|
|
479
|
-
border: PropTypes.string,
|
|
480
|
-
cursor: PropTypes.string,
|
|
481
|
-
radius: PropTypes.string,
|
|
482
|
-
textAlign: PropTypes.string,
|
|
483
|
-
className: PropTypes.string,
|
|
484
|
-
fontStyle: PropTypes.string,
|
|
485
|
-
lineHeight: PropTypes.string,
|
|
486
|
-
textShadow: PropTypes.string,
|
|
487
|
-
fontFamily: PropTypes.string,
|
|
488
|
-
colorHover: PropTypes.string,
|
|
489
|
-
textTransform: PropTypes.string,
|
|
490
|
-
textDecoration: PropTypes.string,
|
|
491
|
-
backgroundColor: PropTypes.string,
|
|
492
|
-
variant: PropTypes.oneOf(Object.values(TypographyType))
|
|
493
|
-
};
|
|
494
|
-
Typography.defaultProps = {
|
|
495
|
-
variant: 'p'
|
|
496
|
-
};
|
|
497
|
-
|
|
498
|
-
const Modal = ({
|
|
499
|
-
setShow,
|
|
500
|
-
headerText,
|
|
501
|
-
className,
|
|
502
|
-
type,
|
|
503
|
-
data,
|
|
504
|
-
selected,
|
|
505
|
-
children
|
|
506
|
-
}) => {
|
|
507
|
-
classnames(styles$9.modal, className);
|
|
508
|
-
const [select, setSelect] = useState(selected);
|
|
509
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
510
|
-
className: `${styles$9["modal-wrap"]} modal-wrap-rem`,
|
|
511
|
-
onClick: () => setShow(false)
|
|
512
|
-
}, type == "content" ? /*#__PURE__*/React__default.createElement("div", {
|
|
513
|
-
className: `${styles$9["modal-content"]} modal-content-rem`,
|
|
514
|
-
onClick: e => {
|
|
515
|
-
e.stopPropagation();
|
|
516
|
-
}
|
|
517
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
518
|
-
className: `${styles$9["modal-top"]} modal-top-rem`
|
|
519
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
520
|
-
className: `${styles$9["modal-title"]} modal-title-rem`
|
|
521
|
-
}, /*#__PURE__*/React__default.createElement(Typography, {
|
|
522
|
-
variant: TypographyType.p,
|
|
523
|
-
color: "#00236A"
|
|
524
|
-
}, headerText)), /*#__PURE__*/React__default.createElement("div", {
|
|
525
|
-
className: `${styles$9["close-btn"]} close-btn-rem`,
|
|
526
|
-
onClick: () => setShow(false)
|
|
527
|
-
}, /*#__PURE__*/React__default.createElement("i", {
|
|
528
|
-
className: "icon-close"
|
|
529
|
-
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
530
|
-
className: `${styles$9["modal-section"]} modal-section-rem`
|
|
531
|
-
}, children)) : type == "images" ? /*#__PURE__*/React__default.createElement("div", {
|
|
532
|
-
className: `${styles$9["modal-content"]} modal-content-rem`,
|
|
533
|
-
onClick: e => {
|
|
534
|
-
e.stopPropagation();
|
|
535
|
-
}
|
|
536
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
537
|
-
className: `${styles$9["close-btn"]} close-btn-rem`,
|
|
538
|
-
onClick: () => setShow(false)
|
|
539
|
-
}, /*#__PURE__*/React__default.createElement("i", {
|
|
540
|
-
className: "icon-close"
|
|
541
|
-
})), /*#__PURE__*/React__default.createElement("div", {
|
|
542
|
-
className: `${styles$9["modal-section"]} modal-section-rem`
|
|
543
|
-
}, /*#__PURE__*/React__default.createElement("div", null, select > 1 ? /*#__PURE__*/React__default.createElement("h1", {
|
|
544
|
-
onClick: () => setSelect(select - 1)
|
|
545
|
-
}, "-") : null, data.map(elem => {
|
|
546
|
-
if (select == elem.id) {
|
|
547
|
-
return /*#__PURE__*/React__default.createElement("img", {
|
|
548
|
-
width: "600px",
|
|
549
|
-
key: elem.id,
|
|
550
|
-
src: elem.url
|
|
551
|
-
});
|
|
552
|
-
}
|
|
553
|
-
}), select < data.length ? /*#__PURE__*/React__default.createElement("h1", {
|
|
554
|
-
onClick: () => {
|
|
555
|
-
setSelect(select + 1);
|
|
556
|
-
}
|
|
557
|
-
}, "+") : null))) : null);
|
|
558
|
-
};
|
|
559
|
-
Modal.propTypes = {
|
|
560
|
-
setShow: PropTypes.func,
|
|
561
|
-
headerText: PropTypes.string,
|
|
562
|
-
className: PropTypes.string,
|
|
563
|
-
type: PropTypes.string,
|
|
564
|
-
selected: PropTypes.string,
|
|
565
|
-
data: PropTypes.array
|
|
566
|
-
};
|
|
567
|
-
|
|
568
|
-
var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
|
|
636
|
+
var css_248z$a = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
|
|
569
637
|
var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
|
|
570
|
-
styleInject(css_248z$
|
|
638
|
+
styleInject(css_248z$a);
|
|
571
639
|
|
|
572
640
|
const InputTypes = {
|
|
573
641
|
TEL: 'tel',
|
|
@@ -885,9 +953,9 @@ Input.defaultProps = {
|
|
|
885
953
|
type: "text"
|
|
886
954
|
};
|
|
887
955
|
|
|
888
|
-
var css_248z$
|
|
956
|
+
var css_248z$9 = ".radio-module_radio-wrap__-lO7V{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.radio-module_radio-wrap__-lO7V>input{height:0;opacity:0;position:absolute;width:0}.radio-module_radio-wrap__-lO7V .radio-module_radio-checkmark__Kvol0{border:1px solid #d9d9d9;border-radius:50%;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.radio-module_radio-wrap__-lO7V>.radio-module_radio-checkmark__Kvol0:after{background-color:#d9d9d9;border-radius:50%;bottom:0;content:\"\";height:8px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;transition:opacity .24s,background-color .24s;width:8px}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0:after{background-color:#1890ff;opacity:1}.radio-module_radio-wrap__-lO7V:hover input~.radio-module_radio-checkmark__Kvol0:after{opacity:1}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0{border-color:#1890ff}";
|
|
889
957
|
var styles$7 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
|
|
890
|
-
styleInject(css_248z$
|
|
958
|
+
styleInject(css_248z$9);
|
|
891
959
|
|
|
892
960
|
const Radio = ({
|
|
893
961
|
disabled,
|
|
@@ -1104,27 +1172,9 @@ const SvgArrow = ({
|
|
|
1104
1172
|
fill: "#3C393E"
|
|
1105
1173
|
}));
|
|
1106
1174
|
|
|
1107
|
-
|
|
1108
|
-
title,
|
|
1109
|
-
titleId,
|
|
1110
|
-
...props
|
|
1111
|
-
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
1112
|
-
width: "14",
|
|
1113
|
-
height: "14",
|
|
1114
|
-
viewBox: "0 0 14 14",
|
|
1115
|
-
fill: "none",
|
|
1116
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1117
|
-
"aria-labelledby": titleId
|
|
1118
|
-
}, props), title ? /*#__PURE__*/React.createElement("title", {
|
|
1119
|
-
id: titleId
|
|
1120
|
-
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
1121
|
-
d: "m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z",
|
|
1122
|
-
fill: "#3C393E"
|
|
1123
|
-
}));
|
|
1124
|
-
|
|
1125
|
-
var css_248z$7 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
|
|
1175
|
+
var css_248z$8 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
|
|
1126
1176
|
var styles$6 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
|
|
1127
|
-
styleInject(css_248z$
|
|
1177
|
+
styleInject(css_248z$8);
|
|
1128
1178
|
|
|
1129
1179
|
const Select = ({
|
|
1130
1180
|
options,
|
|
@@ -1261,7 +1311,13 @@ const Select = ({
|
|
|
1261
1311
|
}
|
|
1262
1312
|
}, [opened]);
|
|
1263
1313
|
useEffect(() => {
|
|
1264
|
-
|
|
1314
|
+
if (selected) {
|
|
1315
|
+
if (selected.length > 0) {
|
|
1316
|
+
setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
|
|
1317
|
+
} else {
|
|
1318
|
+
setNewSelected([]);
|
|
1319
|
+
}
|
|
1320
|
+
}
|
|
1265
1321
|
if (!multiple) {
|
|
1266
1322
|
options && options.length > 0 && setExistOptions(options);
|
|
1267
1323
|
} else {
|
|
@@ -1278,7 +1334,7 @@ const Select = ({
|
|
|
1278
1334
|
});
|
|
1279
1335
|
setExistOptions(modifiedOptions);
|
|
1280
1336
|
}
|
|
1281
|
-
}, [options, multiple, selected]);
|
|
1337
|
+
}, [options, multiple, selected, selected?.length]);
|
|
1282
1338
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
1283
1339
|
className: classProps
|
|
1284
1340
|
}, label ? /*#__PURE__*/React__default.createElement("label", {
|
|
@@ -1528,9 +1584,9 @@ const SvgToasterSuccess = ({
|
|
|
1528
1584
|
fill: "#0DA574"
|
|
1529
1585
|
}));
|
|
1530
1586
|
|
|
1531
|
-
var css_248z$
|
|
1587
|
+
var css_248z$7 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}";
|
|
1532
1588
|
var styles$5 = {"top-left":"toaster-module_top-left__q0LcN","top-right":"toaster-module_top-right__f-AFL","top-center":"toaster-module_top-center__eVRbc","bottom-left":"toaster-module_bottom-left__b-YHI","bottom-right":"toaster-module_bottom-right__g9ACP","bottom-center":"toaster-module_bottom-center__4KcFe","notify-block":"toaster-module_notify-block__pRnEB","bounce-in-right":"toaster-module_bounce-in-right__shR2D","bounceInRight":"toaster-module_bounceInRight__rSk5p","bounce-out-right":"toaster-module_bounce-out-right__48pyA","bounceOutRight":"toaster-module_bounceOutRight__bmFGS","bounce-in-left":"toaster-module_bounce-in-left__xoF-M","bounceInLeft":"toaster-module_bounceInLeft__to59v","bounce-out-left":"toaster-module_bounce-out-left__fDOZw","bounceOutLeft":"toaster-module_bounceOutLeft__k5QgO"};
|
|
1533
|
-
styleInject(css_248z$
|
|
1589
|
+
styleInject(css_248z$7);
|
|
1534
1590
|
|
|
1535
1591
|
const ToasterType = {
|
|
1536
1592
|
info: 'info',
|
|
@@ -1802,9 +1858,9 @@ const SvgTooltip = ({
|
|
|
1802
1858
|
fill: "#D1D1D1"
|
|
1803
1859
|
}));
|
|
1804
1860
|
|
|
1805
|
-
var css_248z$
|
|
1861
|
+
var css_248z$6 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
|
|
1806
1862
|
var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
|
|
1807
|
-
styleInject(css_248z$
|
|
1863
|
+
styleInject(css_248z$6);
|
|
1808
1864
|
|
|
1809
1865
|
const Tooltip = ({
|
|
1810
1866
|
type,
|
|
@@ -1934,9 +1990,9 @@ const SvgCaptchaArrowDown = ({
|
|
|
1934
1990
|
fill: "#00236A"
|
|
1935
1991
|
}));
|
|
1936
1992
|
|
|
1937
|
-
var css_248z$
|
|
1993
|
+
var css_248z$5 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
|
|
1938
1994
|
var styles$3 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
|
|
1939
|
-
styleInject(css_248z$
|
|
1995
|
+
styleInject(css_248z$5);
|
|
1940
1996
|
|
|
1941
1997
|
const Captcha = ({
|
|
1942
1998
|
size,
|
|
@@ -2058,9 +2114,9 @@ Captcha.propTypes = {
|
|
|
2058
2114
|
getRange: PropTypes.func.isRequired
|
|
2059
2115
|
};
|
|
2060
2116
|
|
|
2061
|
-
var css_248z$
|
|
2117
|
+
var css_248z$4 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;cursor:pointer;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
|
|
2062
2118
|
var styles$2 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
|
|
2063
|
-
styleInject(css_248z$
|
|
2119
|
+
styleInject(css_248z$4);
|
|
2064
2120
|
|
|
2065
2121
|
const Stepper = ({
|
|
2066
2122
|
className,
|
|
@@ -2515,9 +2571,12 @@ const NewFile = ({
|
|
|
2515
2571
|
borderColor,
|
|
2516
2572
|
uploadColor,
|
|
2517
2573
|
defaultData,
|
|
2574
|
+
formatError,
|
|
2518
2575
|
errorMessage,
|
|
2519
2576
|
fileSizeText,
|
|
2577
|
+
maxSizeError,
|
|
2520
2578
|
progressColor,
|
|
2579
|
+
noChoosenFile,
|
|
2521
2580
|
fileExtensions,
|
|
2522
2581
|
listItemHeight,
|
|
2523
2582
|
backgroundColor,
|
|
@@ -2576,20 +2635,20 @@ const NewFile = ({
|
|
|
2576
2635
|
change({
|
|
2577
2636
|
file: file[ix],
|
|
2578
2637
|
uuid: v4(),
|
|
2579
|
-
check:
|
|
2638
|
+
check: formatError
|
|
2580
2639
|
});
|
|
2581
2640
|
}
|
|
2582
2641
|
} else {
|
|
2583
2642
|
change({
|
|
2584
2643
|
file: file[ix],
|
|
2585
2644
|
uuid: v4(),
|
|
2586
|
-
check:
|
|
2645
|
+
check: maxSizeError
|
|
2587
2646
|
});
|
|
2588
2647
|
}
|
|
2589
2648
|
}
|
|
2590
2649
|
}
|
|
2591
2650
|
if (file.length === 0 && memoizedItems.length === 0) {
|
|
2592
|
-
setError(
|
|
2651
|
+
setError(noChoosenFile);
|
|
2593
2652
|
}
|
|
2594
2653
|
} else {
|
|
2595
2654
|
if (file[0]) {
|
|
@@ -2605,16 +2664,16 @@ const NewFile = ({
|
|
|
2605
2664
|
}
|
|
2606
2665
|
} else {
|
|
2607
2666
|
setImage(null);
|
|
2608
|
-
setError(
|
|
2667
|
+
setError(formatError);
|
|
2609
2668
|
}
|
|
2610
2669
|
} else {
|
|
2611
2670
|
setImage(null);
|
|
2612
|
-
setError(
|
|
2671
|
+
setError(maxSizeError);
|
|
2613
2672
|
}
|
|
2614
2673
|
}
|
|
2615
2674
|
if (file.length === 0) {
|
|
2616
2675
|
setImage(null);
|
|
2617
|
-
setError(
|
|
2676
|
+
setError(noChoosenFile);
|
|
2618
2677
|
}
|
|
2619
2678
|
}
|
|
2620
2679
|
};
|
|
@@ -2846,12 +2905,15 @@ NewFile.propTypes = {
|
|
|
2846
2905
|
labelSize: PropTypes.string,
|
|
2847
2906
|
labelColor: PropTypes.string,
|
|
2848
2907
|
errorColor: PropTypes.string,
|
|
2908
|
+
formatError: PropTypes.string,
|
|
2849
2909
|
putFileHere: PropTypes.string,
|
|
2850
2910
|
borderColor: PropTypes.string,
|
|
2851
2911
|
uploadColor: PropTypes.string,
|
|
2852
2912
|
defaultData: PropTypes.object,
|
|
2913
|
+
maxSizeError: PropTypes.string,
|
|
2853
2914
|
errorMessage: PropTypes.string,
|
|
2854
2915
|
fileSizeText: PropTypes.string,
|
|
2916
|
+
noChoosenFile: PropTypes.string,
|
|
2855
2917
|
progressColor: PropTypes.string,
|
|
2856
2918
|
deleteComponent: PropTypes.bool,
|
|
2857
2919
|
listItemHeight: PropTypes.string,
|
|
@@ -2882,8 +2944,8 @@ NewFile.defaultProps = {
|
|
|
2882
2944
|
fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
|
|
2883
2945
|
};
|
|
2884
2946
|
|
|
2885
|
-
var css_248z$
|
|
2886
|
-
styleInject(css_248z$
|
|
2947
|
+
var css_248z$3 = "textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
|
|
2948
|
+
styleInject(css_248z$3);
|
|
2887
2949
|
|
|
2888
2950
|
const Textarea = ({
|
|
2889
2951
|
size,
|
|
@@ -3062,7 +3124,106 @@ Textarea.propTypes = {
|
|
|
3062
3124
|
labelRequiredColor: PropTypes.string
|
|
3063
3125
|
};
|
|
3064
3126
|
|
|
3065
|
-
var css_248z$
|
|
3127
|
+
var css_248z$2 = "";
|
|
3128
|
+
styleInject(css_248z$2);
|
|
3129
|
+
|
|
3130
|
+
const TypographyType = {
|
|
3131
|
+
p: 'p',
|
|
3132
|
+
h1: 'h1',
|
|
3133
|
+
h2: 'h2',
|
|
3134
|
+
h3: 'h3',
|
|
3135
|
+
h4: 'h4',
|
|
3136
|
+
h5: 'h5',
|
|
3137
|
+
h6: 'h6',
|
|
3138
|
+
span: 'span'
|
|
3139
|
+
};
|
|
3140
|
+
const Typography = ({
|
|
3141
|
+
size,
|
|
3142
|
+
color,
|
|
3143
|
+
weight,
|
|
3144
|
+
radius,
|
|
3145
|
+
border,
|
|
3146
|
+
cursor,
|
|
3147
|
+
variant,
|
|
3148
|
+
onClick,
|
|
3149
|
+
children,
|
|
3150
|
+
textAlign,
|
|
3151
|
+
fontStyle,
|
|
3152
|
+
className,
|
|
3153
|
+
textShadow,
|
|
3154
|
+
lineHeight,
|
|
3155
|
+
colorHover,
|
|
3156
|
+
fontFamily,
|
|
3157
|
+
textTransform,
|
|
3158
|
+
textDecoration,
|
|
3159
|
+
backgroundColor,
|
|
3160
|
+
...props
|
|
3161
|
+
}) => {
|
|
3162
|
+
const configStyles = compereConfigs();
|
|
3163
|
+
const classProps = classnames(className);
|
|
3164
|
+
const [isHover, setIsHover] = useState(false);
|
|
3165
|
+
const [validVariant, setValidVariant] = useState(false);
|
|
3166
|
+
useEffect(() => {
|
|
3167
|
+
if (!Object.values(TypographyType).includes(variant)) {
|
|
3168
|
+
setValidVariant(true);
|
|
3169
|
+
}
|
|
3170
|
+
}, [variant]);
|
|
3171
|
+
const handleMouseEnter = () => {
|
|
3172
|
+
setIsHover(true);
|
|
3173
|
+
};
|
|
3174
|
+
const handleMouseLeave = () => {
|
|
3175
|
+
setIsHover(false);
|
|
3176
|
+
};
|
|
3177
|
+
const tagT = /*#__PURE__*/React__default.createElement(variant, {
|
|
3178
|
+
style: {
|
|
3179
|
+
border: border ? border : configStyles.TYPOGRAPHY.border,
|
|
3180
|
+
cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
|
|
3181
|
+
borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
|
|
3182
|
+
fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
|
|
3183
|
+
fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
|
|
3184
|
+
textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
|
|
3185
|
+
textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
|
|
3186
|
+
fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
|
|
3187
|
+
lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight' + variant],
|
|
3188
|
+
fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily' + variant],
|
|
3189
|
+
textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
|
|
3190
|
+
textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
|
|
3191
|
+
backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor' + variant],
|
|
3192
|
+
color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY['color' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
|
|
3193
|
+
},
|
|
3194
|
+
...props,
|
|
3195
|
+
className: classProps,
|
|
3196
|
+
onClick: onClick ? onClick : _ => _,
|
|
3197
|
+
onMouseEnter: handleMouseEnter,
|
|
3198
|
+
onMouseLeave: handleMouseLeave
|
|
3199
|
+
}, [children]);
|
|
3200
|
+
return validVariant ? 'Please set Typography valid variant' : tagT;
|
|
3201
|
+
};
|
|
3202
|
+
Typography.propTypes = {
|
|
3203
|
+
size: PropTypes.string,
|
|
3204
|
+
color: PropTypes.string,
|
|
3205
|
+
onClick: PropTypes.func,
|
|
3206
|
+
weight: PropTypes.string,
|
|
3207
|
+
border: PropTypes.string,
|
|
3208
|
+
cursor: PropTypes.string,
|
|
3209
|
+
radius: PropTypes.string,
|
|
3210
|
+
textAlign: PropTypes.string,
|
|
3211
|
+
className: PropTypes.string,
|
|
3212
|
+
fontStyle: PropTypes.string,
|
|
3213
|
+
lineHeight: PropTypes.string,
|
|
3214
|
+
textShadow: PropTypes.string,
|
|
3215
|
+
fontFamily: PropTypes.string,
|
|
3216
|
+
colorHover: PropTypes.string,
|
|
3217
|
+
textTransform: PropTypes.string,
|
|
3218
|
+
textDecoration: PropTypes.string,
|
|
3219
|
+
backgroundColor: PropTypes.string,
|
|
3220
|
+
variant: PropTypes.oneOf(Object.values(TypographyType))
|
|
3221
|
+
};
|
|
3222
|
+
Typography.defaultProps = {
|
|
3223
|
+
variant: 'p'
|
|
3224
|
+
};
|
|
3225
|
+
|
|
3226
|
+
var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
|
|
3066
3227
|
var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
|
|
3067
3228
|
styleInject(css_248z$1);
|
|
3068
3229
|
|
|
@@ -3132,25 +3293,8 @@ const SvgDots = ({
|
|
|
3132
3293
|
fill: "#3C393E"
|
|
3133
3294
|
}));
|
|
3134
3295
|
|
|
3135
|
-
const SvgNextarrow = ({
|
|
3136
|
-
title,
|
|
3137
|
-
titleId,
|
|
3138
|
-
...props
|
|
3139
|
-
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
3140
|
-
width: "6",
|
|
3141
|
-
height: "12",
|
|
3142
|
-
viewBox: "0 0 6 12",
|
|
3143
|
-
fill: "none",
|
|
3144
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3145
|
-
"aria-labelledby": titleId
|
|
3146
|
-
}, props), title ? /*#__PURE__*/React.createElement("title", {
|
|
3147
|
-
id: titleId
|
|
3148
|
-
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
3149
|
-
d: "M.851 11.998a.847.847 0 0 1-.847-.776.86.86 0 0 1 .193-.626l3.808-4.584L.333 1.419A.857.857 0 0 1 .46.213a.849.849 0 0 1 1.241.128l4.106 5.132a.859.859 0 0 1 0 1.086l-4.25 5.132a.85.85 0 0 1-.706.307Z",
|
|
3150
|
-
fill: "#3C393E"
|
|
3151
|
-
}));
|
|
3152
|
-
|
|
3153
3296
|
const Pagination = ({
|
|
3297
|
+
goTo,
|
|
3154
3298
|
onChange,
|
|
3155
3299
|
totalCount,
|
|
3156
3300
|
siblingCount,
|
|
@@ -3158,6 +3302,8 @@ const Pagination = ({
|
|
|
3158
3302
|
offset,
|
|
3159
3303
|
className
|
|
3160
3304
|
}) => {
|
|
3305
|
+
const [inpVal, setInpVal] = useState('');
|
|
3306
|
+
const [error, setError] = useState(false);
|
|
3161
3307
|
const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
|
|
3162
3308
|
const [currentPageNumber, setCurrentPage] = useState(currentPage);
|
|
3163
3309
|
const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
|
|
@@ -3200,6 +3346,40 @@ const Pagination = ({
|
|
|
3200
3346
|
const onPreviousFive = e => {
|
|
3201
3347
|
currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
|
|
3202
3348
|
};
|
|
3349
|
+
const handleChangeInput = e => {
|
|
3350
|
+
setError(false);
|
|
3351
|
+
if (e.target.value.trim() !== '') {
|
|
3352
|
+
const val = parseInt(e.target.value);
|
|
3353
|
+
if (Number.isInteger(val)) {
|
|
3354
|
+
setInpVal(val);
|
|
3355
|
+
} else {
|
|
3356
|
+
setInpVal('');
|
|
3357
|
+
}
|
|
3358
|
+
} else {
|
|
3359
|
+
setInpVal('');
|
|
3360
|
+
}
|
|
3361
|
+
};
|
|
3362
|
+
const handleKeyDown = e => {
|
|
3363
|
+
const forbiddenKeys = ["e", ".", "+", "-"];
|
|
3364
|
+
if (forbiddenKeys.includes(e.key)) {
|
|
3365
|
+
e.preventDefault();
|
|
3366
|
+
}
|
|
3367
|
+
if (e.keyCode === 13) {
|
|
3368
|
+
if (inpVal === '') {
|
|
3369
|
+
setError(true);
|
|
3370
|
+
} else {
|
|
3371
|
+
if (inpVal <= 1) {
|
|
3372
|
+
setInpVal(1);
|
|
3373
|
+
onPageChange(1);
|
|
3374
|
+
} else if (inpVal >= totalCount / offset) {
|
|
3375
|
+
setInpVal(Math.ceil(totalCount / offset));
|
|
3376
|
+
onPageChange(Math.ceil(totalCount / offset));
|
|
3377
|
+
} else {
|
|
3378
|
+
onPageChange(inpVal);
|
|
3379
|
+
}
|
|
3380
|
+
}
|
|
3381
|
+
}
|
|
3382
|
+
};
|
|
3203
3383
|
let lastPage = paginationRange[paginationRange.length - 1];
|
|
3204
3384
|
return /*#__PURE__*/React__default.createElement("ul", {
|
|
3205
3385
|
className: classProps
|
|
@@ -3207,9 +3387,9 @@ const Pagination = ({
|
|
|
3207
3387
|
style: {
|
|
3208
3388
|
transform: 'rotate(180deg)'
|
|
3209
3389
|
},
|
|
3210
|
-
className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
|
|
3211
3390
|
onClick: onPrevious,
|
|
3212
|
-
disabled: currentPage === 1 ? true : false
|
|
3391
|
+
disabled: currentPage === 1 ? true : false,
|
|
3392
|
+
className: `${styles$1["pagination-btn"]} pagination-btn-rem`
|
|
3213
3393
|
}, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
|
|
3214
3394
|
if (pageNumber === Dots) {
|
|
3215
3395
|
let currentPageIndex = paginationRange.indexOf(currentPageNumber);
|
|
@@ -3238,11 +3418,35 @@ const Pagination = ({
|
|
|
3238
3418
|
}, pageNumber);
|
|
3239
3419
|
}), /*#__PURE__*/React__default.createElement("button", {
|
|
3240
3420
|
onClick: onNext,
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
}, /*#__PURE__*/React__default.createElement(SvgNextarrow, null))
|
|
3421
|
+
disabled: currentPageNumber === lastPage ? true : false,
|
|
3422
|
+
className: `${styles$1["pagination-btn"]} pagination-btn-rem`
|
|
3423
|
+
}, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)), goTo && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("input", {
|
|
3424
|
+
onKeyDown: handleKeyDown,
|
|
3425
|
+
onInput: handleChangeInput,
|
|
3426
|
+
type: "number",
|
|
3427
|
+
style: {
|
|
3428
|
+
width: '53px',
|
|
3429
|
+
height: '30px',
|
|
3430
|
+
outline: 'none',
|
|
3431
|
+
color: '#3C393E',
|
|
3432
|
+
fontSize: '13px',
|
|
3433
|
+
margin: '0px 6px',
|
|
3434
|
+
fontWeight: '500',
|
|
3435
|
+
textAlign: 'center',
|
|
3436
|
+
border: '1px solid',
|
|
3437
|
+
borderRadius: '6px',
|
|
3438
|
+
borderColor: error ? 'red' : '#00236a'
|
|
3439
|
+
},
|
|
3440
|
+
value: inpVal
|
|
3441
|
+
}), /*#__PURE__*/React__default.createElement("span", {
|
|
3442
|
+
style: {
|
|
3443
|
+
color: '#3C393E',
|
|
3444
|
+
fontSize: '13px'
|
|
3445
|
+
}
|
|
3446
|
+
}, "\u0537\u057B")));
|
|
3244
3447
|
};
|
|
3245
3448
|
Pagination.propTypes = {
|
|
3449
|
+
goTo: PropTypes.bool,
|
|
3246
3450
|
offset: PropTypes.number,
|
|
3247
3451
|
totalCount: PropTypes.number,
|
|
3248
3452
|
className: PropTypes.string,
|
|
@@ -3397,6 +3601,7 @@ const NewAutocomplete = ({
|
|
|
3397
3601
|
getItem,
|
|
3398
3602
|
required,
|
|
3399
3603
|
disabled,
|
|
3604
|
+
selected,
|
|
3400
3605
|
errorSize,
|
|
3401
3606
|
labelSize,
|
|
3402
3607
|
errorColor,
|
|
@@ -3511,7 +3716,7 @@ const NewAutocomplete = ({
|
|
|
3511
3716
|
getItem(selectedValue);
|
|
3512
3717
|
setInnerValue(selectedValue.name);
|
|
3513
3718
|
};
|
|
3514
|
-
const optionList = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && innerOptions ? innerOptions.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
|
|
3719
|
+
const optionList = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && innerOptions && !disabled ? innerOptions.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
|
|
3515
3720
|
style: {
|
|
3516
3721
|
left: contentBottomLeft ? contentBottomLeft : configStyles.NEWAUTOCOMPLETE.contentBottomLeft,
|
|
3517
3722
|
width: contentBottomWidth ? contentBottomWidth : configStyles.NEWAUTOCOMPLETE.contentBottomWidth,
|
|
@@ -3581,12 +3786,19 @@ const NewAutocomplete = ({
|
|
|
3581
3786
|
alert('Please add getItem function for get choosen item from autocomplete');
|
|
3582
3787
|
}
|
|
3583
3788
|
options && setInnerOptions(options);
|
|
3584
|
-
}, [options, options
|
|
3789
|
+
}, [options, options?.length, getItem]);
|
|
3585
3790
|
useEffect(() => {
|
|
3586
3791
|
if (!change) {
|
|
3587
3792
|
alert('Please add change prop on New Autocomplete component');
|
|
3588
3793
|
}
|
|
3589
3794
|
}, [change]);
|
|
3795
|
+
useEffect(() => {
|
|
3796
|
+
if (selected) {
|
|
3797
|
+
setInnerValue(selected);
|
|
3798
|
+
} else {
|
|
3799
|
+
setInnerValue('');
|
|
3800
|
+
}
|
|
3801
|
+
}, [selected, selected?.length]);
|
|
3590
3802
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
|
|
3591
3803
|
style: {
|
|
3592
3804
|
color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
|
|
@@ -3651,6 +3863,7 @@ NewAutocomplete.propTypes = {
|
|
|
3651
3863
|
label: PropTypes.string,
|
|
3652
3864
|
required: PropTypes.bool,
|
|
3653
3865
|
disabled: PropTypes.bool,
|
|
3866
|
+
selected: PropTypes.string,
|
|
3654
3867
|
errorSize: PropTypes.string,
|
|
3655
3868
|
labelSize: PropTypes.string,
|
|
3656
3869
|
errorColor: PropTypes.string,
|