@xaypay/tui 0.0.27 → 0.0.29

package/dist/index.es.js

@@ -129,7 +129,7 @@ Button.defaultProps = {
   outline: false
 };
 
-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}";
+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}";
 styleInject(css_248z$b);
 
 const TypographyType = {
@@ -324,26 +324,34 @@ const Checkbox = ({
   const classProps = classnames(styles$8.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = useState(parseData);
-  const handleClick = e => {
-    onClick(e);
-  };
+  useEffect(() => {
+    const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+    setData(parseData);
+  }, [jsonData]);
+  useEffect(() => {
+    onChange ? onChange(data.filter(d => d.checked)) : '';
+  }, [data]);
   const handleChange = e => {
-    if (e.target.checked) {
-      data.forEach(item => {
-        if (item.value === e.target.value) {
-          item.checked = true;
-          setData([...data]);
-        }
-      });
-    } else if (e.target.checked === false) {
-      data.forEach(item => {
-        if (item.checked && item.value === e.target.value) {
-          delete item.checked;
-          setData([...data]);
-        }
-      });
-    }
+    let id;
+    data.forEach((value, key) => {
+      if (value[keyNames.value] === e.target.value) {
+        id = key;
+      }
+    });
+    let items = [...data];
+    let item = {
+      ...items[id]
+    };
+    item.checked = !item.checked;
+    items[id] = item;
+    setData(items);
   };
+  !keyNames ? keyNames = {
+    id: 'id',
+    name: 'name',
+    value: 'value',
+    label: 'label'
+  } : '';
   return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(element => {
     return /*#__PURE__*/React.createElement("label", {
       className: styles$8["checkbox-wrap"],
@@ -353,27 +361,29 @@ const Checkbox = ({
       className: classProps,
       disabled: disabled,
       required: required,
-      value: value ? value : element.value,
-      name: name ? name : element.name,
+      value: keyNames.value ? element[keyNames.value] : '',
+      name: keyNames.name ? element[keyNames.name] : '',
+      id: keyNames.id ? element[keyNames.id] : '',
       onChange: handleChange,
-      onClick: handleClick
+      onClick: onClick ? onClick : () => {}
     }, props)), /*#__PURE__*/React.createElement("span", {
       className: styles$8["checkmark"]
-    }), element.label ? /*#__PURE__*/React.createElement("span", {
-      className: styles$8.labelRadio
-    }, label ? label : element.label) : "");
+    }), element[keyNames.label] ? /*#__PURE__*/React.createElement("label", {
+      className: styles$8.labelCheckbox,
+      for: element[keyNames.id]
+    }, element[keyNames.label]) : "");
   }));
 };
 Checkbox.propTypes = {
   className: PropTypes.string,
   onChange: PropTypes.func,
+  onClick: PropTypes.func,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   name: PropTypes.string,
   value: PropTypes.string,
   jsonData: PropTypes.string,
   label: PropTypes.string,
-  onClick: PropTypes.func,
   keyNames: PropTypes.object
 };
 Checkbox.defaultProps = {
@@ -555,7 +565,9 @@ const Pagination = ({
     setCurrentPage(currentPage);
   }, [currentPage]);
   const onPageChange = page => {
-    setCurrentPage(page);
+    if (page > 0) {
+      setCurrentPage(page);
+    }
   };
   useEffect(() => {
     onChange(currentPageNumber);
@@ -596,23 +608,31 @@ const Pagination = ({
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React.createElement("li", {
         key: id,
-        className: classnames(styles$6['pagination-jump-next'], styles$6.listItem),
+        className: classnames(styles$6["pagination-jump-next"], styles$6.listItem),
         onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
         disabled: currentPageIndex === 0 ? true : false
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles$6['pagination-jump-next-txt']
+      }, id < currentPageIndex ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: styles$6["pagination-jump-next-txt"]
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "icon-text"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: styles$6["pagination-jump-next-arrow"]
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "icon-arrow-jump-back"
+      }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: styles$6["pagination-jump-next-txt"]
       }, /*#__PURE__*/React.createElement("i", {
         className: "icon-text"
       })), /*#__PURE__*/React.createElement("span", {
-        className: styles$6['pagination-jump-next-arrow']
+        className: styles$6["pagination-jump-next-arrow"]
       }, /*#__PURE__*/React.createElement("i", {
         className: "icon-arrow-jump-next"
-      })));
+      }))));
     }
     return /*#__PURE__*/React.createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
