@xaypay/tui 0.0.23 → 0.0.24
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 +194 -96
- package/dist/index.js +194 -95
- package/package.json +1 -1
- package/src/components/button/button.module.css +1 -1
- package/src/components/file/file.module.css +11 -0
- package/src/components/file/file.stories.js +24 -0
- package/src/components/file/index.js +117 -0
- package/src/components/input/input.module.css +1 -1
- package/src/components/multiselect/multiselect.module.css +1 -1
- package/src/components/pagination/paginationRange.js +1 -1
- package/src/components/select/select.module.css +1 -1
- package/src/components/typography/typography.module.css +3 -3
- package/src/index.js +2 -1
package/dist/index.es.js
CHANGED
|
@@ -45,9 +45,9 @@ function styleInject(css, ref) {
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
var css_248z$
|
|
49
|
-
var styles$
|
|
50
|
-
styleInject(css_248z$
|
|
48
|
+
var css_248z$b = ".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:none;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}";
|
|
49
|
+
var styles$9 = {"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"};
|
|
50
|
+
styleInject(css_248z$b);
|
|
51
51
|
|
|
52
52
|
/**
|
|
53
53
|
* Primary UI component for user interaction
|
|
@@ -83,7 +83,7 @@ const Button = ({
|
|
|
83
83
|
outline,
|
|
84
84
|
...props
|
|
85
85
|
}) => {
|
|
86
|
-
const classProps = classnames(styles$
|
|
86
|
+
const classProps = classnames(styles$9.btn, styles$9[theme], styles$9[size], outline ? styles$9['type-outline'] : styles$9['type-filled'], className);
|
|
87
87
|
// className='btn type-outline size-default'
|
|
88
88
|
return /*#__PURE__*/React.createElement("button", _extends({
|
|
89
89
|
type: "button",
|
|
@@ -129,8 +129,8 @@ Button.defaultProps = {
|
|
|
129
129
|
outline: false
|
|
130
130
|
};
|
|
131
131
|
|
|
132
|
-
var css_248z$
|
|
133
|
-
styleInject(css_248z$
|
|
132
|
+
var css_248z$a = "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:none}p{font-size:14px;line-height:20px}span{font-size:12px;font-weight:500;line-height:16px;text-transform:none}i{font-family:icomoon;font-style:inherit}";
|
|
133
|
+
styleInject(css_248z$a);
|
|
134
134
|
|
|
135
135
|
const TypographyType = {
|
|
136
136
|
h1: 'h1',
|
|
@@ -181,9 +181,9 @@ Typography.defaultProps = {
|
|
|
181
181
|
variant: 'h1'
|
|
182
182
|
};
|
|
183
183
|
|
|
184
|
-
var css_248z$
|
|
185
|
-
var styles$
|
|
186
|
-
styleInject(css_248z$
|
|
184
|
+
var css_248z$9 = ".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}";
|
|
185
|
+
var styles$8 = {"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"};
|
|
186
|
+
styleInject(css_248z$9);
|
|
187
187
|
|
|
188
188
|
const Autocomplate = ({
|
|
189
189
|
className,
|
|
@@ -200,7 +200,7 @@ const Autocomplate = ({
|
|
|
200
200
|
errorMesage,
|
|
201
201
|
...props
|
|
202
202
|
}) => {
|
|
203
|
-
classnames(styles$
|
|
203
|
+
classnames(styles$8.searchBox, className);
|
|
204
204
|
const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {
|
|
205
205
|
name: '',
|
|
206
206
|
id: ''
|
|
@@ -240,43 +240,43 @@ const Autocomplate = ({
|
|
|
240
240
|
if (showOptions && inputValue) {
|
|
241
241
|
if (parseOptionsData.length && inputValue.length >= searchCount) {
|
|
242
242
|
optionList = /*#__PURE__*/React.createElement("div", {
|
|
243
|
-
className: styles$
|
|
243
|
+
className: styles$8['autocomplate-content-bottom']
|
|
244
244
|
}, /*#__PURE__*/React.createElement("div", {
|
|
245
|
-
className: styles$
|
|
245
|
+
className: styles$8['autocomplate-content-bottom-inner']
|
|
246
246
|
}, parseOptionsData.map((optionName, index) => {
|
|
247
247
|
let className;
|
|
248
248
|
if (index === activeOption) {
|
|
249
249
|
className = "option-active";
|
|
250
250
|
}
|
|
251
251
|
return /*#__PURE__*/React.createElement("div", {
|
|
252
|
-
className: styles$
|
|
252
|
+
className: styles$8[className],
|
|
253
253
|
key: optionName[keyNames.id],
|
|
254
254
|
onClick: handleClick
|
|
255
255
|
}, /*#__PURE__*/React.createElement("div", {
|
|
256
256
|
id: optionName[keyNames.id],
|
|
257
|
-
className: styles$
|
|
257
|
+
className: styles$8['autocomplate-content-bottom-row']
|
|
258
258
|
}, optionName[keyNames.name]));
|
|
259
259
|
})));
|
|
260
260
|
} else {
|
|
261
261
|
optionList = /*#__PURE__*/React.createElement("div", {
|
|
262
|
-
className: styles$
|
|
262
|
+
className: styles$8['autocomplate-content-bottom']
|
|
263
263
|
}, /*#__PURE__*/React.createElement("div", {
|
|
264
|
-
className: styles$
|
|
264
|
+
className: styles$8['autocomplate-content-bottom-inner']
|
|
265
265
|
}, /*#__PURE__*/React.createElement("div", {
|
|
266
|
-
className: styles$
|
|
266
|
+
className: styles$8['autocomplate-content-bottom-row']
|
|
267
267
|
}, /*#__PURE__*/React.createElement("div", {
|
|
268
|
-
className: styles$
|
|
268
|
+
className: styles$8['no-option']
|
|
269
269
|
}, "No Option!"))));
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
|
|
273
|
-
className: styles$
|
|
273
|
+
className: styles$8.labelInput
|
|
274
274
|
}, label) : "", /*#__PURE__*/React.createElement("div", {
|
|
275
|
-
className: styles$
|
|
275
|
+
className: styles$8['autocomplate-content']
|
|
276
276
|
}, /*#__PURE__*/React.createElement("input", _extends({
|
|
277
277
|
id: inputId,
|
|
278
278
|
type: "text",
|
|
279
|
-
className: styles$
|
|
279
|
+
className: styles$8['autocomplate-content-top'],
|
|
280
280
|
required: required,
|
|
281
281
|
disabled: disabled,
|
|
282
282
|
onChange: handleChange,
|
|
@@ -286,7 +286,7 @@ const Autocomplate = ({
|
|
|
286
286
|
value: inputValue,
|
|
287
287
|
placeholder: placeHolder
|
|
288
288
|
}, props)), errorMesage ? /*#__PURE__*/React.createElement("span", {
|
|
289
|
-
className: styles$
|
|
289
|
+
className: styles$8.errorMessage
|
|
290
290
|
}, errorMesage) : null, optionList));
|
|
291
291
|
};
|
|
292
292
|
Autocomplate.propTypes = {
|
|
@@ -304,9 +304,9 @@ Autocomplate.propTypes = {
|
|
|
304
304
|
errorMesage: PropTypes.string
|
|
305
305
|
};
|
|
306
306
|
|
|
307
|
-
var css_248z$
|
|
308
|
-
var styles$
|
|
309
|
-
styleInject(css_248z$
|
|
307
|
+
var css_248z$8 = ".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}";
|
|
308
|
+
var styles$7 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
|
|
309
|
+
styleInject(css_248z$8);
|
|
310
310
|
|
|
311
311
|
const Checkbox = ({
|
|
312
312
|
disabled,
|
|
@@ -321,7 +321,7 @@ const Checkbox = ({
|
|
|
321
321
|
onClick,
|
|
322
322
|
...props
|
|
323
323
|
}) => {
|
|
324
|
-
const classProps = classnames(styles$
|
|
324
|
+
const classProps = classnames(styles$7.checkbox, className);
|
|
325
325
|
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
326
326
|
const [data, setData] = useState(parseData);
|
|
327
327
|
const handleClick = e => {
|
|
@@ -346,7 +346,7 @@ const Checkbox = ({
|
|
|
346
346
|
};
|
|
347
347
|
return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(element => {
|
|
348
348
|
return /*#__PURE__*/React.createElement("label", {
|
|
349
|
-
className: styles$
|
|
349
|
+
className: styles$7["checkbox-wrap"],
|
|
350
350
|
key: element.value
|
|
351
351
|
}, /*#__PURE__*/React.createElement("input", _extends({
|
|
352
352
|
type: "checkbox",
|
|
@@ -358,9 +358,9 @@ const Checkbox = ({
|
|
|
358
358
|
onChange: handleChange,
|
|
359
359
|
onClick: handleClick
|
|
360
360
|
}, props)), /*#__PURE__*/React.createElement("span", {
|
|
361
|
-
className: styles$
|
|
361
|
+
className: styles$7["checkmark"]
|
|
362
362
|
}), element.label ? /*#__PURE__*/React.createElement("span", {
|
|
363
|
-
className: styles$
|
|
363
|
+
className: styles$7.labelRadio
|
|
364
364
|
}, label ? label : element.label) : "");
|
|
365
365
|
}));
|
|
366
366
|
};
|
|
@@ -381,21 +381,21 @@ Checkbox.defaultProps = {
|
|
|
381
381
|
jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
|
|
382
382
|
};
|
|
383
383
|
|
|
384
|
-
var css_248z$
|
|
385
|
-
styleInject(css_248z$
|
|
384
|
+
var css_248z$7 = "@font-face{font-display:block;font-family:icomoon;font-style:normal;font-weight:400;src:url(fonts/icomoon.eot?r3pd9w);src:url(fonts/icomoon.eot?r3pd9w#iefix) format(\"embedded-opentype\"),url(fonts/icomoon.ttf?r3pd9w) format(\"truetype\"),url(fonts/icomoon.woff?r3pd9w) format(\"woff\"),url(fonts/icomoon.svg?r3pd9w#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-vector-up:before{content:\"\\e908\"}.icon-vector-down:before{content:\"\\e909\"}.icon-close:before{content:\"\\e907\"}.icon-icon-arrow-top:before{content:\"\\e905\"}.icon-icon-arrow-bottom: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\"}";
|
|
385
|
+
styleInject(css_248z$7);
|
|
386
386
|
|
|
387
387
|
/**
|
|
388
388
|
* Created by aleksanyan.tigran on 10/7/2022.
|
|
389
389
|
*/
|
|
390
390
|
const Icon = props => {
|
|
391
391
|
return /*#__PURE__*/React.createElement("i", {
|
|
392
|
-
className: css_248z$
|
|
392
|
+
className: css_248z$7[props.className]
|
|
393
393
|
});
|
|
394
394
|
};
|
|
395
395
|
|
|
396
|
-
var css_248z$
|
|
397
|
-
var styles$
|
|
398
|
-
styleInject(css_248z$
|
|
396
|
+
var css_248z$6 = ".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:none;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)}}";
|
|
397
|
+
var styles$6 = {"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"};
|
|
398
|
+
styleInject(css_248z$6);
|
|
399
399
|
|
|
400
400
|
const InputTypes = {
|
|
401
401
|
TEXT: "text",
|
|
@@ -439,11 +439,11 @@ const Input = ({
|
|
|
439
439
|
const regex = new RegExp(regexp);
|
|
440
440
|
eMessage = regex.test(inputValue) ? "" : regexpError;
|
|
441
441
|
}
|
|
442
|
-
const classProps = classnames(styles$
|
|
442
|
+
const classProps = classnames(styles$6.input, styles$6[size], eMessage != '' ? styles$6['error-message'] : "", className);
|
|
443
443
|
return /*#__PURE__*/React.createElement("div", {
|
|
444
|
-
className: styles$
|
|
444
|
+
className: styles$6['input-wrap']
|
|
445
445
|
}, label ? /*#__PURE__*/React.createElement("label", {
|
|
446
|
-
className: styles$
|
|
446
|
+
className: styles$6.labelInput
|
|
447
447
|
}, label) : "", /*#__PURE__*/React.createElement("input", _extends({}, props, {
|
|
448
448
|
type: type,
|
|
449
449
|
className: classProps,
|
|
@@ -454,7 +454,7 @@ const Input = ({
|
|
|
454
454
|
onChange: handleChange,
|
|
455
455
|
value: inputValue
|
|
456
456
|
})), eMessage ? /*#__PURE__*/React.createElement("span", {
|
|
457
|
-
className: styles$
|
|
457
|
+
className: styles$6.inputErrorMessages
|
|
458
458
|
}, eMessage) : "");
|
|
459
459
|
};
|
|
460
460
|
Input.propTypes = {
|
|
@@ -482,9 +482,9 @@ Input.defaultProps = {
|
|
|
482
482
|
value: ""
|
|
483
483
|
};
|
|
484
484
|
|
|
485
|
-
var css_248z$
|
|
486
|
-
var styles$
|
|
487
|
-
styleInject(css_248z$
|
|
485
|
+
var css_248z$5 = ".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}";
|
|
486
|
+
var styles$5 = {"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"};
|
|
487
|
+
styleInject(css_248z$5);
|
|
488
488
|
|
|
489
489
|
// import styles from "./pagination.module.scss";
|
|
490
490
|
|
|
@@ -521,7 +521,8 @@ const PaginationRange = ({
|
|
|
521
521
|
return [...leftRange, Dots, totalPageCount];
|
|
522
522
|
}
|
|
523
523
|
if (shouldShowLeftDots && !shouldShowRightDots) {
|
|
524
|
-
let rightItemCount =
|
|
524
|
+
let rightItemCount = 0;
|
|
525
|
+
currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
|
|
525
526
|
let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
|
|
526
527
|
return [firstPageIndex, Dots, ...rightRange];
|
|
527
528
|
}
|
|
@@ -568,7 +569,7 @@ const Pagination = ({
|
|
|
568
569
|
if (currentPageNumber === 0 || paginationRange.length < 2) {
|
|
569
570
|
return null;
|
|
570
571
|
}
|
|
571
|
-
const classProps = classnames(styles$
|
|
572
|
+
const classProps = classnames(styles$5.list, className ? className : styles$5["pagination-bar"]);
|
|
572
573
|
const onNext = () => {
|
|
573
574
|
onPageChange(currentPageNumber + 1);
|
|
574
575
|
};
|
|
@@ -585,7 +586,7 @@ const Pagination = ({
|
|
|
585
586
|
return /*#__PURE__*/React.createElement("ul", {
|
|
586
587
|
className: classProps
|
|
587
588
|
}, /*#__PURE__*/React.createElement("button", {
|
|
588
|
-
className: styles$
|
|
589
|
+
className: styles$5["pagination-btn"],
|
|
589
590
|
onClick: onPrevious,
|
|
590
591
|
disabled: currentPage === 1 ? true : false
|
|
591
592
|
}, /*#__PURE__*/React.createElement("i", {
|
|
@@ -595,13 +596,13 @@ const Pagination = ({
|
|
|
595
596
|
let currentPageIndex = paginationRange.indexOf(currentPageNumber);
|
|
596
597
|
return /*#__PURE__*/React.createElement("li", {
|
|
597
598
|
key: id,
|
|
598
|
-
className: classnames(styles$
|
|
599
|
+
className: classnames(styles$5['pagination-jump-next'], styles$5.listItem),
|
|
599
600
|
onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
|
|
600
601
|
disabled: currentPageIndex === 0 ? true : false
|
|
601
602
|
}, /*#__PURE__*/React.createElement("span", {
|
|
602
|
-
className: styles$
|
|
603
|
+
className: styles$5['pagination-jump-next-txt']
|
|
603
604
|
}, "..."), /*#__PURE__*/React.createElement("span", {
|
|
604
|
-
className: styles$
|
|
605
|
+
className: styles$5['pagination-jump-next-arrow']
|
|
605
606
|
}, /*#__PURE__*/React.createElement("i", {
|
|
606
607
|
className: "icon-arrow-jump-next"
|
|
607
608
|
})));
|
|
@@ -609,11 +610,11 @@ const Pagination = ({
|
|
|
609
610
|
return /*#__PURE__*/React.createElement("li", {
|
|
610
611
|
onClick: () => onPageChange(pageNumber),
|
|
611
612
|
key: id,
|
|
612
|
-
className: classnames(`${pageNumber === currentPageNumber ? styles$
|
|
613
|
+
className: classnames(`${pageNumber === currentPageNumber ? styles$5.selected : styles$5.listItem}`, styles$5['pagination-item'])
|
|
613
614
|
}, pageNumber);
|
|
614
615
|
}), /*#__PURE__*/React.createElement("button", {
|
|
615
616
|
onClick: onNext,
|
|
616
|
-
className: styles$
|
|
617
|
+
className: styles$5["pagination-btn"],
|
|
617
618
|
disabled: currentPageNumber === lastPage ? true : false
|
|
618
619
|
}, /*#__PURE__*/React.createElement("i", {
|
|
619
620
|
className: "icon-arrow"
|
|
@@ -631,9 +632,9 @@ Pagination.defaultProps = {
|
|
|
631
632
|
siblingCount: 2
|
|
632
633
|
};
|
|
633
634
|
|
|
634
|
-
var css_248z$
|
|
635
|
-
var styles$
|
|
636
|
-
styleInject(css_248z$
|
|
635
|
+
var css_248z$4 = ".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}";
|
|
636
|
+
var styles$4 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
|
|
637
|
+
styleInject(css_248z$4);
|
|
637
638
|
|
|
638
639
|
const Radio = ({
|
|
639
640
|
disabled,
|
|
@@ -647,11 +648,11 @@ const Radio = ({
|
|
|
647
648
|
keyNames,
|
|
648
649
|
...props
|
|
649
650
|
}) => {
|
|
650
|
-
const classProps = classnames(styles$
|
|
651
|
+
const classProps = classnames(styles$4.checkbox, className);
|
|
651
652
|
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
652
653
|
return /*#__PURE__*/React.createElement(React.Fragment, null, parseData.map((element, id) => {
|
|
653
654
|
return /*#__PURE__*/React.createElement("label", {
|
|
654
|
-
className: styles$
|
|
655
|
+
className: styles$4["radio-wrap"],
|
|
655
656
|
key: element.value
|
|
656
657
|
}, /*#__PURE__*/React.createElement("input", _extends({
|
|
657
658
|
type: "radio",
|
|
@@ -662,9 +663,9 @@ const Radio = ({
|
|
|
662
663
|
value: value ? value : element.value,
|
|
663
664
|
name: name ? name : element.name
|
|
664
665
|
}, props)), /*#__PURE__*/React.createElement("span", {
|
|
665
|
-
className: styles$
|
|
666
|
+
className: styles$4["radio-checkmark"]
|
|
666
667
|
}), element.label ? /*#__PURE__*/React.createElement("span", {
|
|
667
|
-
className: styles$
|
|
668
|
+
className: styles$4.labelRadio
|
|
668
669
|
}, label ? label : element.label) : "");
|
|
669
670
|
}));
|
|
670
671
|
};
|
|
@@ -685,9 +686,9 @@ Radio.defaultProps = {
|
|
|
685
686
|
jsonData: '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]'
|
|
686
687
|
};
|
|
687
688
|
|
|
688
|
-
var css_248z$
|
|
689
|
-
var styles$
|
|
690
|
-
styleInject(css_248z$
|
|
689
|
+
var css_248z$3 = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{height:74px;max-width:400px;position:relative;width:100%}.captcha-module_slider__KLYny{-webkit-appearance:none;background:#eee;border-radius:2px;bottom:0;height:4px;left:0;margin:auto 0;outline:none;position:absolute;top:0;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:30px;position:relative;width:30px;z-index:3}.captcha-module_selector__JFhb4{left:0;z-index:2}.captcha-module_selectBtn__GP1iH,.captcha-module_selector__JFhb4{bottom:0;height:30px;margin:auto 0;position:absolute;top:0;width:30px}.captcha-module_selectBtn__GP1iH{background:#00236a;border:2px solid #fff;border-radius:50%;box-shadow:1px 0 6px rgba(60,57,62,.15);cursor:pointer}.captcha-module_progressBar__mhdtM{background:red;bottom:0;height:4px;left:0;margin:auto 0;position:absolute;top:0;width:auto}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
|
|
690
|
+
var styles$3 = {"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"};
|
|
691
|
+
styleInject(css_248z$3);
|
|
691
692
|
|
|
692
693
|
const Captcha = ({
|
|
693
694
|
onclick,
|
|
@@ -696,7 +697,7 @@ const Captcha = ({
|
|
|
696
697
|
const [data, setData] = useState("");
|
|
697
698
|
const [right, setRight] = useState(false);
|
|
698
699
|
let range = rangeCount <= 100 ? rangeCount : 0;
|
|
699
|
-
let rangeElement = document.getElementsByClassName(styles$
|
|
700
|
+
let rangeElement = document.getElementsByClassName(styles$3.range);
|
|
700
701
|
useEffect(() => {
|
|
701
702
|
for (let element of rangeElement) {
|
|
702
703
|
element.style.marginLeft = `${range + 60}%`;
|
|
@@ -705,9 +706,9 @@ const Captcha = ({
|
|
|
705
706
|
}, [range, data]);
|
|
706
707
|
function sliderInput(event) {
|
|
707
708
|
setData(rangeCount == event.target.value ? 'green' : 'indianred');
|
|
708
|
-
let selector = document.getElementsByClassName(styles$
|
|
709
|
-
let selectBtn = document.getElementsByClassName(styles$
|
|
710
|
-
let progressBar = document.getElementsByClassName(styles$
|
|
709
|
+
let selector = document.getElementsByClassName(styles$3.selector);
|
|
710
|
+
let selectBtn = document.getElementsByClassName(styles$3.selectBtn);
|
|
711
|
+
let progressBar = document.getElementsByClassName(styles$3.progressBar);
|
|
711
712
|
selector[0].style.left = event.target.value + '%';
|
|
712
713
|
progressBar[0].style.width = event.target.value + '%';
|
|
713
714
|
if (rangeCount == event.target.value) {
|
|
@@ -720,25 +721,25 @@ const Captcha = ({
|
|
|
720
721
|
setRight(rangeCount == e.target.value ? true : false);
|
|
721
722
|
}
|
|
722
723
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
723
|
-
className: styles$
|
|
724
|
+
className: styles$3.main
|
|
724
725
|
}, /*#__PURE__*/React.createElement("div", {
|
|
725
|
-
className: styles$
|
|
726
|
+
className: styles$3.range
|
|
726
727
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
727
728
|
className: "icon-vector-down"
|
|
728
729
|
})), /*#__PURE__*/React.createElement("input", {
|
|
729
730
|
type: "range",
|
|
730
|
-
className: styles$
|
|
731
|
+
className: styles$3.slider,
|
|
731
732
|
onClick: right ? onclick : null,
|
|
732
733
|
onInput: sliderInput,
|
|
733
734
|
onMouseUp: sliderChange
|
|
734
735
|
}), /*#__PURE__*/React.createElement("div", {
|
|
735
|
-
className: styles$
|
|
736
|
+
className: styles$3.selector
|
|
736
737
|
}, /*#__PURE__*/React.createElement("div", {
|
|
737
|
-
className: styles$
|
|
738
|
+
className: styles$3.selectBtn
|
|
738
739
|
})), /*#__PURE__*/React.createElement("div", {
|
|
739
|
-
className: styles$
|
|
740
|
+
className: styles$3.progressBar
|
|
740
741
|
}), /*#__PURE__*/React.createElement("div", {
|
|
741
|
-
className: styles$
|
|
742
|
+
className: styles$3.range
|
|
742
743
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
743
744
|
className: "icon-vector-up"
|
|
744
745
|
}))));
|
|
@@ -752,9 +753,9 @@ Captcha.defaultProps = {
|
|
|
752
753
|
onclick: undefined
|
|
753
754
|
};
|
|
754
755
|
|
|
755
|
-
var css_248z$
|
|
756
|
-
var styles$
|
|
757
|
-
styleInject(css_248z$
|
|
756
|
+
var css_248z$2 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;cursor:pointer;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
|
|
757
|
+
var styles$2 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
|
|
758
|
+
styleInject(css_248z$2);
|
|
758
759
|
|
|
759
760
|
const Stepper = ({
|
|
760
761
|
className,
|
|
@@ -764,15 +765,15 @@ const Stepper = ({
|
|
|
764
765
|
}) => {
|
|
765
766
|
classnames(className);
|
|
766
767
|
return /*#__PURE__*/React.createElement("div", {
|
|
767
|
-
className: styles$
|
|
768
|
+
className: styles$2['stepper-container']
|
|
768
769
|
}, (() => {
|
|
769
770
|
let steppers = [];
|
|
770
771
|
for (let step = 1; step <= stepLength; step++) {
|
|
771
772
|
steppers.push( /*#__PURE__*/React.createElement("div", {
|
|
772
|
-
className: classnames(`${step <= activeSteps ? styles$
|
|
773
|
+
className: classnames(`${step <= activeSteps ? styles$2.activeRing : styles$2.bigRing}`),
|
|
773
774
|
key: step
|
|
774
775
|
}, /*#__PURE__*/React.createElement("div", {
|
|
775
|
-
className: classnames(`${step <= activeSteps ? styles$
|
|
776
|
+
className: classnames(`${step <= activeSteps ? styles$2.smallActiveRing : styles$2.smallRing}`)
|
|
776
777
|
}, step <= activeSteps ? step : "")));
|
|
777
778
|
}
|
|
778
779
|
return steppers;
|
|
@@ -785,9 +786,9 @@ Stepper.propTypes = {
|
|
|
785
786
|
activeSteps: PropTypes.number
|
|
786
787
|
};
|
|
787
788
|
|
|
788
|
-
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:
|
|
789
|
-
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"};
|
|
790
|
-
styleInject(css_248z);
|
|
789
|
+
var css_248z$1 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.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);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%}.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}";
|
|
790
|
+
var styles$1 = {"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"};
|
|
791
|
+
styleInject(css_248z$1);
|
|
791
792
|
|
|
792
793
|
const SelectTheme = {
|
|
793
794
|
DEFAULT: 'select-default',
|
|
@@ -824,34 +825,34 @@ const Select = ({
|
|
|
824
825
|
const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
|
|
825
826
|
setNewSelected(parseSelectedData);
|
|
826
827
|
}, [selected]);
|
|
827
|
-
classnames(styles[theme], styles[size], {
|
|
828
|
-
[styles.disabled]: disabled,
|
|
829
|
-
[styles.required]: required
|
|
828
|
+
classnames(styles$1[theme], styles$1[size], {
|
|
829
|
+
[styles$1.disabled]: disabled,
|
|
830
|
+
[styles$1.required]: required
|
|
830
831
|
}, className);
|
|
831
832
|
return /*#__PURE__*/React.createElement("div", null, label ? /*#__PURE__*/React.createElement("label", {
|
|
832
|
-
className: styles['select-title']
|
|
833
|
+
className: styles$1['select-title']
|
|
833
834
|
}, label) : "", /*#__PURE__*/React.createElement("div", {
|
|
834
|
-
className: styles['select-wrap']
|
|
835
|
+
className: styles$1['select-wrap']
|
|
835
836
|
}, /*#__PURE__*/React.createElement("div", {
|
|
836
|
-
className: styles['select-content'],
|
|
837
|
-
id: styles.selector
|
|
837
|
+
className: styles$1['select-content'],
|
|
838
|
+
id: styles$1.selector
|
|
838
839
|
}, /*#__PURE__*/React.createElement("div", {
|
|
839
|
-
className: styles['select-content-top'],
|
|
840
|
+
className: styles$1['select-content-top'],
|
|
840
841
|
onClick: () => {
|
|
841
842
|
setOpened(!opened);
|
|
842
843
|
}
|
|
843
844
|
}, /*#__PURE__*/React.createElement("div", {
|
|
844
|
-
className: styles['select-content-top-text']
|
|
845
|
+
className: styles$1['select-content-top-text']
|
|
845
846
|
}, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React.createElement("div", {
|
|
846
|
-
className: styles['select-content-top-icon']
|
|
847
|
+
className: styles$1['select-content-top-icon']
|
|
847
848
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
848
849
|
className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
|
|
849
850
|
}))), opened && !disabled ? /*#__PURE__*/React.createElement("div", {
|
|
850
|
-
className: styles['select-content-bottom']
|
|
851
|
+
className: styles$1['select-content-bottom']
|
|
851
852
|
}, /*#__PURE__*/React.createElement("div", {
|
|
852
|
-
className: styles['select-content-bottom-inner']
|
|
853
|
+
className: styles$1['select-content-bottom-inner']
|
|
853
854
|
}, /*#__PURE__*/React.createElement("div", {
|
|
854
|
-
className: styles['select-content-bottom-row'],
|
|
855
|
+
className: styles$1['select-content-bottom-row'],
|
|
855
856
|
onClick: () => {
|
|
856
857
|
if (!required && !selected) {
|
|
857
858
|
setNewSelected(defaultOption);
|
|
@@ -862,7 +863,7 @@ const Select = ({
|
|
|
862
863
|
}, defaultOption), options.map((option, i) => {
|
|
863
864
|
return /*#__PURE__*/React.createElement("div", {
|
|
864
865
|
key: i,
|
|
865
|
-
className: styles['select-content-bottom-row'],
|
|
866
|
+
className: styles$1['select-content-bottom-row'],
|
|
866
867
|
disabled: true,
|
|
867
868
|
onClick: () => {
|
|
868
869
|
setNewSelected(option);
|
|
@@ -872,7 +873,7 @@ const Select = ({
|
|
|
872
873
|
defaultValue: option[keyNames.id]
|
|
873
874
|
}, option[keyNames.name]);
|
|
874
875
|
}))) : null)), eMessage ? /*#__PURE__*/React.createElement("span", {
|
|
875
|
-
className: styles.eMessage
|
|
876
|
+
className: styles$1.eMessage
|
|
876
877
|
}, eMessage) : null);
|
|
877
878
|
};
|
|
878
879
|
Select.propTypes = {
|
|
@@ -893,4 +894,101 @@ Select.defaultProps = {
|
|
|
893
894
|
size: 'medium'
|
|
894
895
|
};
|
|
895
896
|
|
|
896
|
-
|
|
897
|
+
var css_248z = ".file-module_file-Form__G2sbx{align-items:center;border:3px dashed #a1a0a0;border-radius:5px;cursor:pointer;display:flex;flex-direction:column;height:200px;justify-content:center;width:300px}";
|
|
898
|
+
var styles = {"file-Form":"file-module_file-Form__G2sbx"};
|
|
899
|
+
styleInject(css_248z);
|
|
900
|
+
|
|
901
|
+
const File = ({
|
|
902
|
+
className,
|
|
903
|
+
label,
|
|
904
|
+
required,
|
|
905
|
+
disabled,
|
|
906
|
+
onChange,
|
|
907
|
+
defaultData,
|
|
908
|
+
errorMesage,
|
|
909
|
+
name,
|
|
910
|
+
...props
|
|
911
|
+
}) => {
|
|
912
|
+
const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ';
|
|
913
|
+
const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
|
|
914
|
+
const [error, setError] = useState(errorMesage);
|
|
915
|
+
const [fileName, setFileName] = useState('no selected file');
|
|
916
|
+
function fileType(file) {
|
|
917
|
+
if (file.size <= 5000000) {
|
|
918
|
+
if (file.type === 'image/jpeg' || file.type === 'image/png') {
|
|
919
|
+
setImage(URL.createObjectURL(file));
|
|
920
|
+
setError('');
|
|
921
|
+
} else if (file.type === 'application/pdf') {
|
|
922
|
+
setImage(pdfImageName);
|
|
923
|
+
setError('');
|
|
924
|
+
} else {
|
|
925
|
+
setImage(null);
|
|
926
|
+
setFileName('no selected file');
|
|
927
|
+
setError('ֆայլի սխալ ֆորմատ');
|
|
928
|
+
}
|
|
929
|
+
} else {
|
|
930
|
+
setImage(null);
|
|
931
|
+
setFileName('no selected file');
|
|
932
|
+
setError('առավելագույն ծավալ');
|
|
933
|
+
}
|
|
934
|
+
}
|
|
935
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
936
|
+
className: styles['file-Form'],
|
|
937
|
+
onChange: e => {
|
|
938
|
+
console.log(e);
|
|
939
|
+
},
|
|
940
|
+
style: error ? {
|
|
941
|
+
borderColor: 'red'
|
|
942
|
+
} : {},
|
|
943
|
+
onClick: () => {
|
|
944
|
+
document.querySelector(`.${name}`).click();
|
|
945
|
+
}
|
|
946
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
947
|
+
type: "file",
|
|
948
|
+
className: name,
|
|
949
|
+
hidden: true,
|
|
950
|
+
disabled: disabled,
|
|
951
|
+
onChange: ({
|
|
952
|
+
target: {
|
|
953
|
+
files
|
|
954
|
+
}
|
|
955
|
+
}) => {
|
|
956
|
+
onChange({
|
|
957
|
+
target: {
|
|
958
|
+
files
|
|
959
|
+
}
|
|
960
|
+
});
|
|
961
|
+
files[0] && setFileName(files[0].name);
|
|
962
|
+
if (files[0]) {
|
|
963
|
+
fileType(files[0]);
|
|
964
|
+
}
|
|
965
|
+
}
|
|
966
|
+
}), image ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
967
|
+
onClick: () => {
|
|
968
|
+
setFileName('no selected file');
|
|
969
|
+
setImage(null);
|
|
970
|
+
}
|
|
971
|
+
}, "x"), /*#__PURE__*/React.createElement("img", {
|
|
972
|
+
src: image,
|
|
973
|
+
height: 120,
|
|
974
|
+
alt: fileName
|
|
975
|
+
})) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
|
|
976
|
+
src: "https://uxwing.com/wp-content/themes/uxwing/download/web-app-development/cloud-upload-icon.png",
|
|
977
|
+
width: 100
|
|
978
|
+
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u054F\u0565\u0572\u0561\u0564\u0580\u0565\u056C \u0586\u0561\u0575\u056C\u0568 \u0561\u0575\u057D\u057F\u0565\u0572 \u056F\u0561\u0574 \u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 5\u0544\u0532 ( jpg, jpeg, png, pdf)"))))), error ? /*#__PURE__*/React.createElement("span", {
|
|
979
|
+
style: {
|
|
980
|
+
color: 'red'
|
|
981
|
+
}
|
|
982
|
+
}, error) : null);
|
|
983
|
+
};
|
|
984
|
+
File.propTypes = {
|
|
985
|
+
className: PropTypes.string,
|
|
986
|
+
label: PropTypes.string,
|
|
987
|
+
required: PropTypes.bool,
|
|
988
|
+
disabled: PropTypes.bool,
|
|
989
|
+
onChange: PropTypes.func,
|
|
990
|
+
errorMesage: PropTypes.string,
|
|
991
|
+
defaultData: PropTypes.object
|
|
992
|
+
};
|
|
993
|
+
|
|
994
|
+
export { Autocomplate, Button, ButtonSize, ButtonTheme, ButtonType, Captcha, Checkbox, File, Input, InputSizes, InputTypes, Pagination, Radio, Select, SelectSize, SelectTheme, Stepper, Typography, TypographyType };
|