# Component/DropdownFilter

> Props: component-dropdownfilter.props.txt

## Examples


### Base

```tsx
{
  args: {
    label: 'Label',
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownFilter {...args} value={value} onChange={onChange} />;
  }
}
```

### Custom Max Height

최대 높이는 필터검색 및 하단 적용 bottom 버튼 영역을 제외한 옵션리스트 내부의 높이를 지정할 수 있습니다.

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    options,
    hasFilter: false,
    maxHeight: 100
  },
  parameters: {
    docs: {
      description: {
        story: '최대 높이는 필터검색 및 하단 적용 bottom 버튼 영역을 제외한 옵션리스트 내부의 높이를 지정할 수 있습니다.'
      }
    }
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <Stack direction='column' gap={20}>
        <DropdownFilter {...args} value={value} onChange={onChange} />
        <DropdownFilter {...args} hasFilter value={value} onChange={onChange} />
      </Stack>;
  }
}
```

### Custom Width

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    options,
    width: 250,
    optionsMatchRefWidth: true
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownFilter {...args} value={value} onChange={onChange} />;
  }
}
```

### Default Values

```tsx
{
  args: {
    label: 'Label',
    options
  },
  render: args => {
    const defaultValues = [1, 2, 5];
    const [value, onChange] = useState<(string | number)[]>(defaultValues);
    return <DropdownFilter {...args} value={value} defaultValues={defaultValues} onChange={(values: (string | number)[]) => onChange(values)} />;
  }
}
```

### Disabled

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    options,
    disabled: true
  },
  render: args => {
    return <DropdownFilter {...args} />;
  }
}
```

### Disabled Item

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    options: [{
      label: 'apple',
      value: 1
    }, {
      label: 'orange',
      value: 2,
      disabled: true
    }, {
      label: 'mango',
      value: 3
    }, {
      label: 'lemon',
      value: 4,
      disabled: true
    }]
  },
  render: args => {
    return <DropdownFilter {...args} />;
  }
}
```

### Error

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    options,
    status: 'error'
  },
  render: args => {
    return <DropdownFilter {...args} />;
  }
}
```

### External Edit

```tsx
{
  args: {
    label: 'Label',
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    useEffect(() => {
      const timerId = setInterval(() => {
        onChange(() => Math.random() > 0.5 ? [Math.floor(Math.random() * 8) + 1] : []);
      }, 3000);
      return () => {
        clearInterval(timerId);
      };
    }, []);
    return <DropdownFilter {...args} value={value} onChange={onChange} />;
  }
}
```

### Has Filter

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    options,
    hasFilter: true,
    optionFilter: (inputValue, {
      label
    }) => label.includes(inputValue)
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownFilter value={value} {...args} onChange={value => {
      onChange(value);
    }} />;
  }
}
```

### Has Select All

```tsx
{
  args: {
    label: 'Label',
    options,
    hasSelectAll: true
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownFilter value={value} {...args} onChange={value => {
      onChange(value);
    }} />;
  }
}
```

### Helper Text

```tsx
{
  args: {
    label: 'Label',
    helperText: 'info message',
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownFilter {...args} value={value} onChange={onChange} />;
  }
}
```

### Label With Help Text

`label`은 ReactNode이므로 도움말 아이콘 같은 부가 요소를 직접 조합할 수 있습니다. 요소 사이 간격은 컴포넌트가 4px로 처리합니다.
`Popover`는 기본값이 hover로 열리므로 트리거의 mousedown과 충돌하지 않습니다. 클릭으로 열리는 요소를 넣어야 한다면 `onMouseDown`에서 이벤트 전파를 막아야 합니다.

```tsx
{
  args: {
    leftIcon: <IconCircleWon />,
    options,
    valueText: '선택한 값'
  },
  parameters: {
    docs: {
      description: {
        story: ['`label`은 ReactNode이므로 도움말 아이콘 같은 부가 요소를 직접 조합할 수 있습니다. 요소 사이 간격은 컴포넌트가 4px로 처리합니다.', '`Popover`는 기본값이 hover로 열리므로 트리거의 mousedown과 충돌하지 않습니다. 클릭으로 열리는 요소를 넣어야 한다면 `onMouseDown`에서 이벤트 전파를 막아야 합니다.'].join('\n')
      }
    }
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownFilter {...args} label={<>
            Label
            <Popover content={<HelpText title='레이블 도움말' contents={[{
        content: '이 필터가 무엇을 좁히는지 설명합니다.'
      }]} />}>
              <Stack align='center'>
                <IconCircleQuestion size={14} color={semantic_colors.content.tertiary} />
              </Stack>
            </Popover>
          </>} value={value} onChange={onChange} />;
  }
}
```

### Selected

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([2, 3, 6]);
    return <DropdownFilter {...args} value={value} onChange={(value: (string | number)[]) => onChange(value)} />;
  }
}
```

### Selection Group

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    hasFilter: true,
    optionFilter: (inputValue, {
      label
    }) => label.includes(inputValue),
    selectionGroup
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownFilter value={value} {...args} onChange={onChange} />;
  }
}
```