-      className: classnames(`${pageNumber === currentPageNumber ? styles$6.selected : styles$6.listItem}`, styles$6['pagination-item'])
+      className: classnames(`${pageNumber === currentPageNumber ? styles$6.selected : styles$6.listItem}`, styles$6["pagination-item"])
     }, pageNumber);
   }), /*#__PURE__*/React.createElement("button", {
     onClick: onNext,
@@ -979,7 +999,7 @@ const File = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$1['delete-upload-icon']
   }, /*#__PURE__*/React.createElement("i", {
-    className: "icon-arrow"
+    className: "icon-delete"
   })))), /*#__PURE__*/React.createElement("img", {
     src: image,
     height: 190,
@@ -1011,7 +1031,7 @@ File.propTypes = {
   defaultData: PropTypes.object
 };
 
-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)}}";
+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)}}";
 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"};
 styleInject(css_248z);
 
@@ -1021,33 +1041,38 @@ const Modal = ({
   className,
   type,
   data,
-  selected
+  selected,
+  children
 }) => {
   classnames(styles.modal, className);
   const [select, setSelect] = useState(selected);
   return /*#__PURE__*/React.createElement("div", {
     className: styles["modal-wrap"]
-  }, type == 'content' ? /*#__PURE__*/React.createElement("div", {
+  }, type == "content" ? /*#__PURE__*/React.createElement("div", {
     className: styles["modal-content"]
   }, /*#__PURE__*/React.createElement("div", {
     className: styles["modal-top"]
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles['modal-title']
-  }, "Title"), /*#__PURE__*/React.createElement("div", {
+    className: styles["modal-title"]
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: TypographyType.h5
+  }, headerText)), /*#__PURE__*/React.createElement("div", {
     className: styles["close-btn"],
     onClick: () => setShow(false)
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "icon-close"
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles["modal-section"]
-  })) : type == 'images' ? /*#__PURE__*/React.createElement("div", {
+  }, children)) : type == "images" ? /*#__PURE__*/React.createElement("div", {
     className: styles["modal-content"]
   }, /*#__PURE__*/React.createElement("div", {
     className: styles["close-btn"],
     onClick: () => setShow(false)
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "icon-close"
-  })), /*#__PURE__*/React.createElement("div", null, select > 1 ? /*#__PURE__*/React.createElement("h1", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles["modal-section"]
+  }, /*#__PURE__*/React.createElement("div", null, select > 1 ? /*#__PURE__*/React.createElement("h1", {
     onClick: () => setSelect(select - 1)
   }, "-") : null, data.map(elem => {
     if (select == elem.id) {
@@ -1061,9 +1086,7 @@ const Modal = ({
     onClick: () => {
       setSelect(select + 1);
     }
-  }, "+") : null), /*#__PURE__*/React.createElement("div", {
-    className: styles["modal-section"]
-  })) : null);
+  }, "+") : null))) : null);
 };
 Modal.propTypes = {
   setShow: PropTypes.func,

package/dist/index.js

@@ -140,7 +140,7 @@ Button.defaultProps = {
   outline: false
 };
 
-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}";
+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}";
 styleInject(css_248z$b);
 
 const TypographyType = {
@@ -335,26 +335,34 @@ const Checkbox = ({
   const classProps = classnames__default["default"](styles$8.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = React.useState(parseData);
-  const handleClick = e => {
-    onClick(e);
-  };
+  React.useEffect(() => {
+    const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+    setData(parseData);
+  }, [jsonData]);
+  React.useEffect(() => {
+    onChange ? onChange(data.filter(d => d.checked)) : '';
+  }, [data]);
   const handleChange = e => {
-    if (e.target.checked) {
-      data.forEach(item => {
-        if (item.value === e.target.value) {
-          item.checked = true;
-          setData([...data]);
-        }
-      });
-    } else if (e.target.checked === false) {
-      data.forEach(item => {
-        if (item.checked && item.value === e.target.value) {
-          delete item.checked;
-          setData([...data]);
-        }
-      });
-    }
+    let id;
+    data.forEach((value, key) => {
+      if (value[keyNames.value] === e.target.value) {
+        id = key;
+      }
+    });
+    let items = [...data];
+    let item = {
+      ...items[id]
+    };
+    item.checked = !item.checked;
+    items[id] = item;
+    setData(items);
   };
+  !keyNames ? keyNames = {
+    id: 'id',
+    name: 'name',
+    value: 'value',
+    label: 'label'
+  } : '';
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, data.map(element => {
     return /*#__PURE__*/React__default["default"].createElement("label", {
       className: styles$8["checkbox-wrap"],
@@ -364,27 +372,29 @@ const Checkbox = ({
       className: classProps,
       disabled: disabled,
       required: required,
-      value: value ? value : element.value,
-      name: name ? name : element.name,
+      value: keyNames.value ? element[keyNames.value] : '',
+      name: keyNames.name ? element[keyNames.name] : '',
+      id: keyNames.id ? element[keyNames.id] : '',
       onChange: handleChange,
-      onClick: handleClick
+      onClick: onClick ? onClick : () => {}
     }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
       className: styles$8["checkmark"]
-    }), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles$8.labelRadio
-    }, label ? label : element.label) : "");
+    }), element[keyNames.label] ? /*#__PURE__*/React__default["default"].createElement("label", {
+      className: styles$8.labelCheckbox,
+      for: element[keyNames.id]
+    }, element[keyNames.label]) : "");
   }));
 };
 Checkbox.propTypes = {
   className: PropTypes__default["default"].string,
   onChange: PropTypes__default["default"].func,
+  onClick: PropTypes__default["default"].func,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   name: PropTypes__default["default"].string,
   value: PropTypes__default["default"].string,
   jsonData: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
-  onClick: PropTypes__default["default"].func,
   keyNames: PropTypes__default["default"].object
 };
 Checkbox.defaultProps = {
@@ -566,7 +576,9 @@ const Pagination = ({
     setCurrentPage(currentPage);
   }, [currentPage]);
   const onPageChange = page => {
-    setCurrentPage(page);
+    if (page > 0) {
+      setCurrentPage(page);
+    }
   };
   React.useEffect(() => {
     onChange(currentPageNumber);
@@ -607,23 +619,31 @@ const Pagination = ({
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React__default["default"].createElement("li", {
         key: id,
-        className: classnames__default["default"](styles$6['pagination-jump-next'], styles$6.listItem),
+        className: classnames__default["default"](styles$6["pagination-jump-next"], styles$6.listItem),
         onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
         disabled: currentPageIndex === 0 ? true : false
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        className: styles$6['pagination-jump-next-txt']
+      }, id < currentPageIndex ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: styles$6["pagination-jump-next-txt"]
+      }, /*#__PURE__*/React__default["default"].createElement("i", {
+        className: "icon-text"
+      })), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: styles$6["pagination-jump-next-arrow"]
+      }, /*#__PURE__*/React__default["default"].createElement("i", {
+        className: "icon-arrow-jump-back"
+      }))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: styles$6["pagination-jump-next-txt"]
       }, /*#__PURE__*/React__default["default"].createElement("i", {
         className: "icon-text"
       })), /*#__PURE__*/React__default["default"].createElement("span", {
-        className: styles$6['pagination-jump-next-arrow']
+        className: styles$6["pagination-jump-next-arrow"]
       }, /*#__PURE__*/React__default["default"].createElement("i", {
         className: "icon-arrow-jump-next"
-      })));
+      }))));
     }
     return /*#__PURE__*/React__default["default"].createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
