@xaypay/tui 0.0.69 → 0.0.71

package/src/components/newAutocomplete/index.js

@@ -0,0 +1,407 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { keyframes, css } from 'styled-components';
+
+import { compereConfigs } from './../../utils';
+
+export const NewAutocomplete = ({
+    label,
+    options,
+    getItem,
+    required,
+    disabled,
+    errorSize,
+    labelSize,
+    errorColor,
+    labelColor,
+    labelWeight,
+    searchCount,
+    placeHolder,
+    errorMessage,
+    autoComplete,
+    labelDisplay,
+    contentDisplay,
+    contentTopSize,
+    contentPosition,
+    contentTopColor,
+    labelLineHeight,
+    contentDirection,
+    contentTopWeight,
+    contentTopRadius,
+    contentTopHeight,
+    contentTopBorder,
+    labelMarginBottom,
+    contentTopDisplay,
+    contentTopPadding,
+    contentBottomLeft,
+    showOptionDuration,
+    labelRequiredColor,
+    contentTopMaxWidth,
+    labelTextTransform,
+    contentBottomWidth,
+    contentBottomZindex,
+    contentBottomRadius,
+    contentTopDirection,
+    contentTopBoxSizing,
+    contentTopLineHeight,
+    contentTopBorderColor,
+    contentBottomMaxWidth,
+    contentBottomOverflow,
+    contentBottomPosition,
+    contentBottomRowColor,
+    contentBottomMinHeight,
+    contentBottomBoxShadow,
+    contentBottomRowHeight,
+    contentBottomRowCursor,
+    contentBottomRowDisplay,
+    contentBottomRowPadding,
+    contentBottomRowFontSize,
+    contentBottomRowBoxSizing,
+    contentBottomInnerDisplay,
+    contentBottomRowFontWeight,
+    contentBottomRowLineHeight,
+    contentBottomRowAlignItems,
+    contentBottomRowTransition,
+    contentBottomRowHoverColor,
+    contentTopBorderHoverColor,
+    contentTopBorderActiveColor,
+    contentBottomInnerOverflowY,
+    contentBottomInnerOverflowX,
+    contentBottomInnerMaxHeight,
+    contentBottomInnerDirection,
+    contentBottomBackgroundColor,
+    contentBottomRowMarginBottom,
+    contentBottomRowBackgroundColor,
+    contentBottomRowHoverBackgroundColor,
+    ...props
+}) => {
+    const [show, setShow] = useState(false);
+    const [isHover, setIsHover] = useState(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [innerValue, setInnerValue] = useState('');
+    const configStyles = compereConfigs();
+
+    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;
+        value.length > 0 ? setShow(true) : setShow(false);
+        setInnerValue(value);
+    };
+
+    const handleClick = (selectedValue) => {
+        setShow(false);
+        getItem(selectedValue);
+        setInnerValue(selectedValue.value);
+    };
+
+    const optionList = (
+        <>
+            {
+                show && options && options.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
+                        }}
+                    >
+                        {
+                            innerValue.length >= searchCount ?
+                                options.filter(item => item.value.includes(innerValue)).length > 0 ?
+                                options.filter(item => item.value.includes(innerValue)).map((item, index) => {
+                                    return (
+                                        <p
+                                            key={`${item}_${index}`}
+                                            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.value}
+                                        </p>
+                                    )
+                                }) : <p
+                                    style={{
+                                        color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
+                                        fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+                                        height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
+                                        padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
+                                        lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight
+                                    }}
+                                >Նման տվյալ առկա չէ</p>
+                            : <p
+                                style={{
+                                    color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
+                                    fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+                                    height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
+                                    padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
+                                    lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight
+                                }}
+                            >
+                                {innerValue.length < searchCount && `Լրացնել առնվազն ${searchCount} նիշ`}
+                            </p>
+                        }
+                    </div>
+                </div>
+            }
+        </>
+    );
+
+    useEffect(() => {
+        if (!options) {
+            alert('Please add array of options');
+        }
+
+        if (options.length === 0) {
+            alert('Please fill options array');
+        }
+
+        options && options.length > 0 && options.map(item => {
+            if (!item.hasOwnProperty('value')) {
+                alert('Please add value property in items of options array');
+            }
+        });
+
+        if (!getItem) {
+            alert('Please add getItem function for get choosen item from autocomplete');
+        }
+    }, [options, getItem]);
+
+    return (
+        <>
+            {
+                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,
+                            lineHeight: labelLineHeight ? labelLineHeight : configStyles.NEWAUTOCOMPLETE.labelLineHeight,
+                            marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.NEWAUTOCOMPLETE.labelMarginBottom,
+                            textTransform: labelTextTransform ? labelTextTransform : configStyles.NEWAUTOCOMPLETE.labelTextTransform
+                        }}
+                      >
+                        {label}
+                        {
+                            required && <sup
+                                            style={{
+                                                color: labelRequiredColor ? labelRequiredColor : configStyles.NEWAUTOCOMPLETE.labelRequiredColor
+                                            }}
+                                        >*</sup>
+                        }
+                      </label>
+                    : ''
+            }
+            <div
+                style={{
+                    display: contentDisplay ? contentDisplay : configStyles.NEWAUTOCOMPLETE.contentDisplay,
+                    position: contentPosition ? contentPosition : configStyles.NEWAUTOCOMPLETE.contentPosition,
+                    flexDirection: contentDirection ? contentDirection : configStyles.NEWAUTOCOMPLETE.contentDirection
+                }}
+            >
+                <input
+                    type='text'
+                    value={innerValue}
+                    disabled={disabled}
+                    onBlur={handleBlur}
+                    onFocus={handleFocus}
+                    onInput={handleChange}
+                    placeholder={placeHolder ? placeHolder : ''}
+                    autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    style={{
+                        transition: 'all 240ms',
+                        cursor: disabled ? 'not-allowed' : 'auto',
+                        color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
+                        fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
+                        height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
+                        border: contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
+                        padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
+                        display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
+                        fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
+                        borderRadius: contentTopRadius ? contentTopRadius : configStyles.NEWAUTOCOMPLETE.contentTopRadius,
+                        maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
+                        boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
+                        lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
+                        flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
+                        borderColor:
+                            errorMessage ? errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor :
+                            isFocus ? contentTopBorderActiveColor ? contentTopBorderActiveColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderActiveColor :
+                            isHover ? contentTopBorderHoverColor ? contentTopBorderHoverColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderHoverColor :
+                            contentTopBorderColor ? contentTopBorderColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderColor,
+                    }}
+                    {...props}
+                />
+
+                {
+                    errorMessage
+                        ? <span
+                            style={{
+                                color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
+                                fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize
+                            }}
+                          >
+                            {errorMessage}
+                          </span>
+                        : ''
+                }
+
+                {
+                    optionList
+                }
+            </div>
+        </>
+    );
+};
+
+NewAutocomplete.propTypes = {
+    label: PropTypes.string,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    errorSize: 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,
+    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,
+    labelRequiredColor: 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,
+    contentTopBorderColor: 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,
+    contentBottomRowDisplay: PropTypes.string,
+    contentBottomRowPadding: PropTypes.string,
+    contentBottomRowFontSize: PropTypes.string,
+    contentBottomRowBoxSizing: PropTypes.string,
+    contentBottomInnerDisplay: PropTypes.string,
+    contentBottomRowFontWeight: PropTypes.number,
+    contentBottomRowLineHeight: PropTypes.string,
+    contentBottomRowAlignItems: PropTypes.string,
+    contentBottomRowTransition: PropTypes.string,
+    contentBottomRowHoverColor: PropTypes.string,
+    contentTopBorderHoverColor: PropTypes.string,
+    contentTopBorderActiveColor: 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,
+};
+
+NewAutocomplete.defaultProps = {
+    searchCount: 3,
+    disabled: false
+};