@xaypay/tui 0.0.55 → 0.0.57

package/src/components/select/index.js

@@ -1,50 +1,116 @@
 import React, {useEffect, useState, useRef} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import styles from './select.module.css';
-import Icon from '../icon/Icon'
-
+import { compereConfigs } from "./../../utils";
 
-export const SelectTheme = {
-    DEFAULT: 'select-default',
-    PRIMARY: 'select-primary',
-    SUCCESS: 'select-success',
-    INFO: 'select-info',
-    WARNING: 'select-warning',
-    DANGER: 'select-danger',
-    LINK: 'select-link'
-};
+import ReactArrowIcon from './../../assets/icons/arrow.svg';
+import ReactCloseIcon from './../../assets/icons/close-icon.svg';
 
-export const SelectSize = {
-    SMALL: 'small',
-    MEDIUM: 'medium',
-    LARGE: 'large'
-};
+import styles from './select.module.css';
 
 export const Select = ({
-    theme,
-    size,
-    className,
     disabled,
-    label,
     jsonData,
-    eMessage,
     required,
-    defaultOption,
     onChange,
     keyNames,
-    selected
-}) => {
+    selected,
+    className,
+    arrowIcon,
+    closeIcon,
+    errorMessage,
+    defaultOption,
+
+    label,
+    labelColor,
+    labelWeight,
+    labelDisplay,
+    labelFontSize,
+    labelLineHeight,
+    labelMarginBottom,
+    labelTextTransform,
 
+    cursor,
+    errorSize,
+    errorColor,
+    selectedColor,
+    selectedRadius,
+    selectedHeight,
+    selectedBorder,
+    selectedPadding,
+    selectedFontSize,
+    selectedBoxSizing,
+    selectedFontWeight,
+    selectedLineHeight,
+    selectedHoverColor,
+    selectedTransition,
+    selectedBorderColor,
+
+    optionsBoxShadow,
+    optionsBorderRadius,
+    optionsBackgroundColor,
+
+    optionItemColor,
+    optionItemCursor,
+    optionItemPadding,
+    optionItemFontSize,
+    optionItemMinHeight,
+    optionItemBoxSizing,
+    optionItemFontWeight,
+    optionItemLineHeight,
+    optionItemColorHover,
+    optionItemMarginBottom,
+    optionItemBackgroudColor,
+    optionItemBackgroudColorHover,
+}) => {
     const options = jsonData.length ? JSON.parse(jsonData) : [];
     const ref = useRef();
-   
-    let [opened, setOpened] = useState(false)
-    let [newSelected, setNewSelected] = useState({})
+    
+    const [opened, setOpened] = useState(false);
+    const [isHover, setIsHover] = useState(false);
+    const [newSelected, setNewSelected] = useState({});
+
+    const configStyles = compereConfigs();
+    const classProps = classnames(
+        className
+    );
+
+    const handleOpenClose = () => {
+        setOpened(!opened);
+    };
+
+    const handleClearSelect = (e) => {
+        onChange({});
+        setNewSelected({})
+        e.stopPropagation();
+    };
+
+    const handleSelectItem = (option) => {
+        onChange(option);
+        setOpened(!opened);
+        setNewSelected(option);
+    };
+
+    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;
+    };
 
     useEffect(()=>{
-        const parseSelectedData =
-        selected.length !== 0 ? JSON.parse(selected) : {};
+        const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
         setNewSelected(parseSelectedData);
     },[selected])
 
@@ -61,106 +127,189 @@ export const Select = ({
             }
         }
     }, [opened]);
