@xaypay/tui 0.0.16 → 0.0.17

package/dist/index.es.js

@@ -506,9 +506,9 @@ const Pagination = ({
   offset,
   className
 }) => {
-  const [siblingCountNumber, setSibilingCountNumber] = useState(2);
-  const [currentPageNumber, setCurrentPage] = useState(1);
-  const [currentTotalCount, setcurrentTotalCount] = useState(10);
+  const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
+  const [currentPageNumber, setCurrentPage] = useState(currentPage);
+  const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
   useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
@@ -523,7 +523,7 @@ const Pagination = ({
   };
   useEffect(() => {
     onChange(currentPageNumber);
-  }, []);
+  }, [currentPageNumber]);
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,
@@ -773,11 +773,13 @@ const Select = ({
   required,
   defaultOption,
   onChange,
+  keyNames,
   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(selected);
+  let [newSelected, setNewSelected] = useState(parseSelectedData);
   classnames(styles[theme], styles[size], {
     [styles.disabled]: disabled,
     [styles.required]: required
@@ -796,7 +798,7 @@ const Select = ({
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles['select-content-top-text']
-  }, newSelected && newSelected.name ? newSelected.name : defaultOption), /*#__PURE__*/React.createElement("div", {
+  }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React.createElement("div", {
     className: styles['select-content-top-icon']
   }, /*#__PURE__*/React.createElement(Icon, {
     className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
@@ -823,8 +825,8 @@ const Select = ({
         onChange(option);
         setOpened(!opened);
       },
-      defaultValue: option.id
-    }, option.name);
+      defaultValue: option[keyNames.id]
+    }, option[keyNames.name]);
   }))) : null)), eMessage ? /*#__PURE__*/React.createElement("span", {
     className: styles.eMessage
   }, eMessage) : null);
@@ -839,8 +841,9 @@ Select.propTypes = {
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   className: PropTypes.string,
-  selected: PropTypes.object,
-  jsonData: PropTypes.string
+  selected: PropTypes.string,
+  jsonData: PropTypes.string,
+  keyNames: PropTypes.object
 };
 Select.defaultProps = {
   size: 'medium'

package/dist/index.js

@@ -517,9 +517,9 @@ const Pagination = ({
   offset,
   className
 }) => {
-  const [siblingCountNumber, setSibilingCountNumber] = React.useState(2);
-  const [currentPageNumber, setCurrentPage] = React.useState(1);
-  const [currentTotalCount, setcurrentTotalCount] = React.useState(10);
+  const [siblingCountNumber, setSibilingCountNumber] = React.useState(siblingCount);
+  const [currentPageNumber, setCurrentPage] = React.useState(currentPage);
+  const [currentTotalCount, setcurrentTotalCount] = React.useState(totalCount);
   React.useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
@@ -534,7 +534,7 @@ const Pagination = ({
   };
   React.useEffect(() => {
     onChange(currentPageNumber);
-  }, []);
+  }, [currentPageNumber]);
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,
@@ -784,11 +784,13 @@ const Select = ({
   required,
   defaultOption,
   onChange,
+  keyNames,
   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(selected);
+  let [newSelected, setNewSelected] = React.useState(parseSelectedData);
   classnames__default["default"](styles[theme], styles[size], {
     [styles.disabled]: disabled,
     [styles.required]: required
@@ -807,7 +809,7 @@ const Select = ({
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles['select-content-top-text']
-  }, newSelected && newSelected.name ? newSelected.name : defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles['select-content-top-icon']
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
@@ -834,8 +836,8 @@ const Select = ({
         onChange(option);
         setOpened(!opened);
       },
-      defaultValue: option.id
-    }, option.name);
+      defaultValue: option[keyNames.id]
+    }, option[keyNames.name]);
   }))) : null)), eMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles.eMessage
   }, eMessage) : null);
