@ceed/ads 1.16.1 → 1.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FilterMenu/components/FilterableCheckboxGroup.d.ts +11 -0
- package/dist/components/FilterMenu/types.d.ts +9 -1
- package/dist/components/inputs/FilterMenu.md +20 -0
- package/dist/index.cjs +406 -376
- package/dist/index.js +182 -152
- package/framer/index.js +39 -39
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { FilterableCheckboxGroupItem } from '../types';
|
|
3
|
+
interface FilterableCheckboxGroupProps extends FilterableCheckboxGroupItem {
|
|
4
|
+
onChange?: (value: string[]) => void;
|
|
5
|
+
}
|
|
6
|
+
declare function FilterableCheckboxGroup(props: FilterableCheckboxGroupProps): React.JSX.Element | null;
|
|
7
|
+
declare namespace FilterableCheckboxGroup {
|
|
8
|
+
var displayName: string;
|
|
9
|
+
}
|
|
10
|
+
export { FilterableCheckboxGroup };
|
|
11
|
+
export default FilterableCheckboxGroup;
|
|
@@ -2,6 +2,7 @@ import type { DateRangePickerProps } from '../DateRangePicker';
|
|
|
2
2
|
import type { CurrencyInputProps } from '../CurrencyInput';
|
|
3
3
|
import type { PercentageInputProps } from '../PercentageInput';
|
|
4
4
|
import type { AutocompleteProps } from '../Autocomplete';
|
|
5
|
+
import type { FilterableCheckboxGroupProps } from '../FilterableCheckboxGroup';
|
|
5
6
|
type DateTime = string;
|
|
6
7
|
export interface FilterBaseItem<V = never> {
|
|
7
8
|
id: string;
|
|
@@ -17,6 +18,13 @@ export interface FilterCheckboxGroupItem extends FilterBaseItem<(string | number
|
|
|
17
18
|
value: string | number;
|
|
18
19
|
}[];
|
|
19
20
|
}
|
|
21
|
+
export interface FilterableCheckboxGroupItem extends FilterBaseItem<string[]>, Pick<FilterableCheckboxGroupProps, 'placeholder' | 'maxHeight'> {
|
|
22
|
+
type: 'filterable-checkbox-group';
|
|
23
|
+
options: {
|
|
24
|
+
label: string;
|
|
25
|
+
value: string;
|
|
26
|
+
}[];
|
|
27
|
+
}
|
|
20
28
|
export interface FilterRadioGroupItem extends FilterBaseItem<string | number> {
|
|
21
29
|
type: 'radio-group';
|
|
22
30
|
options: {
|
|
@@ -42,5 +50,5 @@ export interface FilterPercentageRangeItem extends FilterBaseItem<[number, numbe
|
|
|
42
50
|
export interface FilterAutocompleteItem extends FilterBaseItem<string | number>, Pick<AutocompleteProps<any, boolean>, 'options' | 'multiple' | 'placeholder'> {
|
|
43
51
|
type: 'autocomplete';
|
|
44
52
|
}
|
|
45
|
-
export type FilterItem = FilterCheckboxGroupItem | FilterRadioGroupItem | FilterDateRangeItem | FilterCurrencyInputItem | FilterCurrencyRangeItem | FilterPercentageInputItem | FilterPercentageRangeItem | FilterAutocompleteItem;
|
|
53
|
+
export type FilterItem = FilterCheckboxGroupItem | FilterableCheckboxGroupItem | FilterRadioGroupItem | FilterDateRangeItem | FilterCurrencyInputItem | FilterCurrencyRangeItem | FilterPercentageInputItem | FilterPercentageRangeItem | FilterAutocompleteItem;
|
|
46
54
|
export {};
|
|
@@ -75,6 +75,26 @@ FilterMenu는 다음과 같은 필터 타입을 지원합니다:
|
|
|
75
75
|
}
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
+
### Filterable Checkbox Group
|
|
79
|
+
|
|
80
|
+
검색 기능이 포함된 체크박스 그룹 필터입니다. 옵션이 많을 때 유용합니다.
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
{
|
|
84
|
+
id: 'categories',
|
|
85
|
+
type: 'filterable-checkbox-group',
|
|
86
|
+
label: 'Categories',
|
|
87
|
+
options: [
|
|
88
|
+
{ label: 'Electronics', value: 'electronics' },
|
|
89
|
+
{ label: 'Clothing', value: 'clothing' },
|
|
90
|
+
{ label: 'Food', value: 'food' },
|
|
91
|
+
{ label: 'Books', value: 'books' },
|
|
92
|
+
],
|
|
93
|
+
placeholder: 'Search categories...',
|
|
94
|
+
maxHeight: 300,
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
78
98
|
### Radio Group
|
|
79
99
|
|
|
80
100
|
단일 선택이 가능한 라디오 버튼 그룹 필터입니다.
|