@xaypay/tui 0.0.105 → 0.0.106

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

@@ -1,28 +1,39 @@
-import { Select } from ".";
+import React from 'react'
+import { Select } from '.'
 
 export default {
     component: Select,
     title: 'Components/Select',
     argTypes: {
         options: {
-            control: 'array'
+            control: 'array',
         },
         selected: {
-            control: 'array'
-        }
-    }
-};
+            control: 'array',
+        },
+    },
+}
 
-const Template = (args) => <Select label='' {...args} >Default</Select>;
+const Template = (args) => (
+    <Select label="" {...args}>
+        Default
+    </Select>
+)
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
     showCloseIcon: true,
     label: 'վարչական շրջան',
-    options: [{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}],
-    onChange: (newValue)=> {
-    },
+    options: [
+        { bbb: '0', value: 'Արաբկիր' },
+        { bbb: '1', value: 'Կենտրոն' },
+        { bbb: '2', value: 'Մալաթիա' },
+    ],
+    onChange: () => {},
     defaultOption: 'Ընտրել',
-    selected: [{"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}],
-    keyNames: {name: 'value', id : 'bbb'}
-};
+    selected: [
+        { bbb: '1', value: 'Կենտրոն' },
+        { bbb: '2', value: 'Մալաթիա' },
+    ],
+    keyNames: { name: 'value', id: 'bbb' },
+}

package/src/components/singleCheckbox/Checkbox.js

@@ -1,36 +1,28 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react'
 
-import { compereConfigs } from './../../utils';
+import { compereConfigs } from './../../utils'
 
-import ReactCheckbox from '../icon/CheckboxUnchecked';
-import ReactCheckboxChecked from '../icon/CheckboxChecked';
+import ReactCheckbox from '../icon/CheckboxUnchecked'
+import ReactCheckboxChecked from '../icon/CheckboxChecked'
 
-const Checkbox = ({
-    data,
-    styles,
-    checked,
-    disabled,
-    checkedColor,
-    handleChecked,
-    unCheckedColor
-}) => {
-    const configStyles = compereConfigs();
+const Checkbox = ({ data, styles, checked, disabled, checkedColor, handleChecked, unCheckedColor }) => {
+    const configStyles = compereConfigs()
 
-    const [ innerChecked, setInnerChecked ] = useState(false);
-    const [ innerDisabled, setInnerDisabled ] = useState(false);
+    const [innerChecked, setInnerChecked] = useState(false)
+    const [innerDisabled, setInnerDisabled] = useState(false)
 
     const handleClick = (e) => {
-        handleChecked(data, e);
-    };
+        handleChecked(data, e)
+    }
 
     useEffect(() => {
-        setInnerDisabled(disabled);
-    }, [disabled]);
+        setInnerDisabled(disabled)
+    }, [disabled])
 
     useEffect(() => {
-        setInnerChecked(checked);
-    }, [checked]);
-    
+        setInnerChecked(checked)
+    }, [checked])
+
     return (
         <div
             style={{
@@ -39,18 +31,23 @@ const Checkbox = ({
                 marginRight: '9px',
                 display: 'inline-block',
                 cursor: !innerDisabled ? 'pointer' : 'not-allowed',
-                ...styles
+                ...styles,
             }}
-            onClick={!innerDisabled && handleChecked ? handleClick : _ => _}
+            onClick={!innerDisabled && handleChecked ? handleClick : (_) => _}
         >
-            { innerChecked && !innerDisabled
-                ? <ReactCheckboxChecked fillColor={checkedColor ? checkedColor : configStyles.SINGLECHECKBOX.checkedColor} />
-                : <ReactCheckbox fillColor={unCheckedColor ? unCheckedColor : configStyles.SINGLECHECKBOX.unCheckedColor} />
-            }
-
-            {/* {label && <span>{ label }</span>} */}
+            {innerChecked && !innerDisabled ? (
+                <ReactCheckboxChecked
+                    fillColor={checkedColor ? checkedColor : configStyles.SINGLECHECKBOX.checkedColor}
+                />
+            ) : (
+                <ReactCheckbox
+                    fillColor={unCheckedColor ? unCheckedColor : configStyles.SINGLECHECKBOX.unCheckedColor}
+                />
+            )}
+
+            {data?.label && <span>{data.label}</span>}
         </div>
-    );
-};
+    )
+}
 
-export default Checkbox;
+export default Checkbox

package/src/components/singleCheckbox/index.js

@@ -1,51 +1,42 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
 
-import Checkbox from './Checkbox';
+import Checkbox from './Checkbox'
 