-      className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$6.selected : styles$6.listItem}`, styles$6['pagination-item'])
+      className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$6.selected : styles$6.listItem}`, styles$6["pagination-item"])
     }, pageNumber);
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: onNext,
@@ -990,7 +1010,7 @@ const File = ({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$1['delete-upload-icon']
   }, /*#__PURE__*/React__default["default"].createElement("i", {
-    className: "icon-arrow"
+    className: "icon-delete"
   })))), /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     height: 190,
@@ -1022,7 +1042,7 @@ File.propTypes = {
   defaultData: PropTypes__default["default"].object
 };
 
-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)}}";
+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)}}";
 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"};
 styleInject(css_248z);
 
@@ -1032,33 +1052,38 @@ const Modal = ({
   className,
   type,
   data,
-  selected
+  selected,
+  children
 }) => {
   classnames__default["default"](styles.modal, className);
   const [select, setSelect] = React.useState(selected);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles["modal-wrap"]
-  }, type == 'content' ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, type == "content" ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles["modal-content"]
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles["modal-top"]
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles['modal-title']
-  }, "Title"), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles["modal-title"]
+  }, /*#__PURE__*/React__default["default"].createElement(Typography, {
+    variant: TypographyType.h5
+  }, headerText)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles["close-btn"],
     onClick: () => setShow(false)
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-close"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles["modal-section"]
-  })) : type == 'images' ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, children)) : type == "images" ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles["modal-content"]
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles["close-btn"],
     onClick: () => setShow(false)
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-close"
-  })), /*#__PURE__*/React__default["default"].createElement("div", null, select > 1 ? /*#__PURE__*/React__default["default"].createElement("h1", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles["modal-section"]
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, select > 1 ? /*#__PURE__*/React__default["default"].createElement("h1", {
     onClick: () => setSelect(select - 1)
   }, "-") : null, data.map(elem => {
     if (select == elem.id) {
@@ -1072,9 +1097,7 @@ const Modal = ({
     onClick: () => {
       setSelect(select + 1);
     }
-  }, "+") : null), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles["modal-section"]
-  })) : null);
+  }, "+") : null))) : null);
 };
 Modal.propTypes = {
   setShow: PropTypes__default["default"].func,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/checkbox/index.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import styles from "./checkbox.module.css";
+import { useEffect } from "react";
 
 export const Checkbox = ({
   disabled,
@@ -20,28 +21,32 @@ export const Checkbox = ({
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = useState(parseData);
 
-  const handleClick = (e) => {
-    onClick(e)
-  }
 
-  const handleChange = (e) => {
-    if (e.target.checked) {
-      data.forEach((item) => {
-        if (item.value === e.target.value) {
-          item.checked = true;
-          setData([...data]);
-        }
-      });
-    } else if (e.target.checked === false) {
-      data.forEach((item) => {
-        if (item.checked && item.value === e.target.value) {
-          delete item.checked;
-          setData([...data]);
-        }
-      });
-    }
+  useEffect(() => {
+    const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+    setData(parseData);
+  },[jsonData])
+  useEffect(()=>{ 
+    onChange ? onChange(data.filter(d => d.checked)) : '';
+   },[data])
+  
+  const handleChange = e => {
+    let id;
+    data.forEach((value,key) => {
+      if (value[keyNames.value] === e.target.value){
+        id = key;
+      }
+    });
+
+    let items = [...data];
+    let item = {...items[id]};
+    item.checked = !item.checked;
+    items[id] = item;
+    setData(items);
   };
 
+  !keyNames ? keyNames = {id:'id',name:'name',value:'value', label: 'label'} : ''
+
   return (
     <>
       {data.map((element) => {
@@ -52,17 +57,21 @@ export const Checkbox = ({
               className={classProps}
               disabled={disabled}
               required={required}
-              value={value ? value : element.value}
-              name={name ? name : element.name}
+              value={keyNames.value ? element[keyNames.value] : ''}
+              name={keyNames.name ? element[keyNames.name] : ''}
+              id={keyNames.id ? element[keyNames.id] : ''}
               onChange={handleChange}
-              onClick={handleClick}
+              onClick={onClick ? onClick: ()=>{}}
               {...props}
             />
             <span className={styles["checkmark"]} />
-            {element.label ? (
-              <span className={styles.labelRadio}>
-                {label ? label : element.label}
-              </span>
+            {element[keyNames.label] ? (
+              <label
+                className={styles.labelCheckbox}
+                for={element[keyNames.id]}
+              >
+                {element[keyNames.label]}
+              </label>
             ) : (
               ""
             )}
@@ -76,13 +85,13 @@ export const Checkbox = ({
 Checkbox.propTypes = {
   className: PropTypes.string,
   onChange: PropTypes.func,
+  onClick: PropTypes.func,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   name: PropTypes.string,
   value: PropTypes.string,
   jsonData: PropTypes.string,
   label: PropTypes.string,
-  onClick: PropTypes.func,
   keyNames: PropTypes.object,
 };
 

package/src/components/file/index.js

@@ -77,8 +77,7 @@ export const File = ({
                 >
                   <div className={styles['delete-upload-file']}>
                     <div className={styles['delete-upload-icon']}>
-                      {/*<Icon className='icon-delete'/>*/}
-                      <i className="icon-arrow"/>
+                      <i className="icon-delete"/>
                     </div>
                   </div>
                 </div>

package/src/components/modal/index.js

@@ -2,54 +2,84 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./modal.module.css";
-import Icon from '../icon/Icon';
+import Icon from "../icon/Icon";
+import { Typography, TypographyType } from "../typography";
 
-export const Modal = ({ setShow, headerText, className, type, data, selected}) => {
-  const classProps = classnames(styles.modal, className);
-  const [select, setSelect] = useState(selected)
-  return (
-    <div className={styles["modal-wrap"]}>
+export const Modal = ({
+    setShow,
+    headerText,
+    className,
+    type,
+    data,
+    selected,
+    children,
+}) => {
+    const classProps = classnames(styles.modal, className);
+    const [select, setSelect] = useState(selected);
+    return (
+        <div className={styles["modal-wrap"]}>
+            {type == "content" ? (
+                <div className={styles["modal-content"]}>
+                    <div className={styles["modal-top"]}>
+                        <div className={styles["modal-title"]}>
+                            <Typography variant={TypographyType.h5}>{headerText}</Typography>
+                        </div>
+                        <div
+                            className={styles["close-btn"]}
+                            onClick={() => setShow(false)}
+                        >
+                            <i className="icon-close" />
+                        </div>
+                    </div>
+                    <div className={styles["modal-section"]}>{children}</div>
+                </div>
+            ) : type == "images" ? (
+                <div className={styles["modal-content"]}>
+                    <div
+                        className={styles["close-btn"]}
+                        onClick={() => setShow(false)}
+                    >
+                        <i className="icon-close" />
+                    </div>
 
-      {
-        type == 'content' ?
-          <div className={styles["modal-content"]}>
-            <div className={styles["modal-top"]}>
-              <div className={styles['modal-title']}>Title</div>
-              <div className={styles["close-btn"]} onClick={() => setShow(false)}>
-                <Icon className="icon-close" />
-              </div>
-            </div>
-            <div className={styles["modal-section"]} />
-          </div>
-          : type == 'images' ?
-            <div className={styles["modal-content"]}>
-              <div className={styles["close-btn"]} onClick={() => setShow(false)}>
-                <Icon className="icon-close" />
-              </div>
-              <div>
-                {select > 1 ? <h1 onClick={()=>setSelect(select - 1)}>-</h1> : null}
-                  {
-                    data.map(elem => {
-                      if(select == elem.id){
-                        return<img width='600px' key={elem.id} src={elem.url}/>
-                      }
-                    })
-                  }
-                  {select < data.length ? <h1 onClick={()=>{ setSelect(select + 1)}}>+</h1>: null}
-              </div>
-              <div className={styles["modal-section"]} />
-            </div>
-            : null
-      }
-    </div>
-  );
+                    <div className={styles["modal-section"]}>
+                        <div>
+                            {select > 1 ? (
+                                <h1 onClick={() => setSelect(select - 1)}>-</h1>
+                            ) : null}
+                            {data.map((elem) => {
+                                if (select == elem.id) {
+                                    return (
+                                        <img
+                                            width="600px"
+                                            key={elem.id}
+                                            src={elem.url}
+                                        />
+                                    );
+                                }
+                            })}
+                            {select < data.length ? (
+                                <h1
+                                    onClick={() => {
+                                        setSelect(select + 1);
+                                    }}
+                                >
+                                    +
+                                </h1>
+                            ) : null}
+                        </div>
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    );
 };
 
 Modal.propTypes = {
-  setShow: PropTypes.func,
-  headerText: PropTypes.string,
-  className: PropTypes.string,
-  type: PropTypes.string,
-  selected: PropTypes.string,
-  data: PropTypes.array
+    setShow: PropTypes.func,
+    headerText: PropTypes.string,
+    className: PropTypes.string,
+    type: PropTypes.string,
+    selected: PropTypes.string,
+    data: PropTypes.array,
 };

package/src/components/modal/modal.module.css

@@ -45,8 +45,8 @@
 }
 .modal-content {
     position: absolute;
-    width: 100%;
-    max-width: 300px;
+    width: fit-content;
+    padding: 0 10px;
     min-height: 130px;
     top: 110px;
     left: 0;

package/src/components/pagination/index.js

@@ -3,15 +3,15 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./pagination.module.css";
 import { PaginationRange, Dots } from "./paginationRange";
-import Icon from '../icon/Icon'
+import Icon from "../icon/Icon";
 
 export const Pagination = ({
-  onChange,
-  totalCount,
-  siblingCount,
-  currentPage,
-  offset,
-  className,
+    onChange,
+    totalCount,
+    siblingCount,
+    currentPage,
+    offset,
+    className,
 }) => {
   const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
@@ -25,9 +25,10 @@ export const Pagination = ({
   useEffect(() => {
     setCurrentPage(currentPage);
   }, [currentPage]);
-
   const onPageChange = (page) => {
+    if(page > 0){
     setCurrentPage(page);
+    }
   };
   useEffect(() => {
     onChange(currentPageNumber);
@@ -43,77 +44,131 @@ export const Pagination = ({
   }
   const classProps = classnames(styles.list, className ? className : styles["pagination-bar"]);
 
-  const onNext = () => {
-    onPageChange(currentPageNumber + 1);
-  };
+    const onNext = () => {
+        onPageChange(currentPageNumber + 1);
+    };
 
-  const onPrevious = () => {
-    onPageChange(currentPageNumber - 1);
-  };
+    const onPrevious = () => {
+        onPageChange(currentPageNumber - 1);
+    };
 
-  const onNextFive = () => {
-    currentPageNumber !== lastPage - 4 ?
-    onPageChange(currentPageNumber + 5) : onPageChange(currentPageNumber + 4);
-  };
+    const onNextFive = () => {
+        currentPageNumber !== lastPage - 4
+            ? onPageChange(currentPageNumber + 5)
+            : onPageChange(currentPageNumber + 4);
+    };
 
-  const onPreviousFive = (e) => {
-    currentPageNumber !== 5
-      ? onPageChange(currentPageNumber - 5)
-      : onPageChange(currentPageNumber - 4);
-  };
+    const onPreviousFive = (e) => {
+        currentPageNumber !== 5
+            ? onPageChange(currentPageNumber - 5)
+            : onPageChange(currentPageNumber - 4);
+    };
 
-  let lastPage = paginationRange[paginationRange.length - 1];
-  return (
-    <ul className={classProps}>
-      <button className={styles["pagination-btn"]} onClick={onPrevious} disabled={currentPage === 1 ? true : false}>
-        {/* <Icon className="icon-arrow-back"/> */}
-        <i className="icon-arrow-back"></i>
-      </button>
+    let lastPage = paginationRange[paginationRange.length - 1];
+    return (
+        <ul className={classProps}>
+            <button
+                className={styles["pagination-btn"]}
+                onClick={onPrevious}
+                disabled={currentPage === 1 ? true : false}
+            >
+                {/* <Icon className="icon-arrow-back"/> */}
+                <i className="icon-arrow-back"></i>
+            </button>
 
-      {paginationRange.map((pageNumber, id) => {
-        if (pageNumber === Dots) {
-            let currentPageIndex = paginationRange.indexOf(currentPageNumber);
-          return (
-            <li key={id} className={classnames(styles['pagination-jump-next'],styles.listItem)} onClick={id < currentPageIndex ? onPreviousFive : onNextFive}
-                disabled={currentPageIndex === 0 ? true : false}>
-              <span className={styles['pagination-jump-next-txt']}>
-                <i className='icon-text'/>
-              </span>
-              <span className={styles['pagination-jump-next-arrow']}>
-                {/* <Icon className="icon-arrow-jump-next"/> */}
-                <i className="icon-arrow-jump-next"></i>
-              </span>
-            </li>
-          );
-        }
+            {paginationRange.map((pageNumber, id) => {
+                if (pageNumber === Dots) {
+                    let currentPageIndex = paginationRange.indexOf(currentPageNumber);
+                    return (
+                        <li
+                            key={id}
+                            className={classnames(
+                                styles["pagination-jump-next"],
+                                styles.listItem
+                            )}
+                            onClick={
+                                id < currentPageIndex
+                                    ? onPreviousFive
+                                    : onNextFive
+                            }
+                            disabled={currentPageIndex === 0 ? true : false}
+                        >
+                            {id < currentPageIndex ? (
+                                <>
+                                    <span
+                                        className={
+                                            styles["pagination-jump-next-txt"]
+                                        }
+                                    >
+                                        <i className="icon-text" />
+                                    </span>
+                                    <span
+                                        className={
+                                            styles["pagination-jump-next-arrow"]
+                                        }
+                                    >
+                                        {/* <Icon className="icon-arrow-jump-next"/> */}
+                                        <i className="icon-arrow-jump-back"></i>
+                                    </span>
+                                </>
+                            ) : (
+                                <>
+                                    <span
+                                        className={
+                                            styles["pagination-jump-next-txt"]
+                                        }
+                                    >
+                                        <i className="icon-text" />
+                                    </span>
+                                    <span
+                                        className={
+                                            styles["pagination-jump-next-arrow"]
+                                        }
+                                    >
+                                        {/* <Icon className="icon-arrow-jump-next"/> */}
+                                        <i className="icon-arrow-jump-next"></i>
+                                    </span>
+                                </>
+                            )}
+                        </li>
+                    );
+                }
 
-        return (
-          <li
-            onClick={() => onPageChange(pageNumber)}
-            key={id}
-            className={classnames(`${pageNumber === currentPageNumber ? styles.selected : styles.listItem}`, styles['pagination-item'])}>
-            {pageNumber}
-          </li>
-        );
-      })}
-      <button
-        onClick={onNext}
-        className={styles["pagination-btn"]}
-        disabled={currentPageNumber === lastPage ? true : false}
-      >
-        {/* <Icon className='icon-arrow'/> */}
-        <i className="icon-arrow"></i>
-      </button>
-    </ul>
-  );
+                return (
+                    <li
+                        onClick={() => onPageChange(pageNumber)}
+                        key={id}
+                        className={classnames(
+                            `${
+                                pageNumber === currentPageNumber
+                                    ? styles.selected
+                                    : styles.listItem
+                            }`,
+                            styles["pagination-item"]
+                        )}
+                    >
+                        {pageNumber}
+                    </li>
+                );
+            })}
+            <button
+                onClick={onNext}
+                className={styles["pagination-btn"]}
+                disabled={currentPageNumber === lastPage ? true : false}
+            >
+                {/* <Icon className='icon-arrow'/> */}
+                <i className="icon-arrow"></i>
+            </button>
+        </ul>
+    );
 };
 
 Pagination.propTypes = {
-  offset: PropTypes.number,
-  totalCount: PropTypes.number,
-  className: PropTypes.string,
-  siblingCount: PropTypes.number,
-  currentPage: PropTypes.number,
+    offset: PropTypes.number,
+    totalCount: PropTypes.number,
+    className: PropTypes.string,
+    siblingCount: PropTypes.number,
+    currentPage: PropTypes.number,
 };
 
 Pagination.defaultProps = { offset: 2, siblingCount: 2 };

package/src/components/typography/typography.module.css

@@ -29,11 +29,11 @@ h4 {
 h5 {
     text-transform: uppercase;
     font-size: 20px;
-    line-height: 20px;
+    line-height: 26px;
     font-weight: 600;
 }
 
-h5 {
+h6 {
     text-transform: none;
     font-size: 14px;
     line-height: 20px;
@@ -44,7 +44,7 @@ p {
     text-transform: none;
     font-size: 16px;
     line-height: 22px;
-    font-weight: 600;
+    font-weight: 500;
     color: #3C393E;
 }