@xaypay/tui 0.0.115 → 0.0.117

package/package.json

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

package/src/components/button/index.js

@@ -5,7 +5,6 @@ import { compereConfigs } from './../../utils'
 
 export const Button = ({
     icon,
-    hoverIcon,
     size,
     type,
     font,
@@ -23,6 +22,7 @@ export const Button = ({
     disabled,
     className,
     boxSizing,
+    hoverIcon,
     hoverColor,
     transition,
     contentWidth,
@@ -44,7 +44,7 @@ export const Button = ({
     }, [])
 
     const configStyles = compereConfigs()
-    const classProps = classnames(className)
+    const classProps = classnames(className ? className : configStyles.BUTTON.className)
 
     const handleMouseEnter = () => {
         setIsHover(true)
@@ -58,6 +58,7 @@ export const Button = ({
         <button
             style={{
                 display: 'flex',
+                outline: 'none',
                 alignItems: 'center',
                 justifyContent: 'center',
                 fontSize: size ? size : configStyles.BUTTON.size,

package/src/components/captcha/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-
+import classnames from 'classnames'
 import { compereConfigs } from './../../utils'
 
 import SvgCaptchaArrowUp from './../icon/CaptchaArrowUp'
@@ -8,11 +8,11 @@ import SvgCaptchaArrowDown from './../icon/CaptchaArrowDown'
 
 import styles from './captcha.module.css'
 
-export const Captcha = ({ size, color, range, label, getRange }) => {
+export const Captcha = ({ size, color, range, label, className, getRange }) => {
     const [rangeNumber, setRangeNumber] = useState(0)
     const [rangeProgress, setRangeProgress] = useState(0)
-
     const configStyles = compereConfigs()
+    const classProps = classnames(className ? className : configStyles.CAPTCHA.className)
 
     const handleRange = (e) => {
         const value = e.target.value
@@ -38,7 +38,7 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
     }, [range, getRange])
 
     return (
-        <>
+        <div className={classProps}>
             {label && (
                 <p
                     style={{
@@ -147,7 +147,7 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
                     <SvgCaptchaArrowUp />
                 </div>
             </div>
-        </>
+        </div>
     )
 }
 

package/src/components/checkbox/checkbox.module.css

@@ -1,59 +0,0 @@
-.checkbox-wrap {
-    position: relative;
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    margin: 0 6px;
-    padding-left: 24px;
-    cursor: pointer;
-}
-.checkbox-wrap > input {
-    position: absolute;
-    opacity: 0;
-    height: 0;
-    width: 0;
-}
-
-.checkbox-wrap .checkmark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    margin: auto;
-    display: inline-block;
-    vertical-align: top;
-    width: 14px;
-    height: 14px;
-    border: 1px solid #d9d9d9;
-    border-radius: 3px;
-    margin-right: 4px;
-    transition: border-color 240ms;
-}
-
-.checkbox-wrap > .checkmark:after {
-    position: absolute;
-    content: '';
-    display: block;
-    left: 4px;
-    top: 1px;
-    width: 4px;
-    height: 8px;
-    border: solid #1890ff;
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-    opacity: 0;
-    transition: opacity 240ms;
-}
-
-.checkbox-wrap input:checked ~ .checkmark:after {
-    opacity: 1;
-}
-
-.checkbox-wrap input:checked ~ .checkmark {
-    border-color: #1890ff;
-}
-
-.checkbox-wrap:hover input ~ .checkmark {
-    border-color: #1890ff;
-}

package/src/components/checkbox/checkbox.stories.js

@@ -1,10 +1,76 @@
-import React from 'react'
-import { Checkbox } from '.'
+import React, { useState } from 'react'
+import { Checkbox, DirectionMode } from '.'
+import SvgCancel from './../icon/Cancel'
+import SvgDone from './../icon/Done'
 export default {
     component: Checkbox,
     title: 'Components/Checkbox',
+    argsType: {
+        direction: {
+            options: Object.values(DirectionMode),
+        },
+    },
 }
 
-const Template = (args) => <Checkbox {...args} />
+const checkBoxData = [
+    {
+        id: 1,
+        label: '1 checkbox',
+        checked: true,
+        disabled: true,
+        ignoreDisabledForChecked: true,
+    },
+    {
+        id: 2,
+        label: '2 checkbox',
+        checked: true,
+    },
+    {
+        id: 3,
+        label: '3 checkbox',
+        checked: true,
+    },
+    {
+        id: 4,
+        label: '4 checkbox',
+        checked: true,
+    },
+    {
+        id: 5,
+        label: '5 checkbox',
+        checked: true,
+    },
+    {
+        id: 6,
+        label: '6 checkbox',
+        checked: true,
+    },
+];
 
-export const CheckboxButton = Template.bind({})
+const Template = (args) => {
+    const [innerData, setInnerData] = useState(checkBoxData)
+
+    const handleGetData = (data) => {
+        console.log(data, 'data - - -')
+        setInnerData(data.checkboxArr)
+    }
+
+    return (
+        <Checkbox
+            {...args}
+            data={innerData}
+            getData={handleGetData}
+            checkedIcon={<SvgCancel />}
+            unCheckedIcon={<SvgDone />}
+            keyNames={{
+                id: 'id',
+                label: 'label',
+                checked: 'checked',
+                disabled: 'disabled',
+                ignoreDisabledForChecked: 'ignoreDisabledForChecked',
+            }}
+        />
+    )
+}
+
+export const Default = Template.bind({})

package/src/components/checkbox/index.js

@@ -1,87 +1,120 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import styles from './checkbox.module.css'
-import { useEffect } from 'react'
+import classnames from 'classnames'
+import { SingleCheckbox } from './../singleCheckbox'
+import { compereConfigs } from './../../utils'
 
-export const Checkbox = ({ disabled, required, className, jsonData, onChange, keyNames, onClick, ...props }) => {
-    const classProps = classNames(styles.checkbox, className, 'checkbox-input-rem')
-    const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : []
-    const [data, setData] = useState(parseData)
-
-    useEffect(() => {
-        const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : []
-        setData(parseData)
-    }, [jsonData])
-    useEffect(() => {
-        onChange ? onChange(data.filter((d) => d.checked)) : ''
-    }, [data])
+export const DirectionMode = {
+    VERTICAL: 'vertical',
+    HORINZONTAL: 'horizontal',
+}
 
-    const handleChange = (e) => {
-        let id
-        data.forEach((value, key) => {
-            if (value[keyNames.value] === e.target.value) {
-                id = key
-            }
-        })
+export const Checkbox = ({
+    data,
+    getData,
+    keyNames,
+    className,
+    direction,
+    checkedIcon,
+    unCheckedIcon,
+    labelMarginLeft,
+    checkBoxMarginBottom,
+}) => {
+    const configStyles = compereConfigs()
+    const [innerData, setInnerData] = useState([])
+    const classProps = classnames(className ? className : configStyles.CHECKBOX.className)
 
-        let items = [...data]
-        let item = { ...items[id] }
-        item.checked = !item.checked
-        items[id] = item
-        setData(items)
+    const handleSendData = (_, e, index) => {
+        const dataForSend = {}
+        setInnerData((prev) =>
+            prev.map((innerItem, innerIndex) => {
+                if (innerIndex === index) {
+                    innerItem[keyNames.checked] = !innerItem[keyNames.checked]
+                    dataForSend.item = innerItem
+                    dataForSend.itemIndex = innerIndex
+                    dataForSend.itemId = innerItem[keyNames.id]
+                }
+                return innerItem
+            })
+        )
+        dataForSend.checkboxArr = innerData
+        getData && getData(dataForSend)
     }
 
-    !keyNames ? (keyNames = { id: 'id', name: 'name', value: 'value', label: 'label' }) : ''
+    useEffect(() => {
+        if (Array.isArray(data)) {
+            setInnerData(data)
+        } else {
+            setInnerData([data])
+        }
+    }, [data])
 
     return (
-        <>
-            {data.map((element) => {
-                return (
-                    <label className={`${styles['checkbox-wrap']} checkbox-wrap-rem`} key={element.value}>
-                        <input
-                            type="checkbox"
-                            className={classProps}
-                            disabled={disabled}
-                            required={required}
-                            value={keyNames.value ? element[keyNames.value] : ''}
-                            name={keyNames.name ? element[keyNames.name] : ''}
-                            id={keyNames.id ? element[keyNames.id] : ''}
-                            onChange={handleChange}
-                            onClick={onClick ? onClick : () => {}}
-                            defaultChecked={element.checked}
-                            {...props}
-                        />
-                        <span className={`${styles['checkmark']} checkmark-rem`} />
-                        {element[keyNames.label] ? (
-                            <label className={styles.labelCheckbox} htmlFor={element[keyNames.id]}>
-                                {element[keyNames.label]}
-                            </label>
-                        ) : (
-                            ''
-                        )}
-                    </label>
-                )
-            })}
-        </>
+        <div
+            style={{
+                width: '100%',
+                display: 'flex',
+                flexDirection: direction === 'vertical' ? 'column' : 'row',
+            }}
+            className={classProps}
+        >
+            {innerData &&
+                innerData.length > 0 &&
+                innerData.map((item, index) => {
+                    return (
+                        <div
+                            key={`TUI_${index}_checkbox`}
+                            style={{
+                                width: 'fit-content',
+                                marginBottom:
+                                    direction === 'vertical'
+                                        ? checkBoxMarginBottom
+                                            ? checkBoxMarginBottom
+                                            : configStyles.CHECKBOX.checkBoxMarginBottom
+                                        : '0px',
+                            }}
+                        >
+                            <SingleCheckbox
+                                data={item}
+                                index={index}
+                                checkedColor="#00236A"
+                                unCheckedColor="#D1D1D1"
+                                checkedIcon={checkedIcon}
+                                label={item[keyNames.label]}
+                                unCheckedIcon={unCheckedIcon}
+                                handleChecked={handleSendData}
+                                checked={item[keyNames.checked]}
+                                disabled={item[keyNames.disabled]}
+                                ignoreDisabledForChecked={item[keyNames.ignoreDisabledForChecked]}
+                                labelMarginLeft={
+                                    labelMarginLeft ? labelMarginLeft : configStyles.CHECKBOX.labelMarginLeft
+                                }
+                            />
+                        </div>
+                    )
+                })}
+        </div>
     )
 }
 
 Checkbox.propTypes = {
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    onClick: PropTypes.func,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    name: PropTypes.string,
-    value: PropTypes.string,
-    jsonData: PropTypes.string,
-    label: PropTypes.string,
+    getData: PropTypes.func,
     keyNames: PropTypes.object,
+    checkedIcon: PropTypes.element,
+    unCheckedIcon: PropTypes.element,
+    labelMarginLeft: PropTypes.string,
+    checkBoxMarginBottom: PropTypes.string,
+    direction: PropTypes.oneOf(Object.values(DirectionMode)),
+    data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 }
 
 Checkbox.defaultProps = {
-    onChange: undefined,
-    jsonData:
-        '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]',
+    direction: 'vertical',
+    keyNames: {
+        id: 'id',
+        label: 'label',
+        checked: 'checked',
+        disabled: 'disabled',
+        ignoreDisabledForChecked: 'ignoreDisabledForChecked',
+    },
 }

package/src/components/input/index.js

@@ -64,6 +64,7 @@ export const Input = ({
     boxShadowHover,
     errorClassName,
     errorAnimation,
+    labelFontFamily,
     phoneAlignItems,
     errorLineHeight,
     labelLineHeight,
@@ -88,7 +89,8 @@ export const Input = ({
     const configStyles = compereConfigs()
     const classProps = classnames(
         className ? className : configStyles.INPUT.className,
-        type === 'number' ? styles['inp-num'] : ''
+        type === 'number' ? styles['inp-num'] : '',
+        styles['input-wrap']
     )
 
     const errorShow = keyframes`
@@ -420,10 +422,9 @@ export const Input = ({
     ])
 
     return (
-        <div className={`${styles['input-wrap']}`}>
+        <div className={classProps}>
             {label ? (
                 <label
-                    className={`${styles['input-title']}`}
                     style={{
                         color: labelColor ? labelColor : configStyles.INPUT.labelColor,
                         fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
@@ -431,6 +432,7 @@ export const Input = ({
                         fontWeight: labelWeight ? labelWeight : configStyles.INPUT.labelWeight,
                         lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
                         marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom,
+                        fontFamily: labelFontFamily ? labelFontFamily : configStyles.INPUT.labelFontFamily,
                     }}
                 >
                     {label}
@@ -533,7 +535,6 @@ export const Input = ({
                 <input
                     {...props}
                     value={innerValue}
-                    className={classProps}
                     onInput={handleChange}
                     disabled={disabled ? disabled : ''}
                     name={name ? name : `tui_${random}_tui`}
@@ -662,6 +663,7 @@ Input.propTypes = {
     errorPosition: PropTypes.string,
     boxShadowHover: PropTypes.string,
     errorClassName: PropTypes.string,
+    labelFontFamily: PropTypes.string,
     telErrorMessage: PropTypes.string,
     backgroundColor: PropTypes.string,
     phoneAlignItems: PropTypes.string,

package/src/components/modal/index.js

@@ -50,10 +50,11 @@ export const Modal = ({
     layerBackgroundColor,
 }) => {
     const [select, setSelect] = useState(0)
+    const [isHover, setIsHover] = useState(false)
     const [innerData, setInnerData] = useState([])
 
     const configStyles = compereConfigs()
-    const classProps = classnames(className)
+    const classProps = classnames(className ? className : configStyles.MODAL.className)
 
     const handleCloseModal = () => {
         setShow(false)
@@ -91,6 +92,14 @@ export const Modal = ({
         imageLink.click()
     }
 
+    const handleMouseEnter = () => {
+        setIsHover(true)
+    }
+
+    const handleMouseLeave = () => {
+        setIsHover(false)
+    }
+
     useEffect(() => {
         if (type === 'images') {
             if (data) {
@@ -128,6 +137,7 @@ export const Modal = ({
 
     return (
         <div
+            className={classProps}
             onClick={outsideClose || configStyles.MODAL.outsideClose ? handleCloseModal : (_) => _}
             style={{
                 top: '0px',
@@ -150,7 +160,7 @@ export const Modal = ({
                 }}
             >
                 <div
-                    className={`${classProps} ${styles['animation__modal']}`}
+                    className={`${styles['animation__modal']}`}
                     onClick={handleStopClosing}
                     style={{
                         position: 'relative',
@@ -225,6 +235,8 @@ export const Modal = ({
                             borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
                             borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor,
                         }}
+                        onMouseEnter={handleMouseEnter}
+                        onMouseLeave={handleMouseLeave}
                     >
                         {type === 'content' ? (
                             children ? (
@@ -303,7 +315,7 @@ export const Modal = ({
                                                                 }}
                                                                 src={item.url}
                                                             />
-                                                            {showZoomIcon ? (
+                                                            {isHover && showZoomIcon ? (
                                                                 <div
                                                                     style={{
                                                                         top: '0px',

package/src/components/newAutocomplete/index.js

@@ -35,6 +35,7 @@ export const NewAutocomplete = ({
     contentPosition,
     contentTopColor,
     labelLineHeight,
+    labelFontFamily,
     contentDirection,
     contentTopWeight,
     contentTopRadius,
@@ -166,7 +167,7 @@ export const NewAutocomplete = ({
     }
 
     const optionList = (
-        <>
+        <div>
             {show && innerOptions && !disabled ? (
                 innerOptions.length > 0 ? (
                     <div
@@ -340,7 +341,7 @@ export const NewAutocomplete = ({
             ) : (
                 ''
             )}
-        </>
+        </div>
     )
 
     useEffect(() => {
@@ -384,7 +385,7 @@ export const NewAutocomplete = ({
     }, [errorMessage])
 
     return (
-        <>
+        <div className={classProps}>
             {label ? (
                 <label
                     style={{
@@ -392,6 +393,7 @@ export const NewAutocomplete = ({
                         fontSize: labelSize ? labelSize : configStyles.NEWAUTOCOMPLETE.labelSize,
                         display: labelDisplay ? labelDisplay : configStyles.NEWAUTOCOMPLETE.labelDisplay,
                         fontWeight: labelWeight ? labelWeight : configStyles.NEWAUTOCOMPLETE.labelWeight,
+                        fontFamily: labelFontFamily ? labelFontFamily : configStyles.NEWAUTOCOMPLETE.labelFontFamily,
                         lineHeight: labelLineHeight ? labelLineHeight : configStyles.NEWAUTOCOMPLETE.labelLineHeight,
                         maxWidth: contentTopMaxWidth
                             ? contentTopMaxWidth
@@ -432,7 +434,6 @@ export const NewAutocomplete = ({
                     onInput={handleChange}
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
-                    className={classProps}
                     placeholder={placeHolder ? placeHolder : ''}
                     autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
                     style={{
@@ -503,7 +504,7 @@ export const NewAutocomplete = ({
 
                 {optionList}
             </div>
-        </>
+        </div>
     )
 }
 
@@ -531,6 +532,7 @@ NewAutocomplete.propTypes = {
     labelLineHeight: PropTypes.string,
     contentTopColor: PropTypes.string,
     change: PropTypes.func.isRequired,
+    labelFontFamily: PropTypes.string,
     contentDirection: PropTypes.string,
     contentTopWeight: PropTypes.number,
     contentTopRadius: PropTypes.string,