@xaypay/tui 0.0.119 → 0.0.121

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

@@ -1,59 +0,0 @@
-import React, { useState } from 'react'
-import { Radio, RadioDirectionMode } from '.'
-export default {
-    component: Radio,
-    title: 'Components/Radio',
-    argsType: {
-        direction: {
-            options: Object.values(RadioDirectionMode),
-        },
-    },
-}
-
-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/select/index.js

@@ -1,534 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { compereConfigs, hasOwnerProperty } from './../../utils'
-import { SingleCheckbox } from '../singleCheckbox'
-
-import ReactArrowIcon from '../icon/Arrow'
-import SvgRequired from './../icon/Required'
-import ReactCloseIcon from '../icon/CloseIcon'
-
-import styles from './select.module.css'
-
-export const Select = ({
-    dots,
-    options,
-    multiple,
-    disabled,
-    required,
-    onChange,
-    keyNames,
-    selected,
-    className,
-    marginTop,
-    arrowIcon,
-    closeIcon,
-    errorZindex,
-    errorMessage,
-    showCloseIcon,
-    defaultOption,
-    multipleCheckbox,
-
-    label,
-    labelColor,
-    labelWeight,
-    labelDisplay,
-    labelFontSize,
-    labelLineHeight,
-    labelFontFamily,
-    labelMarginBottom,
-    labelTextTransform,
-
-    cursor,
-    errorSize,
-    errorColor,
-    selectedColor,
-    selectedRadius,
-    selectedMinHeight,
-    selectedPadding,
-    selectedFontSize,
-    selectedBoxSizing,
-    selectedFontWeight,
-    selectedLineHeight,
-    selectedHoverColor,
-    selectedTransition,
-    selectedBackgroundColor,
-    selectedDisableBackgroundColor,
-
-    optionsBoxShadow,
-    optionsBorderRadius,
-    optionsBackgroundColor,
-
-    optionItemColor,
-    optionItemCursor,
-    optionItemPadding,
-    optionItemFontSize,
-    optionItemMinHeight,
-    optionItemBoxSizing,
-    optionItemFontWeight,
-    optionItemLineHeight,
-    optionItemColorHover,
-    optionItemMarginBottom,
-    optionItemBackgroudColor,
-    optionItemBackgroudColorHover,
-
-    boxShadow,
-    boxShadowHover,
-}) => {
-    const ref = useRef()
-
-    const [opened, setOpened] = useState(false)
-    const [isHover, setIsHover] = useState(false)
-    const [newSelected, setNewSelected] = useState([])
-    const [existOptions, setExistOptions] = useState([])
-
-    const configStyles = compereConfigs()
-    const classProps = classnames(className ? className : configStyles.SELECT.className)
-
-    const handleOpenClose = () => {
-        setOpened(!opened)
-    }
-
-    const handleClearSelect = (e) => {
-        onChange({})
-        setNewSelected([])
-        const clearedOptions =
-            existOptions &&
-            existOptions.length > 0 &&
-            existOptions.map((item) => {
-                if (hasOwnerProperty(item, 'checked')) {
-                    item.checked = false
-                }
-                return item
-            })
-        setExistOptions(clearedOptions)
-        e.stopPropagation()
-    }
-
-    const handleSelectItem = (option) => {
-        const checkedOption = { ...option }
-        delete checkedOption.checked
-
-        if (!multiple) {
-            setOpened(!opened)
-            setNewSelected([option])
-            onChange(checkedOption)
-        } else {
-            const indexOfObject = newSelected.findIndex((obj) => {
-                return obj[keyNames.name] === option[keyNames.name]
-            })
-            if (indexOfObject === -1) {
-                option.checked = true
-                setNewSelected((prev) => {
-                    return [...prev, option]
-                })
-                onChange([...newSelected, option])
-            } else {
-                option.checked = false
-                setNewSelected([...newSelected.slice(0, indexOfObject), ...newSelected.slice(indexOfObject + 1)])
-                onChange([...newSelected.slice(0, indexOfObject), ...newSelected.slice(indexOfObject + 1)])
-            }
-        }
-    }
-
-    const handleMouseEnter = () => {
-        setIsHover(true)
-    }
-
-    const handleMouseLeave = () => {
-        setIsHover(false)
-    }
-
-    const handleMouseEnterOption = (e) => {
-        e.target.style.color = optionItemColorHover ? optionItemColorHover : configStyles.SELECT.optionItemColorHover
-        e.target.style.backgroundColor = optionItemBackgroudColorHover
-            ? optionItemBackgroudColorHover
-            : configStyles.SELECT.optionItemBackgroudColorHover
-    }
-
-    const handleMouseLeaveOption = (e) => {
-        e.target.style.color = optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor
-        e.target.style.backgroundColor = optionItemBackgroudColor
-            ? optionItemBackgroudColor
-            : configStyles.SELECT.optionItemBackgroudColor
-    }
-
-    const isObjectEmpty = (obj) => {
-        for (var key in obj) {
-            if (hasOwnerProperty(obj, key)) {
-                return false
-            }
-        }
-        return true
-    }
-
-    useEffect(() => {
-        if (opened) {
-            const checkIfClickedOutside = (e) => {
-                if (opened && ref.current && !ref.current.contains(e.target)) {
-                    setOpened(false)
-                }
-            }
-            document.addEventListener('mousedown', checkIfClickedOutside)
-            return () => {
-                document.removeEventListener('mousedown', checkIfClickedOutside)
-            }
-        }
-    }, [opened])
-
-    useEffect(() => {
-        if (selected) {
-            if (selected.length > 0) {
-                setNewSelected(isObjectEmpty(selected[0]) ? [] : selected)
-            } else {
-                setNewSelected([])
-            }
-        }
-
-        if (!multiple) {
-            options && options.length > 0 && setExistOptions(options)
-        } else {
-            const modifiedOptions =
-                options &&
-                options.length > 0 &&
-                options.map((item) => {
-                    item.checked = false
-                    if (selected && selected.length > 0) {
-                        selected.map((innerItem) => {
-                            if (innerItem[keyNames.name] === item[keyNames.name]) {
-                                item.checked = true
-                            }
-                        })
-                    }
-                    return item
-                })
-            setExistOptions(modifiedOptions)
-        }
-    }, [options, multiple, selected, selected?.length])
-
-    return (
-        <div className={classProps} style={{ position: 'relative', width: '100%' }}>
-            {label ? (
-                <label
-                    style={{
-                        color: labelColor ? labelColor : configStyles.SELECT.labelColor,
-                        fontWeight: labelWeight ? labelWeight : configStyles.SELECT.labelWeight,
-                        display: labelDisplay ? labelDisplay : configStyles.SELECT.labelDisplay,
-                        fontSize: labelFontSize ? labelFontSize : configStyles.SELECT.labelFontSize,
-                        lineHeight: labelLineHeight ? labelLineHeight : configStyles.SELECT.labelLineHeight,
-                        fontFamily: labelFontFamily ? labelFontFamily : configStyles.SELECT.labelFontFamily,
-                        marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.SELECT.labelMarginBottom,
-                        textTransform: labelTextTransform ? labelTextTransform : configStyles.SELECT.labelTextTransform,
-                    }}
-                >
-                    {label}
-                    {required && (
-                        <sup>
-                            <SvgRequired />
-                        </sup>
-                    )}
-                </label>
-            ) : (
-                ''
-            )}
-
-            <div ref={ref}>
-                <div className={styles['select-content']}>
-                    <div
-                        style={{
-                            cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
-                            minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
-                            padding: selectedPadding ? selectedPadding : configStyles.SELECT.selectedPadding,
-                            borderRadius: selectedRadius ? selectedRadius : configStyles.SELECT.selectedRadius,
-                            fontSize: selectedFontSize ? selectedFontSize : configStyles.SELECT.selectedFontSize,
-                            boxSizing: selectedBoxSizing ? selectedBoxSizing : configStyles.SELECT.selectedBoxSizing,
-                            fontWeight: selectedFontWeight
-                                ? selectedFontWeight
-                                : configStyles.SELECT.selectedFontWeight,
-                            lineHeight: selectedLineHeight
-                                ? selectedLineHeight
-                                : configStyles.SELECT.selectedLineHeight,
-                            transition: selectedTransition
-                                ? selectedTransition
-                                : configStyles.SELECT.selectedTransition,
-                            backgroundColor: disabled
-                                ? selectedDisableBackgroundColor
-                                    ? selectedDisableBackgroundColor
-                                    : configStyles.SELECT.selectedDisableBackgroundColor
-                                : selectedBackgroundColor
-                                ? selectedBackgroundColor
-                                : configStyles.SELECT.selectedBackgroundColor,
-                            boxShadow: errorMessage
-                                ? errorColor
-                                    ? `0 0 0 2px ${errorColor}`
-                                    : `0 0 0 2px ${configStyles.SELECT.errorColor}`
-                                : isHover
-                                ? boxShadowHover
-                                    ? boxShadowHover
-                                    : configStyles.SELECT.boxShadowHover
-                                : boxShadow
-                                ? boxShadow
-                                : configStyles.SELECT.boxShadow,
-                        }}
-                        onClick={disabled ? (_) => _ : () => handleOpenClose()}
-                        onMouseEnter={disabled ? (_) => _ : () => handleMouseEnter()}
-                        onMouseLeave={disabled ? (_) => _ : () => handleMouseLeave()}
-                        className={`${styles['select-content-top']}`}
-                    >
-                        <div
-                            className={`${styles['select-content-top-text']}`}
-                            style={{
-                                whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                color: errorMessage
-                                    ? errorColor
-                                        ? errorColor
-                                        : configStyles.SELECT.errorColor
-                                    : isHover
-                                    ? selectedHoverColor
-                                        ? selectedHoverColor
-                                        : configStyles.SELECT.selectedHoverColor
-                                    : selectedColor
-                                    ? selectedColor
-                                    : configStyles.SELECT.selectedColor,
-                            }}
-                        >
-                            {!multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name]
-                                ? newSelected[0][keyNames.name]
-                                : newSelected && newSelected.length > 0
-                                ? newSelected.map((_, index) => {
-                                      if (newSelected[index][keyNames.name]) {
-                                          if (index > 0) {
-                                              return ', ' + newSelected[index][keyNames.name]
-                                          } else {
-                                              return newSelected[index][keyNames.name]
-                                          }
-                                      }
-                                  })
-                                : defaultOption
-                                ? defaultOption
-                                : ''}
-                        </div>
-                        <div className={`${styles['select-content-top-icon']}`}>
-                            {!disabled && multiple && newSelected.length > 1 && <span>{newSelected.length}</span>}
-
-                            {(showCloseIcon === true || showCloseIcon === false
-                                ? showCloseIcon
-                                : configStyles.SELECT.showCloseIcon) &&
-                                !disabled &&
-                                newSelected &&
-                                newSelected.length > 0 && (
-                                    <div
-                                        className={`${styles['close-icon']}`}
-                                        onClick={disabled ? (_) => _ : handleClearSelect}
-                                        style={{ marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px' }}
-                                    >
-                                        {closeIcon ? closeIcon : <ReactCloseIcon />}
-                                    </div>
-                                )}
-
-                            {!disabled ? (
-                                <div
-                                    style={{
-                                        transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
-                                    }}
-                                    className={`${styles['arrow-icon']}`}
-                                >
-                                    {arrowIcon ? arrowIcon : <ReactArrowIcon />}
-                                </div>
-                            ) : (
-                                ''
-                            )}
-                        </div>
-                    </div>
-                    {opened && !disabled ? (
-                        <div
-                            style={{
-                                boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
-                                borderRadius: optionsBorderRadius
-                                    ? optionsBorderRadius
-                                    : configStyles.SELECT.optionsBorderRadius,
-                                backgroundColor: optionsBackgroundColor
-                                    ? optionsBackgroundColor
-                                    : configStyles.SELECT.optionsBackgroundColor,
-                                top: selectedMinHeight
-                                    ? selectedMinHeight.includes('rem')
-                                        ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) +
-                                          0.6 +
-                                          'rem'
-                                        : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) +
-                                          6 +
-                                          'px'
-                                    : configStyles.SELECT.selectedMinHeight.includes('rem')
-                                    ? parseFloat(
-                                          configStyles.SELECT.selectedMinHeight.substr(
-                                              0,
-                                              configStyles.SELECT.selectedMinHeight.length - 3
-                                          )
-                                      ) +
-                                      0.6 +
-                                      'rem'
-                                    : parseFloat(
-                                          configStyles.SELECT.selectedMinHeight.substr(
-                                              0,
-                                              configStyles.SELECT.selectedMinHeight.length - 2
-                                          )
-                                      ) +
-                                      6 +
-                                      'px',
-                            }}
-                            className={`${styles['select-content-bottom']}`}
-                        >
-                            <div className={`${styles['select-content-bottom-inner']}`}>
-                                {existOptions &&
-                                    existOptions.length > 0 &&
-                                    existOptions.map((option, i) => {
-                                        return (
-                                            <div
-                                                key={i}
-                                                disabled={true}
-                                                defaultValue={option[keyNames.id]}
-                                                onClick={disabled ? (_) => _ : () => handleSelectItem(option)}
-                                                onMouseEnter={disabled ? (_) => _ : (e) => handleMouseEnterOption(e)}
-                                                onMouseLeave={disabled ? (_) => _ : (e) => handleMouseLeaveOption(e)}
-                                                className={`${styles['select-content-bottom-row']} ${
-                                                    dots || configStyles.SELECT.dots ? styles['ellipsis'] : ''
-                                                }`}
-                                                style={{
-                                                    overflowWrap:
-                                                        !dots && !configStyles.SELECT.dots ? 'anywhere' : 'break-word',
-                                                    color: optionItemColor
-                                                        ? optionItemColor
-                                                        : configStyles.SELECT.optionItemColor,
-                                                    cursor: optionItemCursor
-                                                        ? optionItemCursor
-                                                        : configStyles.SELECT.optionItemCursor,
-                                                    padding: optionItemPadding
-                                                        ? optionItemPadding
-                                                        : configStyles.SELECT.optionItemPadding,
-                                                    fontSize: optionItemFontSize
-                                                        ? optionItemFontSize
-                                                        : configStyles.SELECT.optionItemFontSize,
-                                                    boxSizing: optionItemBoxSizing
-                                                        ? optionItemBoxSizing
-                                                        : configStyles.SELECT.optionItemBoxSizing,
-                                                    minHeight: optionItemMinHeight
-                                                        ? optionItemMinHeight
-                                                        : configStyles.SELECT.optionItemMinHeight,
-                                                    fontWeight: optionItemFontWeight
-                                                        ? optionItemFontWeight
-                                                        : configStyles.SELECT.optionItemFontWeight,
-                                                    lineHeight:
-                                                        dots || configStyles.SELECT.dots
-                                                            ? '46px'
-                                                            : optionItemLineHeight
-                                                            ? optionItemLineHeight
-                                                            : configStyles.SELECT.optionItemLineHeight,
-                                                    marginBottom: optionItemMarginBottom
-                                                        ? optionItemMarginBottom
-                                                        : configStyles.SELECT.optionItemMarginBottom,
-                                                    backgroundColor: optionItemBackgroudColor
-                                                        ? optionItemBackgroudColor
-                                                        : configStyles.SELECT.optionItemBackgroudColor,
-                                                }}
-                                            >
-                                                {multiple && multipleCheckbox ? (
-                                                    <SingleCheckbox checked={option.checked} />
-                                                ) : (
-                                                    ''
-                                                )}
-                                                {option[keyNames.name]}
-                                            </div>
-                                        )
-                                    })}
-                            </div>
-                        </div>
-                    ) : null}
-                </div>
-            </div>
-
-            {errorMessage ? (
-                <span
-                    style={{
-                        position: 'absolute',
-                        color: errorColor ? errorColor : configStyles.SELECT.errorColor,
-                        fontSize: errorSize ? errorSize : configStyles.SELECT.errorSize,
-                        zIndex: errorZindex ? errorZindex : configStyles.SELECT.errorZindex,
-                        top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
-                    }}
-                >
-                    {errorMessage}
-                </span>
-            ) : (
-                ''
-            )}
-        </div>
-    )
-}
-
-Select.propTypes = {
-    dots: PropTypes.bool,
-    options: PropTypes.array,
-    multiple: PropTypes.bool,
-    onChange: PropTypes.func,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    selected: PropTypes.array,
-    keyNames: PropTypes.object,
-    marginTop: PropTypes.string,
-    className: PropTypes.string,
-    arrowIcon: PropTypes.element,
-    closeIcon: PropTypes.element,
-    showCloseIcon: PropTypes.bool,
-    errorZindex: PropTypes.number,
-    errorMessage: PropTypes.string,
-    defaultOption: PropTypes.string,
-    multipleCheckbox: PropTypes.bool,
-
-    label: PropTypes.string,
-    labelColor: PropTypes.string,
-    labelWeight: PropTypes.string,
-    labelDisplay: PropTypes.string,
-    labelFontSize: PropTypes.string,
-    labelLineHeight: PropTypes.string,
-    labelFontFamily: PropTypes.string,
-    labelMarginBottom: PropTypes.string,
-    labelTextTransform: PropTypes.string,
-
-    cursor: PropTypes.string,
-    errorSize: PropTypes.string,
-    errorColor: PropTypes.string,
-    selectedColor: PropTypes.string,
-    selectedRadius: PropTypes.string,
-    selectedMinHeight: PropTypes.string,
-    selectedPadding: PropTypes.string,
-    selectedFontSize: PropTypes.string,
-    selectedBoxSizing: PropTypes.string,
-    selectedHoverColor: PropTypes.string,
-    selectedFontWeight: PropTypes.string,
-    selectedLineHeight: PropTypes.string,
-    selectedTransition: PropTypes.string,
-    selectedBackgroundColor: PropTypes.string,
-    selectedDisableBackgroundColor: PropTypes.string,
-
-    optionsBoxShadow: PropTypes.string,
-    optionsBorderRadius: PropTypes.string,
-    optionsBackgroundColor: PropTypes.string,
-
-    optionItemColor: PropTypes.string,
-    optionItemCursor: PropTypes.string,
-    optionItemPadding: PropTypes.string,
-    optionItemFontSize: PropTypes.string,
-    optionItemMinHeight: PropTypes.string,
-    optionItemBoxSizing: PropTypes.string,
-    optionItemFontWeight: PropTypes.string,
-    optionItemColorHover: PropTypes.string,
-    optionItemLineHeight: PropTypes.string,
-    optionItemMarginBottom: PropTypes.string,
-    optionItemBackgroudColor: PropTypes.string,
-    optionItemBackgroudColorHover: PropTypes.string,
-
-    boxShadow: PropTypes.string,
-    boxShadowHover: PropTypes.string,
-}

