@xaypay/tui 0.0.16 → 0.0.18

package/src/components/captcha/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styles from './captcha.module.css';
-
+import Icon from '../icon/Icon';
 
 export const Captcha = ({ onclick, rangeCount }) => {
   const [data, setData] = useState("");
@@ -10,7 +10,7 @@ export const Captcha = ({ onclick, rangeCount }) => {
   let rangeElement = document.getElementsByClassName(styles.range);
   useEffect(() => {
     for (let element of rangeElement) {
-      element.style.marginLeft = `${range - 3}%`;
+      element.style.marginLeft = `${range + 60}%`;
       element.style.color = data;
     }
   }, [range, data])
@@ -25,10 +25,10 @@ export const Captcha = ({ onclick, rangeCount }) => {
     progressBar[0].style.width = event.target.value + '%';
 
     if (rangeCount == event.target.value) {
-      selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/b1HDRtd/green.png')";
+      selectBtn[0].style.background = "pink";
     }
     else {
-      selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/QvXjjLM/red.png')";
+      selectBtn[0].style.background = "red";
     }
   }
 
@@ -39,13 +39,17 @@ export const Captcha = ({ onclick, rangeCount }) => {
   return (
     <>
       <div className={styles.main}>
-        <div className={styles.range}>▼</div>
+        <div className={styles.range}>
+          <Icon className='icon-vector-down'/>
+        </div>
         <input type='range' className={styles.slider} onClick={right ? onclick : null} onInput={sliderInput} onMouseUp={sliderChange} />
         <div className={styles.selector} >
           <div className={styles.selectBtn}></div>
         </div>
         <div className={styles.progressBar}></div>
-        <div className={styles.range} >▲</div>
+        <div className={styles.range} >
+          <Icon className='icon-vector-up'/>
+        </div>
       </div>
 
     </>

package/src/components/modal/index.js

@@ -2,17 +2,21 @@ import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./modal.module.css";
+import Icon from '../icon/Icon';
 
 export const Modal = ({ setShow, headerText, className }) => {
   const classProps = classnames(styles.modal, className);
   return (
-    <div className={classProps}>
-      <div className={styles["modal_header"]}>
-        <h5 className={styles.heading}>{headerText}</h5>
-      </div>
-      <button className={styles["close_btn"]} onClick={() => setShow(false)}>
-        X
-      </button>
+    <div className={styles["modal-wrap"]}>
+        <div className={styles["modal-content"]}>
+            <div className={styles["modal-top"]}>
+                <div className={styles['modal-title']}>Title</div>
+                <div className={styles["close-btn"]} onClick={() => setShow(false)}>
+                    <Icon className="icon-close"/>
+                </div>
+            </div>
+            <div className={styles["modal-section"]}/>
+        </div>
     </div>
   );
 };

package/src/components/modal/modal.module.css

@@ -1,35 +1,71 @@
-.modal {
-    width: 250px;
-    height: 170px;
-    background: white;
-    color: white;
-    z-index: 10;
-    border-radius: 16px;
-    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
-    position: relative
-  }
-  
-.modal_header {
-    height: 50px;
-    background: white;
+.modal-wrap {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    background: rgba(0,0,0,0.4);
+}
+.modal-top {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 30px;
+    padding-left: 24px;
+    box-sizing: border-box;
+    box-shadow: 0 1px 0 0 rgba(0,0,0,0.08);
 }
-
-.heading {
-    color: #2c3e50;
+.modal-title {
+    flex: 1 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    line-height: 24px;
     font-weight: 500;
-    font-size: 18px;
-    text-align: center;
+    color: #3C393E;
 }
-
-.close_btn {
+.close-btn {
+    flex: 0 0 auto;
+    width: 24px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    font-weight: 500;
-    padding: 4px 8px;
-    border: none;
-    font-size: 18px;
-    color: #2c3e50;
-    background: white;
+}
+.modal-section {
+    flex: 1 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.modal-content {
     position: absolute;
+    width: 100%;
+    max-width: 300px;
+    min-height: 130px;
+    top: 110px;
+    left: 0;
     right: 0;
-    top: 0;
-  }
+    margin: auto;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    height: auto;
+    background: rgba(255,255,255,1);
+    border-radius: 8px;
+    animation: show-popup 240ms;
+}
+@keyframes show-popup {
+    0% {
+        transform: translate3d(0, -30%, 0);
+    }
+    100% {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}

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,
@@ -87,14 +87,7 @@ export const Pagination = ({
           <li
             onClick={() => onPageChange(pageNumber)}
             key={id}
-            className={classnames(
-                `${
-                    pageNumber === currentPageNumber
-                        ? styles.selected
-                        : styles.listItem
-                    }`, styles['pagination-item']
-            )}
-          >
+            className={classnames(`${pageNumber === currentPageNumber ? styles.selected : styles.listItem}`, styles['pagination-item'])}>
             {pageNumber}
           </li>
         );

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'}
 };
 

package/src/components/stepper/index.js

@@ -6,34 +6,22 @@ import styles from "./stepper.module.css";
 export const Stepper = ({ className, onChange, stepLength, activeSteps }) => {
   const classProps = classNames(className);
   return (
-    <>
+    <div className={styles['stepper-container']}>
       {(() => {
         let steppers = [];
         for (let step = 1; step <= stepLength; step++) {
           steppers.push(
-            <div
-              className={classNames(
-                `${step <= activeSteps ? styles.activeRing : styles.bigRing}`
-              )}
-              key={step}
-            >
-              <div
-                className={classNames(
-                  `${
-                    step <= activeSteps
-                      ? styles.smallActiveRing
-                      : styles.smallRing
-                  }`
-                )}
-              >
-                {step <= activeSteps ? step : ""}
+              <div className={classNames(`${step <= activeSteps ? styles.activeRing : styles.bigRing}`)} key={step}>
+                <div
+                    className={classNames(`${step <= activeSteps ? styles.smallActiveRing : styles.smallRing}`)}>
+                    {step <= activeSteps ? step : ""}
+                </div>
               </div>
-            </div>
           );
         }
         return steppers;
       })()}
-    </>
+    </div>
   );
 };
 

package/src/components/stepper/stepper.module.css

@@ -1,48 +1,58 @@
+.stepper-container > div:last-child:before {
+  display: none;
+}
+.bigRing, .activeRing {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  margin-bottom: 36px;
+  cursor:pointer;
+}
 .bigRing {
-    width: 30px;
-    height: 30px;
-    border: 1px solid gray;
-    border-radius: 50%;
-    position: relative;
-    margin: 10px;
-    cursor:pointer;
-  }
-  
-  .smallRing {
-    position: absolute;
-    width: 50%;
-    height: 50%;
-    border-radius: 50%;
-    background-color: gray;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 12px;
-    color: white;
-    text-align: center;
-  }
-
-
-  .activeRing {
-    width: 30px;
-    height: 30px;
-    border: 1px solid blue;
-    border-radius: 50%;
-    position: relative;
-    margin: 10px;
-    cursor:pointer;
-  }
-
-  .smallActiveRing {
-    position: absolute;
-    width: 50%;
-    height: 50%;
-    border-radius: 50%;
-    background-color: blue;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 12px;
-    color: white;
-    text-align: center;
-  }
+  box-shadow: 0 0 0 2px #D1D1D1;
+}
+.bigRing:before {
+  background: #D1D1D1;
+}
+.activeRing {
+  box-shadow: 0 0 0 2px #00236A;
+}
+.activeRing:before {
+  background: #00236A;
+}
+.bigRing:before, .activeRing:before {
+  position: absolute;
+  content: '';
+  width: 2px;
+  height: 28px;
+  bottom: -32px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 20px;
+  overflow: hidden;
+}
+.smallRing, .smallActiveRing {
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+.smallRing {
+  width: 14px;
+  height: 14px;
+  background-color: #D1D1D1;
+}
+.smallActiveRing {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background-color: #00236A;
+  color: #ffffff;
+}