@@ -850,8 +852,9 @@ Select.propTypes = {
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
-  selected: PropTypes__default["default"].object,
-  jsonData: PropTypes__default["default"].string
+  selected: PropTypes__default["default"].string,
+  jsonData: PropTypes__default["default"].string,
+  keyNames: PropTypes__default["default"].object
 };
 Select.defaultProps = {
   size: 'medium'

package/package.json

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

package/src/components/multiselect/index.js

@@ -9,6 +9,7 @@ export const Multiselect = ({
   jsonOptionsData,
   jsonSelectedOptionsData,
   onchange,
+  keyNames,
   value
 }) => {
   const [searchedOptions, setSearchedOptions] = useState(jsonOptionsData.length ? JSON.parse(jsonOptionsData) : []);
@@ -21,8 +22,8 @@ export const Multiselect = ({
       <div className={styles['multi-select-content-top']} onClick={()=>{setOpened(!opened)}}>
         {
           options.map((option, i) => {
-            return (<div className={styles['multi-select-content-bottom-row']} >
-              <div id={option.id}>{option.name}</div>
+            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);
@@ -33,28 +34,37 @@ export const Multiselect = ({
             </div>)
           })
         }
-        {/*<div onChange={(e) => {*/}
-          {/*setValues(e.target.value ? searchedOptions.filter((option) => {*/}
-            {/*return option.name.toLowerCase().includes(e.target.value.toLowerCase())*/}
-          {/*}) : searchedOptions)*/}
 
-        {/*}}  className={styles.input} type='text' />*/}
+        <input onChange={(e) => {
+          setValues(e.target.value ? searchedOptions.filter((option) => {
+            return option[keyNames.name].toLowerCase().includes(e.target.value.toLowerCase())
+          }) : searchedOptions)
+
+
+        }}  className={styles.input} type='text' />
         <div className={styles['select-content-top-icon']}>
           <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']} id={value.id} onClick={(e) => {
-                              setOptions([...options, { 'name': value.name, 'id': value.id }])
-                              values.splice(i, 1);
-                              setValues(values);
-                              setSearchedOptions(values);
-                          }}>{value.name}</div>)
+                          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>
               }
@@ -72,5 +82,6 @@ Multiselect.propTypes = {
   jsonOptionsData: PropTypes.string,
   jsonSelectedOptionsData: PropTypes.string,
   onchange: PropTypes.func,
+  keyNames: PropTypes.object,
 };
 

package/src/components/multiselect/multiselect.stories.js

@@ -2,17 +2,19 @@ import React from "react";
 import { Multiselect } from "./index";
 
 export default {
-  component: Multiselect,
-  title: "Components/Multiselect",
+    component: Multiselect,
+    title: "Components/Multiselect",
 };
 
 const Template = (args) => <Multiselect {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    jsonOptionsData: '[{"id":"1", "name":"Կենտրոն"}]',
-    jsonSelectedOptionsData: '[{"id":"0", "name":"Արաբկիր"}, {"id":"2", "name":"Մալաթիա"}]',
+    jsonOptionsData: '[{"bbb":"1", "value":"Կենտրոն"}]',
+    jsonSelectedOptionsData: '[{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"2", "value":"Մալաթիա"}]',
     label: 'label',
-    onchange: (newValue)=> {
-    }
+    onchange: (newValue) => {
+        console.log(newValue);
+    },
+    keyNames: { name: 'value', id: 'bbb' }
 };

package/src/components/pagination/index.js

@@ -13,9 +13,9 @@ export const Pagination = ({
   offset,
   className,
 }) => {
-  const [siblingCountNumber, setSibilingCountNumber] = useState(2);
-  const [currentPageNumber, setCurrentPage] = useState(1);
-  const [currentTotalCount, setcurrentTotalCount] = useState(10);
+  const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
+  const [currentPageNumber, setCurrentPage] = useState(currentPage);
+  const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
   useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
@@ -31,7 +31,7 @@ export const Pagination = ({
   };
   useEffect(() => {
     onChange(currentPageNumber);
-  }, []);
+  }, [currentPageNumber]);
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,

package/src/components/select/index.js

@@ -22,21 +22,24 @@ export const SelectSize = {
 };
 
 export const Select = ({
-                           theme,
-                           size,
-                           className,
-                           disabled,
-                           label,
-                           jsonData,
-                           eMessage,
-                           required,
-                           defaultOption,
-                           onChange,
-                           selected
-                       }) => {
-    const options = jsonData.length ? JSON.parse(jsonData) : []
+    theme,
+    size,
+    className,
+    disabled,
+    label,
+    jsonData,
+    eMessage,
+    required,
+    defaultOption,
+    onChange,
+    keyNames,
+    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(selected)
+    let [newSelected, setNewSelected] = useState(parseSelectedData)
     const classProps = classnames(
         styles[theme],
         styles[size],
@@ -58,7 +61,7 @@ export const Select = ({
                             setOpened(!opened)
                         }}
                     >
-                        <div className={styles['select-content-top-text']}>{newSelected && newSelected.name ? newSelected.name : defaultOption}</div>
+                        <div className={styles['select-content-top-text']}>{newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption}</div>
                         <div className={styles['select-content-top-icon']}>
                             <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'}/>
                         </div>
@@ -93,9 +96,9 @@ export const Select = ({
                                                 setOpened(!opened);
                                             }
                                         }
-                                            defaultValue={option.id}
+                                            defaultValue={option[keyNames.id]}
                                             >
-                                            {option.name}
+                                            {option[keyNames.name]}
                                             </div>
                                         })
                                     }
@@ -122,8 +125,9 @@ Select.propTypes = {
     required: PropTypes.bool,
     disabled: PropTypes.bool,
     className: PropTypes.string,
-    selected: PropTypes.object,
-    jsonData: PropTypes.string
+    selected: PropTypes.string,
+    jsonData: PropTypes.string,
+    keyNames: PropTypes.object,
 };
 
 Select.defaultProps = {

package/src/components/select/select.stories.js

@@ -11,10 +11,11 @@ export const Default = Template.bind({});
 Default.args = {
     theme: SelectTheme.DEFAULT,
     label: 'վարչական շրջան',
-    jsonData: '[{"id":"0", "name":"Արաբկիր"}, {"id":"1", "name":"Կենտրոն"}, {"id":"2", "name":"Մալաթիա"}]',
+    jsonData: '[{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}]',
     onChange: (newValue)=> {
     },
     defaultOption: 'ընտրել',
-    selected: {"id":"2", "name":"Մալաթիա"}
+    selected: '{"bbb":"2", "value":"Մալաթիա"}',
+    keyNames: {name: 'value', id : 'bbb'}
 };