Merge pull request #25 from KieIO/tanle

Tanle SelectCommon

src/components/common/SelectCommon/SelectCommon.module.scss

@@ -2,6 +2,11 @@
 
 .select {
     background-color: var(--white);
+    .selectTrigger {
+        svg {
+            @apply transition-all duration-200;
+        }
+    }
     &.base {
         width: 20.6rem;
         .selectTrigger {
@@ -28,9 +33,16 @@
             color: var(--text-label);
         }
     }
-    &.isActive{
+    &:hover {
-        .selectOptionWrapper{
+        cursor: pointer;
+        .hoverWrapper {
             @apply block;
+            animation: SelectAnimation 0.2s ease-out;
+        }
+        .selectTrigger {
+            svg {
+                transform: rotate(180deg);
+            }
         }
     }
 }
@@ -38,14 +50,14 @@
     @apply outline-none flex justify-between;
     color: var(--text-active);
     border-radius: 0.8rem;
-
 }
+.hoverWrapper {
+    @apply hidden outline-none absolute z-10;
+    padding-top: 0.6rem;
     .selectOptionWrapper {
-    @apply outline-none hidden z-10 absolute;
         border-radius: 0.8rem;
         background-color: var(--white);
         padding: 0.4rem 0rem 0.4rem 0rem;
-    margin-top: 0.6rem;
         &.base {
             width: 20.6rem;
         }
@@ -60,10 +72,19 @@
             border-color: var(--border-line);
             color: var(--text-label);
         }
-    &.active{
+    }
-        @apply hidden;
+    &:hover {
+        @apply block;
     }
 }
 
-
+@keyframes SelectAnimation {
-
+    0% {
+        opacity: 0;
+        transform: translateY(1.6rem);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}

src/components/common/SelectCommon/SelectCommon.tsx

@@ -1,43 +1,25 @@
 import s from './SelectCommon.module.scss'
 import classNames from 'classnames'
-import { useState, useRef, useEffect } from 'react'
+import { useState } from 'react'
 import { IconVectorDown } from 'src/components/icons'
 import SelectOption from './SelectOption/SelectOption'
 
 interface Props {
-    children? : React.ReactNode,
+    placeholder? : string,
     size?: 'base' | 'large',
     type?: 'default' | 'custom',
-    option: {name: string}[],
+    option: {name: string, value: string}[],
+    onChange?: (value: string) => void,
 }
 
-const SelectCommon = ({ type = 'default', size = 'base', option, children }: Props) => {
+const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
-    const [isActive, setActive] = useState(false)
+    const [selectedName, setSelectedName] = useState(placeholder)
-    const [selectedName, setSelectedName] = useState(children)
+    const [selectedValue, setSelectedValue] = useState('')
-    const ref = useRef<HTMLDivElement>(null)
 
-    useEffect(() => {
+    const changeSelectedName = (item:string, value: string) => {
-        const handleClick = (event: MouseEvent) => {
+        setSelectedValue(value)
-            const { target } = event;
-            if (!ref?.current || ref?.current.contains(target as Node)) {
-                return 
-            }
-            else{
-                setActive(false)
-            }
-        }
-        document.addEventListener('click', handleClick)
-        return () => {
-            document.removeEventListener('click', handleClick)
-        }
-    }, [ref])
-
-    const changeActiveStatus = () => {
-        setActive(!isActive)
-    }
-
-    const changeSelectedName = (item:string) => {
         setSelectedName(item)
+        onChange && onChange(value)
     }
     return(
         <>
@@ -45,10 +27,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                 [s.select] : true,
                 [s[size]] : !!size,
                 [s[type]] : !!type,
-                [s.isActive] : isActive,
             })}
-                onClick = { changeActiveStatus }
-                ref = {ref}
             >
                 <div className={classNames({
                     [s.selectTrigger] : true,
@@ -56,6 +35,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                 })}
                 >{selectedName}<IconVectorDown /></div>
                 
+                <div className={s.hoverWrapper}>
                     <div className={classNames({
                         [s.selectOptionWrapper] : true,
                         [s[type]] : !!type,
@@ -64,11 +44,13 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                     >   
                         {
                             option.map(item => 
-                            <SelectOption itemName={item.name} onClick={changeSelectedName} size={size} />
+                                <SelectOption key={item.value} itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
                             )
                         }
                     </div>
                 </div>
+
+            </div>
         </>
     )
 }

src/components/common/SelectCommon/SelectOption/SelectOption.module.scss

@@ -13,5 +13,9 @@
     }
     &:hover{
         background-color: var(--gray);
+        color: var(--primary);
+    }
+    &.isChoose{
+        background-color: var(--gray);
     }
 }

src/components/common/SelectCommon/SelectOption/SelectOption.tsx

@@ -2,20 +2,22 @@ import s from './SelectOption.module.scss'
 import classNames from 'classnames'
 
 interface Props{
-    onClick: (value: string) => void,
+    onClick: (name: string, value: string) => void,
     itemName: string,
     size: 'base' | 'large',
+    value: string,
+    selected?: boolean,
 }
 
-const SelectOption = ({onClick, itemName, size}: Props) => {
+const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
-
     const changeName  = () => {
-        onClick(itemName)
+        onClick(itemName, value)
     }
     return(
         <div className={classNames({
             [s.selectOption] : true,
             [s[size]] : !!size,
+            [s.isChoose] : selected ,
         })}
             onClick = {changeName}
         >{itemName}</div>

src/components/icons/IconVectorDown.tsx

@@ -1,5 +1,3 @@
-
-
 const IconVectorDown = ({ ...props }) => {
     return (
       <svg