@xaypay/tui 0.0.20 → 0.0.22

package/dist/index.es.js

@@ -191,20 +191,25 @@ const Autocomplate = ({
   required,
   disabled,
   jsonOptionsData,
+  jsonSelectedOptionsData,
   onChange,
   value,
   searchCount,
+  keyNames,
   ...props
 }) => {
   classnames(styles$7.searchBox, className);
-  const [inputValue, setInputValue] = useState("");
+  const [inputValue, setInputValue] = useState(null);
+  const [inputId, setInputId] = useState(null);
   const [activeOption, setActiveOption] = useState(0);
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [showOptions, setShowOptions] = useState(false);
-  const parseOptionsData = jsonOptionsData.length !== 0 ? JSON.parse(jsonOptionsData).sort() : [];
+  const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData).sort() : [];
+  const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {};
   const handleChange = e => {
     const currentInputValue = e.currentTarget.value;
-    const filteredOptions = parseOptionsData.filter(optionName => optionName.toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1);
+    setInputId(null);
+    const filteredOptions = parseOptionsData.filter(optionName => optionName[keyNames.name].toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1);
     setInputValue(currentInputValue);
     setActiveOption(0);
     setFilteredOptions(filteredOptions);
@@ -212,9 +217,14 @@ const Autocomplate = ({
   };
   const handleClick = e => {
     setInputValue(e.currentTarget.innerText);
+    setInputId(e.target.id);
     setActiveOption(0);
     setFilteredOptions([]);
     setShowOptions(false);
+    onChange({
+      name: e.currentTarget.innerText,
+      id: e.target.id
+    });
   };
   let optionList;
   if (showOptions && inputValue) {
@@ -230,11 +240,12 @@ const Autocomplate = ({
         }
         return /*#__PURE__*/React.createElement("div", {
           className: styles$7[className],
-          key: optionName,
+          key: optionName[keyNames.id],
           onClick: handleClick
         }, /*#__PURE__*/React.createElement("div", {
+          id: optionName[keyNames.id],
           className: styles$7['autocomplate-content-bottom-row']
-        }, optionName));
+        }, optionName[keyNames.name]));
       })));
     } else {
       optionList = /*#__PURE__*/React.createElement("div", {
@@ -253,13 +264,14 @@ const Autocomplate = ({
   }, label) : "", /*#__PURE__*/React.createElement("div", {
     className: styles$7['autocomplate-content']
   }, /*#__PURE__*/React.createElement("input", _extends({
+    id: inputId,
     type: "text",
     className: styles$7['autocomplate-content-top'],
     required: required,
     disabled: disabled,
     onChange: handleChange,
-    value: inputValue,
-    placeholder: "Write..."
+    value: inputValue != null ? inputValue : parseSelectedOptionsData[keyNames.name],
+    placeholder: !parseSelectedOptionsData[keyNames.name] ? " Write..." : ''
   }, props)), optionList));
 };
 Autocomplate.propTypes = {
@@ -268,13 +280,11 @@ Autocomplate.propTypes = {
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   jsonOptionsData: PropTypes.string,
+  jsonSelectedOptionsData: PropTypes.string,
   onChange: PropTypes.func,
   value: PropTypes.string,
-  searchCount: PropTypes.number
-};
-Autocomplate.defaultProps = {
-  jsonOptionsData: '["Tigran", "Tigran Aleksanyan", "Tigarn Aleksanyan Yerevan"]',
-  searchCount: 2
+  searchCount: PropTypes.number,
+  keyNames: PropTypes.object
 };
 
 var css_248z$7 = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
@@ -291,11 +301,15 @@ const Checkbox = ({
   onChange,
   label,
   keyNames,
+  onClick,
   ...props
 }) => {
   const classProps = classnames(styles$6.checkbox, className);
   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 => {
@@ -324,7 +338,8 @@ const Checkbox = ({
       required: required,
       value: value ? value : element.value,
       name: name ? name : element.name,
-      onChange: handleChange
+      onChange: handleChange,
+      onClick: handleClick
     }, props)), /*#__PURE__*/React.createElement("span", {
       className: styles$6["checkmark"]
     }), element.label ? /*#__PURE__*/React.createElement("span", {
@@ -341,7 +356,7 @@ Checkbox.propTypes = {
   value: PropTypes.string,
   jsonData: PropTypes.string,
   label: PropTypes.string,
-  onChange: PropTypes.func,
+  onClick: PropTypes.func,
   keyNames: PropTypes.object
 };
 Checkbox.defaultProps = {

package/dist/index.js

@@ -202,20 +202,25 @@ const Autocomplate = ({
   required,
   disabled,
   jsonOptionsData,
+  jsonSelectedOptionsData,
   onChange,
   value,
   searchCount,
+  keyNames,
   ...props
 }) => {
   classnames__default["default"](styles$7.searchBox, className);
-  const [inputValue, setInputValue] = React.useState("");
+  const [inputValue, setInputValue] = React.useState(null);
+  const [inputId, setInputId] = React.useState(null);
   const [activeOption, setActiveOption] = React.useState(0);
   const [filteredOptions, setFilteredOptions] = React.useState([]);
   const [showOptions, setShowOptions] = React.useState(false);
-  const parseOptionsData = jsonOptionsData.length !== 0 ? JSON.parse(jsonOptionsData).sort() : [];
+  const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData).sort() : [];
+  const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {};
   const handleChange = e => {
     const currentInputValue = e.currentTarget.value;
-    const filteredOptions = parseOptionsData.filter(optionName => optionName.toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1);
+    setInputId(null);
+    const filteredOptions = parseOptionsData.filter(optionName => optionName[keyNames.name].toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1);
     setInputValue(currentInputValue);
     setActiveOption(0);
     setFilteredOptions(filteredOptions);
@@ -223,9 +228,14 @@ const Autocomplate = ({
   };
   const handleClick = e => {
     setInputValue(e.currentTarget.innerText);
+    setInputId(e.target.id);
     setActiveOption(0);
     setFilteredOptions([]);
     setShowOptions(false);
+    onChange({
+      name: e.currentTarget.innerText,
+      id: e.target.id
+    });
   };
   let optionList;
   if (showOptions && inputValue) {
@@ -241,11 +251,12 @@ const Autocomplate = ({
         }
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: styles$7[className],
-          key: optionName,
+          key: optionName[keyNames.id],
           onClick: handleClick
         }, /*#__PURE__*/React__default["default"].createElement("div", {
+          id: optionName[keyNames.id],
           className: styles$7['autocomplate-content-bottom-row']
-        }, optionName));
+        }, optionName[keyNames.name]));
       })));
     } else {
       optionList = /*#__PURE__*/React__default["default"].createElement("div", {
@@ -264,13 +275,14 @@ const Autocomplate = ({
   }, label) : "", /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$7['autocomplate-content']
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
+    id: inputId,
     type: "text",
     className: styles$7['autocomplate-content-top'],
     required: required,
     disabled: disabled,
     onChange: handleChange,
-    value: inputValue,
-    placeholder: "Write..."
+    value: inputValue != null ? inputValue : parseSelectedOptionsData[keyNames.name],
+    placeholder: !parseSelectedOptionsData[keyNames.name] ? " Write..." : ''
   }, props)), optionList));
 };
 Autocomplate.propTypes = {
@@ -279,13 +291,11 @@ Autocomplate.propTypes = {
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   jsonOptionsData: PropTypes__default["default"].string,
+  jsonSelectedOptionsData: PropTypes__default["default"].string,
   onChange: PropTypes__default["default"].func,
   value: PropTypes__default["default"].string,
-  searchCount: PropTypes__default["default"].number
-};
-Autocomplate.defaultProps = {
-  jsonOptionsData: '["Tigran", "Tigran Aleksanyan", "Tigarn Aleksanyan Yerevan"]',
-  searchCount: 2
+  searchCount: PropTypes__default["default"].number,
+  keyNames: PropTypes__default["default"].object
 };
 
 var css_248z$7 = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
@@ -302,11 +312,15 @@ const Checkbox = ({
   onChange,
   label,
   keyNames,
+  onClick,
   ...props
 }) => {
   const classProps = classnames__default["default"](styles$6.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = React.useState(parseData);
+  const handleClick = e => {
+    onClick(e);
+  };
   const handleChange = e => {
     if (e.target.checked) {
       data.forEach(item => {
@@ -335,7 +349,8 @@ const Checkbox = ({
       required: required,
       value: value ? value : element.value,
       name: name ? name : element.name,
-      onChange: handleChange
+      onChange: handleChange,
+      onClick: handleClick
     }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
       className: styles$6["checkmark"]
     }), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
@@ -352,7 +367,7 @@ Checkbox.propTypes = {
   value: PropTypes__default["default"].string,
   jsonData: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func,
+  onClick: PropTypes__default["default"].func,
   keyNames: PropTypes__default["default"].object
 };
 Checkbox.defaultProps = {

package/package.json

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

package/src/components/autocomplate/autocomplate.stories.js

@@ -9,3 +9,15 @@ export default {
 const Template = (args) => <Autocomplate {...args} />;
 
 export const Default = Template.bind({});
+Default.args = {
+  jsonOptionsData: '[{"bbb":"0", "value":"asd"}, {"bbb":"2", "value":"bas"}]',
+  // jsonSelectedOptionsData: '{"bbb":"0", "value":"asd"}',
+  label: 'label',
+  keyNames: { name: 'value', id: 'bbb' },
+  searchCount: 2,
+  onChange: (aa)=> {
+    console.log(aa);
+    // console.log(aa.id);
+  }
+
+};

package/src/components/autocomplate/index.js

@@ -9,37 +9,44 @@ export const Autocomplate = ({
   required,
   disabled,
   jsonOptionsData,
+  jsonSelectedOptionsData,
   onChange,
   value,
   searchCount,
+  keyNames,
   ...props
 }) => {
   const classProps = classnames(styles.searchBox, className);
-  const [inputValue, setInputValue] = useState("");
+  const [inputValue, setInputValue] = useState(null);
+  const [inputId, setInputId] = useState(null);
   const [activeOption, setActiveOption] = useState(0);
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [showOptions, setShowOptions] = useState(false);
-
   const parseOptionsData =
-    jsonOptionsData.length !== 0 ? JSON.parse(jsonOptionsData).sort() : [];
+    jsonOptionsData? JSON.parse(jsonOptionsData).sort() : [];
+    const parseSelectedOptionsData =
+    jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {};
+    
   const handleChange = (e) => {
     const currentInputValue = e.currentTarget.value;
-
+    setInputId(null)
     const filteredOptions = parseOptionsData.filter(
       (optionName) =>
-        optionName.toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1
+        optionName[keyNames.name].toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1
     );
-
     setInputValue(currentInputValue);
     setActiveOption(0);
     setFilteredOptions(filteredOptions);
-    setShowOptions(true);
+    setShowOptions(true);    
   };
   const handleClick = (e) => {
     setInputValue(e.currentTarget.innerText);
+    setInputId(e.target.id)
     setActiveOption(0);
     setFilteredOptions([]);
     setShowOptions(false);
+    onChange({name: e.currentTarget.innerText, id: e.target.id});
+
   };
   let optionList;
     if (showOptions && inputValue) {
@@ -55,10 +62,10 @@ export const Autocomplate = ({
                           return (
                               <div
                                   className={styles[className]}
-                                  key={optionName}
+                                  key={optionName[keyNames.id]}
                                   onClick={handleClick}
                               >
-                                <div className={styles['autocomplate-content-bottom-row']}>{optionName}</div>
+                                <div id={optionName[keyNames.id]} className={styles['autocomplate-content-bottom-row']}>{optionName[keyNames.name]}</div>
                               </div>
                           );
                       })}
@@ -85,13 +92,14 @@ export const Autocomplate = ({
       {label ? <label className={styles.labelInput}>{label}</label> : ""}
       <div className={styles['autocomplate-content']}>
         <input
+          id={inputId}
           type="text"
           className={styles['autocomplate-content-top']}
           required={required}
           disabled={disabled}
           onChange={handleChange}
-          value={inputValue}
-          placeholder="Write..."
+          value={inputValue != null ? inputValue : parseSelectedOptionsData[keyNames.name]}
+          placeholder= {!parseSelectedOptionsData[keyNames.name]  ?" Write..." : ''}
           {...props}
         />
         {optionList}
@@ -106,12 +114,11 @@ Autocomplate.propTypes = {
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   jsonOptionsData: PropTypes.string,
+  jsonSelectedOptionsData: PropTypes.string,
   onChange: PropTypes.func,
   value: PropTypes.string,
   searchCount: PropTypes.number,
+  keyNames: PropTypes.object,
 };
 
-Autocomplate.defaultProps = {
-  jsonOptionsData: '["Tigran", "Tigran Aleksanyan", "Tigarn Aleksanyan Yerevan"]',
-  searchCount: 2,
-};
+

package/src/components/checkbox/index.js

@@ -13,12 +13,17 @@ export const Checkbox = ({
   onChange,
   label,
   keyNames,
+  onClick,
   ...props
 }) => {
   const classProps = classNames(styles.checkbox, className);
   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) => {
@@ -50,9 +55,10 @@ export const Checkbox = ({
               value={value ? value : element.value}
               name={name ? name : element.name}
               onChange={handleChange}
+              onClick={handleClick}
               {...props}
             />
-            <span className={styles["checkmark"]}/>
+            <span className={styles["checkmark"]} />
             {element.label ? (
               <span className={styles.labelRadio}>
                 {label ? label : element.label}
@@ -76,7 +82,7 @@ Checkbox.propTypes = {
   value: PropTypes.string,
   jsonData: PropTypes.string,
   label: PropTypes.string,
-  onChange: PropTypes.func,
+  onClick: PropTypes.func,
   keyNames: PropTypes.object,
 };
 

package/src/components/multiselect/index.js

@@ -19,18 +19,23 @@ export const Multiselect = ({
   return (
     <div className={styles.main}>
       {label ? <label className={styles['multi-select-title']}>վարչական շրջան <span>*</span></label> : ""}
-      <div className={styles['multi-select-content-top']} onClick={()=>{setOpened(!opened)}}>
+      <div className={styles['multi-select-content-top']} onClick={() => { setOpened(!opened) }}>
         {
           options.map((option, i) => {
             return (<div className={styles['multi-select-content-bottom-row']} key={option[keyNames.id]}>
               <div id={option[keyNames.id]}>{option[keyNames.name]}</div>
-              <Icon className='icon-close' onClick={() => {
-                options.splice(i, 1);
-                setOptions(options);
-                setValues([...values, option]);
-                setSearchedOptions([...values, option]);
-                setOpened(true);
-              }}/>
+              <div
+                onClick={() => {
+                  options.splice(i, 1);
+                  setOptions(options);
+                  setValues([...values, option]);
+                  setSearchedOptions([...values, option]);
+                  setOpened(true);
+                }}
+              >
+                <Icon className='icon-close' />
+              </div>
+
             </div>)
           })
         }
@@ -41,33 +46,33 @@ export const Multiselect = ({
           }) : searchedOptions)
 
 
-        }}  className={styles.input} type='text' />
+        }} className={styles.input} type='text' />
         <div className={styles['select-content-top-icon']}>
-          <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'}/>
+          <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'} />
         </div>
       </div>
       {
 
         opened ? <div className={styles['multi-select-content-bottom']} onClick={onchange}>
           <div className={styles['multi-select-content-bottom-inner']}>
-              {
-                  values.length ?
-                      values.map((value, i) => {
-                          return (<div 
-                                    className={styles['multi-select-content-bottom-row']} 
-                                    key={value[keyNames.id]} 
-                                    id={value.id} 
-                                    onClick={(e) => {
-                                      setOptions([...options, { [keyNames.name] : value[keyNames.name], [keyNames.id] : value[keyNames.id]  }])
-                                      values.splice(i, 1);
-                                      setValues(values);
-                                      setSearchedOptions(values);
-                                    }}>
-                                      {value.name}
-                                  </div>)
-                      }) :
-                      <div className={styles['no-elements']}>No Elements!</div>
-              }
+            {
+              values.length ?
+                values.map((value, i) => {
+                  return (<div
+                    className={styles['multi-select-content-bottom-row']}
+                    key={value[keyNames.id]}
+                    id={value.id}
+                    onClick={(e) => {
+                      setOptions([...options, { [keyNames.name]: value[keyNames.name], [keyNames.id]: value[keyNames.id] }])
+                      values.splice(i, 1);
+                      setValues(values);
+                      setSearchedOptions(values);
+                    }}>
+                    {value[keyNames.name]}
+                  </div>)
+                }) :
+                <div className={styles['no-elements']}>No Elements!</div>
+            }
           </div>
         </div> : null
       }