Merge pull request #25 from KieIO/tanle

Tanle SelectCommon
This commit is contained in:
lytrankieio123 2021-09-08 15:33:31 +07:00 committed by GitHub
commit 03a3e8c24f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 93 additions and 86 deletions

View File

@ -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{
.selectOptionWrapper{
&:hover {
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;
}
}

View File

@ -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 [isActive, setActive] = useState(false)
const [selectedName, setSelectedName] = useState(children)
const ref = useRef<HTMLDivElement>(null)
const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
const [selectedName, setSelectedName] = useState(placeholder)
const [selectedValue, setSelectedValue] = useState('')
useEffect(() => {
const handleClick = (event: MouseEvent) => {
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) => {
const changeSelectedName = (item:string, value: string) => {
setSelectedValue(value)
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>
</>
)
}

View File

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

View File

@ -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>

View File

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