@xaypay/tui 0.0.105 → 0.0.106

package/src/components/select/index.js

@@ -1,13 +1,13 @@
-import React, {useEffect, useState, useRef} from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { compereConfigs } from "./../../utils";
-import { SingleCheckbox } from '../singleCheckbox';
+import React, { useEffect, useState, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { compereConfigs } from './../../utils'
+import { SingleCheckbox } from '../singleCheckbox'
 
-import ReactArrowIcon from '../icon/Arrow';
-import ReactCloseIcon from '../icon/CloseIcon';
+import ReactArrowIcon from '../icon/Arrow'
+import ReactCloseIcon from '../icon/CloseIcon'
 
-import styles from './select.module.css';
+import styles from './select.module.css'
 
 export const Select = ({
     dots,
@@ -71,158 +71,159 @@ export const Select = ({
     optionItemBackgroudColorHover,
 
     boxShadow,
-    boxShadowHover
+    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
-    );
+    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)
 
     const handleOpenClose = () => {
-        setOpened(!opened);
-    };
+        setOpened(!opened)
+    }
 
     const handleClearSelect = (e) => {
-        onChange({});
-        setNewSelected([]);
-        const clearedOptions = existOptions && existOptions.length > 0 && existOptions.map(item => {
-            item.checked = false;
-            return item;
-        });
-        setExistOptions(clearedOptions);
-        e.stopPropagation();
-    };
+        onChange({})
+        setNewSelected([])
+        const clearedOptions =
+            existOptions &&
+            existOptions.length > 0 &&
+            existOptions.map((item) => {
+                item.checked = false
+                return item
+            })
+        setExistOptions(clearedOptions)
+        e.stopPropagation()
+    }
 
     const handleSelectItem = (option) => {
-        const checkedOption = {...option};
-        delete checkedOption.checked;
-        
+        const checkedOption = { ...option }
+        delete checkedOption.checked
+
         if (!multiple) {
-            setOpened(!opened);
-            setNewSelected([option]);
-            onChange(checkedOption);
+            setOpened(!opened)
+            setNewSelected([option])
+            onChange(checkedOption)
         } else {
-            const indexOfObject = newSelected.findIndex(obj => {
-                return obj[keyNames.name] === option[keyNames.name];
-            });
+            const indexOfObject = newSelected.findIndex((obj) => {
+                return obj[keyNames.name] === option[keyNames.name]
+            })
             if (indexOfObject === -1) {
-                option.checked = true;
-                setNewSelected(prev => {
-                    return [
-                        ...prev,
-                        option
-                    ]
-                });
+                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),
-                ])
+                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);
-    };
-      
+        setIsHover(true)
+    }
+
     const handleMouseLeave = () => {
-        setIsHover(false);
-    };
+        setIsHover(false)
+    }
 
     const handleMouseEnterOption = (e) => {
-        e.target.style.color = optionItemColorHover ? optionItemColorHover : configStyles.SELECT.optionItemColorHover;
-        e.target.style.backgroundColor = optionItemBackgroudColorHover ? optionItemBackgroudColorHover : configStyles.SELECT.optionItemBackgroudColorHover;
-    };
-    
+        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;
-    };
+        e.target.style.backgroundColor = optionItemBackgroudColor
+            ? optionItemBackgroudColor
+            : configStyles.SELECT.optionItemBackgroudColor
+    }
 
     const isObjectEmpty = (obj) => {
         for (var key in obj) {
-          if (obj.hasOwnProperty(key)) {
-            return false;
-          }
+            // eslint-disable-next-line no-prototype-builtins
+            if (obj.hasOwnProperty(key)) {
+                return false
+            }
         }
-        return true;
-    };
+        return true
+    }
 
     useEffect(() => {
-        if(opened){
-            const checkIfClickedOutside = e => {
+        if (opened) {
+            const checkIfClickedOutside = (e) => {
                 if (opened && ref.current && !ref.current.contains(e.target)) {
                     setOpened(false)
                 }
-            };
-            document.addEventListener("mousedown", checkIfClickedOutside)
+            }
+            document.addEventListener('mousedown', checkIfClickedOutside)
             return () => {
-                document.removeEventListener("mousedown", checkIfClickedOutside)
+                document.removeEventListener('mousedown', checkIfClickedOutside)
             }
         }
-    }, [opened]);
+    }, [opened])
 
     useEffect(() => {
         if (selected) {
             if (selected.length > 0) {
-                setNewSelected(isObjectEmpty(selected[0]) ? []: selected );
+                setNewSelected(isObjectEmpty(selected[0]) ? [] : selected)
             } else {
-                setNewSelected([]);
+                setNewSelected([])
             }
         }
 
         if (!multiple) {
-            options && options.length > 0 && setExistOptions(options);
+            options && options.length > 0 && setExistOptions(options)
         } else {
-            const modifiedOptions = options && options.length > 0 && options.map((item, index) => {
-                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);
+            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]);
-    
+    }, [options, multiple, selected, selected?.length])
+
     return (
         <div className={classProps} style={{ position: 'relative' }}>
-            {
-                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> : ""
-            }
-            
+            {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
@@ -233,15 +234,37 @@ export const Select = ({
                             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
+                            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()}
+                        onClick={disabled ? (_) => _ : () => handleOpenClose()}
+                        onMouseEnter={disabled ? (_) => _ : () => handleMouseEnter()}
+                        onMouseLeave={disabled ? (_) => _ : () => handleMouseLeave()}
                         className={`${styles['select-content-top']}`}
                     >
                         <div
@@ -250,119 +273,191 @@ export const Select = ({
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
-                                color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor,
+                                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 : ''
-                            }
+                            {!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>
-                            }
+                            {!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>
-                            }
+                            {(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
+                            {!disabled ? (
+                                <div
                                     style={{
                                         transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
                                     }}
-                                    className={`${styles['arrow-icon']}`}>
+                                    className={`${styles['arrow-icon']}`}
+                                >
                                     {arrowIcon ? arrowIcon : <ReactArrowIcon />}
-                                </div> : ''
-                            }
+                                </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
-                    }
+                    {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>
-                    : ''
-            }
+
+            {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,
@@ -427,4 +522,4 @@ Select.propTypes = {
 
     boxShadow: PropTypes.string,
     boxShadowHover: PropTypes.string,
-};
+}