# Component/DropdownFilter

> Props: component-dropdownfilter.props.txt

## Examples


### All Check

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

### 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',
    startIcon: <IconCircleInfoFill />,
    options,
    showFilter: 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} showFilter value={value} onChange={onChange} />
      </Stack>;
  }
}
```

### Custom Width

```tsx
{
  args: {
    label: 'Label',
    startIcon: <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',
    startIcon: <IconCircleInfoFill />,
    options,
    disabled: true
  },
  render: args => {
    return <DropdownFilter {...args} />;
  }
}
```

### Disabled Item

```tsx
{
  args: {
    label: 'Label',
    startIcon: <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',
    startIcon: <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} />;
  }
}
```

### 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} />;
  }
}
```

### Selected

```tsx
{
  args: {
    label: 'Label',
    startIcon: <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',
    startIcon: <IconCircleInfoFill />,
    showFilter: 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',
    startIcon: <IconCircleInfoFill />,
    options,
    kind: '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>;
  }
}
```

### Show Filter

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

### Size

```tsx
{
  args: {
    label: 'Label',
    startIcon: <IconCircleWon />,
    options,
    showFilter: 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} showFilter size='large' value={value} onChange={onChange} />
            <DropdownFilter {...args} showFilter size='medium' value={value} onChange={onChange} />
            <DropdownFilter {...args} showFilter size='small' value={value} onChange={onChange} />
            <DropdownFilter {...args} showFilter size='xsmall' value={value} onChange={onChange} />
          </Stack>
        </Stack>
      </Stack>;
  }
}
```

### With Help Text

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