@xaypay/tui 0.0.27 → 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.
Files changed (9) hide show
  1. package/dist/index.es.js +68 -48
  2. package/dist/index.js +68 -48
  3. package/package.json +1 -1
  4. package/src/components/checkbox/index.js +34 -28
  5. package/src/components/file/index.js +1 -2
  6. package/src/components/modal/index.js +75 -45
  7. package/src/components/modal/modal.module.css +2 -2
  8. package/src/components/pagination/index.js +125 -70
  9. 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}h3,h4{text-transform:uppercase}h4{font-size:24px;font-weight:600;line-height:24px}h5{font-size:20px;font-size:14px;line-height:20px;text-transform:uppercase}h5,p{font-weight:600;text-transform:none}p{font-size:16px;line-height:22px}p,span{color:#3c393e}span{font-size:12px;font-weight:500;line-height:16px;text-transform:none}i{font-family:icomoon;font-style:inherit}";
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
- const handleClick = e => {
328
- onClick(e);
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
- if (e.target.checked) {
332
- data.forEach(item => {
333
- if (item.value === e.target.value) {
334
- item.checked = true;
335
- setData([...data]);
336
- }
337
- });
338
- } else if (e.target.checked === false) {
339
- data.forEach(item => {
340
- if (item.checked && item.value === e.target.value) {
341
- delete item.checked;
342
- setData([...data]);
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 : element.value,
357
- name: name ? name : element.name,
358
- onChange: handleChange,
359
- onClick: handleClick
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("span", {
363
- className: styles$8.labelRadio
364
- }, label ? label : element.label) : "");
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 = {
@@ -555,7 +562,9 @@ const Pagination = ({
555
562
  setCurrentPage(currentPage);
556
563
  }, [currentPage]);
557
564
  const onPageChange = page => {
558
- setCurrentPage(page);
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['pagination-jump-next'], styles$6.listItem),
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['pagination-jump-next-txt']
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['pagination-jump-next-arrow']
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['pagination-item'])
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,
@@ -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-arrow"
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;max-width:300px;min-height:130px;position:absolute;right:0;top:110px;width:100%}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
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 == 'content' ? /*#__PURE__*/React.createElement("div", {
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['modal-title']
1036
- }, "Title"), /*#__PURE__*/React.createElement("div", {
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(Icon, {
1059
+ }, /*#__PURE__*/React.createElement("i", {
1040
1060
  className: "icon-close"
1041
1061
  }))), /*#__PURE__*/React.createElement("div", {
1042
1062
  className: styles["modal-section"]
1043
- })) : type == 'images' ? /*#__PURE__*/React.createElement("div", {
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(Icon, {
1068
+ }, /*#__PURE__*/React.createElement("i", {
1049
1069
  className: "icon-close"
1050
- })), /*#__PURE__*/React.createElement("div", null, select > 1 ? /*#__PURE__*/React.createElement("h1", {
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), /*#__PURE__*/React.createElement("div", {
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}h3,h4{text-transform:uppercase}h4{font-size:24px;font-weight:600;line-height:24px}h5{font-size:20px;font-size:14px;line-height:20px;text-transform:uppercase}h5,p{font-weight:600;text-transform:none}p{font-size:16px;line-height:22px}p,span{color:#3c393e}span{font-size:12px;font-weight:500;line-height:16px;text-transform:none}i{font-family:icomoon;font-style:inherit}";
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
- const handleClick = e => {
339
- onClick(e);
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
- if (e.target.checked) {
343
- data.forEach(item => {
344
- if (item.value === e.target.value) {
345
- item.checked = true;
346
- setData([...data]);
347
- }
348
- });
349
- } else if (e.target.checked === false) {
350
- data.forEach(item => {
351
- if (item.checked && item.value === e.target.value) {
352
- delete item.checked;
353
- setData([...data]);
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 : element.value,
368
- name: name ? name : element.name,
369
- onChange: handleChange,
370
- onClick: handleClick
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("span", {
374
- className: styles$8.labelRadio
375
- }, label ? label : element.label) : "");
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 = {
@@ -566,7 +573,9 @@ const Pagination = ({
566
573
  setCurrentPage(currentPage);
567
574
  }, [currentPage]);
568
575
  const onPageChange = page => {
569
- setCurrentPage(page);
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['pagination-jump-next'], styles$6.listItem),
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['pagination-jump-next-txt']
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['pagination-jump-next-arrow']
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['pagination-item'])
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,
@@ -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-arrow"
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;max-width:300px;min-height:130px;position:absolute;right:0;top:110px;width:100%}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
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 == 'content' ? /*#__PURE__*/React__default["default"].createElement("div", {
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['modal-title']
1047
- }, "Title"), /*#__PURE__*/React__default["default"].createElement("div", {
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(Icon, {
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 == 'images' ? /*#__PURE__*/React__default["default"].createElement("div", {
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(Icon, {
1079
+ }, /*#__PURE__*/React__default["default"].createElement("i", {
1060
1080
  className: "icon-close"
1061
- })), /*#__PURE__*/React__default["default"].createElement("div", null, select > 1 ? /*#__PURE__*/React__default["default"].createElement("h1", {
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), /*#__PURE__*/React__default["default"].createElement("div", {
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.27",
3
+ "version": "0.0.28",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/checkbox/index.js CHANGED
@@ -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
- const handleChange = (e) => {
28
- if (e.target.checked) {
29
- data.forEach((item) => {
30
- if (item.value === e.target.value) {
31
- item.checked = true;
32
- setData([...data]);
33
- }
34
- });
35
- } else if (e.target.checked === false) {
36
- data.forEach((item) => {
37
- if (item.checked && item.value === e.target.value) {
38
- delete item.checked;
39
- setData([...data]);
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 : element.value}
56
- name={name ? name : element.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
- <span className={styles.labelRadio}>
64
- {label ? label : element.label}
65
- </span>
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
 
package/src/components/file/index.js CHANGED
@@ -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
- {/*<Icon className='icon-delete'/>*/}
81
- <i className="icon-arrow"/>
80
+ <i className="icon-delete"/>
82
81
  </div>
83
82
  </div>
84
83
  </div>
package/src/components/modal/index.js CHANGED
@@ -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 '../icon/Icon';
5
+ import Icon from "../icon/Icon";
6
+ import { Typography, TypographyType } from "../typography";
6
7
 
7
- export const Modal = ({ setShow, headerText, className, type, data, selected}) => {
8
- const classProps = classnames(styles.modal, className);
9
- const [select, setSelect] = useState(selected)
10
- return (
11
- <div className={styles["modal-wrap"]}>
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
- type == 'content' ?
15
- <div className={styles["modal-content"]}>
16
- <div className={styles["modal-top"]}>
17
- <div className={styles['modal-title']}>Title</div>
18
- <div className={styles["close-btn"]} onClick={() => setShow(false)}>
19
- <Icon className="icon-close" />
20
- </div>
21
- </div>
22
- <div className={styles["modal-section"]} />
23
- </div>
24
- : type == 'images' ?
25
- <div className={styles["modal-content"]}>
26
- <div className={styles["close-btn"]} onClick={() => setShow(false)}>
27
- <Icon className="icon-close" />
28
- </div>
29
- <div>
30
- {select > 1 ? <h1 onClick={()=>setSelect(select - 1)}>-</h1> : null}
31
- {
32
- data.map(elem => {
33
- if(select == elem.id){
34
- return<img width='600px' key={elem.id} src={elem.url}/>
35
- }
36
- })
37
- }
38
- {select < data.length ? <h1 onClick={()=>{ setSelect(select + 1)}}>+</h1>: null}
39
- </div>
40
- <div className={styles["modal-section"]} />
41
- </div>
42
- : null
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
- setShow: PropTypes.func,
50
- headerText: PropTypes.string,
51
- className: PropTypes.string,
52
- type: PropTypes.string,
53
- selected: PropTypes.string,
54
- data: PropTypes.array
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
  };
package/src/components/modal/modal.module.css CHANGED
@@ -45,8 +45,8 @@
45
45
  }
46
46
  .modal-content {
47
47
  position: absolute;
48
- width: 100%;
49
- max-width: 300px;
48
+ width: fit-content;
49
+ padding: 0 10px;
50
50
  min-height: 130px;
51
51
  top: 110px;
52
52
  left: 0;
package/src/components/pagination/index.js CHANGED
@@ -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 '../icon/Icon'
6
+ import Icon from "../icon/Icon";
7
7
 
8
8
  export const Pagination = ({
9
- onChange,
10
- totalCount,
11
- siblingCount,
12
- currentPage,
13
- offset,
14
- className,
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
- const onNext = () => {
47
- onPageChange(currentPageNumber + 1);
48
- };
47
+ const onNext = () => {
48
+ onPageChange(currentPageNumber + 1);
49
+ };
49
50
 
50
- const onPrevious = () => {
51
- onPageChange(currentPageNumber - 1);
52
- };
51
+ const onPrevious = () => {
52
+ onPageChange(currentPageNumber - 1);
53
+ };
53
54
 
54
- const onNextFive = () => {
55
- currentPageNumber !== lastPage - 4 ?
56
- onPageChange(currentPageNumber + 5) : onPageChange(currentPageNumber + 4);
57
- };
55
+ const onNextFive = () => {
56
+ currentPageNumber !== lastPage - 4
57
+ ? onPageChange(currentPageNumber + 5)
58
+ : onPageChange(currentPageNumber + 4);
59
+ };
58
60
 
59
- const onPreviousFive = (e) => {
60
- currentPageNumber !== 5
61
- ? onPageChange(currentPageNumber - 5)
62
- : onPageChange(currentPageNumber - 4);
63
- };
61
+ const onPreviousFive = (e) => {
62
+ currentPageNumber !== 5
63
+ ? onPageChange(currentPageNumber - 5)
64
+ : onPageChange(currentPageNumber - 4);
65
+ };
64
66
 
65
- let lastPage = paginationRange[paginationRange.length - 1];
66
- return (
67
- <ul className={classProps}>
68
- <button className={styles["pagination-btn"]} onClick={onPrevious} disabled={currentPage === 1 ? true : false}>
69
- {/* <Icon className="icon-arrow-back"/> */}
70
- <i className="icon-arrow-back"></i>
71
- </button>
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
- {paginationRange.map((pageNumber, id) => {
74
- if (pageNumber === Dots) {
75
- let currentPageIndex = paginationRange.indexOf(currentPageNumber);
76
- return (
77
- <li key={id} className={classnames(styles['pagination-jump-next'],styles.listItem)} onClick={id < currentPageIndex ? onPreviousFive : onNextFive}
78
- disabled={currentPageIndex === 0 ? true : false}>
79
- <span className={styles['pagination-jump-next-txt']}>
80
- <i className='icon-text'/>
81
- </span>
82
- <span className={styles['pagination-jump-next-arrow']}>
83
- {/* <Icon className="icon-arrow-jump-next"/> */}
84
- <i className="icon-arrow-jump-next"></i>
85
- </span>
86
- </li>
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
- return (
91
- <li
92
- onClick={() => onPageChange(pageNumber)}
93
- key={id}
94
- className={classnames(`${pageNumber === currentPageNumber ? styles.selected : styles.listItem}`, styles['pagination-item'])}>
95
- {pageNumber}
96
- </li>
97
- );
98
- })}
99
- <button
100
- onClick={onNext}
101
- className={styles["pagination-btn"]}
102
- disabled={currentPageNumber === lastPage ? true : false}
103
- >
104
- {/* <Icon className='icon-arrow'/> */}
105
- <i className="icon-arrow"></i>
106
- </button>
107
- </ul>
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
- offset: PropTypes.number,
113
- totalCount: PropTypes.number,
114
- className: PropTypes.string,
115
- siblingCount: PropTypes.number,
116
- currentPage: PropTypes.number,
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 };
package/src/components/typography/typography.module.css CHANGED
@@ -29,11 +29,11 @@ h4 {
29
29
  h5 {
30
30
  text-transform: uppercase;
31
31
  font-size: 20px;
32
- line-height: 20px;
32
+ line-height: 26px;
33
33
  font-weight: 600;
34
34
  }
35
35
 
36
- h5 {
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: 600;
47
+ font-weight: 500;
48
48
  color: #3C393E;
49
49
  }
50
50