@xaypay/tui 0.0.62 → 0.0.64
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 +443 -81
- package/dist/index.js +445 -80
- package/package.json +1 -1
- package/src/assets/icons/toaster-close.svg +3 -0
- package/src/assets/icons/toaster-error.svg +3 -0
- package/src/assets/icons/toaster-info.svg +3 -0
- package/src/assets/icons/toaster-success.svg +3 -0
- package/src/assets/icons/toaster-warning.svg +3 -0
- package/src/components/autocomplate/index.js +3 -0
- package/src/components/file/index.js +9 -6
- package/src/components/icon/ToasterClose.js +19 -0
- package/src/components/icon/ToasterError.js +19 -0
- package/src/components/icon/ToasterInfo.js +19 -0
- package/src/components/icon/ToasterSuccess.js +19 -0
- package/src/components/icon/ToasterWarning.js +19 -0
- package/src/components/icon/index.js +5 -0
- package/src/components/input/index.js +16 -3
- package/src/components/input/input.stories.js +5 -0
- package/src/components/select/index.js +18 -10
- package/src/components/select/select.module.css +2 -2
- package/src/components/toaster/Toast.js +181 -0
- package/src/components/toaster/index.js +129 -0
- package/src/components/toaster/toaster.module.css +188 -0
- package/src/components/toaster/toaster.stories.js +378 -0
- package/src/index.js +2 -1
- package/src/stories/configuration.stories.mdx +38 -0
- package/src/stories/static/select-usage.png +0 -0
- package/src/stories/static/toaster-container-usage.png +0 -0
- package/src/stories/static/toaster-usage.png +0 -0
- package/src/stories/usage.stories.mdx +16 -1
package/dist/index.es.js
CHANGED
|
@@ -3,6 +3,7 @@ import React__default, { useState, useEffect, useRef, createRef, useMemo } from
|
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import styled, { keyframes, css } from 'styled-components';
|
|
6
|
+
import ReactDOM from 'react-dom';
|
|
6
7
|
|
|
7
8
|
function styleInject(css, ref) {
|
|
8
9
|
if ( ref === void 0 ) ref = {};
|
|
@@ -31,12 +32,12 @@ function styleInject(css, ref) {
|
|
|
31
32
|
}
|
|
32
33
|
}
|
|
33
34
|
|
|
34
|
-
var css_248z$
|
|
35
|
-
var styles$
|
|
36
|
-
styleInject(css_248z$
|
|
35
|
+
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{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.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)}";
|
|
36
|
+
var styles$c = {"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"};
|
|
37
|
+
styleInject(css_248z$d);
|
|
37
38
|
|
|
38
|
-
var css_248z$
|
|
39
|
-
styleInject(css_248z$
|
|
39
|
+
var css_248z$c = "";
|
|
40
|
+
styleInject(css_248z$c);
|
|
40
41
|
|
|
41
42
|
const File = ({
|
|
42
43
|
name,
|
|
@@ -99,16 +100,16 @@ const File = ({
|
|
|
99
100
|
document.querySelector(`.${name}`).value = "";
|
|
100
101
|
};
|
|
101
102
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
|
|
102
|
-
className: `${styles$
|
|
103
|
+
className: `${styles$c['file-form-title']} ile-form-title-rem`
|
|
103
104
|
}, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
|
|
104
105
|
style: {
|
|
105
106
|
color: "#ee0000"
|
|
106
107
|
}
|
|
107
108
|
}, "*")), /*#__PURE__*/React__default.createElement("div", {
|
|
108
|
-
className: classnames(`${styles$
|
|
109
|
+
className: classnames(`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
|
|
109
110
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
110
111
|
onChange: e => console.log(e),
|
|
111
|
-
className: `${styles$
|
|
112
|
+
className: `${styles$c['file-form']} file-form-rem ${errorMessage ? styles$c['error'] : ''}`,
|
|
112
113
|
onClick: () => document.querySelector(`.${name}`).click()
|
|
113
114
|
}, /*#__PURE__*/React__default.createElement("input", {
|
|
114
115
|
hidden: true,
|
|
@@ -117,23 +118,23 @@ const File = ({
|
|
|
117
118
|
disabled: disabled,
|
|
118
119
|
onChange: e => handleCheckFile(e)
|
|
119
120
|
}), image ? /*#__PURE__*/React__default.createElement("div", {
|
|
120
|
-
className: `${styles$
|
|
121
|
+
className: `${styles$c['upload-file-content']} upload-file-content-rem`
|
|
121
122
|
}, /*#__PURE__*/React__default.createElement("img", {
|
|
122
123
|
src: image,
|
|
123
124
|
alt: fileName
|
|
124
125
|
})) : /*#__PURE__*/React__default.createElement("div", {
|
|
125
|
-
className: `${styles$
|
|
126
|
+
className: `${styles$c['file-form-inner-upload']} ile-form-inner-upload-rem`
|
|
126
127
|
}, /*#__PURE__*/React__default.createElement("img", {
|
|
127
128
|
src: "../../assets/upload.svg",
|
|
128
129
|
alt: ""
|
|
129
130
|
}), /*#__PURE__*/React__default.createElement("span", {
|
|
130
|
-
className: `${styles$
|
|
131
|
+
className: `${styles$c['upload-info']} upload-info-rem`
|
|
131
132
|
}, /*#__PURE__*/React__default.createElement("span", {
|
|
132
|
-
className: `${styles$
|
|
133
|
+
className: `${styles$c['upload-info-txt']} upload-info-txt-rem`
|
|
133
134
|
}, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default.createElement("span", {
|
|
134
|
-
className: `${styles$
|
|
135
|
-
}, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), /*#__PURE__*/React__default.createElement("div", {
|
|
136
|
-
className: `${styles$
|
|
135
|
+
className: `${styles$c['upload-info-size']} upload-info-size-rem`
|
|
136
|
+
}, "\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", {
|
|
137
|
+
className: `${styles$c['delete-upload-icon']} delete-upload-icon-rem`,
|
|
137
138
|
onClick: handleRemoveFile
|
|
138
139
|
}, /*#__PURE__*/React__default.createElement("i", {
|
|
139
140
|
className: "icon-delete"
|
|
@@ -160,9 +161,9 @@ File.defaultProps = {
|
|
|
160
161
|
fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
|
|
161
162
|
};
|
|
162
163
|
|
|
163
|
-
var css_248z$
|
|
164
|
-
var styles$
|
|
165
|
-
styleInject(css_248z$
|
|
164
|
+
var css_248z$b = ".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}";
|
|
165
|
+
var styles$b = {"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"};
|
|
166
|
+
styleInject(css_248z$b);
|
|
166
167
|
|
|
167
168
|
function _extends() {
|
|
168
169
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -179,9 +180,9 @@ function _extends() {
|
|
|
179
180
|
return _extends.apply(this, arguments);
|
|
180
181
|
}
|
|
181
182
|
|
|
182
|
-
var css_248z$
|
|
183
|
-
var styles$
|
|
184
|
-
styleInject(css_248z$
|
|
183
|
+
var css_248z$a = ".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}";
|
|
184
|
+
var styles$a = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
|
|
185
|
+
styleInject(css_248z$a);
|
|
185
186
|
|
|
186
187
|
const Checkbox = ({
|
|
187
188
|
disabled,
|
|
@@ -196,7 +197,7 @@ const Checkbox = ({
|
|
|
196
197
|
onClick,
|
|
197
198
|
...props
|
|
198
199
|
}) => {
|
|
199
|
-
const classProps = classnames(styles$
|
|
200
|
+
const classProps = classnames(styles$a.checkbox, className, 'checkbox-input-rem');
|
|
200
201
|
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
201
202
|
const [data, setData] = useState(parseData);
|
|
202
203
|
useEffect(() => {
|
|
@@ -229,7 +230,7 @@ const Checkbox = ({
|
|
|
229
230
|
} : '';
|
|
230
231
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, data.map(element => {
|
|
231
232
|
return /*#__PURE__*/React__default.createElement("label", {
|
|
232
|
-
className: `${styles$
|
|
233
|
+
className: `${styles$a["checkbox-wrap"]} checkbox-wrap-rem`,
|
|
233
234
|
key: element.value
|
|
234
235
|
}, /*#__PURE__*/React__default.createElement("input", _extends({
|
|
235
236
|
type: "checkbox",
|
|
@@ -243,9 +244,9 @@ const Checkbox = ({
|
|
|
243
244
|
onClick: onClick ? onClick : () => {},
|
|
244
245
|
defaultChecked: element.checked
|
|
245
246
|
}, props)), /*#__PURE__*/React__default.createElement("span", {
|
|
246
|
-
className: `${styles$
|
|
247
|
+
className: `${styles$a["checkmark"]} checkmark-rem`
|
|
247
248
|
}), element[keyNames.label] ? /*#__PURE__*/React__default.createElement("label", {
|
|
248
|
-
className: styles$
|
|
249
|
+
className: styles$a.labelCheckbox,
|
|
249
250
|
for: element[keyNames.id]
|
|
250
251
|
}, element[keyNames.label]) : "");
|
|
251
252
|
}));
|
|
@@ -287,23 +288,23 @@ const Table = ({
|
|
|
287
288
|
return true;
|
|
288
289
|
} : "";
|
|
289
290
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
290
|
-
className: `${styles$
|
|
291
|
+
className: `${styles$b["table-wrap"]} table-wrap-rem`
|
|
291
292
|
}, config.isHeader && hearderData.map((header, key) => {
|
|
292
293
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
293
|
-
className: `${styles$
|
|
294
|
+
className: `${styles$b["table-top"]} table-top-rem`,
|
|
294
295
|
key: key
|
|
295
296
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
296
|
-
className: `${styles$
|
|
297
|
+
className: `${styles$b["table-items"]} table-items-rem`
|
|
297
298
|
}, header));
|
|
298
299
|
}), /*#__PURE__*/React__default.createElement("div", {
|
|
299
|
-
className: `${styles$
|
|
300
|
+
className: `${styles$b["table-bottom"]} table-bottom-rem`
|
|
300
301
|
}, tbodyData.map((item, key) => {
|
|
301
302
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
302
|
-
className: `${styles$
|
|
303
|
+
className: `${styles$b["table-bottom-inner"]} table-bottom-inner-rem`,
|
|
303
304
|
key: key
|
|
304
305
|
}, keyNames.map((keyName, keyNameKey) => {
|
|
305
306
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
306
|
-
className: `${styles$
|
|
307
|
+
className: `${styles$b["table-items"]} table-items-rem`,
|
|
307
308
|
key: keyNameKey
|
|
308
309
|
}, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React__default.createElement(Checkbox, {
|
|
309
310
|
onClick: e => {
|
|
@@ -319,7 +320,7 @@ const Table = ({
|
|
|
319
320
|
className: keyName.icon
|
|
320
321
|
}), item[keyName.name]));
|
|
321
322
|
}), actions && /*#__PURE__*/React__default.createElement("div", {
|
|
322
|
-
className: `${styles$
|
|
323
|
+
className: `${styles$b["table-items"]} table-items-rem`
|
|
323
324
|
}, actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
|
|
324
325
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
325
326
|
key: key
|
|
@@ -355,9 +356,9 @@ Table.defaultProps = {
|
|
|
355
356
|
hearderData: []
|
|
356
357
|
};
|
|
357
358
|
|
|
358
|
-
var css_248z$
|
|
359
|
-
var styles$
|
|
360
|
-
styleInject(css_248z$
|
|
359
|
+
var css_248z$9 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 0;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
|
|
360
|
+
var styles$9 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
|
|
361
|
+
styleInject(css_248z$9);
|
|
361
362
|
|
|
362
363
|
const _ = require('lodash');
|
|
363
364
|
const compereConfigs = () => {
|
|
@@ -487,42 +488,42 @@ const Modal = ({
|
|
|
487
488
|
selected,
|
|
488
489
|
children
|
|
489
490
|
}) => {
|
|
490
|
-
classnames(styles$
|
|
491
|
+
classnames(styles$9.modal, className);
|
|
491
492
|
const [select, setSelect] = useState(selected);
|
|
492
493
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
493
|
-
className: `${styles$
|
|
494
|
+
className: `${styles$9["modal-wrap"]} modal-wrap-rem`,
|
|
494
495
|
onClick: () => setShow(false)
|
|
495
496
|
}, type == "content" ? /*#__PURE__*/React__default.createElement("div", {
|
|
496
|
-
className: `${styles$
|
|
497
|
+
className: `${styles$9["modal-content"]} modal-content-rem`,
|
|
497
498
|
onClick: e => {
|
|
498
499
|
e.stopPropagation();
|
|
499
500
|
}
|
|
500
501
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
501
|
-
className: `${styles$
|
|
502
|
+
className: `${styles$9["modal-top"]} modal-top-rem`
|
|
502
503
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
503
|
-
className: `${styles$
|
|
504
|
+
className: `${styles$9["modal-title"]} modal-title-rem`
|
|
504
505
|
}, /*#__PURE__*/React__default.createElement(Typography, {
|
|
505
506
|
variant: TypographyType.p,
|
|
506
507
|
color: "#00236A"
|
|
507
508
|
}, headerText)), /*#__PURE__*/React__default.createElement("div", {
|
|
508
|
-
className: `${styles$
|
|
509
|
+
className: `${styles$9["close-btn"]} close-btn-rem`,
|
|
509
510
|
onClick: () => setShow(false)
|
|
510
511
|
}, /*#__PURE__*/React__default.createElement("i", {
|
|
511
512
|
className: "icon-close"
|
|
512
513
|
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
513
|
-
className: `${styles$
|
|
514
|
+
className: `${styles$9["modal-section"]} modal-section-rem`
|
|
514
515
|
}, children)) : type == "images" ? /*#__PURE__*/React__default.createElement("div", {
|
|
515
|
-
className: `${styles$
|
|
516
|
+
className: `${styles$9["modal-content"]} modal-content-rem`,
|
|
516
517
|
onClick: e => {
|
|
517
518
|
e.stopPropagation();
|
|
518
519
|
}
|
|
519
520
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
520
|
-
className: `${styles$
|
|
521
|
+
className: `${styles$9["close-btn"]} close-btn-rem`,
|
|
521
522
|
onClick: () => setShow(false)
|
|
522
523
|
}, /*#__PURE__*/React__default.createElement("i", {
|
|
523
524
|
className: "icon-close"
|
|
524
525
|
})), /*#__PURE__*/React__default.createElement("div", {
|
|
525
|
-
className: `${styles$
|
|
526
|
+
className: `${styles$9["modal-section"]} modal-section-rem`
|
|
526
527
|
}, /*#__PURE__*/React__default.createElement("div", null, select > 1 ? /*#__PURE__*/React__default.createElement("h1", {
|
|
527
528
|
onClick: () => setSelect(select - 1)
|
|
528
529
|
}, "-") : null, data.map(elem => {
|
|
@@ -548,9 +549,9 @@ Modal.propTypes = {
|
|
|
548
549
|
data: PropTypes.array
|
|
549
550
|
};
|
|
550
551
|
|
|
551
|
-
var css_248z$
|
|
552
|
-
var styles$
|
|
553
|
-
styleInject(css_248z$
|
|
552
|
+
var css_248z$8 = ".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)}}";
|
|
553
|
+
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"};
|
|
554
|
+
styleInject(css_248z$8);
|
|
554
555
|
|
|
555
556
|
const InputTypes = {
|
|
556
557
|
TEL: 'tel',
|
|
@@ -582,6 +583,7 @@ const Input = ({
|
|
|
582
583
|
errorLeft,
|
|
583
584
|
errorSize,
|
|
584
585
|
labelSize,
|
|
586
|
+
maxLength,
|
|
585
587
|
labelColor,
|
|
586
588
|
errorColor,
|
|
587
589
|
placeholder,
|
|
@@ -627,6 +629,14 @@ const Input = ({
|
|
|
627
629
|
animation: ${errorAnimation ? animation : 'none'};
|
|
628
630
|
`;
|
|
629
631
|
const handleChange = event => {
|
|
632
|
+
// TODO: need to discuss
|
|
633
|
+
// onChange
|
|
634
|
+
// ? type === 'tel'
|
|
635
|
+
// ? phoneNumberRegex.test(event.target.value)
|
|
636
|
+
// ? onChange(event.target.value)
|
|
637
|
+
// : _ => _
|
|
638
|
+
// : onChange(event.target.value)
|
|
639
|
+
// : _ => _;
|
|
630
640
|
onChange ? onChange(event.target.value) : _ => _;
|
|
631
641
|
};
|
|
632
642
|
const handleMouseEnter = () => {
|
|
@@ -636,9 +646,9 @@ const Input = ({
|
|
|
636
646
|
setIsHover(false);
|
|
637
647
|
};
|
|
638
648
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
639
|
-
className: `${styles$
|
|
649
|
+
className: `${styles$8["input-wrap"]}`
|
|
640
650
|
}, label ? /*#__PURE__*/React__default.createElement("label", {
|
|
641
|
-
className: `${styles$
|
|
651
|
+
className: `${styles$8["input-title"]}`,
|
|
642
652
|
style: {
|
|
643
653
|
color: labelColor ? labelColor : configStyles.INPUT.labelColor,
|
|
644
654
|
fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
|
|
@@ -652,7 +662,7 @@ const Input = ({
|
|
|
652
662
|
color: "#ee0000"
|
|
653
663
|
}
|
|
654
664
|
}, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
|
|
655
|
-
className: `${styles$
|
|
665
|
+
className: `${styles$8["input-content"]}`,
|
|
656
666
|
style: {
|
|
657
667
|
width: width ? width : configStyles.INPUT.width,
|
|
658
668
|
borderRadius: radius ? radius : configStyles.INPUT.radius,
|
|
@@ -690,7 +700,9 @@ const Input = ({
|
|
|
690
700
|
backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
691
701
|
}
|
|
692
702
|
}, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
|
|
693
|
-
|
|
703
|
+
// TODO: need to discuss
|
|
704
|
+
// value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
|
|
705
|
+
value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
|
|
694
706
|
className: classProps,
|
|
695
707
|
onChange: handleChange,
|
|
696
708
|
type: show ? 'text' : type,
|
|
@@ -701,7 +713,7 @@ const Input = ({
|
|
|
701
713
|
style: {
|
|
702
714
|
border: 'none',
|
|
703
715
|
outline: 'none',
|
|
704
|
-
|
|
716
|
+
cursor: disabled ? 'not-allowed' : 'auto',
|
|
705
717
|
width: width ? width : configStyles.INPUT.width,
|
|
706
718
|
fontSize: size ? size : configStyles.INPUT.size,
|
|
707
719
|
height: height ? height : configStyles.INPUT.height,
|
|
@@ -761,6 +773,7 @@ Input.propTypes = {
|
|
|
761
773
|
errorSize: PropTypes.string,
|
|
762
774
|
errorLeft: PropTypes.string,
|
|
763
775
|
labelSize: PropTypes.string,
|
|
776
|
+
maxLength: PropTypes.number,
|
|
764
777
|
errorColor: PropTypes.string,
|
|
765
778
|
labelColor: PropTypes.string,
|
|
766
779
|
placeholder: PropTypes.string,
|
|
@@ -790,9 +803,9 @@ Input.defaultProps = {
|
|
|
790
803
|
type: "text"
|
|
791
804
|
};
|
|
792
805
|
|
|
793
|
-
var css_248z$
|
|
794
|
-
var styles$
|
|
795
|
-
styleInject(css_248z$
|
|
806
|
+
var css_248z$7 = ".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}";
|
|
807
|
+
var styles$7 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
|
|
808
|
+
styleInject(css_248z$7);
|
|
796
809
|
|
|
797
810
|
const Radio = ({
|
|
798
811
|
disabled,
|
|
@@ -806,11 +819,11 @@ const Radio = ({
|
|
|
806
819
|
keyNames,
|
|
807
820
|
...props
|
|
808
821
|
}) => {
|
|
809
|
-
const classProps = classnames(styles$
|
|
822
|
+
const classProps = classnames(styles$7.checkbox, className);
|
|
810
823
|
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
811
824
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, parseData.map((element, id) => {
|
|
812
825
|
return /*#__PURE__*/React__default.createElement("label", {
|
|
813
|
-
className: `${styles$
|
|
826
|
+
className: `${styles$7["radio-wrap"]} radio-wrap-rem`,
|
|
814
827
|
key: element.value
|
|
815
828
|
}, /*#__PURE__*/React__default.createElement("input", _extends({
|
|
816
829
|
type: "radio",
|
|
@@ -821,9 +834,9 @@ const Radio = ({
|
|
|
821
834
|
value: value ? value : element.value,
|
|
822
835
|
name: name ? name : element.name
|
|
823
836
|
}, props)), /*#__PURE__*/React__default.createElement("span", {
|
|
824
|
-
className: `${styles$
|
|
837
|
+
className: `${styles$7["radio-checkmark"]} radio-checkmark-rem`
|
|
825
838
|
}), element.label ? /*#__PURE__*/React__default.createElement("span", {
|
|
826
|
-
className: styles$
|
|
839
|
+
className: styles$7.labelRadio
|
|
827
840
|
}, label ? label : element.label) : "");
|
|
828
841
|
}));
|
|
829
842
|
};
|
|
@@ -938,9 +951,9 @@ Button.propTypes = {
|
|
|
938
951
|
disabledBackgroundColor: PropTypes.string
|
|
939
952
|
};
|
|
940
953
|
|
|
941
|
-
var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\n</svg>";
|
|
954
|
+
var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\r\n</svg>";
|
|
942
955
|
|
|
943
|
-
var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\n</svg>";
|
|
956
|
+
var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\r\n</svg>";
|
|
944
957
|
|
|
945
958
|
const SelectCheckbox = ({
|
|
946
959
|
checked
|
|
@@ -995,9 +1008,9 @@ const SvgCloseIcon = ({
|
|
|
995
1008
|
fill: "#3C393E"
|
|
996
1009
|
}));
|
|
997
1010
|
|
|
998
|
-
var css_248z$
|
|
999
|
-
var styles$
|
|
1000
|
-
styleInject(css_248z$
|
|
1011
|
+
var css_248z$6 = ".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}}";
|
|
1012
|
+
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"};
|
|
1013
|
+
styleInject(css_248z$6);
|
|
1001
1014
|
|
|
1002
1015
|
const Select = ({
|
|
1003
1016
|
options,
|
|
@@ -1171,7 +1184,7 @@ const Select = ({
|
|
|
1171
1184
|
}, "*")) : "", /*#__PURE__*/React__default.createElement("div", {
|
|
1172
1185
|
ref: ref
|
|
1173
1186
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
1174
|
-
className: styles$
|
|
1187
|
+
className: styles$6['select-content']
|
|
1175
1188
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
1176
1189
|
style: {
|
|
1177
1190
|
cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
|
|
@@ -1189,9 +1202,9 @@ const Select = ({
|
|
|
1189
1202
|
onClick: disabled ? _ => _ : _ => handleOpenClose(),
|
|
1190
1203
|
onMouseEnter: disabled ? _ => _ : _ => handleMouseEnter(),
|
|
1191
1204
|
onMouseLeave: disabled ? _ => _ : _ => handleMouseLeave(),
|
|
1192
|
-
className: `${styles$
|
|
1205
|
+
className: `${styles$6['select-content-top']}`
|
|
1193
1206
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
1194
|
-
className: `${styles$
|
|
1207
|
+
className: `${styles$6['select-content-top-text']}`,
|
|
1195
1208
|
style: {
|
|
1196
1209
|
color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
|
|
1197
1210
|
}
|
|
@@ -1204,28 +1217,28 @@ const Select = ({
|
|
|
1204
1217
|
}
|
|
1205
1218
|
}
|
|
1206
1219
|
}) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
|
|
1207
|
-
className: `${styles$
|
|
1208
|
-
}, multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
|
|
1209
|
-
className: `${styles$
|
|
1220
|
+
className: `${styles$6['select-content-top-icon']}`
|
|
1221
|
+
}, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
|
|
1222
|
+
className: `${styles$6['close-icon']}`,
|
|
1210
1223
|
onClick: disabled ? _ => _ : handleClearSelect,
|
|
1211
1224
|
style: {
|
|
1212
1225
|
marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
|
|
1213
1226
|
}
|
|
1214
|
-
}, closeIcon ? closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), /*#__PURE__*/React__default.createElement("div", {
|
|
1227
|
+
}, closeIcon ? closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default.createElement("div", {
|
|
1215
1228
|
style: {
|
|
1216
1229
|
transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
|
|
1217
1230
|
},
|
|
1218
|
-
className: `${styles$
|
|
1219
|
-
}, arrowIcon ? arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)))), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
|
|
1231
|
+
className: `${styles$6['arrow-icon']}`
|
|
1232
|
+
}, arrowIcon ? arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
|
|
1220
1233
|
style: {
|
|
1221
1234
|
boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
|
|
1222
1235
|
borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
|
|
1223
1236
|
backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
|
|
1224
|
-
top: parseFloat(selectedMinHeight
|
|
1237
|
+
top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 2)) + 6 + 'px'
|
|
1225
1238
|
},
|
|
1226
|
-
className: `${styles$
|
|
1239
|
+
className: `${styles$6['select-content-bottom']}`
|
|
1227
1240
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
1228
|
-
className: `${styles$
|
|
1241
|
+
className: `${styles$6['select-content-bottom-inner']}`
|
|
1229
1242
|
}, existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
|
|
1230
1243
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
1231
1244
|
key: i,
|
|
@@ -1234,7 +1247,7 @@ const Select = ({
|
|
|
1234
1247
|
onClick: disabled ? _ => _ : _ => handleSelectItem(option),
|
|
1235
1248
|
onMouseEnter: disabled ? _ => _ : e => handleMouseEnterOption(e),
|
|
1236
1249
|
onMouseLeave: disabled ? _ => _ : e => handleMouseLeaveOption(e),
|
|
1237
|
-
className: `${styles$
|
|
1250
|
+
className: `${styles$6['select-content-bottom-row']}`,
|
|
1238
1251
|
style: {
|
|
1239
1252
|
color: optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor,
|
|
1240
1253
|
cursor: optionItemCursor ? optionItemCursor : configStyles.SELECT.optionItemCursor,
|
|
@@ -1311,7 +1324,353 @@ Select.propTypes = {
|
|
|
1311
1324
|
optionItemBackgroudColorHover: PropTypes.string
|
|
1312
1325
|
};
|
|
1313
1326
|
|
|
1314
|
-
|
|
1327
|
+
const SvgToasterInfo = ({
|
|
1328
|
+
title,
|
|
1329
|
+
titleId,
|
|
1330
|
+
...props
|
|
1331
|
+
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
1332
|
+
width: "1em",
|
|
1333
|
+
height: "1em",
|
|
1334
|
+
viewBox: "0 0 24 24",
|
|
1335
|
+
fill: "none",
|
|
1336
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1337
|
+
"aria-labelledby": titleId
|
|
1338
|
+
}, props), title ? /*#__PURE__*/React.createElement("title", {
|
|
1339
|
+
id: titleId
|
|
1340
|
+
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
1341
|
+
d: "M12 18c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854v-4.83c0-.34-.115-.62-.346-.84A1.19 1.19 0 0 0 12 10.8c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854v4.83c0 .34.115.62.346.84.23.22.515.33.854.33Zm0-9.6c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854 0-.34-.115-.625-.346-.856A1.157 1.157 0 0 0 12 6c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854 0 .34.115.625.346.856.23.23.515.345.854.344ZM12 24c-1.66 0-3.22-.315-4.68-.946a12.137 12.137 0 0 1-3.81-2.564 12.11 12.11 0 0 1-2.564-3.81C.316 15.22 0 13.66 0 12c0-1.66.315-3.22.946-4.68.63-1.46 1.485-2.73 2.564-3.81A12.11 12.11 0 0 1 7.32.946C8.78.316 10.34 0 12 0c1.66 0 3.22.315 4.68.946 1.46.63 2.73 1.485 3.81 2.564a12.127 12.127 0 0 1 2.566 3.81c.63 1.46.945 3.02.944 4.68 0 1.66-.315 3.22-.946 4.68a12.137 12.137 0 0 1-2.564 3.81 12.127 12.127 0 0 1-3.81 2.566c-1.46.63-3.02.945-4.68.944Z",
|
|
1342
|
+
fill: "#00236A"
|
|
1343
|
+
}));
|
|
1344
|
+
|
|
1345
|
+
const SvgToasterError = ({
|
|
1346
|
+
title,
|
|
1347
|
+
titleId,
|
|
1348
|
+
...props
|
|
1349
|
+
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
1350
|
+
width: "1em",
|
|
1351
|
+
height: "1em",
|
|
1352
|
+
viewBox: "0 0 24 24",
|
|
1353
|
+
fill: "none",
|
|
1354
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1355
|
+
"aria-labelledby": titleId
|
|
1356
|
+
}, props), title ? /*#__PURE__*/React.createElement("title", {
|
|
1357
|
+
id: titleId
|
|
1358
|
+
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
1359
|
+
d: "M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 16a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-11a1 1 0 0 0-.984.82L11 6v7l.016.18a1 1 0 0 0 1.968 0L13 13V6l-.016-.18A1 1 0 0 0 12 5Z",
|
|
1360
|
+
fill: "#E00"
|
|
1361
|
+
}));
|
|
1362
|
+
|
|
1363
|
+
const SvgToasterClose = ({
|
|
1364
|
+
title,
|
|
1365
|
+
titleId,
|
|
1366
|
+
...props
|
|
1367
|
+
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
1368
|
+
width: "1em",
|
|
1369
|
+
height: "1em",
|
|
1370
|
+
viewBox: "0 0 18 18",
|
|
1371
|
+
fill: "none",
|
|
1372
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1373
|
+
"aria-labelledby": titleId
|
|
1374
|
+
}, props), title ? /*#__PURE__*/React.createElement("title", {
|
|
1375
|
+
id: titleId
|
|
1376
|
+
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
1377
|
+
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",
|
|
1378
|
+
fill: "#D1D1D1"
|
|
1379
|
+
}));
|
|
1380
|
+
|
|
1381
|
+
const SvgToasterWarning = ({
|
|
1382
|
+
title,
|
|
1383
|
+
titleId,
|
|
1384
|
+
...props
|
|
1385
|
+
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
1386
|
+
width: "1em",
|
|
1387
|
+
height: "1em",
|
|
1388
|
+
viewBox: "0 0 24 21",
|
|
1389
|
+
fill: "none",
|
|
1390
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1391
|
+
"aria-labelledby": titleId
|
|
1392
|
+
}, props), title ? /*#__PURE__*/React.createElement("title", {
|
|
1393
|
+
id: titleId
|
|
1394
|
+
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
1395
|
+
d: "M1.156 21a1.143 1.143 0 0 1-.994-.583 1.285 1.285 0 0 1-.16-.57c-.01-.204.043-.403.16-.597L10.978.583c.117-.194.268-.34.454-.437C11.616.049 11.806 0 12 0c.194 0 .384.049.57.146.185.097.336.243.452.437L23.838 19.25c.116.194.17.394.161.599a1.26 1.26 0 0 1-.161.568 1.14 1.14 0 0 1-.41.423 1.09 1.09 0 0 1-.584.16H1.156ZM12 17.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83 0-.331-.112-.608-.337-.832a1.128 1.128 0 0 0-.832-.335c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83 0 .33.112.608.337.832.224.224.502.336.832.335Zm0-3.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83v-3.5c0-.331-.112-.608-.337-.832A1.128 1.128 0 0 0 12 8.166c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83v3.5c0 .33.112.608.337.832.224.224.502.336.832.335Z",
|
|
1396
|
+
fill: "#FF8A00"
|
|
1397
|
+
}));
|
|
1398
|
+
|
|
1399
|
+
const SvgToasterSuccess = ({
|
|
1400
|
+
title,
|
|
1401
|
+
titleId,
|
|
1402
|
+
...props
|
|
1403
|
+
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
1404
|
+
width: "1em",
|
|
1405
|
+
height: "1em",
|
|
1406
|
+
viewBox: "0 0 24 24",
|
|
1407
|
+
fill: "none",
|
|
1408
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1409
|
+
"aria-labelledby": titleId
|
|
1410
|
+
}, props), title ? /*#__PURE__*/React.createElement("title", {
|
|
1411
|
+
id: titleId
|
|
1412
|
+
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
1413
|
+
d: "M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm-1.495 14.367L7.84 11.7a1.028 1.028 0 1 0-1.455 1.455l3.394 3.395a1.024 1.024 0 0 0 1.456 0l7.028-7.03a1.03 1.03 0 1 0-1.453-1.456l-6.304 6.303Z",
|
|
1414
|
+
fill: "#0DA574"
|
|
1415
|
+
}));
|
|
1416
|
+
|
|
1417
|
+
var css_248z$5 = "#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}}";
|
|
1418
|
+
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"};
|
|
1419
|
+
styleInject(css_248z$5);
|
|
1420
|
+
|
|
1421
|
+
const ToasterType = {
|
|
1422
|
+
info: 'info',
|
|
1423
|
+
warn: 'warn',
|
|
1424
|
+
error: 'error',
|
|
1425
|
+
success: 'success'
|
|
1426
|
+
};
|
|
1427
|
+
const ToasterPosition = {
|
|
1428
|
+
topLeft: 'top-left',
|
|
1429
|
+
topRight: 'top-right',
|
|
1430
|
+
topCenter: 'top-center',
|
|
1431
|
+
bottomLeft: 'bottom-left',
|
|
1432
|
+
bottomRight: 'bottom-right',
|
|
1433
|
+
bottomCenter: 'bottom-center'
|
|
1434
|
+
};
|
|
1435
|
+
const Toast = ({
|
|
1436
|
+
type,
|
|
1437
|
+
title,
|
|
1438
|
+
timer,
|
|
1439
|
+
position,
|
|
1440
|
+
removeToast,
|
|
1441
|
+
description
|
|
1442
|
+
}) => {
|
|
1443
|
+
let timeoutCall;
|
|
1444
|
+
let timeoutClick;
|
|
1445
|
+
const ref = useRef(null);
|
|
1446
|
+
const [showToaster, setShowToaster] = useState(true);
|
|
1447
|
+
const handleToasterClick = e => {
|
|
1448
|
+
e.stopPropagation();
|
|
1449
|
+
};
|
|
1450
|
+
const handleCloseToaster = ref => {
|
|
1451
|
+
setShowToaster(false);
|
|
1452
|
+
timeoutClick = setTimeout(() => {
|
|
1453
|
+
removeToast(ref, position);
|
|
1454
|
+
}, 300);
|
|
1455
|
+
clearTimeout(timeoutCall);
|
|
1456
|
+
};
|
|
1457
|
+
useEffect(() => {
|
|
1458
|
+
timeoutCall = setTimeout(() => {
|
|
1459
|
+
handleCloseToaster(ref);
|
|
1460
|
+
}, timer);
|
|
1461
|
+
return () => {
|
|
1462
|
+
setShowToaster(true);
|
|
1463
|
+
clearTimeout(timeoutCall);
|
|
1464
|
+
clearTimeout(timeoutClick);
|
|
1465
|
+
};
|
|
1466
|
+
}, []);
|
|
1467
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
1468
|
+
ref: ref,
|
|
1469
|
+
onClick: handleToasterClick,
|
|
1470
|
+
style: {
|
|
1471
|
+
position: 'absolute',
|
|
1472
|
+
display: 'flex',
|
|
1473
|
+
width: '440px',
|
|
1474
|
+
height: '83px',
|
|
1475
|
+
borderRadius: '40px',
|
|
1476
|
+
alignItems: 'center',
|
|
1477
|
+
boxSizing: 'border-box',
|
|
1478
|
+
backgroundColor: '#FFFFFF',
|
|
1479
|
+
border: '2px solid #EEEEEE',
|
|
1480
|
+
padding: '14px 29px 14px 12px',
|
|
1481
|
+
justifyContent: 'space-between'
|
|
1482
|
+
},
|
|
1483
|
+
className: `
|
|
1484
|
+
${styles$5['notify-block']}
|
|
1485
|
+
${position === 'top-left' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : position === 'top-right' ? showToaster ? styles$5['bounce-in-right'] : styles$5['bounce-out-right'] : position === 'top-center' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : position === 'bottom-left' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : position === 'bottom-right' ? showToaster ? styles$5['bounce-in-right'] : styles$5['bounce-out-right'] : position === 'bottom-center' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : ''}
|
|
1486
|
+
`
|
|
1487
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
1488
|
+
style: {
|
|
1489
|
+
display: 'flex',
|
|
1490
|
+
width: '60px',
|
|
1491
|
+
height: '60px',
|
|
1492
|
+
borderRadius: '30px',
|
|
1493
|
+
alignItems: 'center',
|
|
1494
|
+
justifyContent: 'center',
|
|
1495
|
+
backgroundColor: type === 'info' ? 'rgba(0, 35, 106, 0.05)' : type === 'warn' ? 'rgba(255, 138, 0, 0.05)' : type === 'error' ? 'rgba(238, 0, 0, 0.05)' : type === 'success' ? 'rgba(13, 165, 116, 0.05)' : ''
|
|
1496
|
+
}
|
|
1497
|
+
}, type === 'info' ? /*#__PURE__*/React__default.createElement(SvgToasterInfo, null) : type === 'warn' ? /*#__PURE__*/React__default.createElement(SvgToasterWarning, null) : type === 'error' ? /*#__PURE__*/React__default.createElement(SvgToasterError, null) : type === 'success' ? /*#__PURE__*/React__default.createElement(SvgToasterSuccess, null) : ''), /*#__PURE__*/React__default.createElement("div", {
|
|
1498
|
+
style: {
|
|
1499
|
+
height: '100%',
|
|
1500
|
+
width: 'calc(100% - 90px)'
|
|
1501
|
+
}
|
|
1502
|
+
}, /*#__PURE__*/React__default.createElement("p", {
|
|
1503
|
+
style: {
|
|
1504
|
+
fontWeight: 600,
|
|
1505
|
+
color: '#3C393E',
|
|
1506
|
+
fontSize: '16px',
|
|
1507
|
+
lineHeight: '22px',
|
|
1508
|
+
fontStyle: 'normal',
|
|
1509
|
+
fontFamily: ''
|
|
1510
|
+
}
|
|
1511
|
+
}, title ? title.length > 25 ? title.substr(0, 25) + '...' : title : ''), /*#__PURE__*/React__default.createElement("span", {
|
|
1512
|
+
style: {
|
|
1513
|
+
fontWeight: 500,
|
|
1514
|
+
color: '#3C393E',
|
|
1515
|
+
fontSize: '12px',
|
|
1516
|
+
lineHeight: '16px',
|
|
1517
|
+
fontStyle: 'normal',
|
|
1518
|
+
fontFamily: '',
|
|
1519
|
+
opacity: 0.8
|
|
1520
|
+
}
|
|
1521
|
+
}, description ? description.length > 120 ? description.substr(0, 120) + '...' : description : '')), /*#__PURE__*/React__default.createElement("div", {
|
|
1522
|
+
onClick: () => handleCloseToaster(ref),
|
|
1523
|
+
style: {
|
|
1524
|
+
width: '18px',
|
|
1525
|
+
height: '18px',
|
|
1526
|
+
cursor: 'pointer'
|
|
1527
|
+
}
|
|
1528
|
+
}, /*#__PURE__*/React__default.createElement(SvgToasterClose, null)));
|
|
1529
|
+
};
|
|
1530
|
+
Toast.propTypes = {
|
|
1531
|
+
timer: PropTypes.number,
|
|
1532
|
+
title: PropTypes.string,
|
|
1533
|
+
description: PropTypes.string,
|
|
1534
|
+
removeToast: PropTypes.func.isRequired,
|
|
1535
|
+
position: PropTypes.oneOf(Object.values(ToasterPosition)),
|
|
1536
|
+
type: PropTypes.oneOf(Object.values(ToasterType)).isRequired
|
|
1537
|
+
};
|
|
1538
|
+
Toast.defaultProps = {
|
|
1539
|
+
timer: 5000,
|
|
1540
|
+
position: 'top-right',
|
|
1541
|
+
title: 'toaster title'
|
|
1542
|
+
};
|
|
1543
|
+
|
|
1544
|
+
let toastify;
|
|
1545
|
+
let path = window.location.href;
|
|
1546
|
+
const removeToast = ref => {
|
|
1547
|
+
const node = ReactDOM.findDOMNode(ref.current);
|
|
1548
|
+
const removeElem = node.parentNode;
|
|
1549
|
+
const parent = removeElem.parentNode;
|
|
1550
|
+
parent.removeChild(removeElem);
|
|
1551
|
+
if (!parent.hasChildNodes()) {
|
|
1552
|
+
toastify.removeChild(parent);
|
|
1553
|
+
}
|
|
1554
|
+
};
|
|
1555
|
+
const createToast = ({
|
|
1556
|
+
type,
|
|
1557
|
+
timer,
|
|
1558
|
+
title,
|
|
1559
|
+
position,
|
|
1560
|
+
description
|
|
1561
|
+
}) => {
|
|
1562
|
+
let toastParentBlock;
|
|
1563
|
+
if (!toastify) {
|
|
1564
|
+
toastify = document.getElementById('toastify');
|
|
1565
|
+
}
|
|
1566
|
+
const toastBlock = document.createElement('div');
|
|
1567
|
+
toastBlock.style.position = 'relative';
|
|
1568
|
+
toastBlock.style.flexShrink = 0;
|
|
1569
|
+
toastBlock.style.width = '440px';
|
|
1570
|
+
toastBlock.style.height = '83px';
|
|
1571
|
+
toastBlock.style.marginBottom = '20px';
|
|
1572
|
+
const newElem = /*#__PURE__*/React__default.createElement(Toast, {
|
|
1573
|
+
type,
|
|
1574
|
+
timer,
|
|
1575
|
+
title,
|
|
1576
|
+
position,
|
|
1577
|
+
removeToast,
|
|
1578
|
+
description
|
|
1579
|
+
});
|
|
1580
|
+
ReactDOM.render(newElem, toastBlock);
|
|
1581
|
+
if (!document.getElementById(styles$5[position]) || document.getElementById(styles$5[position]) == null) {
|
|
1582
|
+
toastParentBlock = document.createElement('div');
|
|
1583
|
+
toastParentBlock.style.position = 'fixed';
|
|
1584
|
+
toastParentBlock.style.display = 'flex';
|
|
1585
|
+
toastParentBlock.style.zIndex = 99999;
|
|
1586
|
+
toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
|
|
1587
|
+
toastParentBlock.setAttribute('id', styles$5[position]);
|
|
1588
|
+
toastParentBlock.appendChild(toastBlock);
|
|
1589
|
+
toastify.appendChild(toastParentBlock);
|
|
1590
|
+
} else {
|
|
1591
|
+
document.getElementById(styles$5[position]).appendChild(toastBlock);
|
|
1592
|
+
}
|
|
1593
|
+
};
|
|
1594
|
+
const toast = {
|
|
1595
|
+
success: (title, props) => {
|
|
1596
|
+
const {
|
|
1597
|
+
timer,
|
|
1598
|
+
position,
|
|
1599
|
+
description
|
|
1600
|
+
} = props || {};
|
|
1601
|
+
createToast({
|
|
1602
|
+
title,
|
|
1603
|
+
type: 'success',
|
|
1604
|
+
timer: timer ? timer : 5000,
|
|
1605
|
+
position: position ? position : 'top-right',
|
|
1606
|
+
description: description ? description : ''
|
|
1607
|
+
});
|
|
1608
|
+
},
|
|
1609
|
+
info: (title, props) => {
|
|
1610
|
+
const {
|
|
1611
|
+
timer,
|
|
1612
|
+
position,
|
|
1613
|
+
description
|
|
1614
|
+
} = props || {};
|
|
1615
|
+
createToast({
|
|
1616
|
+
title,
|
|
1617
|
+
type: 'info',
|
|
1618
|
+
timer: timer ? timer : 5000,
|
|
1619
|
+
position: position ? position : 'top-right',
|
|
1620
|
+
description: description ? description : ''
|
|
1621
|
+
});
|
|
1622
|
+
},
|
|
1623
|
+
warn: (title, props) => {
|
|
1624
|
+
const {
|
|
1625
|
+
timer,
|
|
1626
|
+
position,
|
|
1627
|
+
description
|
|
1628
|
+
} = props || {};
|
|
1629
|
+
createToast({
|
|
1630
|
+
title,
|
|
1631
|
+
type: 'warn',
|
|
1632
|
+
timer: timer ? timer : 5000,
|
|
1633
|
+
position: position ? position : 'top-right',
|
|
1634
|
+
description: description ? description : ''
|
|
1635
|
+
});
|
|
1636
|
+
},
|
|
1637
|
+
error: (title, props) => {
|
|
1638
|
+
const {
|
|
1639
|
+
timer,
|
|
1640
|
+
position,
|
|
1641
|
+
description
|
|
1642
|
+
} = props || {};
|
|
1643
|
+
createToast({
|
|
1644
|
+
title,
|
|
1645
|
+
type: 'error',
|
|
1646
|
+
timer: timer ? timer : 5000,
|
|
1647
|
+
position: position ? position : 'top-right',
|
|
1648
|
+
description: description ? description : ''
|
|
1649
|
+
});
|
|
1650
|
+
}
|
|
1651
|
+
};
|
|
1652
|
+
const Toaster = () => {
|
|
1653
|
+
window.addEventListener('popstate', () => {
|
|
1654
|
+
if (path !== window.location.href) {
|
|
1655
|
+
if (!toastify) {
|
|
1656
|
+
toastify = document.getElementById('toastify');
|
|
1657
|
+
}
|
|
1658
|
+
if (toastify.hasChildNodes()) {
|
|
1659
|
+
toastify.innerHTML = '';
|
|
1660
|
+
}
|
|
1661
|
+
path = window.location.href;
|
|
1662
|
+
}
|
|
1663
|
+
});
|
|
1664
|
+
const handleToasterClick = e => {
|
|
1665
|
+
e.stopPropagation();
|
|
1666
|
+
};
|
|
1667
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
1668
|
+
onClick: handleToasterClick,
|
|
1669
|
+
id: "toastify"
|
|
1670
|
+
});
|
|
1671
|
+
};
|
|
1672
|
+
|
|
1673
|
+
var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\r\n</svg>";
|
|
1315
1674
|
|
|
1316
1675
|
var css_248z$4 = ".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}";
|
|
1317
1676
|
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"};
|
|
@@ -1782,7 +2141,10 @@ const Autocomplate = ({
|
|
|
1782
2141
|
setShowOptions(!showOptions);
|
|
1783
2142
|
},
|
|
1784
2143
|
value: inputValue,
|
|
1785
|
-
placeholder: placeHolder
|
|
2144
|
+
placeholder: placeHolder,
|
|
2145
|
+
style: {
|
|
2146
|
+
cursor: disabled ? 'not-allowed' : 'auto'
|
|
2147
|
+
}
|
|
1786
2148
|
}, props)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
|
|
1787
2149
|
className: styles.errorMessage
|
|
1788
2150
|
}, errorMessage) : null, optionList));
|
|
@@ -1806,4 +2168,4 @@ Autocomplate.defaultProps = {
|
|
|
1806
2168
|
required: false
|
|
1807
2169
|
};
|
|
1808
2170
|
|
|
1809
|
-
export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Tooltip, Typography, TypographyType };
|
|
2171
|
+
export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Toaster, Tooltip, Typography, TypographyType, toast };
|