-
-    const classProps = classnames(
-        styles[theme],
-        styles[size],
-        {
-            [styles.disabled]: disabled,
-            [styles.required]: required,
-        },
-        className
-    );
     
     return (
-        <div>
-            {label ? <label className={`${styles['select-title']} select-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
-            <div className={`${styles['select-wrap']} select-wrap-rem`} ref={ref}>
-                <div className={styles['select-content']} id={styles.selector}>
+        <div className={classProps}>
+            {
+                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,
+                            marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.SELECT.labelMarginBottom,
+                            textTransform: labelTextTransform ? labelTextTransform : configStyles.SELECT.labelTextTransform
+                        }}
+                    >
+                        {label}
+                        {required && <sup style={{color: "#ee0000"}}>*</sup>}
+                    </label> : ""
+            }
+            
+            <div ref={ref}>
+                <div className={styles['select-content']}>
                     <div
-                        className={`${styles['select-content-top']} select-content-top-rem ${eMessage ? styles['error-message'] : ''}`}
-                        onClick={() => {
-                            setOpened(!opened)
+                        style={{
+                            cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
+                            height: selectedHeight ? selectedHeight : configStyles.SELECT.selectedHeight,
+                            border: selectedBorder ? selectedBorder : configStyles.SELECT.selectedBorder,
+                            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,
+                            borderColor: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : selectedBorderColor ? selectedBorderColor : configStyles.SELECT.selectedBorderColor
                         }}
+                        onClick={disabled ? _ => _ : _ => handleOpenClose()}
+                        onMouseEnter={disabled ? _ => _ : handleMouseEnter}
+                        onMouseLeave={disabled ? _ => _ : handleMouseLeave}
+                        className={`${styles['select-content-top']}`}
                     >
-                        <div className={`${styles['select-content-top-text']} select-content-top-text-rem`}>{newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption}</div>
-                        <div className={`${styles['select-content-top-icon']} select-content-top-icon-rem`}>
+                        <div
+                            className={`${styles['select-content-top-text']}`}
+                            style={{
+                                color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor,
+                            }}
+                        >
+                            {newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption}
+                        </div>
+                        <div className={`${styles['select-content-top-icon']}`}>
 
                             {Object.keys(newSelected).length > 0 && 
-                                <i className="icon-close" onClick={
-                                    (e) => {
-                                        setNewSelected({})
-                                        onChange({});
-                                        e.stopPropagation()
-                                    }
-                                }/>
+                                <div
+                                    className={`${styles['close-icon']}`}
+                                    onClick={disabled ? _ => _ : handleClearSelect}
+                                >
+                                    { closeIcon ? closeIcon : <img src={ReactCloseIcon} alt="icon" /> }
+                                </div>
                             }
-                            <i className={opened ? 'icon-icon-up' : 'icon-icon-down'}/>
 
+                            <div
+                                style={{
+                                    transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
+                                }}
+                                className={`${styles['arrow-icon']}`}>
+                                {arrowIcon ? arrowIcon : <img src={ReactArrowIcon} alt="icon"/>}
+                            </div>
                         </div>
                     </div>
                     {
                         opened && !disabled ?
-                                <div className={`${styles['select-content-bottom']} select-content-bottom-rem`}>
-                                    <div className={`${styles['select-content-bottom-inner']} select-content-bottom-inner-rem`}>
-                                        {/* <div
-                                            className={styles['select-content-bottom-row']}
-                                            onClick={() => {
-                                                    if (!required && !selected) {
-                                                        setNewSelected(defaultOption)
-                                                        onChange(defaultOption)
-                                                        setOpened(!opened)
-                                                    }
-                                                }
-                                            }
-                                        >
-                                            {defaultOption}
-                                        </div> */}
-                                        {
-                                            options.map((option, i) => {
-                                                return <div
-                                                            key={i}
-                                                            className={`${styles['select-content-bottom-row']} select-content-bottom-row-rem`}
-                                                            disabled={true}
-                                                            onClick={() => {
-                                                                    setNewSelected(option);
-                                                                    onChange(option);
-                                                                    setOpened(!opened);
-                                                                }
-                                                            }
-                                                            defaultValue={option[keyNames.id]}
-                                                        >
+                            <div
+                                style={{
+                                    boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
+                                    borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
+                                    backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
+                                    top: parseFloat( selectedHeight ? selectedHeight.substring(0, selectedHeight.length - 2) : configStyles.SELECT.selectedHeight.substring(0, configStyles.SELECT.selectedHeight.length - 2)) + 6 + 'px'
+                                }}
+                                className={`${styles['select-content-bottom']}`}
+                            >
+                                <div className={`${styles['select-content-bottom-inner']}`}>
+                                    {
+                                        options.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']}`}
+                                                        style={{
+                                                            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: optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.optionItemLineHeight,
+                                                            marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
+                                                            backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor,
+                                                        }}
+                                                    >
                                                         {option[keyNames.name]}
-                                                </div>
-                                            })
-                                        }
-                                    </div>
+                                                    </div>
+                                        })
+                                    }
                                 </div>
-                            : null
+                            </div> : null
                     }
                 </div>
             </div>
-            {eMessage ? <span className={styles.eMessage}>{eMessage}</span> : null}
+            
+            {
+                errorMessage ?
+                    <span
+                        style={{
+                            color: errorColor ? errorColor : configStyles.SELECT.errorColor,
+                            fontSize: errorSize ? errorSize : configStyles.SELECT.errorSize
+                        }}
+                    >
+                        {errorMessage}
+                    </span>
+                    : ''
+            }
         </div>
     );
 };
 
 Select.propTypes = {
-    theme: PropTypes.oneOf(Object.values(SelectTheme)),
-    size: PropTypes.oneOf(Object.values(SelectSize)),
-    label: PropTypes.string,
-    eMessage: PropTypes.string,
-    defaultOption: PropTypes.string,
     onChange: PropTypes.func,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
-    className: PropTypes.string,
     selected: PropTypes.string,
     jsonData: PropTypes.string,
     keyNames: PropTypes.object,
-};
+    className: PropTypes.string,
+    arrowIcon: PropTypes.element,
+    closeIcon: PropTypes.element,
+    errorMessage: PropTypes.string,
+    defaultOption: PropTypes.string,
+
+    label: PropTypes.string,
+    labelColor: PropTypes.string,
+    labelWeight: PropTypes.string,
+    labelDisplay: PropTypes.string,
+    labelFontSize: PropTypes.string,
+    labelLineHeight: PropTypes.string,
+    labelMarginBottom: PropTypes.string,
+    labelTextTransform: PropTypes.string,
 