package/src/components/select/select.module.css

@@ -1,93 +0,0 @@
-.select-content {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    -webkit-appearance: none;
-}
-
-.select-content-top {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: space-between;
-    -webkit-appearance: none;
-}
-
-.select-content-bottom {
-    position: absolute;
-    width: 100%;
-    left: 0px;
-    z-index: 99999999999;
-    max-height: 0;
-    overflow: hidden;
-    animation: select-show 640ms linear forwards;
-    -webkit-animation: select-show 640ms linear forwards;
-}
-
-.select-content-bottom-inner {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-    max-height: 234px;
-}
-
-.select-content-top-icon {
-    display: flex;
-    flex: 0 0 auto;
-    align-items: center;
-    padding: 0 5px 0 20px;
-    box-sizing: border-box;
-}
-
-.select-content-top-icon>div {
-    display: flex;
-    width: 14px;
-    height: 14px;
-    align-items: center;
-    justify-content: center;
-}
-
-.close-icon {
-    padding-right: 9px;
-    border-right: 1px solid #EEEEEE;
-    box-sizing: content-box;
-}
-
-.arrow-icon {
-    margin-left: 9px;
-    transform-origin: center;
-    transition: all 640ms ease;
-    -webkit-transition: all 640ms ease;
-    -moz-transition: all 640ms ease;
-    -ms-transition: all 640ms ease;
-    -o-transition: all 640ms ease;
-}
-
-.select-content-bottom-row {
-    display: flex;
-    align-items: center;
-    transition: background-color 240ms, color 240ms;
-    -webkit-transition: background-color 240ms, color 240ms;
-    -moz-transition: background-color 240ms, color 240ms;
-    -ms-transition: background-color 240ms, color 240ms;
-    -o-transition: background-color 240ms, color 240ms;
-}
-
-.select-content-bottom-row:last-child {
-    margin-bottom: 0px;
-}
-
-.ellipsis {
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@keyframes select-show {
-    100% {
-        max-height: 234px;
-    }
-}