@xaypay/tui 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +535 -56
- package/dist/index.js +525 -37
- package/package.json +1 -1
- package/src/index.js +5 -5
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var React = require('react');
|
|
5
|
+
var React$1 = require('react');
|
|
6
6
|
var PropTypes = require('prop-types');
|
|
7
7
|
var classnames = require('classnames');
|
|
8
8
|
var styled = require('styled-components');
|
|
@@ -27,8 +27,8 @@ function _interopNamespace(e) {
|
|
|
27
27
|
return Object.freeze(n);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
31
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
30
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
|
|
31
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React$1);
|
|
32
32
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
33
33
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
34
34
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
@@ -77,9 +77,9 @@ function styleInject(css, ref) {
|
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
var css_248z$
|
|
81
|
-
var styles$
|
|
82
|
-
styleInject(css_248z$
|
|
80
|
+
var css_248z$9 = ".button-module_btn__ffRtT{border:none;border-radius:6px;box-sizing:border-box;cursor:pointer;font-size:16px;line-height:20px;min-height:46px;outline:none;overflow:hidden;padding:12px 20px;text-transform:capitalize;transition:background-color .24s,color .24s}.button-module_btn__ffRtT.button-module_full-size__vmV2E{width:100%}.button-module_btn__ffRtT.button-module_content-size__f7JSE{width:auto}.button-module_btn__ffRtT.button-module_type-filled__BiyVo{background-color:#00236a;color:#fff}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:hover{background-color:#001745}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:disabled{background-color:#eee;color:#3c393e;pointer-events:none}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V{background-color:#fff;box-shadow:inset 0 0 0 2px #00236a}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:hover{background-color:#001745;color:#fff}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:disabled{box-shadow:inset 0 0 0 2px #eee;color:#3c393e;pointer-events:none}";
|
|
81
|
+
var styles$7 = {"btn":"button-module_btn__ffRtT","full-size":"button-module_full-size__vmV2E","content-size":"button-module_content-size__f7JSE","size-default":"button-module_size-default__ydEgl","type-filled":"button-module_type-filled__BiyVo","with-icon":"button-module_with-icon__mfKU-","type-outline":"button-module_type-outline__RpZ2V"};
|
|
82
|
+
styleInject(css_248z$9);
|
|
83
83
|
|
|
84
84
|
/**
|
|
85
85
|
* Primary UI component for user interaction
|
|
@@ -115,9 +115,9 @@ const Button = ({
|
|
|
115
115
|
outline,
|
|
116
116
|
...props
|
|
117
117
|
}) => {
|
|
118
|
-
console.log(styles$
|
|
118
|
+
console.log(styles$7);
|
|
119
119
|
console.log(backgroundColor);
|
|
120
|
-
const classProps = classnames__default["default"](styles$
|
|
120
|
+
const classProps = classnames__default["default"](styles$7.btn, styles$7[theme], styles$7[size], outline ? styles$7['type-outline'] : styles$7['type-filled'], className); // className='btn type-outline size-default'
|
|
121
121
|
|
|
122
122
|
console.log(classProps);
|
|
123
123
|
return /*#__PURE__*/React__default["default"].createElement("button", _extends({
|
|
@@ -169,8 +169,8 @@ Button.defaultProps = {
|
|
|
169
169
|
outline: false
|
|
170
170
|
};
|
|
171
171
|
|
|
172
|
-
var css_248z$
|
|
173
|
-
styleInject(css_248z$
|
|
172
|
+
var css_248z$8 = "h1{font-size:70px;line-height:70px}h1,h2{font-weight:400;text-transform:uppercase}h2{font-size:50px;line-height:50px}h3{font-size:38px;font-weight:400;line-height:38px}h3,h4{text-transform:uppercase}h4{font-size:24px;font-weight:600;line-height:24px}h5{font-size:20px;font-size:16px;line-height:20px;line-height:22px;text-transform:uppercase}h5,p{font-weight:600;text-transform:capitalize}p{font-size:14px;line-height:20px}span{font-size:12px;font-weight:500;line-height:16px;text-transform:capitalize}i{font-family:icomoon;font-style:inherit}";
|
|
173
|
+
styleInject(css_248z$8);
|
|
174
174
|
|
|
175
175
|
const TypographyType = {
|
|
176
176
|
h1: 'h1',
|
|
@@ -219,9 +219,9 @@ Typography.defaultProps = {
|
|
|
219
219
|
variant: 'h1'
|
|
220
220
|
};
|
|
221
221
|
|
|
222
|
-
var css_248z$
|
|
223
|
-
var styles$
|
|
224
|
-
styleInject(css_248z$
|
|
222
|
+
var css_248z$7 = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);max-height:0;max-width:400px;overflow:hidden;position:relative;top:6px}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}";
|
|
223
|
+
var styles$6 = {"autocomplate-content":"autocomplate-module_autocomplate-content__UbIUT","autocomplate-content-top":"autocomplate-module_autocomplate-content-top__FVgCp","active":"autocomplate-module_active__40fdV","autocomplate-content-bottom":"autocomplate-module_autocomplate-content-bottom__yk0zP","select-show":"autocomplate-module_select-show__7Uap4","autocomplate-content-bottom-inner":"autocomplate-module_autocomplate-content-bottom-inner__rF5IF","autocomplate-content-bottom-row":"autocomplate-module_autocomplate-content-bottom-row__dRsZa","no-option":"autocomplate-module_no-option__xv0-E","option-active":"autocomplate-module_option-active__WuH4I"};
|
|
224
|
+
styleInject(css_248z$7);
|
|
225
225
|
|
|
226
226
|
const Autocomplate = ({
|
|
227
227
|
className,
|
|
@@ -234,11 +234,11 @@ const Autocomplate = ({
|
|
|
234
234
|
searchCount,
|
|
235
235
|
...props
|
|
236
236
|
}) => {
|
|
237
|
-
classnames__default["default"](styles$
|
|
238
|
-
const [inputValue, setInputValue] = React.useState("");
|
|
239
|
-
const [activeOption, setActiveOption] = React.useState(0);
|
|
240
|
-
const [filteredOptions, setFilteredOptions] = React.useState([]);
|
|
241
|
-
const [showOptions, setShowOptions] = React.useState(false);
|
|
237
|
+
classnames__default["default"](styles$6.searchBox, className);
|
|
238
|
+
const [inputValue, setInputValue] = React$1.useState("");
|
|
239
|
+
const [activeOption, setActiveOption] = React$1.useState(0);
|
|
240
|
+
const [filteredOptions, setFilteredOptions] = React$1.useState([]);
|
|
241
|
+
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
242
242
|
const parseOptionsData = jsonOptionsData.length !== 0 ? JSON.parse(jsonOptionsData).sort() : [];
|
|
243
243
|
|
|
244
244
|
const handleChange = e => {
|
|
@@ -262,9 +262,9 @@ const Autocomplate = ({
|
|
|
262
262
|
if (showOptions && inputValue) {
|
|
263
263
|
if (filteredOptions.length && inputValue.length >= searchCount) {
|
|
264
264
|
optionList = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
265
|
-
className: styles$
|
|
265
|
+
className: styles$6['autocomplate-content-bottom']
|
|
266
266
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
267
|
-
className: styles$
|
|
267
|
+
className: styles$6['autocomplate-content-bottom-inner']
|
|
268
268
|
}, filteredOptions.map((optionName, index) => {
|
|
269
269
|
let className;
|
|
270
270
|
|
|
@@ -273,33 +273,33 @@ const Autocomplate = ({
|
|
|
273
273
|
}
|
|
274
274
|
|
|
275
275
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
276
|
-
className: styles$
|
|
276
|
+
className: styles$6[className],
|
|
277
277
|
key: optionName,
|
|
278
278
|
onClick: handleClick
|
|
279
279
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
280
|
-
className: styles$
|
|
280
|
+
className: styles$6['autocomplate-content-bottom-row']
|
|
281
281
|
}, optionName));
|
|
282
282
|
})));
|
|
283
283
|
} else {
|
|
284
284
|
optionList = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
285
|
-
className: styles$
|
|
285
|
+
className: styles$6['autocomplate-content-bottom']
|
|
286
286
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
287
|
-
className: styles$
|
|
287
|
+
className: styles$6['autocomplate-content-bottom-inner']
|
|
288
288
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
289
|
-
className: styles$
|
|
289
|
+
className: styles$6['autocomplate-content-bottom-row']
|
|
290
290
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
291
|
-
className: styles$
|
|
291
|
+
className: styles$6['no-option']
|
|
292
292
|
}, "No Option!"))));
|
|
293
293
|
}
|
|
294
294
|
}
|
|
295
295
|
|
|
296
296
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
|
|
297
|
-
className: styles$
|
|
297
|
+
className: styles$6.labelInput
|
|
298
298
|
}, label) : "", /*#__PURE__*/React__default["default"].createElement("div", {
|
|
299
|
-
className: styles$
|
|
299
|
+
className: styles$6['autocomplate-content']
|
|
300
300
|
}, /*#__PURE__*/React__default["default"].createElement("input", _extends({
|
|
301
301
|
type: "text",
|
|
302
|
-
className: styles$
|
|
302
|
+
className: styles$6['autocomplate-content-top'],
|
|
303
303
|
required: required,
|
|
304
304
|
disabled: disabled,
|
|
305
305
|
onChange: handleChange,
|
|
@@ -322,9 +322,9 @@ Autocomplate.defaultProps = {
|
|
|
322
322
|
searchCount: 2
|
|
323
323
|
};
|
|
324
324
|
|
|
325
|
-
var css_248z = ".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;display:inline-block;height:14px;left:0;margin-right:4px;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}";
|
|
326
|
-
var styles = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
|
|
327
|
-
styleInject(css_248z);
|
|
325
|
+
var css_248z$6 = ".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;display:inline-block;height:14px;left:0;margin-right:4px;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}";
|
|
326
|
+
var styles$5 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
|
|
327
|
+
styleInject(css_248z$6);
|
|
328
328
|
|
|
329
329
|
const Checkbox = ({
|
|
330
330
|
disabled,
|
|
@@ -338,9 +338,9 @@ const Checkbox = ({
|
|
|
338
338
|
keyNames,
|
|
339
339
|
...props
|
|
340
340
|
}) => {
|
|
341
|
-
const classProps = classnames__default["default"](styles.checkbox, className);
|
|
341
|
+
const classProps = classnames__default["default"](styles$5.checkbox, className);
|
|
342
342
|
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
343
|
-
const [data, setData] = React.useState(parseData);
|
|
343
|
+
const [data, setData] = React$1.useState(parseData);
|
|
344
344
|
|
|
345
345
|
const handleChange = e => {
|
|
346
346
|
if (e.target.checked) {
|
|
@@ -362,7 +362,7 @@ const Checkbox = ({
|
|
|
362
362
|
|
|
363
363
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, data.map(element => {
|
|
364
364
|
return /*#__PURE__*/React__default["default"].createElement("label", {
|
|
365
|
-
className: styles["checkbox-wrap"],
|
|
365
|
+
className: styles$5["checkbox-wrap"],
|
|
366
366
|
key: element.value
|
|
367
367
|
}, /*#__PURE__*/React__default["default"].createElement("input", _extends({
|
|
368
368
|
type: "checkbox",
|
|
@@ -373,9 +373,9 @@ const Checkbox = ({
|
|
|
373
373
|
name: name ? name : element.name,
|
|
374
374
|
onChange: handleChange
|
|
375
375
|
}, props)), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
376
|
-
className: styles["checkmark"]
|
|
376
|
+
className: styles$5["checkmark"]
|
|
377
377
|
}), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
378
|
-
className: styles.labelRadio
|
|
378
|
+
className: styles$5.labelRadio
|
|
379
379
|
}, label ? label : element.label) : "");
|
|
380
380
|
}));
|
|
381
381
|
};
|
|
@@ -534,16 +534,504 @@ const SvgStarOutline = ({
|
|
|
534
534
|
d: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
535
535
|
}));
|
|
536
536
|
|
|
537
|
+
var css_248z$5 = ".input-module_input-wrap__NunrE{position:relative}.input-module_input__-ipHD{border:none;border-radius:6px;box-shadow:inset 0 0 0 2px #d1d1d1;box-sizing:border-box;color:#3c393e;cursor:pointer;font-size:16px;line-height:20px;outline:none;overflow:hidden;text-transform:capitalize;transition:background-color .24s,color .24s}.input-module_input__-ipHD.input-module_full-size__38YG7{width:100%}.input-module_input__-ipHD.input-module_content-size__rZ5EA{width:auto}.input-module_input__-ipHD.input-module_size-medium__frTDq{min-height:46px;padding:12px 15px}.input-module_input__-ipHD:hover{box-shadow:inset 0 0 0 2px #3c393e}.input-module_input__-ipHD:active{box-shadow:inset 0 0 0 2px #00236a}.input-module_inputErrorMessages__hx490{animation:input-module_error-message-show__OrVSo .24s forwards;bottom:0;color:#e00;font-size:14px;left:0;line-height:19px;position:absolute;transform:scale3d(0,0,0);z-index:1}.input-module_labelInput__sUMKQ{color:#000}.input-module_input__-ipHD.input-module_state-disabled__402v0{background-color:#fbfbfb;pointer-events:none}.input-module_input__-ipHD.input-module_error-message__7NphF{box-shadow:inset 0 0 0 2px #e00}@keyframes input-module_error-message-show__OrVSo{to{bottom:-20px;transform:scaleX(1)}}";
|
|
538
|
+
var styles$4 = {"input-wrap":"input-module_input-wrap__NunrE","input":"input-module_input__-ipHD","full-size":"input-module_full-size__38YG7","content-size":"input-module_content-size__rZ5EA","size-medium":"input-module_size-medium__frTDq","with-icon":"input-module_with-icon__w3jTW","inputErrorMessages":"input-module_inputErrorMessages__hx490","error-message-show":"input-module_error-message-show__OrVSo","labelInput":"input-module_labelInput__sUMKQ","state-disabled":"input-module_state-disabled__402v0","error-message":"input-module_error-message__7NphF"};
|
|
539
|
+
styleInject(css_248z$5);
|
|
540
|
+
|
|
541
|
+
const InputTypes = {
|
|
542
|
+
TEXT: "text",
|
|
543
|
+
PASSWORD: "password",
|
|
544
|
+
EMAIL: "email",
|
|
545
|
+
NUMBER: "number",
|
|
546
|
+
TEL: "tel"
|
|
547
|
+
};
|
|
548
|
+
const InputSizes = {
|
|
549
|
+
SMALL: "size-small",
|
|
550
|
+
MEDIUM: "size-medium",
|
|
551
|
+
LARGE: "size-large"
|
|
552
|
+
};
|
|
553
|
+
const Input = ({
|
|
554
|
+
size,
|
|
555
|
+
color,
|
|
556
|
+
className,
|
|
557
|
+
label,
|
|
558
|
+
regexp,
|
|
559
|
+
regexpError,
|
|
560
|
+
errorMesage,
|
|
561
|
+
required,
|
|
562
|
+
disabled,
|
|
563
|
+
type,
|
|
564
|
+
...props
|
|
565
|
+
}) => {
|
|
566
|
+
const [inputValue, setInputValue] = React$1.useState("");
|
|
567
|
+
|
|
568
|
+
const handleChange = event => {
|
|
569
|
+
setInputValue(event.target.value);
|
|
570
|
+
};
|
|
571
|
+
|
|
572
|
+
let eMessage = "";
|
|
573
|
+
|
|
574
|
+
if (errorMesage) {
|
|
575
|
+
eMessage = errorMesage;
|
|
576
|
+
} else if (regexp) {
|
|
577
|
+
const regex = new RegExp(regexp);
|
|
578
|
+
eMessage = regex.test(inputValue) ? "" : regexpError;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
const classProps = classnames__default["default"](styles$4.input, styles$4[size], eMessage != '' ? styles$4['error-message'] : "", className);
|
|
582
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
583
|
+
className: styles$4['input-wrap']
|
|
584
|
+
}, label ? /*#__PURE__*/React__default["default"].createElement("label", {
|
|
585
|
+
className: styles$4.labelInput
|
|
586
|
+
}, label) : "", /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
|
|
587
|
+
type: type,
|
|
588
|
+
className: classProps,
|
|
589
|
+
style: color && {
|
|
590
|
+
color
|
|
591
|
+
},
|
|
592
|
+
disabled: disabled ? disabled : "",
|
|
593
|
+
onChange: handleChange,
|
|
594
|
+
value: inputValue
|
|
595
|
+
})), eMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
596
|
+
className: styles$4.inputErrorMessages
|
|
597
|
+
}, eMessage) : "");
|
|
598
|
+
};
|
|
599
|
+
Input.propTypes = {
|
|
600
|
+
type: PropTypes__default["default"].oneOf(Object.values(InputTypes)),
|
|
601
|
+
size: PropTypes__default["default"].oneOf(Object.values(InputSizes)),
|
|
602
|
+
color: PropTypes__default["default"].string,
|
|
603
|
+
className: PropTypes__default["default"].string,
|
|
604
|
+
onChange: PropTypes__default["default"].func,
|
|
605
|
+
required: PropTypes__default["default"].bool,
|
|
606
|
+
errorMesage: PropTypes__default["default"].string,
|
|
607
|
+
regexp: PropTypes__default["default"].string,
|
|
608
|
+
regexpError: PropTypes__default["default"].string,
|
|
609
|
+
label: PropTypes__default["default"].string.isRequired,
|
|
610
|
+
disabled: PropTypes__default["default"].bool
|
|
611
|
+
};
|
|
612
|
+
Input.defaultProps = {
|
|
613
|
+
label: "",
|
|
614
|
+
color: null,
|
|
615
|
+
size: InputSizes.MEDIUM,
|
|
616
|
+
onChange: undefined,
|
|
617
|
+
required: true,
|
|
618
|
+
errorMesage: "",
|
|
619
|
+
type: "text"
|
|
620
|
+
};
|
|
621
|
+
|
|
622
|
+
var css_248z$4 = ".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}.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:16px;line-height:22px;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}";
|
|
623
|
+
var styles$3 = {"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"};
|
|
624
|
+
styleInject(css_248z$4);
|
|
625
|
+
|
|
626
|
+
const Dots = "...";
|
|
627
|
+
|
|
628
|
+
const range = (start, end) => {
|
|
629
|
+
const length = end - start + 1;
|
|
630
|
+
return Array.from({
|
|
631
|
+
length
|
|
632
|
+
}, (_, idx) => idx + start);
|
|
633
|
+
};
|
|
634
|
+
|
|
635
|
+
const PaginationRange = ({
|
|
636
|
+
currentTotalCount,
|
|
637
|
+
offset,
|
|
638
|
+
siblingCountNumber,
|
|
639
|
+
currentPageNumber
|
|
640
|
+
}) => {
|
|
641
|
+
const paginationRange = React$1.useMemo(() => {
|
|
642
|
+
const totalPageCount = Math.ceil(currentTotalCount / offset); //currentPage + 2*Dots + start + end = 5
|
|
643
|
+
|
|
644
|
+
const totalPageNumber = siblingCountNumber + 5;
|
|
645
|
+
|
|
646
|
+
if (totalPageNumber >= totalPageCount) {
|
|
647
|
+
return range(1, totalPageCount);
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
const rightSiblingIndex = Math.min(currentPageNumber + siblingCountNumber, totalPageCount);
|
|
651
|
+
const leftSiblingIndex = Math.max(currentPageNumber - siblingCountNumber, 1);
|
|
652
|
+
const shouldShowLeftDots = leftSiblingIndex > 2;
|
|
653
|
+
const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
|
|
654
|
+
const firstPageIndex = 1;
|
|
655
|
+
const lastPageIndex = totalPageCount;
|
|
656
|
+
|
|
657
|
+
if (!shouldShowLeftDots && shouldShowRightDots) {
|
|
658
|
+
let leftItemCount = currentPageNumber === 4 && lastPageIndex > 7 ? 4 + siblingCountNumber : 3 + siblingCountNumber;
|
|
659
|
+
let leftRange = range(1, leftItemCount);
|
|
660
|
+
return [...leftRange, Dots, totalPageCount];
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
if (shouldShowLeftDots && !shouldShowRightDots) {
|
|
664
|
+
let rightItemCount = currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
|
|
665
|
+
let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
|
|
666
|
+
return [firstPageIndex, Dots, ...rightRange];
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
if (shouldShowLeftDots && shouldShowRightDots) {
|
|
670
|
+
let middleRange = range(leftSiblingIndex, rightSiblingIndex);
|
|
671
|
+
return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
|
|
672
|
+
}
|
|
673
|
+
}, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
|
|
674
|
+
return paginationRange;
|
|
675
|
+
};
|
|
676
|
+
|
|
677
|
+
var css_248z$3 = "@font-face{font-display:block;font-family:icomoon;font-style:normal;font-weight:400;src:url(fonts/icomoon.eot?b29ky3);src:url(fonts/icomoon.eot?b29ky3#iefix) format(\"embedded-opentype\"),url(fonts/icomoon.ttf?b29ky3) format(\"truetype\"),url(fonts/icomoon.woff?b29ky3) format(\"woff\"),url(fonts/icomoon.svg?b29ky3#icomoon) format(\"svg\")}[class*=\" icon-\"],[class^=icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:icomoon!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-close:before{content:\"\\e907\"}.icon-arrow-up:before{content:\"\\e905\"}.icon-arrow-down:before{content:\"\\e906\"}.icon-arrow:before{content:\"\\e900\"}.icon-arrow-jump-next:before{content:\"\\e901\"}.icon-arrow-jump-back:before{content:\"\\e902\"}.icon-text:before{content:\"\\e903\"}.icon-arrow-back:before{content:\"\\e904\"}";
|
|
678
|
+
styleInject(css_248z$3);
|
|
679
|
+
|
|
680
|
+
/**
|
|
681
|
+
* Created by aleksanyan.tigran on 10/7/2022.
|
|
682
|
+
*/
|
|
683
|
+
|
|
684
|
+
const Icon = props => /*#__PURE__*/React.createElement("i", {
|
|
685
|
+
className: css_248z$3[props.className]
|
|
686
|
+
});
|
|
687
|
+
|
|
688
|
+
const Pagination = ({
|
|
689
|
+
onChange,
|
|
690
|
+
totalCount,
|
|
691
|
+
siblingCount,
|
|
692
|
+
currentPage,
|
|
693
|
+
offset,
|
|
694
|
+
className
|
|
695
|
+
}) => {
|
|
696
|
+
const [siblingCountNumber, setSibilingCountNumber] = React$1.useState(2);
|
|
697
|
+
const [currentPageNumber, setCurrentPage] = React$1.useState(1);
|
|
698
|
+
const [currentTotalCount, setcurrentTotalCount] = React$1.useState(10);
|
|
699
|
+
React$1.useEffect(() => {
|
|
700
|
+
setcurrentTotalCount(totalCount);
|
|
701
|
+
}, [totalCount]);
|
|
702
|
+
React$1.useEffect(() => {
|
|
703
|
+
setSibilingCountNumber(siblingCount);
|
|
704
|
+
}, [siblingCount]);
|
|
705
|
+
React$1.useEffect(() => {
|
|
706
|
+
setCurrentPage(currentPage);
|
|
707
|
+
}, [currentPage]);
|
|
708
|
+
|
|
709
|
+
const onPageChange = page => {
|
|
710
|
+
setCurrentPage(page);
|
|
711
|
+
};
|
|
712
|
+
|
|
713
|
+
onChange(currentPageNumber);
|
|
714
|
+
const paginationRange = PaginationRange({
|
|
715
|
+
currentPageNumber,
|
|
716
|
+
currentTotalCount,
|
|
717
|
+
siblingCountNumber,
|
|
718
|
+
offset
|
|
719
|
+
});
|
|
720
|
+
|
|
721
|
+
if (currentPageNumber === 0 || paginationRange.length < 2) {
|
|
722
|
+
return null;
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
const classProps = classnames__default["default"](styles$3.list, className ? className : styles$3["pagination-bar"]);
|
|
726
|
+
|
|
727
|
+
const onNext = () => {
|
|
728
|
+
onPageChange(currentPageNumber + 1);
|
|
729
|
+
};
|
|
730
|
+
|
|
731
|
+
const onPrevious = () => {
|
|
732
|
+
onPageChange(currentPageNumber - 1);
|
|
733
|
+
};
|
|
734
|
+
|
|
735
|
+
const onNextFive = () => {
|
|
736
|
+
currentPageNumber !== lastPage - 4 ? onPageChange(currentPageNumber + 5) : onPageChange(currentPageNumber + 4);
|
|
737
|
+
};
|
|
738
|
+
|
|
739
|
+
const onPreviousFive = e => {
|
|
740
|
+
currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
|
|
741
|
+
};
|
|
742
|
+
|
|
743
|
+
let lastPage = paginationRange[paginationRange.length - 1];
|
|
744
|
+
return /*#__PURE__*/React$1.React.createElement("ul", {
|
|
745
|
+
className: classProps
|
|
746
|
+
}, /*#__PURE__*/React$1.React.createElement("button", {
|
|
747
|
+
className: styles$3["pagination-btn"],
|
|
748
|
+
onClick: onPrevious,
|
|
749
|
+
disabled: currentPage === 1 ? true : false
|
|
750
|
+
}, /*#__PURE__*/React$1.React.createElement(Icon, {
|
|
751
|
+
className: "icon-arrow-back"
|
|
752
|
+
})), paginationRange.map((pageNumber, id) => {
|
|
753
|
+
if (pageNumber === Dots) {
|
|
754
|
+
let currentPageIndex = paginationRange.indexOf(currentPageNumber);
|
|
755
|
+
return /*#__PURE__*/React$1.React.createElement("li", {
|
|
756
|
+
key: id,
|
|
757
|
+
className: classnames__default["default"](styles$3['pagination-jump-next'], styles$3.listItem),
|
|
758
|
+
onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
|
|
759
|
+
disabled: currentPageIndex === 0 ? true : false
|
|
760
|
+
}, /*#__PURE__*/React$1.React.createElement("span", {
|
|
761
|
+
className: styles$3['pagination-jump-next-txt']
|
|
762
|
+
}, "..."), /*#__PURE__*/React$1.React.createElement("span", {
|
|
763
|
+
className: styles$3['pagination-jump-next-arrow']
|
|
764
|
+
}, /*#__PURE__*/React$1.React.createElement(Icon, {
|
|
765
|
+
className: "icon-arrow-jump-next"
|
|
766
|
+
})));
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
return /*#__PURE__*/React$1.React.createElement("li", {
|
|
770
|
+
onClick: () => onPageChange(pageNumber),
|
|
771
|
+
key: id,
|
|
772
|
+
className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$3.selected : styles$3.listItem}`, styles$3['pagination-item'])
|
|
773
|
+
}, pageNumber);
|
|
774
|
+
}), /*#__PURE__*/React$1.React.createElement("button", {
|
|
775
|
+
onClick: onNext,
|
|
776
|
+
className: styles$3["pagination-btn"],
|
|
777
|
+
disabled: currentPageNumber === lastPage ? true : false
|
|
778
|
+
}, /*#__PURE__*/React$1.React.createElement(Icon, {
|
|
779
|
+
className: "icon-arrow"
|
|
780
|
+
})));
|
|
781
|
+
};
|
|
782
|
+
Pagination.propTypes = {
|
|
783
|
+
offset: PropTypes__default["default"].number,
|
|
784
|
+
totalCount: PropTypes__default["default"].number,
|
|
785
|
+
className: PropTypes__default["default"].string,
|
|
786
|
+
siblingCount: PropTypes__default["default"].number,
|
|
787
|
+
currentPage: PropTypes__default["default"].number
|
|
788
|
+
};
|
|
789
|
+
Pagination.defaultProps = {
|
|
790
|
+
offset: 2,
|
|
791
|
+
siblingCount: 2
|
|
792
|
+
};
|
|
793
|
+
|
|
794
|
+
var css_248z$2 = ".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}";
|
|
795
|
+
var styles$2 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
|
|
796
|
+
styleInject(css_248z$2);
|
|
797
|
+
|
|
798
|
+
const Radio = ({
|
|
799
|
+
disabled,
|
|
800
|
+
defaultChecked,
|
|
801
|
+
required,
|
|
802
|
+
className,
|
|
803
|
+
name,
|
|
804
|
+
value,
|
|
805
|
+
jsonData,
|
|
806
|
+
label,
|
|
807
|
+
keyNames,
|
|
808
|
+
...props
|
|
809
|
+
}) => {
|
|
810
|
+
const classProps = classnames__default["default"](styles$2.checkbox, className);
|
|
811
|
+
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
812
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, parseData.map((element, id) => {
|
|
813
|
+
return /*#__PURE__*/React__default["default"].createElement("label", {
|
|
814
|
+
className: styles$2["radio-wrap"],
|
|
815
|
+
key: element.value
|
|
816
|
+
}, /*#__PURE__*/React__default["default"].createElement("input", _extends({
|
|
817
|
+
type: "radio",
|
|
818
|
+
className: classProps,
|
|
819
|
+
disabled: disabled,
|
|
820
|
+
required: required,
|
|
821
|
+
defaultChecked: id === 0 ? defaultChecked : "",
|
|
822
|
+
value: value ? value : element.value,
|
|
823
|
+
name: name ? name : element.name
|
|
824
|
+
}, props)), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
825
|
+
className: styles$2["radio-checkmark"]
|
|
826
|
+
}), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
827
|
+
className: styles$2.labelRadio
|
|
828
|
+
}, label ? label : element.label) : "");
|
|
829
|
+
}));
|
|
830
|
+
};
|
|
831
|
+
Radio.propTypes = {
|
|
832
|
+
className: PropTypes__default["default"].string,
|
|
833
|
+
onChange: PropTypes__default["default"].func,
|
|
834
|
+
required: PropTypes__default["default"].bool,
|
|
835
|
+
defaultChecked: PropTypes__default["default"].bool,
|
|
836
|
+
disabled: PropTypes__default["default"].bool,
|
|
837
|
+
name: PropTypes__default["default"].string,
|
|
838
|
+
value: PropTypes__default["default"].string,
|
|
839
|
+
jsonData: PropTypes__default["default"].string,
|
|
840
|
+
label: PropTypes__default["default"].string,
|
|
841
|
+
keyNames: PropTypes__default["default"].object
|
|
842
|
+
};
|
|
843
|
+
Radio.defaultProps = {
|
|
844
|
+
onChange: undefined,
|
|
845
|
+
jsonData: '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]'
|
|
846
|
+
};
|
|
847
|
+
|
|
848
|
+
var css_248z$1 = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{margin:0;padding:0;position:relative;width:40%}.captcha-module_slider__KLYny{-webkit-appearance:none;background-color:hsla(0,0%,100%,.575);border:.1px solid hsla(0,0%,59%,.432);height:7px;outline:none;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:48px;position:relative;width:48px;z-index:3}.captcha-module_selector__JFhb4{bottom:-20px;height:48px;left:50%;position:absolute;width:48px;z-index:2}.captcha-module_selectBtn__GP1iH{background-image:url(https://i.ibb.co/rQZNNzN/blue.png);background-position:50%;background-size:cover;border-radius:50%;bottom:40px;height:40px;position:absolute;right:30px;width:40px}.captcha-module_progressBar__mhdtM{background:#7070ee;bottom:38px;height:7px;left:0;margin:0;padding:0;position:absolute;width:50%}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
|
|
849
|
+
var styles$1 = {"main":"captcha-module_main__Ys3EH","slider":"captcha-module_slider__KLYny","selector":"captcha-module_selector__JFhb4","selectBtn":"captcha-module_selectBtn__GP1iH","progressBar":"captcha-module_progressBar__mhdtM","range":"captcha-module_range__k24I2"};
|
|
850
|
+
styleInject(css_248z$1);
|
|
851
|
+
|
|
852
|
+
const Captcha = ({
|
|
853
|
+
onclick,
|
|
854
|
+
rangeCount
|
|
855
|
+
}) => {
|
|
856
|
+
const [data, setData] = React$1.useState("");
|
|
857
|
+
const [right, setRight] = React$1.useState(false);
|
|
858
|
+
let range = rangeCount <= 100 ? rangeCount : 0;
|
|
859
|
+
let rangeElement = document.getElementsByClassName(styles$1.range);
|
|
860
|
+
React$1.useEffect(() => {
|
|
861
|
+
for (let element of rangeElement) {
|
|
862
|
+
element.style.marginLeft = `${range - 3}%`;
|
|
863
|
+
element.style.color = data;
|
|
864
|
+
}
|
|
865
|
+
}, [range, data]);
|
|
866
|
+
|
|
867
|
+
function sliderInput(event) {
|
|
868
|
+
setData(rangeCount == event.target.value ? 'green' : 'indianred');
|
|
869
|
+
let selector = document.getElementsByClassName(styles$1.selector);
|
|
870
|
+
let selectBtn = document.getElementsByClassName(styles$1.selectBtn);
|
|
871
|
+
let progressBar = document.getElementsByClassName(styles$1.progressBar);
|
|
872
|
+
selector[0].style.left = event.target.value + '%';
|
|
873
|
+
progressBar[0].style.width = event.target.value + '%';
|
|
874
|
+
|
|
875
|
+
if (rangeCount == event.target.value) {
|
|
876
|
+
selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/b1HDRtd/green.png')";
|
|
877
|
+
} else {
|
|
878
|
+
selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/QvXjjLM/red.png')";
|
|
879
|
+
}
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
function sliderChange(e) {
|
|
883
|
+
setRight(rangeCount == e.target.value ? true : false);
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
887
|
+
className: styles$1.main
|
|
888
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
889
|
+
className: styles$1.range
|
|
890
|
+
}, "\u25BC"), /*#__PURE__*/React__default["default"].createElement("input", {
|
|
891
|
+
type: "range",
|
|
892
|
+
className: styles$1.slider,
|
|
893
|
+
onClick: right ? onclick : null,
|
|
894
|
+
onInput: sliderInput,
|
|
895
|
+
onMouseUp: sliderChange
|
|
896
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
897
|
+
className: styles$1.selector
|
|
898
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
899
|
+
className: styles$1.selectBtn
|
|
900
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
901
|
+
className: styles$1.progressBar
|
|
902
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
903
|
+
className: styles$1.range
|
|
904
|
+
}, "\u25B2")));
|
|
905
|
+
};
|
|
906
|
+
Captcha.propTypes = {
|
|
907
|
+
onclick: PropTypes__default["default"].func,
|
|
908
|
+
className: PropTypes__default["default"].string,
|
|
909
|
+
rangeCount: PropTypes__default["default"].number
|
|
910
|
+
};
|
|
911
|
+
Captcha.defaultProps = {
|
|
912
|
+
onclick: undefined
|
|
913
|
+
};
|
|
914
|
+
|
|
915
|
+
var css_248z = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:capitalize}.select-module_select-content__GCMDX{display:flex;flex-direction:column}.select-module_select-content-top__Aw-fB{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);max-height:0;max-width:400px;overflow:hidden;position:relative;top:6px}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.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>i{color:#3c393e;font-size:8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}";
|
|
916
|
+
var styles = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","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-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
|
|
917
|
+
styleInject(css_248z);
|
|
918
|
+
|
|
919
|
+
const SelectTheme = {
|
|
920
|
+
DEFAULT: 'select-default',
|
|
921
|
+
PRIMARY: 'select-primary',
|
|
922
|
+
SUCCESS: 'select-success',
|
|
923
|
+
INFO: 'select-info',
|
|
924
|
+
WARNING: 'select-warning',
|
|
925
|
+
DANGER: 'select-danger',
|
|
926
|
+
LINK: 'select-link'
|
|
927
|
+
};
|
|
928
|
+
const SelectSize = {
|
|
929
|
+
SMALL: 'small',
|
|
930
|
+
MEDIUM: 'medium',
|
|
931
|
+
LARGE: 'large'
|
|
932
|
+
};
|
|
933
|
+
const Select = ({
|
|
934
|
+
theme,
|
|
935
|
+
size,
|
|
936
|
+
className,
|
|
937
|
+
disabled,
|
|
938
|
+
label,
|
|
939
|
+
jsonData,
|
|
940
|
+
eMessage,
|
|
941
|
+
required,
|
|
942
|
+
defaultOption,
|
|
943
|
+
onChange,
|
|
944
|
+
selected
|
|
945
|
+
}) => {
|
|
946
|
+
const options = jsonData.length ? JSON.parse(jsonData) : [];
|
|
947
|
+
let [opened, setOpened] = React$1.useState(false);
|
|
948
|
+
let [newSelected, setNewSelected] = React$1.useState(selected);
|
|
949
|
+
classnames__default["default"](styles[theme], styles[size], {
|
|
950
|
+
[styles.disabled]: disabled,
|
|
951
|
+
[styles.required]: required
|
|
952
|
+
}, className);
|
|
953
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
|
|
954
|
+
className: styles['select-title']
|
|
955
|
+
}, label) : "", /*#__PURE__*/React__default["default"].createElement("div", {
|
|
956
|
+
className: styles['select-wrap']
|
|
957
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
958
|
+
className: styles['select-content'],
|
|
959
|
+
id: styles.selector
|
|
960
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
961
|
+
className: styles['select-content-top'],
|
|
962
|
+
onClick: () => {
|
|
963
|
+
setOpened(!opened);
|
|
964
|
+
}
|
|
965
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
966
|
+
className: styles['select-content-top-text']
|
|
967
|
+
}, newSelected?.name || defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
968
|
+
className: styles['select-content-top-icon']
|
|
969
|
+
}, /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
970
|
+
className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
|
|
971
|
+
}))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
972
|
+
className: styles['select-content-bottom']
|
|
973
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
974
|
+
className: styles['select-content-bottom-inner']
|
|
975
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
976
|
+
className: styles['select-content-bottom-row'],
|
|
977
|
+
onClick: () => {
|
|
978
|
+
if (!required && !selected) {
|
|
979
|
+
setNewSelected(defaultOption);
|
|
980
|
+
onChange(defaultOption);
|
|
981
|
+
setOpened(!opened);
|
|
982
|
+
}
|
|
983
|
+
}
|
|
984
|
+
}, defaultOption), options?.map((option, i) => {
|
|
985
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
986
|
+
className: styles['select-content-bottom-row'],
|
|
987
|
+
disabled: true,
|
|
988
|
+
onClick: () => {
|
|
989
|
+
setNewSelected(option);
|
|
990
|
+
onChange(option);
|
|
991
|
+
setOpened(!opened);
|
|
992
|
+
},
|
|
993
|
+
defaultValue: option.id
|
|
994
|
+
}, option.name);
|
|
995
|
+
}))) : null)), eMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
996
|
+
className: styles.eMessage
|
|
997
|
+
}, eMessage) : null);
|
|
998
|
+
};
|
|
999
|
+
Select.propTypes = {
|
|
1000
|
+
theme: PropTypes__default["default"].oneOf(Object.values(SelectTheme)),
|
|
1001
|
+
size: PropTypes__default["default"].oneOf(Object.values(SelectSize)),
|
|
1002
|
+
label: PropTypes__default["default"].string,
|
|
1003
|
+
eMessage: PropTypes__default["default"].string,
|
|
1004
|
+
defaultOption: PropTypes__default["default"].string,
|
|
1005
|
+
onChange: PropTypes__default["default"].func,
|
|
1006
|
+
required: PropTypes__default["default"].bool,
|
|
1007
|
+
disabled: PropTypes__default["default"].bool,
|
|
1008
|
+
className: PropTypes__default["default"].string,
|
|
1009
|
+
selected: PropTypes__default["default"].object,
|
|
1010
|
+
jsonData: PropTypes__default["default"].string
|
|
1011
|
+
};
|
|
1012
|
+
Select.defaultProps = {
|
|
1013
|
+
size: 'medium'
|
|
1014
|
+
};
|
|
1015
|
+
|
|
537
1016
|
exports.Autocomplate = Autocomplate;
|
|
538
1017
|
exports.Button = Button;
|
|
539
1018
|
exports.ButtonSize = ButtonSize;
|
|
540
1019
|
exports.ButtonTheme = ButtonTheme;
|
|
541
1020
|
exports.ButtonType = ButtonType;
|
|
1021
|
+
exports.Captcha = Captcha;
|
|
542
1022
|
exports.Checkbox = Checkbox;
|
|
543
1023
|
exports.HeartFilled = SvgHeartFilled;
|
|
544
1024
|
exports.HeartOutline = SvgHeartOutline;
|
|
1025
|
+
exports.Input = Input;
|
|
1026
|
+
exports.InputSizes = InputSizes;
|
|
1027
|
+
exports.InputTypes = InputTypes;
|
|
545
1028
|
exports.LikeFilled = SvgLikeFilled;
|
|
546
1029
|
exports.LikeOutline = SvgLikeOutline;
|
|
1030
|
+
exports.Pagination = Pagination;
|
|
1031
|
+
exports.Radio = Radio;
|
|
1032
|
+
exports.Select = Select;
|
|
1033
|
+
exports.SelectSize = SelectSize;
|
|
1034
|
+
exports.SelectTheme = SelectTheme;
|
|
547
1035
|
exports.StarFilled = SvgStarFilled;
|
|
548
1036
|
exports.StarOutline = SvgStarOutline;
|
|
549
1037
|
exports.Typography = Typography;
|