@xaypay/tui 0.0.117 → 0.0.119

package/package.json

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

package/src/components/captcha/index.js

@@ -42,8 +42,8 @@ export const Captcha = ({ size, color, range, label, className, getRange }) => {
             {label && (
                 <p
                     style={{
-                        fontSize: size ? size : configStyles.Captcha.size,
-                        color: color ? color : configStyles.Captcha.color,
+                        fontSize: size ? size : configStyles.CAPTCHA.size,
+                        color: color ? color : configStyles.CAPTCHA.color,
                     }}
                 >
                     {label}

package/src/components/newFile/index.js

@@ -6,6 +6,7 @@ import classnames from 'classnames'
 import FileItem from './fileItem'
 
 import { compereConfigs } from './../../utils'
+import { Button } from './../button'
 
 import SvgPdf from './../icon/PDF'
 import SvgHeic from './../icon/Heic'
@@ -26,6 +27,7 @@ export const NewFile = ({
     change,
     border,
     upload,
+    preview,
     maxSize,
     maxWidth,
     disabled,
@@ -49,6 +51,14 @@ export const NewFile = ({
     maxSizeError,
     progressColor,
     noChoosenFile,
+
+    uploadBtnFont,
+    uploadBtnSize,
+    uploadBtnLabel,
+    uploadBtnColor,
+    uploadBtnHeight,
+    uploadBtnBackgroundColor,
+
     fileExtensions,
     listItemHeight,
     backgroundColor,
@@ -99,6 +109,7 @@ export const NewFile = ({
 
     const handleRemoveFile = () => {
         setImage(null)
+        setSingleFile(null)
         removeFile && removeFile(singleFile)
     }
 
@@ -422,7 +433,7 @@ export const NewFile = ({
                         fontWeight: weight ? weight : configStyles.FILE.weight,
                     }}
                 >
-                    {!multiple && image ? (
+                    {!multiple && image && preview ? (
                         image === 'pdf' ? (
                             <SvgPdf />
                         ) : image === 'heif' || image === 'heic' ? (
@@ -445,7 +456,7 @@ export const NewFile = ({
                                 alt="file preview"
                             />
                         )
-                    ) : (
+                    ) : preview ? (
                         <>
                             <div>
                                 <SvgUpload />
@@ -482,11 +493,63 @@ export const NewFile = ({
                                         margin: '0px',
                                     }}
                                 >
-                                    {fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText} {maxSize}ՄԲ ({' '}
+                                    {fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText} {maxSize} ՄԲ ({' '}
                                     {fileExtensions.toString().split(',').join(', ')} )
                                 </p>
                             </div>
                         </>
+                    ) : (
+                        <>
+                            <div
+                                style={{
+                                    width: '100%',
+                                    padding: '5px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    boxSizing: 'border-box',
+                                    justifyContent: 'space-between',
+                                }}
+                            >
+                                <Button
+                                    contentWidth
+                                    onClick={(_) => _}
+                                    font={uploadBtnFont ? uploadBtnFont : configStyles.FILE.uploadBtnFont}
+                                    size={uploadBtnSize ? uploadBtnSize : configStyles.FILE.uploadBtnSize}
+                                    label={uploadBtnLabel ? uploadBtnLabel : configStyles.FILE.uploadBtnLabel}
+                                    color={uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor}
+                                    height={uploadBtnHeight ? uploadBtnHeight : configStyles.FILE.uploadBtnHeight}
+                                    hoverColor={uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor}
+                                    backgroundColor={
+                                        uploadBtnBackgroundColor
+                                            ? uploadBtnBackgroundColor
+                                            : configStyles.FILE.uploadBtnBackgroundColor
+                                    }
+                                    backgroundHoverColor={
+                                        uploadBtnBackgroundColor
+                                            ? uploadBtnBackgroundColor
+                                            : configStyles.FILE.uploadBtnBackgroundColor
+                                    }
+                                />
+                                <p
+                                    style={{
+                                        margin: '0px',
+                                        marginLeft: '5px',
+                                        overflow: 'hidden',
+                                        whiteSpace: 'nowrap',
+                                        textOverflow: 'ellipsis',
+                                    }}
+                                >
+                                    {singleFile ? (
+                                        singleFile[0].name
+                                    ) : (
+                                        <span>
+                                            {fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText} {maxSize} ՄԲ
+                                            ( {fileExtensions.toString().split(',').join(', ')} )
+                                        </span>
+                                    )}
+                                </p>
+                            </div>
+                        </>
                     )}
                 </div>
 
@@ -595,6 +658,7 @@ export const NewFile = ({
 NewFile.propTypes = {
     or: PropTypes.string,
     size: PropTypes.string,
+    preview: PropTypes.bool,
     label: PropTypes.string,
     color: PropTypes.string,
     height: PropTypes.string,
@@ -605,6 +669,7 @@ NewFile.propTypes = {
     upload: PropTypes.string,
     weight: PropTypes.number,
     maxSize: PropTypes.number,
+    maxWidth: PropTypes.string,
     removeFile: PropTypes.func,
     className: PropTypes.string,
     errorSize: PropTypes.string,
@@ -624,6 +689,14 @@ NewFile.propTypes = {
     progressColor: PropTypes.string,
     deleteComponent: PropTypes.bool,
     removeComponent: PropTypes.func,
+
+    uploadBtnFont: PropTypes.string,
+    uploadBtnSize: PropTypes.string,
+    uploadBtnLabel: PropTypes.string,
+    uploadBtnColor: PropTypes.string,
+    uploadBtnHeight: PropTypes.string,
+    uploadBtnBackgroundColor: PropTypes.string,
+
     listItemHeight: PropTypes.string,
     backgroundColor: PropTypes.string,
     change: PropTypes.func.isRequired,
@@ -652,6 +725,7 @@ NewFile.propTypes = {
 
 NewFile.defaultProps = {
     maxSize: 10,
+    preview: true,
     timeForRemoveError: 5000,
     fileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'heic'],
 }

package/src/components/newFile/newFile.stories.js

@@ -13,6 +13,7 @@ export default {
 
 const Template = (args) => {
     const [files, setFiles] = useState([])
+    const [secondFiles, setSecondFiles] = useState([])
 
     const handleChange = (file) => {
         setFiles((prev) => {
@@ -28,18 +29,53 @@ const Template = (args) => {
         alert(`You want to remove component with id, ${componentId}`)
     }
 
+    const secondHandleChange = (file) => {
+        setSecondFiles((prev) => {
+            return [...prev, file]
+        })
+    }
+
+    const secondHandleRemove = (id) => {
+        setSecondFiles((prevItems) => prevItems.filter((item) => item.uuid !== id))
+    }
+
+    const secondHandleRemoveComponent = (componentId) => {
+        alert(`You want to remove component with id, ${componentId}`)
+    }
+
     return (
-        <NewFile
-            {...args}
-            removeFromDOM
-            componentId={2}
-            filesArray={files}
-            change={handleChange}
-            removeFile={handleRemove}
-            removeComponent={handleRemoveComponent}
-            formatError="Փաստաթղթի ֆորմատը չի համապատասխանում"
-            maxSizeError="Փաստաթուղթը գերազանցում է առավելագույն չափը"
-        />
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+            }}
+        >
+            <NewFile
+                {...args}
+                removeFromDOM
+                componentId={2}
+                filesArray={files}
+                change={handleChange}
+                removeFile={handleRemove}
+                removeComponent={handleRemoveComponent}
+                formatError="Փաստաթղթի ֆորմատը չի համապատասխանում"
+                maxSizeError="Փաստաթուղթը գերազանցում է առավելագույն չափը"
+            />
+
+            <NewFile
+                {...args}
+                removeFromDOM
+                height="50px"
+                preview={false}
+                componentId={2}
+                filesArray={secondFiles}
+                change={secondHandleChange}
+                removeFile={secondHandleRemove}
+                removeComponent={secondHandleRemoveComponent}
+                formatError="Փաստաթղթի ֆորմատը չի համապատասխանում"
+                maxSizeError="Փաստաթուղթը գերազանցում է առավելագույն չափը"
+            />
+        </div>
     )
 }
 

package/src/components/radio/index.js

@@ -1,55 +1,236 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import styles from './radio.module.css'
+import { v4 as uuidv4 } from 'uuid'
 
-export const Radio = ({ disabled, defaultChecked, required, className, name, value, jsonData, label, ...props }) => {
-    const classProps = classNames(styles.checkbox, className)
-    const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : []
+import { compereConfigs } from './../../utils'
+
+export const RadioDirectionMode = {
+    VERTICAL: 'vertical',
+    HORINZONTAL: 'horizontal',
+}
+
+export const Radio = ({
+    data,
+    size,
+    getData,
+    selected,
+    keyNames,
+    diraction,
+    className,
+    borderSize,
+    labelColor,
+    borderColor,
+    borderStyle,
+    labelFontSize,
+    labelFontFamily,
+    labelFontWeight,
+    labelLineHeight,
+    radioMarginRight,
+    borderActiveColor,
+    radioItemMarginRight,
+    radioItemMarginBottom,
+}) => {
+    const configStyles = compereConfigs()
+    const classProps = classNames(className ? className : configStyles.RADIO.className)
+    const [innerData, setInnerData] = useState([])
+    const [radioInnerSize, setRadioInnerSize] = useState('')
+    const [radioInnerFormat, setRadioInnerFormat] = useState('')
+    const [innerSelectedData, setInnerSelectedData] = useState({})
+
+    const handleMouseEnter = (id, elemID) => {
+        const elem = document.querySelector(`#${elemID}`)
+        elem.style.backgroundColor =
+            id === innerSelectedData?.id
+                ? borderActiveColor
+                    ? borderActiveColor
+                    : configStyles.RADIO.borderActiveColor
+                : borderColor
+                ? borderColor
+                : configStyles.RADIO.borderColor
+    }
+
+    const handleMouseLeave = (id, elemID) => {
+        const elem = document.querySelector(`#${elemID}`)
+        elem.style.backgroundColor =
+            id === innerSelectedData?.id
+                ? borderActiveColor
+                    ? borderActiveColor
+                    : configStyles.RADIO.borderActiveColor
+                : 'transparent'
+    }
+
+    const handleChecked = (selItem) => {
+        setInnerSelectedData(selItem)
+        getData && getData(selItem)
+    }
+
+    useEffect(() => {
+        if (Array.isArray(data)) {
+            setInnerData(data)
+        } else {
+            setInnerData([data])
+        }
+    }, [data])
+
+    useEffect(() => {
+        let radioSize = ''
+        let radioSizeFormat = ''
+        const checkSize = size || configStyles.RADIO.size
+        if (checkSize && typeof checkSize === 'string') {
+            if (checkSize.length > 0) {
+                checkSize.split('').map((item) => {
+                    if (!isNaN(parseInt(item))) {
+                        radioSize += item
+                    } else {
+                        radioSizeFormat += item
+                    }
+                })
+            }
+        }
+
+        if (radioSize < '10') {
+            radioSize = '10'
+        }
+        setRadioInnerFormat(radioSizeFormat)
+        setRadioInnerSize(`${parseInt(radioSize) / 2}`)
+    }, [size, configStyles.RADIO.size])
+
+    useEffect(() => {
+        setInnerSelectedData(selected)
+    }, [selected])
 
     return (
-        <>
-            {parseData.map((element, id) => {
-                return (
-                    <label className={`${styles['radio-wrap']} radio-wrap-rem`} key={element.value}>
-                        <input
-                            type="radio"
-                            className={classProps}
-                            disabled={disabled}
-                            required={required}
-                            defaultChecked={id === 0 ? defaultChecked : ''}
-                            value={value ? value : element.value}
-                            name={name ? name : element.name}
-                            {...props}
-                        />
-                        <span className={`${styles['radio-checkmark']} radio-checkmark-rem`} />
-                        {element.label ? (
-                            <span className={styles.labelRadio}>{label ? label : element.label}</span>
-                        ) : (
-                            ''
-                        )}
-                    </label>
-                )
-            })}
-        </>
+        <div
+            className={classProps}
+            style={{
+                display: 'flex',
+                flexDirection: diraction === 'horizontal' ? 'row' : 'column',
+            }}
+        >
+            {innerData &&
+                innerData.length > 0 &&
+                innerData.map((item, index) => {
+                    const elemId = `TUI_${index}_radio_inner` + uuidv4()
+                    return (
+                        <div
+                            key={`TUI_${index}_radio`}
+                            style={{
+                                display: 'flex',
+                                cursor: item.disabled ? 'not-allowed' : 'pointer',
+                                width: 'fit-content',
+                                alignItems: 'center',
+                                marginRight:
+                                    diraction === 'horizontal'
+                                        ? radioItemMarginRight
+                                            ? radioItemMarginRight
+                                            : configStyles.RADIO.radioItemMarginRight
+                                        : '0px',
+                                marginBottom:
+                                    diraction === 'vertical'
+                                        ? radioItemMarginBottom
+                                            ? radioItemMarginBottom
+                                            : configStyles.RADIO.radioItemMarginBottom
+                                        : '0px',
+                            }}
+                            onClick={item.disabled ? (_) => _ : () => handleChecked(item)}
+                            onMouseEnter={() => handleMouseEnter(item[keyNames.id], elemId)}
+                            onMouseLeave={() => handleMouseLeave(item[keyNames.id], elemId)}
+                        >
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    borderRadius: '100%',
+                                    justifyContent: 'center',
+                                    width: size ? size : configStyles.RADIO.size,
+                                    height: size ? size : configStyles.RADIO.size,
+                                    marginRight: item.label
+                                        ? radioMarginRight
+                                            ? radioMarginRight
+                                            : configStyles.RADIO.radioMarginRight
+                                        : '0px',
+                                    border: `${borderSize ? borderSize : configStyles.RADIO.borderSize} ${
+                                        borderStyle ? borderStyle : configStyles.RADIO.borderStyle
+                                    }`,
+                                    borderColor:
+                                        item[keyNames.id] === innerSelectedData?.id
+                                            ? borderActiveColor
+                                                ? borderActiveColor
+                                                : configStyles.RADIO.borderActiveColor
+                                            : borderColor
+                                            ? borderColor
+                                            : configStyles.RADIO.borderColor,
+                                }}
+                            >
+                                <div
+                                    id={elemId}
+                                    style={{
+                                        borderRadius: '100%',
+                                        width: radioInnerSize + radioInnerFormat,
+                                        height: radioInnerSize + radioInnerFormat,
+                                        backgroundColor:
+                                            item[keyNames.id] === innerSelectedData?.id
+                                                ? borderActiveColor
+                                                    ? borderActiveColor
+                                                    : configStyles.RADIO.borderActiveColor
+                                                : 'transparent',
+                                    }}
+                                ></div>
+                            </div>
+
+                            {item[keyNames.label] ? (
+                                <span
+                                    style={{
+                                        color: labelColor ? labelColor : configStyles.RADIO.labelColor,
+                                        fontSize: labelFontSize ? labelFontSize : configStyles.RADIO.labelFontSize,
+                                        fontFamily: labelFontFamily
+                                            ? labelFontFamily
+                                            : configStyles.RADIO.labelFontFamily,
+                                        fontWeight: labelFontWeight
+                                            ? labelFontWeight
+                                            : configStyles.RADIO.labelFontWeight,
+                                        lineHeight: labelLineHeight
+                                            ? labelLineHeight
+                                            : configStyles.RADIO.labelLineHeight,
+                                    }}
+                                    onMouseEnter={() => handleMouseEnter(item[keyNames.id], elemId)}
+                                    onMouseLeave={() => handleMouseLeave(item[keyNames.id], elemId)}
+                                >
+                                    {item[keyNames.label]}
+                                </span>
+                            ) : (
+                                ''
+                            )}
+                        </div>
+                    )
+                })}
+        </div>
     )
 }
 
 Radio.propTypes = {
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    required: PropTypes.bool,
-    defaultChecked: PropTypes.bool,
-    disabled: PropTypes.bool,
-    name: PropTypes.string,
-    value: PropTypes.string,
-    jsonData: PropTypes.string,
-    label: PropTypes.string,
+    size: PropTypes.string,
+    selected: PropTypes.object,
     keyNames: PropTypes.object,
+    className: PropTypes.string,
+    borderSize: PropTypes.string,
+    labelColor: PropTypes.string,
+    borderColor: PropTypes.string,
+    borderStyle: PropTypes.string,
+    labelFontSize: PropTypes.string,
+    labelFontFamily: PropTypes.string,
+    labelFontWeight: PropTypes.string,
+    labelLineHeight: PropTypes.string,
+    radioMarginRight: PropTypes.string,
+    getData: PropTypes.func.isRequired,
+    borderActiveColor: PropTypes.string,
+    radioItemMarginRight: PropTypes.string,
+    radioItemMarginBottom: PropTypes.string,
+    diraction: PropTypes.oneOf(Object.values(RadioDirectionMode)),
+    data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 }
 
 Radio.defaultProps = {
-    onChange: undefined,
-    jsonData:
-        '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]',
+    diraction: 'vertical',
 }

package/src/components/radio/radio.stories.js

@@ -1,10 +1,59 @@
-import React from 'react'
-import { Radio } from '.'
+import React, { useState } from 'react'
+import { Radio, RadioDirectionMode } from '.'
 export default {
     component: Radio,
     title: 'Components/Radio',
+    argsType: {
+        direction: {
+            options: Object.values(RadioDirectionMode),
+        },
+    },
 }
 
-const Template = (args) => <Radio {...args} />
+const radioData = [
+    {
+        id: 1,
+        disabled: false,
+        label: 'radio label 1',
+    },
+    {
+        id: 2,
+        disabled: false,
+        label: 'radio label 2',
+    },
+    {
+        id: 3,
+        disabled: true,
+        label: 'radio label 3',
+    },
+]
+
+const selectedRadio = {
+    id: 3,
+}
+
+const Template = (args) => {
+    const [innerData] = useState(radioData)
+    const [innerSelectedData, setInnerSelectedData] = useState(selectedRadio)
+
+    const handleGetData = (selected) => {
+        console.log(selected, 'selected - - -')
+        setInnerSelectedData(selected)
+    }
+
+    return (
+        <Radio
+            {...args}
+            data={innerData}
+            getData={handleGetData}
+            selected={innerSelectedData}
+            keyNames={{
+                id: 'id',
+                label: 'label',
+                disabled: 'disabled',
+            }}
+        />
+    )
+}
 
 export const RadioButton = Template.bind({})

package/src/components/table/index.js

@@ -19,6 +19,8 @@ export const Table = ({
     tableRowRadius,
     tableRowBGColor,
     tableRowBoxShadow,
+    tableColumnMaxWidth,
+    tableColumnMinWidth,
 
     tHeadColor,
     tHeadFamily,
@@ -41,6 +43,8 @@ export const Table = ({
 
     className,
     openListColor,
+    openListFontSize,
+    openListFontFamily,
     hideBorder,
 }) => {
     const [body, setBody] = useState([])
@@ -618,6 +622,16 @@ export const Table = ({
                                                     : configStyles.TABLE.tHeadBorderRadius
                                                 : '0px'
                                         }
+                                        tableColumnMinWidth={
+                                            tableColumnMinWidth
+                                                ? tableColumnMinWidth
+                                                : configStyles.TABLE.tableColumnMinWidth
+                                        }
+                                        tableColumnMaxWidth={
+                                            tableColumnMaxWidth
+                                                ? tableColumnMaxWidth
+                                                : configStyles.TABLE.tableColumnMaxWidth
+                                        }
                                     />
                                 )
                             })}
@@ -667,6 +681,26 @@ export const Table = ({
                                                 openListColor={
                                                     openListColor ? openListColor : configStyles.TABLE.openListColor
                                                 }
+                                                tableColumnMinWidth={
+                                                    tableColumnMinWidth
+                                                        ? tableColumnMinWidth
+                                                        : configStyles.TABLE.tableColumnMinWidth
+                                                }
+                                                tableColumnMaxWidth={
+                                                    tableColumnMaxWidth
+                                                        ? tableColumnMaxWidth
+                                                        : configStyles.TABLE.tableColumnMaxWidth
+                                                }
+                                                openListFontSize={
+                                                    openListFontSize
+                                                        ? openListFontSize
+                                                        : configStyles.TABLE.openListFontSize
+                                                }
+                                                openListFontFamily={
+                                                    openListFontFamily
+                                                        ? openListFontFamily
+                                                        : configStyles.TABLE.openListFontFamily
+                                                }
                                                 handleCheckedBody={handleCheckedBody}
                                                 handleBodyActionClick={handleBodyActionClick}
                                                 handleMoreOptionsClick={handleMoreOptionsClick}
@@ -725,6 +759,8 @@ Table.propTypes = {
     tableRowRadius: PropTypes.string,
     tableRowBGColor: PropTypes.string,
     tableRowBoxShadow: PropTypes.string,
+    tableColumnMaxWidth: PropTypes.string,
+    tableColumnMinWidth: PropTypes.string,
 
     tHeadColor: PropTypes.string,
     tHeadFamily: PropTypes.string,
@@ -747,5 +783,7 @@ Table.propTypes = {
     className: PropTypes.string,
     tBodyRowBorder: PropTypes.string,
     openListColor: PropTypes.string,
+    openListFontSize: PropTypes.string,
+    openListFontFamily: PropTypes.string,
     hideBorder: PropTypes.bool,
 }