### Selection Radio Type

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    options,
    variant: 'radio'
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    const [group_value, onChangeGroup] = useState<(string | number)[]>([]);
    return <Stack direction='column' gap={20}>
        <Stack direction='column' gap={8}>
          <BaseText>기본</BaseText>
          <DropdownFilter {...args} value={value} onChange={onChange} />
        </Stack>
        <Stack direction='column' gap={8}>
          <BaseText>Selection Group</BaseText>
          <DropdownFilter {...args} value={group_value} onChange={onChangeGroup} selectionGroup={selectionGroup} />
        </Stack>
      </Stack>;
  }
}
```

### Size

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleWon />,
    options,
    hasFilter: true
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <Stack direction='column' gap={20}>
        <Stack direction='column' gap={8}>
          <BaseText>기본</BaseText>
          <Stack direction='row' gap={20}>
            <DropdownFilter {...args} size='large' value={value} onChange={onChange} />
            <DropdownFilter {...args} size='medium' value={value} onChange={onChange} />
            <DropdownFilter {...args} size='small' value={value} onChange={onChange} />
            <DropdownFilter {...args} size='xsmall' value={value} onChange={onChange} />
          </Stack>
        </Stack>
        <Stack direction='column' gap={8}>
          <BaseText>필터 사용</BaseText>
          <Stack direction='row' gap={20}>
            <DropdownFilter {...args} hasFilter size='large' value={value} onChange={onChange} />
            <DropdownFilter {...args} hasFilter size='medium' value={value} onChange={onChange} />
            <DropdownFilter {...args} hasFilter size='small' value={value} onChange={onChange} />
            <DropdownFilter {...args} hasFilter size='xsmall' value={value} onChange={onChange} />
          </Stack>
        </Stack>
      </Stack>;
  }
}
```

### Value Text Ellipsis

너비가 부족하면 레이블이 아니라 선택한 값이 말줄임 처리됩니다.

```tsx
{
  args: {
    label: 'Label',
    options,
    width: 220,
    valueText: 'apple, orange, mango, lemon, lime, kiwi'
  },
  parameters: {
    docs: {
      description: {
        story: '너비가 부족하면 레이블이 아니라 선택한 값이 말줄임 처리됩니다.'
      }
    }
  },
  render: args => <DropdownFilter {...args} value={[]} onChange={() => undefined} />
}
```

### With Help Text

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    options,
    helperText: 'info message'
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownFilter value={value} {...args} onChange={onChange} />;
  }
}
```

### With Icon

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleInfoFill />,
    options
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([]);
    return <DropdownFilter {...args} value={value} onChange={onChange} />;
  }
}
```

### With Value Text

`valueText`를 전달하면 레이블 우측에 구분선과 선택한 값이 함께 표시됩니다.
컴포넌트는 선택 상태를 어떤 문자열로 보여줄지 알 수 없으므로 표시할 값은 호출하는 쪽에서 계산합니다.
`leftIcon`은 레이블 앞이 아니라 선택한 값 앞으로 이동합니다.

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleWon />,
    options
  },
  parameters: {
    docs: {
      description: {
        story: ['`valueText`를 전달하면 레이블 우측에 구분선과 선택한 값이 함께 표시됩니다.', '컴포넌트는 선택 상태를 어떤 문자열로 보여줄지 알 수 없으므로 표시할 값은 호출하는 쪽에서 계산합니다.', '`leftIcon`은 레이블 앞이 아니라 선택한 값 앞으로 이동합니다.'].join('\n')
      }
    }
  },
  render: args => {
    const [value, onChange] = useState<(string | number)[]>([2]);
    return <DropdownFilter {...args} value={value} valueText={findOptionLabels(value) || '전체'} onChange={onChange} />;
  }
}
```

### With Value Text Size

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleWon />,
    options,
    valueText: '선택한 값'
  },
  render: args => <Stack direction='row' gap={20} align='flex-start'>
      <DropdownFilter {...args} size='large' value={[]} onChange={() => undefined} />
      <DropdownFilter {...args} size='medium' value={[]} onChange={() => undefined} />
      <DropdownFilter {...args} size='small' value={[]} onChange={() => undefined} />
      <DropdownFilter {...args} size='xsmall' value={[]} onChange={() => undefined} />
    </Stack>
}
```

### With Value Text Status

구분선 색은 상태에 따라 달라집니다. 선택 상태는 accent, error 상태는 negative 계열을 사용합니다.

```tsx
{
  args: {
    label: 'Label',
    leftIcon: <IconCircleWon />,
    options,
    valueText: '선택한 값'
  },
  parameters: {
    docs: {
      description: {
        story: '구분선 색은 상태에 따라 달라집니다. 선택 상태는 accent, error 상태는 negative 계열을 사용합니다.'
      }
    }
  },
  render: args => <Stack direction='column' gap={20}>
      <Stack direction='column' gap={8}>
        <BaseText>기본</BaseText>
        <DropdownFilter {...args} value={[]} onChange={() => undefined} />
      </Stack>
      <Stack direction='column' gap={8}>
        <BaseText>선택</BaseText>
        <DropdownFilter {...args} value={[2]} onChange={() => undefined} />
      </Stack>
      <Stack direction='column' gap={8}>
        <BaseText>Error</BaseText>
        <DropdownFilter {...args} status='error' value={[]} onChange={() => undefined} />
      </Stack>
      <Stack direction='column' gap={8}>
        <BaseText>Disabled</BaseText>
        <DropdownFilter {...args} disabled value={[2]} onChange={() => undefined} />
      </Stack>
    </Stack>
}
```