@xaypay/tui 0.0.19 → 0.0.21

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styled from 'styled-components';
@@ -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();
     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}";
@@ -397,6 +407,9 @@ const Input = ({
     setInputValue(event.target.value);
     onChange ? onChange(event.target.value) : '';
   };
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
   let eMessage = "";
   if (errorMesage) {
     eMessage = errorMesage;
@@ -783,9 +796,12 @@ const Select = ({
   selected
 }) => {
   const options = jsonData.length ? JSON.parse(jsonData) : [];
-  const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
   let [opened, setOpened] = useState(false);
-  let [newSelected, setNewSelected] = useState(parseSelectedData);
+  let [newSelected, setNewSelected] = useState({});
+  useEffect(() => {
+    const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
+    setNewSelected(parseSelectedData);
+  }, [selected]);
   classnames(styles[theme], styles[size], {
     [styles.disabled]: disabled,
     [styles.required]: required

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();
     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}";
@@ -408,6 +418,9 @@ const Input = ({
     setInputValue(event.target.value);
     onChange ? onChange(event.target.value) : '';
   };
+  React.useEffect(() => {
+    setInputValue(value);
+  }, [value]);
   let eMessage = "";
   if (errorMesage) {
     eMessage = errorMesage;
@@ -794,9 +807,12 @@ const Select = ({
   selected
 }) => {
   const options = jsonData.length ? JSON.parse(jsonData) : [];
-  const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
   let [opened, setOpened] = React.useState(false);
-  let [newSelected, setNewSelected] = React.useState(parseSelectedData);
+  let [newSelected, setNewSelected] = React.useState({});
+  React.useEffect(() => {
+    const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
+    setNewSelected(parseSelectedData);
+  }, [selected]);
   classnames__default["default"](styles[theme], styles[size], {
     [styles.disabled]: disabled,
     [styles.required]: required

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "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()
     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/input/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./input.module.css";
@@ -38,6 +38,10 @@ export const Input = ({
     onChange ? onChange(event.target.value) : '';
   };
 
+  useEffect(()=>{
+    setInputValue(value)
+  },[value])
+
   let eMessage = "";
   if (errorMesage) {
     eMessage = errorMesage;

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
       }

package/src/components/select/index.js

@@ -36,10 +36,18 @@ export const Select = ({
     selected
 }) => {
     const options = jsonData.length ? JSON.parse(jsonData) : [];
-    const parseSelectedData =
-    selected.length !== 0 ? JSON.parse(selected) : {};
+
+   
+    
     let [opened, setOpened] = useState(false)
-    let [newSelected, setNewSelected] = useState(parseSelectedData)
+    let [newSelected, setNewSelected] = useState({})
+
+    useEffect(()=>{
+        const parseSelectedData =
+        selected.length !== 0 ? JSON.parse(selected) : {};
+        setNewSelected(parseSelectedData);
+    },[selected])
+
     const classProps = classnames(
         styles[theme],
         styles[size],