@xaypay/tui 0.0.15 → 0.0.17

package/package.json

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

package/src/components/button/index.js

@@ -31,8 +31,6 @@ export const ButtonSize = {
 
 export const Button = ({ primary, backgroundColor, theme, size, className, disabled, label, outline, ...props }) => {
 
-  console.log(styles);
-  console.log(backgroundColor);
   const classProps = classnames(
     styles.btn,
     styles[theme],
@@ -41,7 +39,6 @@ export const Button = ({ primary, backgroundColor, theme, size, className, disab
     className
   );
   // className='btn type-outline size-default' 
-  console.log(classProps);
   return (
     <button
       type="button"

package/src/components/captcha/captcha.stories.js

@@ -12,6 +12,5 @@ export const Default = Template.bind({});
 Default.args = {
     rangeCount: 20,
     onclick: (e) => {
-        console.log(e.target.value);
     }
 };

package/src/components/icon/Icon.js

@@ -1,6 +1,13 @@
 /**
  * Created by aleksanyan.tigran on 10/7/2022.
  */
+import React from "react";
 import style from '../../assets_old/icons/style.css'
-const Icon = ( props) => <i className={style[props.className]} />
-export  default  Icon;
+
+const Icon = (props) => {
+      return (
+        <i className={style[props.className]} />
+      );
+}
+
+export default Icon;

package/src/components/input/index.js

@@ -29,9 +29,10 @@ export const Input = ({
   disabled,
   type,
   onChange,
+  value,
   ...props
 }) => {
-  const [inputValue, setInputValue] = useState("");
+  const [inputValue, setInputValue] = useState(value);
   const handleChange = (event) => {
     setInputValue(event.target.value);
     onChange ? onChange(event.target.value) : '';
@@ -79,6 +80,7 @@ Input.propTypes = {
   regexpError: PropTypes.string,
   label: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
+  value: PropTypes.string
 };
 
 Input.defaultProps = {
@@ -89,4 +91,5 @@ Input.defaultProps = {
   required: true,
   errorMesage: "",
   type: "text",
+  value: ""
 };

package/src/components/input/input.stories.js

@@ -12,7 +12,7 @@ export const Default = Template.bind({});
 Default.args = {
   size: InputSizes.MEDIUM,
   type: InputTypes.TEXT,
-  onChange: (val) => {console.log(val)}
+  onChange: (val) => {}
 };
 
 export const PASSWORD = Template.bind({});

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,18 +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

@@ -1,4 +1,4 @@
-import { React, useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./pagination.module.css";
@@ -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]);
@@ -29,7 +29,9 @@ export const Pagination = ({
   const onPageChange = (page) => {
     setCurrentPage(page);
   };
-  onChange(currentPageNumber);
+  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],
@@ -48,66 +51,67 @@ export const Select = ({
     );
 
     return (
-        <>
-        {label ? <label className={styles['select-title']}>{label}</label> : ""}
-        <div className={styles['select-wrap']}>
-            <div className={styles['select-content']} id={styles.selector}>
-                <div
-                    className={styles['select-content-top']}
-                    onClick={() => {
-                        setOpened(!opened)
-                    }}
-                >
-                    <div className={styles['select-content-top-text']}>{newSelected ?.name || defaultOption}</div>
-                    <div className={styles['select-content-top-icon']}>
-                        <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'}/>
+        <div>
+            {label ? <label className={styles['select-title']}>{label}</label> : ""}
+            <div className={styles['select-wrap']}>
+                <div className={styles['select-content']} id={styles.selector}>
+                    <div
+                        className={styles['select-content-top']}
+                        onClick={() => {
+                            setOpened(!opened)
+                        }}
+                    >
+                        <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>
                     </div>
-                </div>
-                {
-                    opened && !disabled ?
+                    {
+                        opened && !disabled ?
 
-                        <div className={styles['select-content-bottom']}>
-                            <div className={styles['select-content-bottom-inner']}>
-                                <div
-                                    className={styles['select-content-bottom-row']}
-                                    onClick={() => {
-                                        if (!required && !selected) {
-                                            setNewSelected(defaultOption)
-                                            onChange(defaultOption)
-                                            setOpened(!opened)
+                            <div className={styles['select-content-bottom']}>
+                                <div className={styles['select-content-bottom-inner']}>
+                                    <div
+                                        className={styles['select-content-bottom-row']}
+                                        onClick={() => {
+                                            if (!required && !selected) {
+                                                setNewSelected(defaultOption)
+                                                onChange(defaultOption)
+                                                setOpened(!opened)
+                                            }
+                                        }
                                         }
-                                    }
-                                    }
-                                >
-                                    {defaultOption}
-                                </div>
-                                {
-                                    options ?.map((option, i) => {
-                                    return <div
-                                    className={styles['select-content-bottom-row']}
-                                    disabled={true}
-                                    onClick={() => {
-                                    setNewSelected(option);
-                                    onChange(option);
-                                    setOpened(!opened);
-                                }
-                                }
-                                    defaultValue={option.id}
                                     >
-                                    {option.name}
+                                        {defaultOption}
                                     </div>
-                                })
-                                }
-                            </div>
+                                    {
+                                        options.map((option, i) => {
+                                            return <div
+                                            key={i}
+                                            className={styles['select-content-bottom-row']}
+                                            disabled={true}
+                                            onClick={() => {
+                                                setNewSelected(option);
+                                                onChange(option);
+                                                setOpened(!opened);
+                                            }
+                                        }
+                                            defaultValue={option[keyNames.id]}
+                                            >
+                                            {option[keyNames.name]}
+                                            </div>
+                                        })
+                                    }
+                                </div>
 
-                        </div>
-                        : null
-                }
+                            </div>
+                            : null
+                    }
 
+                </div>
             </div>
+            {eMessage ? <span className={styles.eMessage}>{eMessage}</span> : null}
         </div>
-        {eMessage ? <span className={styles.eMessage}>{eMessage}</span> : null}
-        </>
     );
 };
 
@@ -121,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,11 +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)=> {
-        console.log(newValue);
     },
     defaultOption: 'ընտրել',
-    selected: {"id":"2", "name":"Մալաթիա"}
+    selected: '{"bbb":"2", "value":"Մալաթիա"}',
+    keyNames: {name: 'value', id : 'bbb'}
 };
 

package/src/index.js

@@ -8,4 +8,4 @@ export * from './components/pagination';
 export * from './components/radio';
 export * from './components/captcha';
 export * from './components/stepper';
-// export * from './components/select';
+export * from './components/select';