본문으로 건너뛰기

Dropdown

간단하게 드롭다운을 만들 수 있는 컴포넌트입니다.

드롭다운 부분은 useContextMenu 를 이용하여 구현되어 있습니다. 그래서 열림/닫힘에 관한 특성도 ContextMenu 를 따르게 됩니다.

const MyDropdown = forwardRef<DropdownControl, {list:string[]}>(({list}, ref)=>{

  const control = useRef<DropdownControl>();

  const [open, setOpen] = useState(false);
  useEffect(()=>{
    const down = ()=>{
      setOpen(false)
    }
    window.addEventListener('mousedown', down);
    return ()=>{
      window.removeEventListener('mousedown', down);
    }
  }, [])

  useImperativeHandle(ref, () => (control.current), []);

  return <Dropdown
  ref={control}
  fitContextToTitle 
  containerWidth='200px'
  title='선택'
  style={{ width: '100%', height:'40px', background:open? '#f4f2f2' : 'white' }}
  icon={<DropdownIcon open={open} />}
  dropdownGap={5}
  onClick={()=>{
    setOpen(control.current?.getShowState());
  }}
  >
    <div style={{ width: '100%', background: 'white', border: '1px solid black', padding: '5px 10px' }}>
      {list.map((name)=>{
        return <div>{name}</div>
      })}
    </div>
  </Dropdown>
})

export function DropdownBasic(){
  return <Frame>
    <Flex rowDirection flexGap="10px">
      <MyDropdown list={['선택1','선택2','선택3']} />
      <MyDropdown list={['두번째 선택1','두번째 선택2','두번째 선택3']} />
      <MyDropdown list={['세번째 선택1']} />
    </Flex>
  </Frame>
}

위의 예시에서 보면 하나의 드롭다운이 열리면 기존에 열려있던 다른 드롭다운들은 자동으로 닫히게 됩니다. 더 정확히는, 모든 useContextMenu 로 생성된 컴포넌트는 모두 숨겨집니다.

속성 설명​

(optional) title​

title = ReactNode

드롭다운의 기본 타이틀을 설정합니다.

ReactNode 타입이므로 string 뿐만 아니라 다른 컴포넌트를 사용할 수도 있습니다.

(optional) icon​

icon = ReactNode

드롭다운의 아이콘 부분을 설정합니다.

값을 설정하지 않으면 기본 아이콘이 보입니다.

title 과 icon 은 서로 flex 의 space-between 으로 정렬되어 있으므로 둘 중 어느 하나가 없으면 왼쪽으로 정렬됩니다.

(optional) style​

style = React.CSSProperties

드롭다운의 메인 요소인 button 엘레먼트의 스타일을 지정할 수 있습니다.

(optional) disabled​

disabled = boolean

드롭다운의 메인 요소인 button 엘레먼트의 disabled 속성을 지정할 수 있습니다.

(optional) dropdownGap​

dropdownGap = number

메인 요소와 드롭다운 부분의 세로방향 gap 을 설정합니다.

만약 이 값을 "5px" 로 설정하면 드롭다운은 메인요소보다 아래로 5px 떨어진 곳에 보여집니다.

(optional) dropdownGapLeft​

dropdownGapLeft = number

메인 요소와 드롭다운 부분의 가로방향 gap 을 설정합니다.

만약 이 값을 "5px" 로 설정하면 드롭다운은 메인요소보다 오른쪽으로 5px 떨어진 곳에 보여집니다.

(optional) fitContextToTitle​

fitContextToTitle = boolean

메인 요소와 드롭다운의 크기를 맞출지의 여부입니다. 기본값은 true 입니다.

만약 이 값이 false 이면 드롭다운의 children 으로 넣은 ReactNode 가 그대로 표현됩니다.

(optional) containerWidth​

containerWidth = boolean

드롭다운의 폭을 고정합니다.

만약 이 값을 설정하지 않으면 드롭다운의 메인 크기는 컨텐츠에 맞춰집니다. (= fit-content)

드롭다운 컨트롤​

Dropdown 컴포넌트는 ForwardRef Component 입니다. ref 를 통해 드롭다운의 컨트롤을 얻을 수 있습니다.

const control = useRef<DropdownControl>();

...
  
return <Dropdown ref={control}>
...

이 컨트롤을 이용하여 드롭다운을 직접 펼치거나 접을 수 있습니다.

show​

show = () => void

드롭다운을 펼칩니다.

hide​

hide = () => void

드롭다운을 숨깁니다.

getShowState​

getShowState = () => boolean

드롭다운의 펼친 상태를 리턴합니다.