@xaypay/tui 0.0.26 → 0.0.28
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 +70 -50
- package/dist/index.js +70 -50
- package/package.json +1 -1
- package/src/assets_old/icons/style.css +2 -4
- package/src/components/checkbox/index.js +34 -28
- package/src/components/file/index.js +1 -2
- package/src/components/modal/index.js +75 -45
- package/src/components/modal/modal.module.css +2 -2
- package/src/components/pagination/index.js +125 -70
- package/src/components/select/select.module.css +1 -1
- package/src/components/typography/typography.module.css +3 -3
package/dist/index.es.js
CHANGED
|
@@ -129,7 +129,7 @@ Button.defaultProps = {
|
|
|
129
129
|
outline: false
|
|
130
130
|
};
|
|
131
131
|
|
|
132
|
-
var css_248z$b = "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
|
|
132
|
+
var css_248z$b = "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;text-transform:uppercase}h4{font-size:24px;line-height:24px}h4,h5{font-weight:600;text-transform:uppercase}h5{font-size:20px;line-height:26px}h6{font-size:14px;font-weight:600;line-height:20px;text-transform:none}p{font-size:16px;line-height:22px}p,span{color:#3c393e;font-weight:500;text-transform:none}span{font-size:12px;line-height:16px}i{font-family:icomoon;font-style:inherit}";
|
|
133
133
|
styleInject(css_248z$b);
|
|
134
134
|
|
|
135
135
|
const TypographyType = {
|
|
@@ -318,32 +318,39 @@ const Checkbox = ({
|
|
|
318
318
|
onChange,
|
|
319
319
|
label,
|
|
320
320
|
keyNames,
|
|
321
|
-
onClick,
|
|
322
321
|
...props
|
|
323
322
|
}) => {
|
|
324
323
|
const classProps = classnames(styles$8.checkbox, className);
|
|
325
324
|
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
326
325
|
const [data, setData] = useState(parseData);
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
326
|
+
useEffect(() => {
|
|
327
|
+
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
328
|
+
setData(parseData);
|
|
329
|
+
}, [jsonData]);
|
|
330
|
+
useEffect(() => {
|
|
331
|
+
onChange(data.filter(d => d.checked));
|
|
332
|
+
}, [data]);
|
|
330
333
|
const handleChange = e => {
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
});
|
|
345
|
-
}
|
|
334
|
+
let id;
|
|
335
|
+
data.forEach((value, key) => {
|
|
336
|
+
if (value[keyNames.value] === e.target.value) {
|
|
337
|
+
id = key;
|
|
338
|
+
}
|
|
339
|
+
});
|
|
340
|
+
let items = [...data];
|
|
341
|
+
let item = {
|
|
342
|
+
...items[id]
|
|
343
|
+
};
|
|
344
|
+
item.checked = !item.checked;
|
|
345
|
+
items[id] = item;
|
|
346
|
+
setData(items);
|
|
346
347
|
};
|
|
348
|
+
!keyNames ? keyNames = {
|
|
349
|
+
id: 'id',
|
|
350
|
+
name: 'name',
|
|
351
|
+
value: 'value',
|
|
352
|
+
label: 'label'
|
|
353
|
+
} : '';
|
|
347
354
|
return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(element => {
|
|
348
355
|
return /*#__PURE__*/React.createElement("label", {
|
|
349
356
|
className: styles$8["checkbox-wrap"],
|
|
@@ -353,15 +360,16 @@ const Checkbox = ({
|
|
|
353
360
|
className: classProps,
|
|
354
361
|
disabled: disabled,
|
|
355
362
|
required: required,
|
|
356
|
-
value: value ? value :
|
|
357
|
-
name: name ? name :
|
|
358
|
-
|
|
359
|
-
|
|
363
|
+
value: keyNames.value ? element[keyNames.value] : '',
|
|
364
|
+
name: keyNames.name ? element[keyNames.name] : '',
|
|
365
|
+
id: keyNames.id ? element[keyNames.id] : '',
|
|
366
|
+
onChange: handleChange
|
|
360
367
|
}, props)), /*#__PURE__*/React.createElement("span", {
|
|
361
368
|
className: styles$8["checkmark"]
|
|
362
|
-
}), element.label ? /*#__PURE__*/React.createElement("
|
|
363
|
-
className: styles$8.
|
|
364
|
-
|
|
369
|
+
}), element[keyNames.label] ? /*#__PURE__*/React.createElement("label", {
|
|
370
|
+
className: styles$8.labelCheckbox,
|
|
371
|
+
for: element[keyNames.id]
|
|
372
|
+
}, element[keyNames.label]) : "");
|
|
365
373
|
}));
|
|
366
374
|
};
|
|
367
375
|
Checkbox.propTypes = {
|
|
@@ -373,7 +381,6 @@ Checkbox.propTypes = {
|
|
|
373
381
|
value: PropTypes.string,
|
|
374
382
|
jsonData: PropTypes.string,
|
|
375
383
|
label: PropTypes.string,
|
|
376
|
-
onClick: PropTypes.func,
|
|
377
384
|
keyNames: PropTypes.object
|
|
378
385
|
};
|
|
379
386
|
Checkbox.defaultProps = {
|
|
@@ -381,7 +388,7 @@ Checkbox.defaultProps = {
|
|
|
381
388
|
jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
|
|
382
389
|
};
|
|
383
390
|
|
|
384
|
-
var css_248z$8 = "
|
|
391
|
+
var css_248z$8 = "";
|
|
385
392
|
styleInject(css_248z$8);
|
|
386
393
|
|
|
387
394
|
/**
|
|
@@ -555,7 +562,9 @@ const Pagination = ({
|
|
|
555
562
|
setCurrentPage(currentPage);
|
|
556
563
|
}, [currentPage]);
|
|
557
564
|
const onPageChange = page => {
|
|
558
|
-
|
|
565
|
+
if (page > 0) {
|
|
566
|
+
setCurrentPage(page);
|
|
567
|
+
}
|
|
559
568
|
};
|
|
560
569
|
useEffect(() => {
|
|
561
570
|
onChange(currentPageNumber);
|
|
@@ -596,23 +605,31 @@ const Pagination = ({
|
|
|
596
605
|
let currentPageIndex = paginationRange.indexOf(currentPageNumber);
|
|
597
606
|
return /*#__PURE__*/React.createElement("li", {
|
|
598
607
|
key: id,
|
|
599
|
-
className: classnames(styles$6[
|
|
608
|
+
className: classnames(styles$6["pagination-jump-next"], styles$6.listItem),
|
|
600
609
|
onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
|
|
601
610
|
disabled: currentPageIndex === 0 ? true : false
|
|
602
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
603
|
-
className: styles$6[
|
|
611
|
+
}, id < currentPageIndex ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
612
|
+
className: styles$6["pagination-jump-next-txt"]
|
|
613
|
+
}, /*#__PURE__*/React.createElement("i", {
|
|
614
|
+
className: "icon-text"
|
|
615
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
616
|
+
className: styles$6["pagination-jump-next-arrow"]
|
|
617
|
+
}, /*#__PURE__*/React.createElement("i", {
|
|
618
|
+
className: "icon-arrow-jump-back"
|
|
619
|
+
}))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
620
|
+
className: styles$6["pagination-jump-next-txt"]
|
|
604
621
|
}, /*#__PURE__*/React.createElement("i", {
|
|
605
622
|
className: "icon-text"
|
|
606
623
|
})), /*#__PURE__*/React.createElement("span", {
|
|
607
|
-
className: styles$6[
|
|
624
|
+
className: styles$6["pagination-jump-next-arrow"]
|
|
608
625
|
}, /*#__PURE__*/React.createElement("i", {
|
|
609
626
|
className: "icon-arrow-jump-next"
|
|
610
|
-
})));
|
|
627
|
+
}))));
|
|
611
628
|
}
|
|
612
629
|
return /*#__PURE__*/React.createElement("li", {
|
|
613
630
|
onClick: () => onPageChange(pageNumber),
|
|
614
631
|
key: id,
|
|
615
|
-
className: classnames(`${pageNumber === currentPageNumber ? styles$6.selected : styles$6.listItem}`, styles$6[
|
|
632
|
+
className: classnames(`${pageNumber === currentPageNumber ? styles$6.selected : styles$6.listItem}`, styles$6["pagination-item"])
|
|
616
633
|
}, pageNumber);
|
|
617
634
|
}), /*#__PURE__*/React.createElement("button", {
|
|
618
635
|
onClick: onNext,
|
|
@@ -788,7 +805,7 @@ Stepper.propTypes = {
|
|
|
788
805
|
activeSteps: PropTypes.number
|
|
789
806
|
};
|
|
790
807
|
|
|
791
|
-
var css_248z$2 = ".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%;z-index:1}.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;
|
|
808
|
+
var css_248z$2 = ".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%;z-index:1}.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;line-height:22px;margin-bottom:2px;min-height:46px;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}";
|
|
792
809
|
var styles$2 = {"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"};
|
|
793
810
|
styleInject(css_248z$2);
|
|
794
811
|
|
|
@@ -979,7 +996,7 @@ const File = ({
|
|
|
979
996
|
}, /*#__PURE__*/React.createElement("div", {
|
|
980
997
|
className: styles$1['delete-upload-icon']
|
|
981
998
|
}, /*#__PURE__*/React.createElement("i", {
|
|
982
|
-
className: "icon-
|
|
999
|
+
className: "icon-delete"
|
|
983
1000
|
})))), /*#__PURE__*/React.createElement("img", {
|
|
984
1001
|
src: image,
|
|
985
1002
|
height: 190,
|
|
@@ -1011,7 +1028,7 @@ File.propTypes = {
|
|
|
1011
1028
|
defaultData: PropTypes.object
|
|
1012
1029
|
};
|
|
1013
1030
|
|
|
1014
|
-
var css_248z = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{box-shadow:0 1px 0 0 rgba(0,0,0,.08);box-sizing:border-box;display:flex;flex-direction:row;height:30px;padding-left:24px;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;justify-content:center;line-height:24px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;
|
|
1031
|
+
var css_248z = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{box-shadow:0 1px 0 0 rgba(0,0,0,.08);box-sizing:border-box;display:flex;flex-direction:row;height:30px;padding-left:24px;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;justify-content:center;line-height:24px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;padding:0 10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
|
|
1015
1032
|
var styles = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
|
|
1016
1033
|
styleInject(css_248z);
|
|
1017
1034
|
|
|
@@ -1021,33 +1038,38 @@ const Modal = ({
|
|
|
1021
1038
|
className,
|
|
1022
1039
|
type,
|
|
1023
1040
|
data,
|
|
1024
|
-
selected
|
|
1041
|
+
selected,
|
|
1042
|
+
children
|
|
1025
1043
|
}) => {
|
|
1026
1044
|
classnames(styles.modal, className);
|
|
1027
1045
|
const [select, setSelect] = useState(selected);
|
|
1028
1046
|
return /*#__PURE__*/React.createElement("div", {
|
|
1029
1047
|
className: styles["modal-wrap"]
|
|
1030
|
-
}, type ==
|
|
1048
|
+
}, type == "content" ? /*#__PURE__*/React.createElement("div", {
|
|
1031
1049
|
className: styles["modal-content"]
|
|
1032
1050
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1033
1051
|
className: styles["modal-top"]
|
|
1034
1052
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1035
|
-
className: styles[
|
|
1036
|
-
},
|
|
1053
|
+
className: styles["modal-title"]
|
|
1054
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
1055
|
+
variant: TypographyType.h5
|
|
1056
|
+
}, headerText)), /*#__PURE__*/React.createElement("div", {
|
|
1037
1057
|
className: styles["close-btn"],
|
|
1038
1058
|
onClick: () => setShow(false)
|
|
1039
|
-
}, /*#__PURE__*/React.createElement(
|
|
1059
|
+
}, /*#__PURE__*/React.createElement("i", {
|
|
1040
1060
|
className: "icon-close"
|
|
1041
1061
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
1042
1062
|
className: styles["modal-section"]
|
|
1043
|
-
})) : type ==
|
|
1063
|
+
}, children)) : type == "images" ? /*#__PURE__*/React.createElement("div", {
|
|
1044
1064
|
className: styles["modal-content"]
|
|
1045
1065
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1046
1066
|
className: styles["close-btn"],
|
|
1047
1067
|
onClick: () => setShow(false)
|
|
1048
|
-
}, /*#__PURE__*/React.createElement(
|
|
1068
|
+
}, /*#__PURE__*/React.createElement("i", {
|
|
1049
1069
|
className: "icon-close"
|
|
1050
|
-
})), /*#__PURE__*/React.createElement("div",
|
|
1070
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
1071
|
+
className: styles["modal-section"]
|
|
1072
|
+
}, /*#__PURE__*/React.createElement("div", null, select > 1 ? /*#__PURE__*/React.createElement("h1", {
|
|
1051
1073
|
onClick: () => setSelect(select - 1)
|
|
1052
1074
|
}, "-") : null, data.map(elem => {
|
|
1053
1075
|
if (select == elem.id) {
|
|
@@ -1061,9 +1083,7 @@ const Modal = ({
|
|
|
1061
1083
|
onClick: () => {
|
|
1062
1084
|
setSelect(select + 1);
|
|
1063
1085
|
}
|
|
1064
|
-
}, "+") : null)
|
|
1065
|
-
className: styles["modal-section"]
|
|
1066
|
-
})) : null);
|
|
1086
|
+
}, "+") : null))) : null);
|
|
1067
1087
|
};
|
|
1068
1088
|
Modal.propTypes = {
|
|
1069
1089
|
setShow: PropTypes.func,
|
package/dist/index.js
CHANGED
|
@@ -140,7 +140,7 @@ Button.defaultProps = {
|
|
|
140
140
|
outline: false
|
|
141
141
|
};
|
|
142
142
|
|
|
143
|
-
var css_248z$b = "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
|
|
143
|
+
var css_248z$b = "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;text-transform:uppercase}h4{font-size:24px;line-height:24px}h4,h5{font-weight:600;text-transform:uppercase}h5{font-size:20px;line-height:26px}h6{font-size:14px;font-weight:600;line-height:20px;text-transform:none}p{font-size:16px;line-height:22px}p,span{color:#3c393e;font-weight:500;text-transform:none}span{font-size:12px;line-height:16px}i{font-family:icomoon;font-style:inherit}";
|
|
144
144
|
styleInject(css_248z$b);
|
|
145
145
|
|
|
146
146
|
const TypographyType = {
|
|
@@ -329,32 +329,39 @@ const Checkbox = ({
|
|
|
329
329
|
onChange,
|
|
330
330
|
label,
|
|
331
331
|
keyNames,
|
|
332
|
-
onClick,
|
|
333
332
|
...props
|
|
334
333
|
}) => {
|
|
335
334
|
const classProps = classnames__default["default"](styles$8.checkbox, className);
|
|
336
335
|
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
337
336
|
const [data, setData] = React.useState(parseData);
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
337
|
+
React.useEffect(() => {
|
|
338
|
+
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
339
|
+
setData(parseData);
|
|
340
|
+
}, [jsonData]);
|
|
341
|
+
React.useEffect(() => {
|
|
342
|
+
onChange(data.filter(d => d.checked));
|
|
343
|
+
}, [data]);
|
|
341
344
|
const handleChange = e => {
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
});
|
|
356
|
-
}
|
|
345
|
+
let id;
|
|
346
|
+
data.forEach((value, key) => {
|
|
347
|
+
if (value[keyNames.value] === e.target.value) {
|
|
348
|
+
id = key;
|
|
349
|
+
}
|
|
350
|
+
});
|
|
351
|
+
let items = [...data];
|
|
352
|
+
let item = {
|
|
353
|
+
...items[id]
|
|
354
|
+
};
|
|
355
|
+
item.checked = !item.checked;
|
|
356
|
+
items[id] = item;
|
|
357
|
+
setData(items);
|
|
357
358
|
};
|
|
359
|
+
!keyNames ? keyNames = {
|
|
360
|
+
id: 'id',
|
|
361
|
+
name: 'name',
|
|
362
|
+
value: 'value',
|
|
363
|
+
label: 'label'
|
|
364
|
+
} : '';
|
|
358
365
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, data.map(element => {
|
|
359
366
|
return /*#__PURE__*/React__default["default"].createElement("label", {
|
|
360
367
|
className: styles$8["checkbox-wrap"],
|
|
@@ -364,15 +371,16 @@ const Checkbox = ({
|
|
|
364
371
|
className: classProps,
|
|
365
372
|
disabled: disabled,
|
|
366
373
|
required: required,
|
|
367
|
-
value: value ? value :
|
|
368
|
-
name: name ? name :
|
|
369
|
-
|
|
370
|
-
|
|
374
|
+
value: keyNames.value ? element[keyNames.value] : '',
|
|
375
|
+
name: keyNames.name ? element[keyNames.name] : '',
|
|
376
|
+
id: keyNames.id ? element[keyNames.id] : '',
|
|
377
|
+
onChange: handleChange
|
|
371
378
|
}, props)), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
372
379
|
className: styles$8["checkmark"]
|
|
373
|
-
}), element.label ? /*#__PURE__*/React__default["default"].createElement("
|
|
374
|
-
className: styles$8.
|
|
375
|
-
|
|
380
|
+
}), element[keyNames.label] ? /*#__PURE__*/React__default["default"].createElement("label", {
|
|
381
|
+
className: styles$8.labelCheckbox,
|
|
382
|
+
for: element[keyNames.id]
|
|
383
|
+
}, element[keyNames.label]) : "");
|
|
376
384
|
}));
|
|
377
385
|
};
|
|
378
386
|
Checkbox.propTypes = {
|
|
@@ -384,7 +392,6 @@ Checkbox.propTypes = {
|
|
|
384
392
|
value: PropTypes__default["default"].string,
|
|
385
393
|
jsonData: PropTypes__default["default"].string,
|
|
386
394
|
label: PropTypes__default["default"].string,
|
|
387
|
-
onClick: PropTypes__default["default"].func,
|
|
388
395
|
keyNames: PropTypes__default["default"].object
|
|
389
396
|
};
|
|
390
397
|
Checkbox.defaultProps = {
|
|
@@ -392,7 +399,7 @@ Checkbox.defaultProps = {
|
|
|
392
399
|
jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
|
|
393
400
|
};
|
|
394
401
|
|
|
395
|
-
var css_248z$8 = "
|
|
402
|
+
var css_248z$8 = "";
|
|
396
403
|
styleInject(css_248z$8);
|
|
397
404
|
|
|
398
405
|
/**
|
|
@@ -566,7 +573,9 @@ const Pagination = ({
|
|
|
566
573
|
setCurrentPage(currentPage);
|
|
567
574
|
}, [currentPage]);
|
|
568
575
|
const onPageChange = page => {
|
|
569
|
-
|
|
576
|
+
if (page > 0) {
|
|
577
|
+
setCurrentPage(page);
|
|
578
|
+
}
|
|
570
579
|
};
|
|
571
580
|
React.useEffect(() => {
|
|
572
581
|
onChange(currentPageNumber);
|
|
@@ -607,23 +616,31 @@ const Pagination = ({
|
|
|
607
616
|
let currentPageIndex = paginationRange.indexOf(currentPageNumber);
|
|
608
617
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
609
618
|
key: id,
|
|
610
|
-
className: classnames__default["default"](styles$6[
|
|
619
|
+
className: classnames__default["default"](styles$6["pagination-jump-next"], styles$6.listItem),
|
|
611
620
|
onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
|
|
612
621
|
disabled: currentPageIndex === 0 ? true : false
|
|
613
|
-
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
614
|
-
className: styles$6[
|
|
622
|
+
}, id < currentPageIndex ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
623
|
+
className: styles$6["pagination-jump-next-txt"]
|
|
624
|
+
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
625
|
+
className: "icon-text"
|
|
626
|
+
})), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
627
|
+
className: styles$6["pagination-jump-next-arrow"]
|
|
628
|
+
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
629
|
+
className: "icon-arrow-jump-back"
|
|
630
|
+
}))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
631
|
+
className: styles$6["pagination-jump-next-txt"]
|
|
615
632
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
616
633
|
className: "icon-text"
|
|
617
634
|
})), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
618
|
-
className: styles$6[
|
|
635
|
+
className: styles$6["pagination-jump-next-arrow"]
|
|
619
636
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
620
637
|
className: "icon-arrow-jump-next"
|
|
621
|
-
})));
|
|
638
|
+
}))));
|
|
622
639
|
}
|
|
623
640
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
624
641
|
onClick: () => onPageChange(pageNumber),
|
|
625
642
|
key: id,
|
|
626
|
-
className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$6.selected : styles$6.listItem}`, styles$6[
|
|
643
|
+
className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$6.selected : styles$6.listItem}`, styles$6["pagination-item"])
|
|
627
644
|
}, pageNumber);
|
|
628
645
|
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
629
646
|
onClick: onNext,
|
|
@@ -799,7 +816,7 @@ Stepper.propTypes = {
|
|
|
799
816
|
activeSteps: PropTypes__default["default"].number
|
|
800
817
|
};
|
|
801
818
|
|
|
802
|
-
var css_248z$2 = ".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%;z-index:1}.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;
|
|
819
|
+
var css_248z$2 = ".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%;z-index:1}.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;line-height:22px;margin-bottom:2px;min-height:46px;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}";
|
|
803
820
|
var styles$2 = {"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"};
|
|
804
821
|
styleInject(css_248z$2);
|
|
805
822
|
|
|
@@ -990,7 +1007,7 @@ const File = ({
|
|
|
990
1007
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
991
1008
|
className: styles$1['delete-upload-icon']
|
|
992
1009
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
993
|
-
className: "icon-
|
|
1010
|
+
className: "icon-delete"
|
|
994
1011
|
})))), /*#__PURE__*/React__default["default"].createElement("img", {
|
|
995
1012
|
src: image,
|
|
996
1013
|
height: 190,
|
|
@@ -1022,7 +1039,7 @@ File.propTypes = {
|
|
|
1022
1039
|
defaultData: PropTypes__default["default"].object
|
|
1023
1040
|
};
|
|
1024
1041
|
|
|
1025
|
-
var css_248z = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{box-shadow:0 1px 0 0 rgba(0,0,0,.08);box-sizing:border-box;display:flex;flex-direction:row;height:30px;padding-left:24px;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;justify-content:center;line-height:24px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;
|
|
1042
|
+
var css_248z = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{box-shadow:0 1px 0 0 rgba(0,0,0,.08);box-sizing:border-box;display:flex;flex-direction:row;height:30px;padding-left:24px;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;justify-content:center;line-height:24px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;padding:0 10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
|
|
1026
1043
|
var styles = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
|
|
1027
1044
|
styleInject(css_248z);
|
|
1028
1045
|
|
|
@@ -1032,33 +1049,38 @@ const Modal = ({
|
|
|
1032
1049
|
className,
|
|
1033
1050
|
type,
|
|
1034
1051
|
data,
|
|
1035
|
-
selected
|
|
1052
|
+
selected,
|
|
1053
|
+
children
|
|
1036
1054
|
}) => {
|
|
1037
1055
|
classnames__default["default"](styles.modal, className);
|
|
1038
1056
|
const [select, setSelect] = React.useState(selected);
|
|
1039
1057
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1040
1058
|
className: styles["modal-wrap"]
|
|
1041
|
-
}, type ==
|
|
1059
|
+
}, type == "content" ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1042
1060
|
className: styles["modal-content"]
|
|
1043
1061
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1044
1062
|
className: styles["modal-top"]
|
|
1045
1063
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1046
|
-
className: styles[
|
|
1047
|
-
},
|
|
1064
|
+
className: styles["modal-title"]
|
|
1065
|
+
}, /*#__PURE__*/React__default["default"].createElement(Typography, {
|
|
1066
|
+
variant: TypographyType.h5
|
|
1067
|
+
}, headerText)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1048
1068
|
className: styles["close-btn"],
|
|
1049
1069
|
onClick: () => setShow(false)
|
|
1050
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
1070
|
+
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
1051
1071
|
className: "icon-close"
|
|
1052
1072
|
}))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1053
1073
|
className: styles["modal-section"]
|
|
1054
|
-
})) : type ==
|
|
1074
|
+
}, children)) : type == "images" ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1055
1075
|
className: styles["modal-content"]
|
|
1056
1076
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1057
1077
|
className: styles["close-btn"],
|
|
1058
1078
|
onClick: () => setShow(false)
|
|
1059
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
1079
|
+
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
1060
1080
|
className: "icon-close"
|
|
1061
|
-
})), /*#__PURE__*/React__default["default"].createElement("div",
|
|
1081
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1082
|
+
className: styles["modal-section"]
|
|
1083
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, select > 1 ? /*#__PURE__*/React__default["default"].createElement("h1", {
|
|
1062
1084
|
onClick: () => setSelect(select - 1)
|
|
1063
1085
|
}, "-") : null, data.map(elem => {
|
|
1064
1086
|
if (select == elem.id) {
|
|
@@ -1072,9 +1094,7 @@ const Modal = ({
|
|
|
1072
1094
|
onClick: () => {
|
|
1073
1095
|
setSelect(select + 1);
|
|
1074
1096
|
}
|
|
1075
|
-
}, "+") : null)
|
|
1076
|
-
className: styles["modal-section"]
|
|
1077
|
-
})) : null);
|
|
1097
|
+
}, "+") : null))) : null);
|
|
1078
1098
|
};
|
|
1079
1099
|
Modal.propTypes = {
|
|
1080
1100
|
setShow: PropTypes__default["default"].func,
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@font-face {
|
|
1
|
+
/* @font-face {
|
|
2
2
|
font-family: 'icomoon';
|
|
3
3
|
src: url('fonts/icomoon.eot?pr3wo0');
|
|
4
4
|
src: url('fonts/icomoon.eot?pr3wo0#iefix') format('embedded-opentype'),
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
[class^="icon-"], [class*=" icon-"] {
|
|
14
|
-
/* use !important to prevent issues with browser extensions that change fonts */
|
|
15
14
|
font-family: 'icomoon' !important;
|
|
16
15
|
speak: never;
|
|
17
16
|
font-style: normal;
|
|
@@ -20,7 +19,6 @@
|
|
|
20
19
|
text-transform: none;
|
|
21
20
|
line-height: 1;
|
|
22
21
|
|
|
23
|
-
/* Better Font Rendering =========== */
|
|
24
22
|
-webkit-font-smoothing: antialiased;
|
|
25
23
|
-moz-osx-font-smoothing: grayscale;
|
|
26
24
|
}
|
|
@@ -57,4 +55,4 @@
|
|
|
57
55
|
}
|
|
58
56
|
.icon-arrow-back:before {
|
|
59
57
|
content: "\e904";
|
|
60
|
-
}
|
|
58
|
+
} */
|
|
@@ -2,6 +2,7 @@ import React, { useState } from "react";
|
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import classNames from "classnames";
|
|
4
4
|
import styles from "./checkbox.module.css";
|
|
5
|
+
import { useEffect } from "react";
|
|
5
6
|
|
|
6
7
|
export const Checkbox = ({
|
|
7
8
|
disabled,
|
|
@@ -13,35 +14,38 @@ export const Checkbox = ({
|
|
|
13
14
|
onChange,
|
|
14
15
|
label,
|
|
15
16
|
keyNames,
|
|
16
|
-
onClick,
|
|
17
17
|
...props
|
|
18
18
|
}) => {
|
|
19
19
|
const classProps = classNames(styles.checkbox, className);
|
|
20
20
|
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
21
21
|
const [data, setData] = useState(parseData);
|
|
22
22
|
|
|
23
|
-
const handleClick = (e) => {
|
|
24
|
-
onClick(e)
|
|
25
|
-
}
|
|
26
23
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
|
|
26
|
+
setData(parseData);
|
|
27
|
+
},[jsonData])
|
|
28
|
+
useEffect(()=>{
|
|
29
|
+
onChange(data.filter(d => d.checked));
|
|
30
|
+
},[data])
|
|
31
|
+
|
|
32
|
+
const handleChange = e => {
|
|
33
|
+
let id;
|
|
34
|
+
data.forEach((value,key) => {
|
|
35
|
+
if (value[keyNames.value] === e.target.value){
|
|
36
|
+
id = key;
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
let items = [...data];
|
|
41
|
+
let item = {...items[id]};
|
|
42
|
+
item.checked = !item.checked;
|
|
43
|
+
items[id] = item;
|
|
44
|
+
setData(items);
|
|
43
45
|
};
|
|
44
46
|
|
|
47
|
+
!keyNames ? keyNames = {id:'id',name:'name',value:'value', label: 'label'} : ''
|
|
48
|
+
|
|
45
49
|
return (
|
|
46
50
|
<>
|
|
47
51
|
{data.map((element) => {
|
|
@@ -52,17 +56,20 @@ export const Checkbox = ({
|
|
|
52
56
|
className={classProps}
|
|
53
57
|
disabled={disabled}
|
|
54
58
|
required={required}
|
|
55
|
-
value={value ? value :
|
|
56
|
-
name={name ? name :
|
|
59
|
+
value={keyNames.value ? element[keyNames.value] : ''}
|
|
60
|
+
name={keyNames.name ? element[keyNames.name] : ''}
|
|
61
|
+
id={keyNames.id ? element[keyNames.id] : ''}
|
|
57
62
|
onChange={handleChange}
|
|
58
|
-
onClick={handleClick}
|
|
59
63
|
{...props}
|
|
60
64
|
/>
|
|
61
65
|
<span className={styles["checkmark"]} />
|
|
62
|
-
{element.label ? (
|
|
63
|
-
<
|
|
64
|
-
{
|
|
65
|
-
|
|
66
|
+
{element[keyNames.label] ? (
|
|
67
|
+
<label
|
|
68
|
+
className={styles.labelCheckbox}
|
|
69
|
+
for={element[keyNames.id]}
|
|
70
|
+
>
|
|
71
|
+
{element[keyNames.label]}
|
|
72
|
+
</label>
|
|
66
73
|
) : (
|
|
67
74
|
""
|
|
68
75
|
)}
|
|
@@ -82,7 +89,6 @@ Checkbox.propTypes = {
|
|
|
82
89
|
value: PropTypes.string,
|
|
83
90
|
jsonData: PropTypes.string,
|
|
84
91
|
label: PropTypes.string,
|
|
85
|
-
onClick: PropTypes.func,
|
|
86
92
|
keyNames: PropTypes.object,
|
|
87
93
|
};
|
|
88
94
|
|
|
@@ -77,8 +77,7 @@ export const File = ({
|
|
|
77
77
|
>
|
|
78
78
|
<div className={styles['delete-upload-file']}>
|
|
79
79
|
<div className={styles['delete-upload-icon']}>
|
|
80
|
-
|
|
81
|
-
<i className="icon-arrow"/>
|
|
80
|
+
<i className="icon-delete"/>
|
|
82
81
|
</div>
|
|
83
82
|
</div>
|
|
84
83
|
</div>
|
|
@@ -2,54 +2,84 @@ import React, { useState } from "react";
|
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import classnames from "classnames";
|
|
4
4
|
import styles from "./modal.module.css";
|
|
5
|
-
import Icon from
|
|
5
|
+
import Icon from "../icon/Icon";
|
|
6
|
+
import { Typography, TypographyType } from "../typography";
|
|
6
7
|
|
|
7
|
-
export const Modal = ({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
export const Modal = ({
|
|
9
|
+
setShow,
|
|
10
|
+
headerText,
|
|
11
|
+
className,
|
|
12
|
+
type,
|
|
13
|
+
data,
|
|
14
|
+
selected,
|
|
15
|
+
children,
|
|
16
|
+
}) => {
|
|
17
|
+
const classProps = classnames(styles.modal, className);
|
|
18
|
+
const [select, setSelect] = useState(selected);
|
|
19
|
+
return (
|
|
20
|
+
<div className={styles["modal-wrap"]}>
|
|
21
|
+
{type == "content" ? (
|
|
22
|
+
<div className={styles["modal-content"]}>
|
|
23
|
+
<div className={styles["modal-top"]}>
|
|
24
|
+
<div className={styles["modal-title"]}>
|
|
25
|
+
<Typography variant={TypographyType.h5}>{headerText}</Typography>
|
|
26
|
+
</div>
|
|
27
|
+
<div
|
|
28
|
+
className={styles["close-btn"]}
|
|
29
|
+
onClick={() => setShow(false)}
|
|
30
|
+
>
|
|
31
|
+
<i className="icon-close" />
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div className={styles["modal-section"]}>{children}</div>
|
|
35
|
+
</div>
|
|
36
|
+
) : type == "images" ? (
|
|
37
|
+
<div className={styles["modal-content"]}>
|
|
38
|
+
<div
|
|
39
|
+
className={styles["close-btn"]}
|
|
40
|
+
onClick={() => setShow(false)}
|
|
41
|
+
>
|
|
42
|
+
<i className="icon-close" />
|
|
43
|
+
</div>
|
|
12
44
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
</div>
|
|
45
|
-
);
|
|
45
|
+
<div className={styles["modal-section"]}>
|
|
46
|
+
<div>
|
|
47
|
+
{select > 1 ? (
|
|
48
|
+
<h1 onClick={() => setSelect(select - 1)}>-</h1>
|
|
49
|
+
) : null}
|
|
50
|
+
{data.map((elem) => {
|
|
51
|
+
if (select == elem.id) {
|
|
52
|
+
return (
|
|
53
|
+
<img
|
|
54
|
+
width="600px"
|
|
55
|
+
key={elem.id}
|
|
56
|
+
src={elem.url}
|
|
57
|
+
/>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
})}
|
|
61
|
+
{select < data.length ? (
|
|
62
|
+
<h1
|
|
63
|
+
onClick={() => {
|
|
64
|
+
setSelect(select + 1);
|
|
65
|
+
}}
|
|
66
|
+
>
|
|
67
|
+
+
|
|
68
|
+
</h1>
|
|
69
|
+
) : null}
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
) : null}
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
46
76
|
};
|
|
47
77
|
|
|
48
78
|
Modal.propTypes = {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
79
|
+
setShow: PropTypes.func,
|
|
80
|
+
headerText: PropTypes.string,
|
|
81
|
+
className: PropTypes.string,
|
|
82
|
+
type: PropTypes.string,
|
|
83
|
+
selected: PropTypes.string,
|
|
84
|
+
data: PropTypes.array,
|
|
55
85
|
};
|
|
@@ -3,15 +3,15 @@ import PropTypes from "prop-types";
|
|
|
3
3
|
import classnames from "classnames";
|
|
4
4
|
import styles from "./pagination.module.css";
|
|
5
5
|
import { PaginationRange, Dots } from "./paginationRange";
|
|
6
|
-
import Icon from
|
|
6
|
+
import Icon from "../icon/Icon";
|
|
7
7
|
|
|
8
8
|
export const Pagination = ({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
onChange,
|
|
10
|
+
totalCount,
|
|
11
|
+
siblingCount,
|
|
12
|
+
currentPage,
|
|
13
|
+
offset,
|
|
14
|
+
className,
|
|
15
15
|
}) => {
|
|
16
16
|
const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
|
|
17
17
|
const [currentPageNumber, setCurrentPage] = useState(currentPage);
|
|
@@ -25,9 +25,10 @@ export const Pagination = ({
|
|
|
25
25
|
useEffect(() => {
|
|
26
26
|
setCurrentPage(currentPage);
|
|
27
27
|
}, [currentPage]);
|
|
28
|
-
|
|
29
28
|
const onPageChange = (page) => {
|
|
29
|
+
if(page > 0){
|
|
30
30
|
setCurrentPage(page);
|
|
31
|
+
}
|
|
31
32
|
};
|
|
32
33
|
useEffect(() => {
|
|
33
34
|
onChange(currentPageNumber);
|
|
@@ -43,77 +44,131 @@ export const Pagination = ({
|
|
|
43
44
|
}
|
|
44
45
|
const classProps = classnames(styles.list, className ? className : styles["pagination-bar"]);
|
|
45
46
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
const onNext = () => {
|
|
48
|
+
onPageChange(currentPageNumber + 1);
|
|
49
|
+
};
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
const onPrevious = () => {
|
|
52
|
+
onPageChange(currentPageNumber - 1);
|
|
53
|
+
};
|
|
53
54
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
55
|
+
const onNextFive = () => {
|
|
56
|
+
currentPageNumber !== lastPage - 4
|
|
57
|
+
? onPageChange(currentPageNumber + 5)
|
|
58
|
+
: onPageChange(currentPageNumber + 4);
|
|
59
|
+
};
|
|
58
60
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
const onPreviousFive = (e) => {
|
|
62
|
+
currentPageNumber !== 5
|
|
63
|
+
? onPageChange(currentPageNumber - 5)
|
|
64
|
+
: onPageChange(currentPageNumber - 4);
|
|
65
|
+
};
|
|
64
66
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
67
|
+
let lastPage = paginationRange[paginationRange.length - 1];
|
|
68
|
+
return (
|
|
69
|
+
<ul className={classProps}>
|
|
70
|
+
<button
|
|
71
|
+
className={styles["pagination-btn"]}
|
|
72
|
+
onClick={onPrevious}
|
|
73
|
+
disabled={currentPage === 1 ? true : false}
|
|
74
|
+
>
|
|
75
|
+
{/* <Icon className="icon-arrow-back"/> */}
|
|
76
|
+
<i className="icon-arrow-back"></i>
|
|
77
|
+
</button>
|
|
72
78
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
79
|
+
{paginationRange.map((pageNumber, id) => {
|
|
80
|
+
if (pageNumber === Dots) {
|
|
81
|
+
let currentPageIndex = paginationRange.indexOf(currentPageNumber);
|
|
82
|
+
return (
|
|
83
|
+
<li
|
|
84
|
+
key={id}
|
|
85
|
+
className={classnames(
|
|
86
|
+
styles["pagination-jump-next"],
|
|
87
|
+
styles.listItem
|
|
88
|
+
)}
|
|
89
|
+
onClick={
|
|
90
|
+
id < currentPageIndex
|
|
91
|
+
? onPreviousFive
|
|
92
|
+
: onNextFive
|
|
93
|
+
}
|
|
94
|
+
disabled={currentPageIndex === 0 ? true : false}
|
|
95
|
+
>
|
|
96
|
+
{id < currentPageIndex ? (
|
|
97
|
+
<>
|
|
98
|
+
<span
|
|
99
|
+
className={
|
|
100
|
+
styles["pagination-jump-next-txt"]
|
|
101
|
+
}
|
|
102
|
+
>
|
|
103
|
+
<i className="icon-text" />
|
|
104
|
+
</span>
|
|
105
|
+
<span
|
|
106
|
+
className={
|
|
107
|
+
styles["pagination-jump-next-arrow"]
|
|
108
|
+
}
|
|
109
|
+
>
|
|
110
|
+
{/* <Icon className="icon-arrow-jump-next"/> */}
|
|
111
|
+
<i className="icon-arrow-jump-back"></i>
|
|
112
|
+
</span>
|
|
113
|
+
</>
|
|
114
|
+
) : (
|
|
115
|
+
<>
|
|
116
|
+
<span
|
|
117
|
+
className={
|
|
118
|
+
styles["pagination-jump-next-txt"]
|
|
119
|
+
}
|
|
120
|
+
>
|
|
121
|
+
<i className="icon-text" />
|
|
122
|
+
</span>
|
|
123
|
+
<span
|
|
124
|
+
className={
|
|
125
|
+
styles["pagination-jump-next-arrow"]
|
|
126
|
+
}
|
|
127
|
+
>
|
|
128
|
+
{/* <Icon className="icon-arrow-jump-next"/> */}
|
|
129
|
+
<i className="icon-arrow-jump-next"></i>
|
|
130
|
+
</span>
|
|
131
|
+
</>
|
|
132
|
+
)}
|
|
133
|
+
</li>
|
|
134
|
+
);
|
|
135
|
+
}
|
|
89
136
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
137
|
+
return (
|
|
138
|
+
<li
|
|
139
|
+
onClick={() => onPageChange(pageNumber)}
|
|
140
|
+
key={id}
|
|
141
|
+
className={classnames(
|
|
142
|
+
`${
|
|
143
|
+
pageNumber === currentPageNumber
|
|
144
|
+
? styles.selected
|
|
145
|
+
: styles.listItem
|
|
146
|
+
}`,
|
|
147
|
+
styles["pagination-item"]
|
|
148
|
+
)}
|
|
149
|
+
>
|
|
150
|
+
{pageNumber}
|
|
151
|
+
</li>
|
|
152
|
+
);
|
|
153
|
+
})}
|
|
154
|
+
<button
|
|
155
|
+
onClick={onNext}
|
|
156
|
+
className={styles["pagination-btn"]}
|
|
157
|
+
disabled={currentPageNumber === lastPage ? true : false}
|
|
158
|
+
>
|
|
159
|
+
{/* <Icon className='icon-arrow'/> */}
|
|
160
|
+
<i className="icon-arrow"></i>
|
|
161
|
+
</button>
|
|
162
|
+
</ul>
|
|
163
|
+
);
|
|
109
164
|
};
|
|
110
165
|
|
|
111
166
|
Pagination.propTypes = {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
167
|
+
offset: PropTypes.number,
|
|
168
|
+
totalCount: PropTypes.number,
|
|
169
|
+
className: PropTypes.string,
|
|
170
|
+
siblingCount: PropTypes.number,
|
|
171
|
+
currentPage: PropTypes.number,
|
|
117
172
|
};
|
|
118
173
|
|
|
119
174
|
Pagination.defaultProps = { offset: 2, siblingCount: 2 };
|
|
@@ -29,11 +29,11 @@ h4 {
|
|
|
29
29
|
h5 {
|
|
30
30
|
text-transform: uppercase;
|
|
31
31
|
font-size: 20px;
|
|
32
|
-
line-height:
|
|
32
|
+
line-height: 26px;
|
|
33
33
|
font-weight: 600;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
h6 {
|
|
37
37
|
text-transform: none;
|
|
38
38
|
font-size: 14px;
|
|
39
39
|
line-height: 20px;
|
|
@@ -44,7 +44,7 @@ p {
|
|
|
44
44
|
text-transform: none;
|
|
45
45
|
font-size: 16px;
|
|
46
46
|
line-height: 22px;
|
|
47
|
-
font-weight:
|
|
47
|
+
font-weight: 500;
|
|
48
48
|
color: #3C393E;
|
|
49
49
|
}
|
|
50
50
|
|