「よくあるテーブル」などで絞り込み条件を入力するためのドロップダウンコンポーネントです。Checkbox/RadioButton/日付などの入力要素をドロップダウンパネル内に配置し、絞り込みの適用・解除を提供するときに使います。
import
import { FilterDropdown } from 'smarthr-ui'
Props
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| trigger | ReactNode | { children: ReactNode; size?: ButtonProps; onlyIcon?: boolean | { component?: ComponentType |
- | - | 引き金となるボタン |
| applyText | ReactNode | - | - | - |
| cancelText | ReactNode | - | - | - |
| resetText | ReactNode | - | - | - |
| filtered | boolean | { iconAlt?: ReactNode; } | - | - | - |
| responseStatus | ResponseStatus | - | - | - |
| onApply | MouseEventHandler |
- | ✓ | - |
| onCancel | MouseEventHandler |
- | - | - |
| onReset | MouseEventHandler |
- | - | - |
| onOpen | () => void | - | - | - |
| onClose | () => void | - | - | - |
実装ルール
FilterDropdown に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
使い方チェックリスト
使用上の注意 > 絞り込みのUIが複雑で、エリアを十分に確保できない場合はActionDialogを使用する
- [must] パネル内に Checkbox や RadioButton、Input[type=date] などを配置することでユースケースを達成できる場合は FilterDropdown を使用する
- [should] 絞り込みの UI が複雑で、ドロップダウンパネルではエリアを十分に確保できない場合は ActionDialog の使用を検討する
- ActionDialog の呼び出しは FilterDropdown ではなく「フィルター」ボタンで行う
レイアウト > [WIP] モバイル > ドロップダウンパネル
- [must] モバイル端末ではドロップダウンパネルを ActionDialog を用いてモーダルに表示する