@xaypay/tui 0.0.119 → 0.0.121

package/src/components/newAutocomplete/index.js

@@ -1,592 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-
-import classnames from 'classnames'
-import { compereConfigs, hasOwnerProperty } from './../../utils'
-
-import SvgRequired from './../icon/Required'
-
-import { keyframes, css } from 'styled-components'
-import styles from './autocomplete.module.css'
-
-export const NewAutocomplete = ({
-    label,
-    change,
-    options,
-    getItem,
-    keyNames,
-    required,
-    disabled,
-    selected,
-    className,
-    errorSize,
-    labelSize,
-    marginTop,
-    errorColor,
-    labelColor,
-    labelWeight,
-    searchCount,
-    placeHolder,
-    errorMessage,
-    autoComplete,
-    labelDisplay,
-    contentDisplay,
-    contentTopSize,
-    contentPosition,
-    contentTopColor,
-    labelLineHeight,
-    labelFontFamily,
-    contentDirection,
-    contentTopWeight,
-    contentTopRadius,
-    contentTopHeight,
-    contentTopBorder,
-    labelMarginBottom,
-    contentTopDisplay,
-    contentTopPadding,
-    contentBottomLeft,
-    innerErrorPadding,
-    showOptionDuration,
-    contentTopMaxWidth,
-    labelTextTransform,
-    contentBottomWidth,
-    contentBottomZindex,
-    contentBottomRadius,
-    contentTopDirection,
-    contentTopBoxSizing,
-    contentTopLineHeight,
-    contentBottomMaxWidth,
-    contentTopBorderHover,
-    contentBottomOverflow,
-    contentBottomPosition,
-    contentBottomRowColor,
-    contentBottomMinHeight,
-    contentBottomBoxShadow,
-    contentBottomRowHeight,
-    contentBottomRowCursor,
-    contentTopBorderActive,
-    contentBottomRowDisplay,
-    contentBottomRowPadding,
-    contentBottomRowFontSize,
-    contentBottomRowBoxSizing,
-    contentBottomInnerDisplay,
-    innerErrorBackgroundColor,
-    contentBottomRowFontWeight,
-    contentBottomRowLineHeight,
-    contentBottomRowAlignItems,
-    contentBottomRowTransition,
-    contentBottomRowHoverColor,
-    contentBottomInnerOverflowY,
-    contentBottomInnerOverflowX,
-    contentBottomInnerMaxHeight,
-    contentBottomInnerDirection,
-    contentBottomBackgroundColor,
-    contentBottomRowMarginBottom,
-    contentBottomRowBackgroundColor,
-    contentBottomRowHoverBackgroundColor,
-    backgroundDisableColor,
-    ...props
-}) => {
-    const [id, setId] = useState('')
-    const [show, setShow] = useState(false)
-    const [isHover, setIsHover] = useState(false)
-    const [isFocus, setIsFocus] = useState(false)
-    const [innerError, setInnerError] = useState('')
-    const [innerValue, setInnerValue] = useState('')
-    const [innerOptions, setInnerOptions] = useState([])
-    const configStyles = compereConfigs()
-    const classProps = classnames(
-        className ? className : configStyles.NEWAUTOCOMPLETE.className,
-        styles['auto-complete']
-    )
-
-    const showOption = keyframes`
-        100% {
-            max-height: 400px;
-        }
-    `
-
-    const animation = () => css`
-        ${showOption} ${showOptionDuration
-            ? showOptionDuration
-            : configStyles.NEWAUTOCOMPLETE.showOptionDuration} linear forwards
-    `
-
-    const handleMouseEnter = () => {
-        setIsHover(true)
-    }
-
-    const handleMouseLeave = () => {
-        setIsHover(false)
-    }
-
-    const handleRowMouseEnter = (e) => {
-        e.target.style.color = contentBottomRowHoverColor
-            ? contentBottomRowHoverColor
-            : configStyles.NEWAUTOCOMPLETE.contentBottomRowHoverColor
-        e.target.style.backgroundColor = contentBottomRowHoverBackgroundColor
-            ? contentBottomRowHoverBackgroundColor
-            : configStyles.NEWAUTOCOMPLETE.contentBottomRowHoverBackgroundColor
-    }
-
-    const handleRowMouseLeave = (e) => {
-        e.target.style.color = contentBottomRowColor
-            ? contentBottomRowColor
-            : configStyles.NEWAUTOCOMPLETE.contentBottomRowColor
-        e.target.style.backgroundColor = contentBottomRowBackgroundColor
-            ? contentBottomRowBackgroundColor
-            : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
-    }
-
-    const handleFocus = () => {
-        setIsFocus(true)
-    }
-
-    const handleBlur = () => {
-        setIsFocus(false)
-    }
-
-    const handleChange = (e) => {
-        const value = e.target.value
-        const currentId = e.target.id
-        value.length > 0 ? setShow(true) : setShow(false)
-        setInnerError('')
-        setInnerValue(value)
-        if (value.length >= searchCount) {
-            change({ name: value, id: currentId })
-        } else {
-            change({ name: '', id: '' })
-        }
-    }
-
-    const handleClick = (selectedValue) => {
-        setShow(false)
-        setId(selectedValue[keyNames.id])
-        setInnerValue(selectedValue[keyNames.name])
-        getItem(selectedValue)
-    }
-
-    const optionList = (
-        <div>
-            {show && innerOptions && !disabled ? (
-                innerOptions.length > 0 ? (
-                    <div
-                        style={{
-                            left: contentBottomLeft
-                                ? contentBottomLeft
-                                : configStyles.NEWAUTOCOMPLETE.contentBottomLeft,
-                            width: contentBottomWidth
-                                ? contentBottomWidth
-                                : configStyles.NEWAUTOCOMPLETE.contentBottomWidth,
-                            zIndex: contentBottomZindex
-                                ? contentBottomZindex
-                                : configStyles.NEWAUTOCOMPLETE.contentBottomZindex,
-                            borderRadius: contentBottomRadius
-                                ? contentBottomRadius
-                                : configStyles.NEWAUTOCOMPLETE.contentBottomRadius,
-                            maxWidth: contentBottomMaxWidth
-                                ? contentBottomMaxWidth
-                                : configStyles.NEWAUTOCOMPLETE.contentBottomMaxWidth,
-                            overflow: contentBottomOverflow
-                                ? contentBottomOverflow
-                                : configStyles.NEWAUTOCOMPLETE.contentBottomOverflow,
-                            position: contentBottomPosition
-                                ? contentBottomPosition
-                                : configStyles.NEWAUTOCOMPLETE.contentBottomPosition,
-                            minHeight: contentBottomMinHeight
-                                ? contentBottomMinHeight
-                                : configStyles.NEWAUTOCOMPLETE.contentBottomMinHeight,
-                            boxShadow: contentBottomBoxShadow
-                                ? contentBottomBoxShadow
-                                : configStyles.NEWAUTOCOMPLETE.contentBottomBoxShadow,
-                            backgroundColor: contentBottomBackgroundColor
-                                ? contentBottomBackgroundColor
-                                : configStyles.NEWAUTOCOMPLETE.contentBottomBackgroundColor,
-                            top: contentTopHeight
-                                ? contentTopHeight.includes('rem')
-                                    ? parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 3)) + 0.6 + 'rem'
-                                    : parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 2)) + 6 + 'px'
-                                : configStyles.NEWAUTOCOMPLETE.contentTopHeight.includes('rem')
-                                ? parseFloat(
-                                      configStyles.NEWAUTOCOMPLETE.contentTopHeight.substr(
-                                          0,
-                                          configStyles.NEWAUTOCOMPLETE.contentTopHeight.length - 3
-                                      )
-                                  ) +
-                                  0.6 +
-                                  'rem'
-                                : parseFloat(
-                                      configStyles.NEWAUTOCOMPLETE.contentTopHeight.substr(
-                                          0,
-                                          configStyles.NEWAUTOCOMPLETE.contentTopHeight.length - 2
-                                      )
-                                  ) +
-                                  6 +
-                                  'px',
-                            animation,
-                        }}
-                    >
-                        <div
-                            style={{
-                                display: contentBottomInnerDisplay
-                                    ? contentBottomInnerDisplay
-                                    : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDisplay,
-                                overflowY: contentBottomInnerOverflowY
-                                    ? contentBottomInnerOverflowY
-                                    : configStyles.NEWAUTOCOMPLETE.contentBottomInnerOverflowY,
-                                overflowX: contentBottomInnerOverflowX
-                                    ? contentBottomInnerOverflowX
-                                    : configStyles.NEWAUTOCOMPLETE.contentBottomInnerOverflowX,
-                                maxHeight: contentBottomInnerMaxHeight
-                                    ? contentBottomInnerMaxHeight
-                                    : configStyles.NEWAUTOCOMPLETE.contentBottomInnerMaxHeight,
-                                flexDirection: contentBottomInnerDirection
-                                    ? contentBottomInnerDirection
-                                    : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDirection,
-                            }}
-                        >
-                            {innerOptions.map((item) => {
-                                return (
-                                    <p
-                                        key={item.id}
-                                        onMouseEnter={handleRowMouseEnter}
-                                        onMouseLeave={handleRowMouseLeave}
-                                        onClick={() => handleClick(item)}
-                                        style={{
-                                            flexShrink: 0,
-                                            color: contentBottomRowColor
-                                                ? contentBottomRowColor
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowColor,
-                                            height: contentBottomRowHeight
-                                                ? contentBottomRowHeight
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
-                                            cursor: contentBottomRowCursor
-                                                ? contentBottomRowCursor
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowCursor,
-                                            display: contentBottomRowDisplay
-                                                ? contentBottomRowDisplay
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowDisplay,
-                                            padding: contentBottomRowPadding
-                                                ? contentBottomRowPadding
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
-                                            fontSize: contentBottomRowFontSize
-                                                ? contentBottomRowFontSize
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowFontSize,
-                                            boxSizing: contentBottomRowBoxSizing
-                                                ? contentBottomRowBoxSizing
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowBoxSizing,
-                                            fontWeight: contentBottomRowFontWeight
-                                                ? contentBottomRowFontWeight
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowFontWeight,
-                                            lineHeight: contentBottomRowLineHeight
-                                                ? contentBottomRowLineHeight
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowLineHeight,
-                                            alignItems: contentBottomRowAlignItems
-                                                ? contentBottomRowAlignItems
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowAlignItems,
-                                            transition: contentBottomRowTransition
-                                                ? contentBottomRowTransition
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowTransition,
-                                            marginBottom: contentBottomRowMarginBottom
-                                                ? contentBottomRowMarginBottom
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowMarginBottom,
-                                            backgroundColor: contentBottomRowBackgroundColor
-                                                ? contentBottomRowBackgroundColor
-                                                : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor,
-                                        }}
-                                    >
-                                        {item[keyNames.name]}
-                                    </p>
-                                )
-                            })}
-                        </div>
-                    </div>
-                ) : innerOptions.length <= 0 ? (
-                    innerError ? (
-                        ''
-                    ) : innerValue.length <= 0 ? (
-                        ''
-                    ) : (
-                        <span
-                            style={{
-                                position: 'absolute',
-                                zIndex: '1',
-                                color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
-                                fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
-                                top: marginTop
-                                    ? `calc(100% + ${marginTop})`
-                                    : `calc(100% + ${configStyles.INPUT.marginTop})`,
-                                padding: innerErrorPadding
-                                    ? innerErrorPadding
-                                    : configStyles.NEWAUTOCOMPLETE.innerErrorPadding,
-                                height: contentBottomRowHeight
-                                    ? contentBottomRowHeight
-                                    : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
-                                lineHeight: contentBottomRowHeight
-                                    ? contentBottomRowHeight
-                                    : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
-                                backgroundColor: innerErrorBackgroundColor
-                                    ? innerErrorBackgroundColor
-                                    : configStyles.NEWAUTOCOMPLETE.innerErrorBackgroundColor,
-                            }}
-                        >
-                            {innerValue.length >= searchCount
-                                ? 'Նման տվյալ առկա չէ'
-                                : `Լրացնել առնվազն ${searchCount} նիշ`}
-                        </span>
-                    )
-                ) : (
-                    ''
-                )
-            ) : (
-                ''
-            )}
-        </div>
-    )
-
-    useEffect(() => {
-        if (options === undefined) {
-            alert('Please add options prop')
-        }
-
-        options &&
-            options.length > 0 &&
-            options.map((item) => {
-                if (!hasOwnerProperty(item, keyNames.name)) {
-                    alert(`Please add ${keyNames.name} property in items of options array`)
-                }
-            })
-
-        if (!getItem) {
-            alert('Please add getItem function for get choosen item from autocomplete')
-        }
-
-        options && setInnerOptions(options)
-    }, [options, options?.length, getItem])
-
-    useEffect(() => {
-        if (!change) {
-            alert('Please add change prop on New Autocomplete component')
-        }
-    }, [change])
-
-    useEffect(() => {
-        if (selected) {
-            setId(selected[keyNames.id])
-            setInnerValue(selected[keyNames.name])
-        } else {
-            setId('')
-            setInnerValue('')
-        }
-    }, [selected])
-
-    useEffect(() => {
-        setInnerError(errorMessage)
-    }, [errorMessage])
-
-    return (
-        <div className={classProps}>
-            {label ? (
-                <label
-                    style={{
-                        color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
-                        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
-                            : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
-                        marginBottom: labelMarginBottom
-                            ? labelMarginBottom
-                            : configStyles.NEWAUTOCOMPLETE.labelMarginBottom,
-                        textTransform: labelTextTransform
-                            ? labelTextTransform
-                            : configStyles.NEWAUTOCOMPLETE.labelTextTransform,
-                    }}
-                >
-                    {label}
-                    {required && (
-                        <sup>
-                            <SvgRequired />
-                        </sup>
-                    )}
-                </label>
-            ) : (
-                ''
-            )}
-            <div
-                style={{
-                    display: contentDisplay ? contentDisplay : configStyles.NEWAUTOCOMPLETE.contentDisplay,
-                    position: contentPosition ? contentPosition : configStyles.NEWAUTOCOMPLETE.contentPosition,
-                    flexDirection: contentDirection ? contentDirection : configStyles.NEWAUTOCOMPLETE.contentDirection,
-                    maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
-                }}
-            >
-                <input
-                    id={id}
-                    type="text"
-                    value={innerValue}
-                    disabled={disabled}
-                    onBlur={handleBlur}
-                    onFocus={handleFocus}
-                    onInput={handleChange}
-                    onMouseEnter={handleMouseEnter}
-                    onMouseLeave={handleMouseLeave}
-                    placeholder={placeHolder ? placeHolder : ''}
-                    autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
-                    style={{
-                        border: 'none',
-                        outline: 'none',
-                        maxWidth: '100%',
-                        transition: 'all 240ms',
-                        cursor: disabled ? 'not-allowed' : 'auto',
-                        color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
-                        fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
-                        backgroundColor:
-                            disabled && (backgroundDisableColor ?? configStyles.NEWAUTOCOMPLETE.backgroundDisableColor),
-                        height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
-                        padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
-                        display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
-                        fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
-                        borderRadius: contentTopRadius
-                            ? contentTopRadius
-                            : configStyles.NEWAUTOCOMPLETE.contentTopRadius,
-                        boxSizing: contentTopBoxSizing
-                            ? contentTopBoxSizing
-                            : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
-                        lineHeight: contentTopLineHeight
-                            ? contentTopLineHeight
-                            : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
-                        flexDirection: contentTopDirection
-                            ? contentTopDirection
-                            : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
-                        boxShadow: errorMessage
-                            ? errorColor
-                                ? `0 0 0 2px ${errorColor}`
-                                : `0 0 0 2px ${configStyles.NEWAUTOCOMPLETE.errorColor}`
-                            : isFocus
-                            ? contentTopBorderActive
-                                ? contentTopBorderActive
-                                : configStyles.NEWAUTOCOMPLETE.contentTopBorderActive
-                            : isHover
-                            ? contentTopBorderHover
-                                ? contentTopBorderHover
-                                : configStyles.NEWAUTOCOMPLETE.contentTopBorderHover
-                            : contentTopBorder
-                            ? contentTopBorder
-                            : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
-                    }}
-                    {...props}
-                />
-
-                {innerError ? (
-                    <span
-                        style={{
-                            left: '0px',
-                            position: 'absolute',
-                            color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
-                            fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
-                            top: marginTop
-                                ? `calc(100% + ${marginTop})`
-                                : `calc(100% + ${configStyles.INPUT.marginTop})`,
-                            maxWidth: contentTopMaxWidth
-                                ? contentTopMaxWidth
-                                : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
-                        }}
-                    >
-                        {innerError}
-                    </span>
-                ) : (
-                    ''
-                )}
-
-                {optionList}
-            </div>
-        </div>
-    )
-}
-
-NewAutocomplete.propTypes = {
-    label: PropTypes.string,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    keyNames: PropTypes.object,
-    selected: PropTypes.object,
-    className: PropTypes.string,
-    errorSize: PropTypes.string,
-    marginTop: PropTypes.string,
-    labelSize: PropTypes.string,
-    errorColor: PropTypes.string,
-    labelColor: PropTypes.string,
-    searchCount: PropTypes.number,
-    placeHolder: PropTypes.string,
-    labelWeight: PropTypes.number,
-    errorMessage: PropTypes.string,
-    labelDisplay: PropTypes.string,
-    autoComplete: PropTypes.string,
-    contentDisplay: PropTypes.string,
-    contentTopSize: PropTypes.string,
-    contentPosition: PropTypes.string,
-    labelLineHeight: PropTypes.string,
-    contentTopColor: PropTypes.string,
-    change: PropTypes.func.isRequired,
-    labelFontFamily: PropTypes.string,
-    contentDirection: PropTypes.string,
-    contentTopWeight: PropTypes.number,
-    contentTopRadius: PropTypes.string,
-    contentTopHeight: PropTypes.string,
-    contentTopBorder: PropTypes.string,
-    getItem: PropTypes.func.isRequired,
-    contentTopDisplay: PropTypes.string,
-    contentTopPadding: PropTypes.string,
-    contentBottomLeft: PropTypes.string,
-    options: PropTypes.array.isRequired,
-    labelMarginBottom: PropTypes.string,
-    innerErrorPadding: PropTypes.string,
-    labelTextTransform: PropTypes.string,
-    showOptionDuration: PropTypes.string,
-    contentTopMaxWidth: PropTypes.string,
-    contentBottomWidth: PropTypes.string,
-    contentTopDirection: PropTypes.string,
-    contentTopBoxSizing: PropTypes.string,
-    contentBottomZindex: PropTypes.number,
-    contentBottomRadius: PropTypes.string,
-    contentTopLineHeight: PropTypes.string,
-    contentTopBorderHover: PropTypes.string,
-    contentBottomRowColor: PropTypes.string,
-    contentBottomMaxWidth: PropTypes.string,
-    contentBottomOverflow: PropTypes.string,
-    contentBottomPosition: PropTypes.string,
-    contentBottomMinHeight: PropTypes.string,
-    contentBottomBoxShadow: PropTypes.string,
-    contentBottomRowHeight: PropTypes.string,
-    contentBottomRowCursor: PropTypes.string,
-    contentTopBorderActive: PropTypes.string,
-    contentBottomRowDisplay: PropTypes.string,
-    contentBottomRowPadding: PropTypes.string,
-    contentBottomRowFontSize: PropTypes.string,
-    contentBottomRowBoxSizing: PropTypes.string,
-    innerErrorBackgroundColor: PropTypes.string,
-    contentBottomInnerDisplay: PropTypes.string,
-    contentBottomRowFontWeight: PropTypes.number,
-    contentBottomRowLineHeight: PropTypes.string,
-    contentBottomRowAlignItems: PropTypes.string,
-    contentBottomRowTransition: PropTypes.string,
-    contentBottomRowHoverColor: PropTypes.string,
-    contentBottomInnerOverflowY: PropTypes.string,
-    contentBottomInnerOverflowX: PropTypes.string,
-    contentBottomInnerMaxHeight: PropTypes.string,
-    contentBottomInnerDirection: PropTypes.string,
-    contentBottomRowMarginBottom: PropTypes.string,
-    contentBottomBackgroundColor: PropTypes.string,
-    contentBottomRowBackgroundColor: PropTypes.string,
-    contentBottomRowHoverBackgroundColor: PropTypes.string,
-    backgroundDisableColor: PropTypes.string,
-}
-
-NewAutocomplete.defaultProps = {
-    searchCount: 3,
-    disabled: false,
-}