-Select.defaultProps = {
-    size: 'medium',
-    required: false
-};
+    cursor: PropTypes.string,
+    errorSize: PropTypes.string,
+    errorColor: PropTypes.string,
+    selectedColor: PropTypes.string,
+    selectedBorder: PropTypes.string,
+    selectedRadius: PropTypes.string,
+    selectedHeight: PropTypes.string,
+    selectedPadding: PropTypes.string,
+    selectedFontSize: PropTypes.string,
+    selectedBoxSizing: PropTypes.string,
+    selectedHoverColor: PropTypes.string,
+    selectedFontWeight: PropTypes.string,
+    selectedLineHeight: PropTypes.string,
+    selectedTransition: PropTypes.string,
+    selectedBorderColor: 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,
+};

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

@@ -1,53 +1,28 @@
-.select-title {
-    display: block;
-    text-transform: none;
-    font-size: 16px;
-    color: #3C393E;
-    line-height: 22px;
-    font-weight: 500;
-    margin-bottom: 6px;
-}
 .select-content {
     display: flex;
     flex-direction: column;
     position: relative;
 }
+
 .select-content-top {
     display: flex;
     flex-direction: row;
-    max-width: 400px;
-    height: 46px;
-    padding: 0 15px;
-    font-size: 16px;
-    color: #3C393E;
-    line-height: 22px;
-    font-weight: 500;
-    border: 2px solid #D1D1D1;
-    border-radius: 6px;
-    transition: border-color 240ms;
-    box-sizing: border-box;
-    cursor: pointer;
-}
-.select-content-top.active {
-    border-color: #00236A;
-}
-.select-content-top:hover {
-    border-color: #3C393E;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
 }
+
 .select-content-bottom {
     position: absolute;
     width: 100%;
-    top: 52px;
-    left: 0;
+    left: 0px;
+    z-index: 1;
+    max-height: 0;
     overflow: hidden;
-    max-width: 400px;
-    background: #FBFBFB;
-    box-shadow: 0 0 10px rgba(60, 57, 62, 0.08);
-    border-radius: 6px;
     animation: select-show 640ms linear forwards;
-    max-height: 0;
-    z-index: 1;
+    -webkit-animation: select-show 640ms linear forwards;
 }
+
 .select-content-bottom-inner {
     display: flex;
     flex-direction: column;
@@ -55,66 +30,54 @@
     overflow-x: hidden;
     max-height: 234px;
 }
-@keyframes select-show {
-    100% {
-        max-height: 400px;
-    }
-}
-.select-content-top-text {
-    flex: 1;
+
+.select-content-top-icon {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex: 0 0 auto;
     align-items: center;
-}
-.select-content-top-icon {
     padding: 0 5px 0 20px;
     box-sizing: border-box;
 }
-.select-content-top-icon {
+
+.select-content-top-icon > div {
     display: flex;
+    width: 14px;
+    height: 14px;
     align-items: center;
-    flex: 0 0 auto;
+    justify-content: center;
 }
-.select-content-top-icon > i{
-    font-size: 12px !important;
-    color: #3C393E;
-}
-.select-content-top-icon > i:not(:last-child){
-    padding: 0 8px;
+
+.close-icon {
+    padding-right: 9px;
     border-right: 1px solid #EEEEEE;
-    margin-right: 8px;
-    height: 22px;
-    display: flex;
-    align-items: center;
 }
+
+.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;
-    background: #ffffff;
-    padding: 0 15px;
-    min-height: 46px;
-    font-size: 16px;
-    color: #3C393E;
-    line-height: 22px;
-    font-weight: 500;
-    margin-bottom: 2px;
-    box-sizing: border-box;
-    transition: background 240ms, color 240ms;
-    cursor: pointer;
-}
-.select-content-bottom-row:last-child {
-    margin-bottom: 0;
-}
-.select-content-bottom-row:hover {
-    background: unset;
-    color: #00236A;;
+    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;
 }
 
-.error-message {
-    border: 2px solid rgb(238, 0, 0) !important;
+.select-content-bottom-row:last-child {
+    margin-bottom: 0px;
 }
 
-.eMessage {
-    color: rgba(238, 0, 0, 1);
+@keyframes select-show {
+    100% {
+        max-height: 234px;
+    }
 }

package/src/components/select/select.stories.js

@@ -1,4 +1,4 @@
-import { Select, SelectTheme } from ".";
+import { Select } from ".";
 
 export default {
     component: Select,
@@ -9,7 +9,6 @@ const Template = (args) => <Select label='' {...args} >Default</Select>;
 
 export const Default = Template.bind({});
 Default.args = {
-    theme: SelectTheme.DEFAULT,
     label: 'վարչական շրջան',
     jsonData: '[{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}]',
     onChange: (newValue)=> {

package/src/components/table/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import PropTypes, { bool, checkPropTypes, func } from "prop-types";
+import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./table.module.css";
 import { Checkbox } from "../checkbox";