@xaypay/tui 0.0.59 → 0.0.61

package/dist/index.es.js

@@ -97,12 +97,6 @@ const File = ({
     setFileName('no selected file');
     document.querySelector(`.${name}`).value = "";
   };
-  useEffect(() => {
-    return () => {
-      setError('');
-      setImage(null);
-    };
-  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
     className: `${styles$b['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
@@ -404,8 +398,6 @@ const Typography = ({
   radius,
   border,
   cursor,
-  margin,
-  padding,
   variant,
   onClick,
   children,
@@ -442,9 +434,7 @@ const Typography = ({
       cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
       borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
       fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
-      margin: margin ? margin : configStyles.TYPOGRAPHY['margin' + variant],
       fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
-      padding: padding ? padding : configStyles.TYPOGRAPHY['padding' + variant],
       textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
       textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
       fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
@@ -470,9 +460,7 @@ Typography.propTypes = {
   weight: PropTypes.string,
   border: PropTypes.string,
   cursor: PropTypes.string,
-  margin: PropTypes.string,
   radius: PropTypes.string,
-  padding: PropTypes.string,
   textAlign: PropTypes.string,
   className: PropTypes.string,
   fontStyle: PropTypes.string,
@@ -599,6 +587,7 @@ const Input = ({
   errorZindex,
   errorBottom,
   labelWeight,
+  phoneDisplay,
   errorMessage,
   autoComplete,
   labelDisplay,
@@ -606,10 +595,12 @@ const Input = ({
   boxShadowHover,
   errorClassName,
   errorAnimation,
+  phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
   labelMarginBottom,
+  phoneJustifyContent,
   errorAnimationDuration,
   ...props
 }) => {
@@ -691,8 +682,11 @@ const Input = ({
       boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
       borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
       borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
-      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
+      display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
+      alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
+      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+      justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, "+374") : '', /*#__PURE__*/React.createElement("input", _extends({}, props, {
     value: value,
@@ -773,6 +767,7 @@ Input.propTypes = {
   errorBottom: PropTypes.string,
   labelWeight: PropTypes.string,
   errorMessage: PropTypes.string,
+  phoneDisplay: PropTypes.string,
   autoComplete: PropTypes.string,
   errorAnimation: PropTypes.bool,
   labelDisplay: PropTypes.string,
@@ -780,9 +775,11 @@ Input.propTypes = {
   boxShadowHover: PropTypes.string,
   errorClassName: PropTypes.string,
   backgroundColor: PropTypes.string,
+  phoneAlignItems: PropTypes.string,
   errorLineHeight: PropTypes.string,
   labelLineHeight: PropTypes.string,
   labelMarginBottom: PropTypes.string,
+  phoneJustifyContent: PropTypes.string,
   errorAnimationDuration: PropTypes.string,
   leftIcon: PropTypes.arrayOf(PropTypes.element),
   rightIcon: PropTypes.arrayOf(PropTypes.element),
@@ -940,6 +937,27 @@ Button.propTypes = {
   disabledBackgroundColor: PropTypes.string
 };
 
+var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\n</svg>";
+
+var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\n</svg>";
+
+const SelectCheckbox = ({
+  checked
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginRight: '9px'
+    }
+  }, checked ? /*#__PURE__*/React.createElement("img", {
+    src: ReactCheckboxChecked
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: ReactCheckbox
+  }));
+};
+SelectCheckbox.propTypes = {
+  checked: PropTypes.bool
+};
+
 var ReactArrowIcon = "<svg width=\"15\" height=\"9\" viewBox=\"0 0 15 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.9878 8.00003C7.75456 8.00049 7.52851 7.91911 7.34892 7.77003L1.3594 2.77003C1.15554 2.60029 1.02734 2.35638 1.003 2.09196C0.978666 1.82753 1.06019 1.56425 1.22963 1.36003C1.39907 1.15581 1.64255 1.02739 1.90652 1.00301C2.17048 0.978631 2.4333 1.06029 2.63716 1.23003L7.9878 5.71003L13.3384 1.39003C13.4405 1.30697 13.558 1.24493 13.6842 1.2075C13.8103 1.17007 13.9425 1.15798 14.0733 1.17192C14.2041 1.18586 14.3309 1.22555 14.4463 1.28873C14.5618 1.3519 14.6636 1.4373 14.746 1.54003C14.8374 1.64285 14.9066 1.76348 14.9493 1.89435C14.9921 2.02523 15.0073 2.16353 14.9942 2.30059C14.9811 2.43765 14.9399 2.57053 14.8731 2.69088C14.8063 2.81124 14.7155 2.91649 14.6062 3.00003L8.6167 7.83003C8.43194 7.95555 8.21051 8.0154 7.9878 8.00003Z\" fill=\"#3C393E\"/>\n</svg>";
 
 var ReactCloseIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.4253 0.241029L12.431 0.236144C12.6129 0.0804082 12.8468 -0.00097097 13.0861 0.00827014C13.3253 0.0175112 13.5523 0.116692 13.7216 0.285992C13.8909 0.455292 13.9901 0.682241 13.9993 0.921488C14.0085 1.16074 13.9272 1.39466 13.7714 1.57651L13.7665 1.58222L8.38622 6.96254L13.7665 12.3429L13.7714 12.3486C13.9272 12.5304 14.0085 12.7643 13.9993 13.0036C13.9901 13.2428 13.8909 13.4698 13.7216 13.6391C13.5523 13.8084 13.3253 13.9076 13.0861 13.9168C12.8468 13.926 12.6129 13.8447 12.431 13.6889L12.4253 13.684L7.04493 8.30363L1.66742 13.6738C1.58315 13.7705 1.48016 13.8492 1.36462 13.9051C1.24669 13.9622 1.11823 13.9942 0.987309 13.9993C0.85639 14.0043 0.72584 13.9823 0.603852 13.9345C0.481865 13.8867 0.371073 13.8142 0.27843 13.7216C0.185788 13.6289 0.113295 13.5181 0.0655034 13.3961C0.0177115 13.2742 -0.00434842 13.1436 0.000708381 13.0127C0.00576522 12.8818 0.0378304 12.7533 0.0948891 12.6354C0.150805 12.5198 0.229542 12.4168 0.326326 12.3325L5.70384 6.96235L0.323475 1.57461L0.318633 1.56895C0.162897 1.3871 0.0815178 1.15317 0.0907589 0.913926C0.1 0.674678 0.199181 0.447729 0.36848 0.27843C0.53778 0.10913 0.76473 0.00995005 1.00398 0.000708956C1.24322 -0.00853214 1.47715 0.0728459 1.659 0.228582L1.66476 0.233511L7.04512 5.62125L12.4253 0.241029Z\" fill=\"#3C393E\"/>\n</svg>";
@@ -949,8 +967,9 @@ var styles$5 = {"select-content":"select-module_select-content__GCMDX","select-c
 styleInject(css_248z$5);
 
 const Select = ({
+  options,
+  multiple,
   disabled,
-  jsonData,
   required,
   onChange,
   keyNames,
@@ -960,6 +979,7 @@ const Select = ({
   closeIcon,
   errorMessage,
   defaultOption,
+  multipleCheckbox,
   label,
   labelColor,
   labelWeight,
@@ -973,7 +993,7 @@ const Select = ({
   errorColor,
   selectedColor,
   selectedRadius,
-  selectedHeight,
+  selectedMinHeight,
   selectedBorder,
   selectedPadding,
   selectedFontSize,
@@ -999,11 +1019,11 @@ const Select = ({
   optionItemBackgroudColor,
   optionItemBackgroudColorHover
 }) => {
-  const options = jsonData.length ? JSON.parse(jsonData) : [];
   const ref = useRef();
   const [opened, setOpened] = useState(false);
   const [isHover, setIsHover] = useState(false);
-  const [newSelected, setNewSelected] = useState({});
+  const [newSelected, setNewSelected] = useState([]);
+  const [existOptions, setExistOptions] = useState([]);
   const configStyles = compereConfigs();
   const classProps = classnames(className);
   const handleOpenClose = () => {
@@ -1011,13 +1031,39 @@ const Select = ({
   };
   const handleClearSelect = e => {
     onChange({});
-    setNewSelected({});
+    setNewSelected([]);
+    const clearedOptions = existOptions && existOptions.length > 0 && existOptions.map(item => {
+      item.checked = false;
+      return item;
+    });
+    setExistOptions(clearedOptions);
     e.stopPropagation();
   };
   const handleSelectItem = option => {
-    onChange(option);
-    setOpened(!opened);
-    setNewSelected(option);
+    const checkedOption = {
+      ...option
+    };
+    delete checkedOption.checked;
+    if (!multiple) {
+      setOpened(!opened);
+      setNewSelected([option]);
+      onChange(checkedOption);
+    } else {
+      const indexOfObject = newSelected.findIndex(obj => {
+        return obj[keyNames.name] === option[keyNames.name];
+      });
+      if (indexOfObject === -1) {
+        option.checked = true;
+        setNewSelected(prev => {
+          return [...prev, option];
+        });
+        onChange([...newSelected, option]);
+      } else {
+        option.checked = false;
+        setNewSelected([...newSelected.slice(0, indexOfObject), ...newSelected.slice(indexOfObject + 1)]);
+        onChange([...newSelected.slice(0, indexOfObject), ...newSelected.slice(indexOfObject + 1)]);
+      }
+    }
   };
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -1033,10 +1079,6 @@ const Select = ({
     e.target.style.color = optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor;
     e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
   };
-  useEffect(() => {
-    const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
-    setNewSelected(parseSelectedData);
-  }, [selected]);
   useEffect(() => {
     if (opened) {
       const checkIfClickedOutside = e => {
@@ -1050,6 +1092,25 @@ const Select = ({
       };
     }
   }, [opened]);
+  useEffect(() => {
+    selected && selected.length > 0 && setNewSelected(selected);
+    if (!multiple) {
+      options && options.length > 0 && setExistOptions(options);
+    } else {
+      const modifiedOptions = options && options.length > 0 && options.map((item, index) => {
+        item.checked = false;
+        if (selected && selected.length > 0) {
+          selected.map(innerItem => {
+            if (innerItem[keyNames.name] === item[keyNames.name]) {
+              item.checked = true;
+            }
+          });
+        }
+        return item;
+      });
+      setExistOptions(modifiedOptions);
+    }
+  }, [options, multiple, selected]);
   return /*#__PURE__*/React.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React.createElement("label", {
@@ -1073,7 +1134,7 @@ const Select = ({
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
-      height: selectedHeight ? selectedHeight : configStyles.SELECT.selectedHeight,
+      minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
       border: selectedBorder ? selectedBorder : configStyles.SELECT.selectedBorder,
       padding: selectedPadding ? selectedPadding : configStyles.SELECT.selectedPadding,
       borderRadius: selectedRadius ? selectedRadius : configStyles.SELECT.selectedRadius,
@@ -1085,19 +1146,30 @@ const Select = ({
       borderColor: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : selectedBorderColor ? selectedBorderColor : configStyles.SELECT.selectedBorderColor
     },
     onClick: disabled ? _ => _ : _ => handleOpenClose(),
-    onMouseEnter: disabled ? _ => _ : handleMouseEnter,
-    onMouseLeave: disabled ? _ => _ : handleMouseLeave,
+    onMouseEnter: disabled ? _ => _ : _ => handleMouseEnter(),
+    onMouseLeave: disabled ? _ => _ : _ => handleMouseLeave(),
     className: `${styles$5['select-content-top']}`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${styles$5['select-content-top-text']}`,
     style: {
       color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
     }
-  }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React.createElement("div", {
+  }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
+    if (newSelected[index][keyNames.name]) {
+      if (index > 0) {
+        return ', ' + newSelected[index][keyNames.name];
+      } else {
+        return newSelected[index][keyNames.name];
+      }
+    }
+  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React.createElement("div", {
     className: `${styles$5['select-content-top-icon']}`
-  }, Object.keys(newSelected).length > 0 && /*#__PURE__*/React.createElement("div", {
+  }, multiple && newSelected.length > 1 && /*#__PURE__*/React.createElement("span", null, newSelected.length), newSelected && newSelected.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: `${styles$5['close-icon']}`,
-    onClick: disabled ? _ => _ : handleClearSelect
+    onClick: disabled ? _ => _ : handleClearSelect,
+    style: {
+      marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
+    }
   }, closeIcon ? closeIcon : /*#__PURE__*/React.createElement("img", {
     src: ReactCloseIcon,
     alt: "icon"
@@ -1114,12 +1186,12 @@ const Select = ({
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
       backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
-      top: parseFloat(selectedHeight ? selectedHeight.substring(0, selectedHeight.length - 2) : configStyles.SELECT.selectedHeight.substring(0, configStyles.SELECT.selectedHeight.length - 2)) + 6 + 'px'
+      top: parseFloat(selectedMinHeight ? selectedMinHeight.substring(0, selectedMinHeight.length - 2) : configStyles.SELECT.selectedMinHeight.substring(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
     },
     className: `${styles$5['select-content-bottom']}`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${styles$5['select-content-bottom-inner']}`
-  }, options.map((option, i) => {
+  }, existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
     return /*#__PURE__*/React.createElement("div", {
       key: i,
       disabled: true,
@@ -1140,7 +1212,9 @@ const Select = ({
         marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
         backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
       }
-    }, option[keyNames.name]);
+    }, multiple && multipleCheckbox ? /*#__PURE__*/React.createElement(SelectCheckbox, {
+      checked: option.checked
+    }) : '', option[keyNames.name]);
   }))) : null)), errorMessage ? /*#__PURE__*/React.createElement("span", {
     style: {
       color: errorColor ? errorColor : configStyles.SELECT.errorColor,
@@ -1149,17 +1223,19 @@ const Select = ({
   }, errorMessage) : '');
 };
 Select.propTypes = {
+  options: PropTypes.array,
+  multiple: PropTypes.bool,
   onChange: PropTypes.func,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
-  selected: PropTypes.string,
-  jsonData: PropTypes.string,
+  selected: PropTypes.array,
   keyNames: PropTypes.object,
   className: PropTypes.string,
   arrowIcon: PropTypes.element,
   closeIcon: PropTypes.element,
   errorMessage: PropTypes.string,
   defaultOption: PropTypes.string,
+  multipleCheckbox: PropTypes.bool,
   label: PropTypes.string,
   labelColor: PropTypes.string,
   labelWeight: PropTypes.string,
@@ -1174,7 +1250,7 @@ Select.propTypes = {
   selectedColor: PropTypes.string,
   selectedBorder: PropTypes.string,
   selectedRadius: PropTypes.string,
-  selectedHeight: PropTypes.string,
+  selectedMinHeight: PropTypes.string,
   selectedPadding: PropTypes.string,
   selectedFontSize: PropTypes.string,
   selectedBoxSizing: PropTypes.string,
@@ -1695,4 +1771,4 @@ Autocomplate.defaultProps = {
   required: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, Stepper, Table, Tooltip, Typography, TypographyType };
+export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Tooltip, Typography, TypographyType };