-export const SingleCheckbox = ({
-  data,
-  styles,
-  checked,
-  disabled,
-  checkedColor,
-  handleChecked,
-  unCheckedColor
-}) => {
+export const SingleCheckbox = ({ data, styles, checked, disabled, checkedColor, handleChecked, unCheckedColor }) => {
+    const [innerData, setInnerData] = useState(null)
 
-  const [ innerData, setInnerData ] = useState(null);
+    useEffect(() => {
+        // if (data) {
+        //   if (typeof data === 'object' && data.constructor === Object) {
+        //     setInnerData(data);
+        //   } else {
+        //     alert('Data props on Checkbox component must be an object');
+        //   }
+        // } else {
+        //   alert('Please add data props on Checkbox component');
+        // }
+        setInnerData(data)
+    }, [data])
 
-  useEffect(() => {
-    // if (data) {
-    //   if (typeof data === 'object' && data.constructor === Object) {
-    //     setInnerData(data);
-    //   } else {
-    //     alert('Data props on Checkbox component must be an object');
-    //   }
-    // } else {
-    //   alert('Please add data props on Checkbox component');
-    // }
-    setInnerData(data);
-  }, [data]);
-
-  return (
-    <Checkbox
-      styles={styles}
-      data={innerData}
-      checked={checked}
-      disabled={disabled}
-      checkedColor={checkedColor}
-      handleChecked={handleChecked}
-      unCheckedColor={unCheckedColor}
-    />
-  );
-};
+    return (
+        <Checkbox
+            styles={styles}
+            data={innerData}
+            checked={checked}
+            disabled={disabled}
+            checkedColor={checkedColor}
+            handleChecked={handleChecked}
+            unCheckedColor={unCheckedColor}
+        />
+    )
+}
 
 SingleCheckbox.propTypes = {
-  onClick: PropTypes.func,
-  styles: PropTypes.object,
-  disabled: PropTypes.bool,
-  checkedColor: PropTypes.string,
-  unCheckedColor: PropTypes.string,
-  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
-};
+    data: PropTypes.object,
+    onClick: PropTypes.func,
+    styles: PropTypes.object,
+    disabled: PropTypes.bool,
+    checkedColor: PropTypes.string,
+    unCheckedColor: PropTypes.string,
+}

package/src/components/singleCheckbox/singleCheckbox.stories.js

@@ -1,24 +1,24 @@
-import React, { useState } from "react";
-import { SingleCheckbox } from ".";
+import React, { useState } from 'react'
+import { SingleCheckbox } from '.'
 export default {
-  component: SingleCheckbox,
-  title: "Components/SingleCheckbox",
-};
+    component: SingleCheckbox,
+    title: 'Components/SingleCheckbox',
+}
 
 const Template = (args) => {
-  const [ check, setCheck ] = useState(false);
+    const [check, setCheck] = useState(false)
 
-  const handleChecked = (data, e) => {
-    console.log(e, 'target event');
-    console.log(data, 'data');
-    setCheck(!check);
-  };
+    const handleChecked = (data, e) => {
+        console.log(e, 'target event')
+        console.log(data, 'data')
+        setCheck(!check)
+    }
 
-  return <SingleCheckbox checked={check} data={[1,2,3]} handleChecked={handleChecked} {...args} />;
+    return <SingleCheckbox checked={check} handleChecked={handleChecked} {...args} />
 }
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
-  checkedColor: '#00236A',
-  unCheckedColor: '#D1D1D1'
-};
+    checkedColor: '#00236A',
+    unCheckedColor: '#D1D1D1',
+}

package/src/components/stepper/index.js

@@ -1,33 +1,38 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import styles from "./stepper.module.css";
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import styles from './stepper.module.css'
 
-export const Stepper = ({ className, onChange, stepLength, activeSteps }) => {
-  const classProps = classNames(className, 'stepper-inner-rem');
-  return (
-    <div className={`${styles['stepper-container']} stepper-container-rem`}>
-      {(() => {
-        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>
-              </div>
-          );
-        }
-        return steppers;
-      })()}
-    </div>
-  );
-};
+export const Stepper = ({ stepLength, activeSteps }) => {
+    return (
+        <div className={`${styles['stepper-container']} stepper-container-rem`}>
+            {(() => {
+                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>
+                        </div>
+                    )
+                }
+                return steppers
+            })()}
+        </div>
+    )
+}
 
 Stepper.propTypes = {
-  className: PropTypes.string,
-  onChange: PropTypes.func,
-  stepLength: PropTypes.number,
-  activeSteps: PropTypes.number,
-};
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    stepLength: PropTypes.number,
+    activeSteps: PropTypes.number,
+}

package/src/components/stepper/stepper.stories.js

@@ -1,17 +1,17 @@
-import React from "react";
-import { Stepper } from "./index";
+import React from 'react'
+import { Stepper } from './index'
 export default {
-  component: Stepper,
-  title: "Components/Stepper",
-};
+    component: Stepper,
+    title: 'Components/Stepper',
+}
 
 const Template = ({ stepLength, activeSteps }) => {
-  return <Stepper stepLength={stepLength} activeSteps={activeSteps} />;
-};
+    return <Stepper stepLength={stepLength} activeSteps={activeSteps} />
+}
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 
 Default.args = {
-  stepLength: 5,
-  activeSteps: 3,
-};
+    stepLength: 5,
+    activeSteps: 3,
+}