@herca/rn-kit 0.1.108 → 0.1.109
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/lib/module/Select/README_Select.md +20 -19
- package/lib/module/Select/Select.js +13 -8
- package/lib/module/Select/Select.js.map +1 -1
- package/lib/typescript/src/Select/Select.d.ts +1 -1
- package/lib/typescript/src/Select/Select.d.ts.map +1 -1
- package/lib/typescript/src/Select/type.d.ts +1 -0
- package/lib/typescript/src/Select/type.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Select/README_Select.md +20 -19
- package/src/Select/Select.tsx +18 -7
- package/src/Select/type.tsx +1 -0
|
@@ -14,25 +14,26 @@ Komponen `Select` adalah komponen pemilihan data berbasis bottom sheet dengan du
|
|
|
14
14
|
|
|
15
15
|
## 📦 Props
|
|
16
16
|
|
|
17
|
-
| Prop
|
|
18
|
-
|
|
|
19
|
-
| `isOpen`
|
|
20
|
-
| `data`
|
|
21
|
-
| `multiple`
|
|
22
|
-
| `renderItem`
|
|
23
|
-
| `onSubmit`
|
|
24
|
-
| `onClose`
|
|
25
|
-
| `onSearch`
|
|
26
|
-
| `required`
|
|
27
|
-
| `loading`
|
|
28
|
-
| `delaySearch`
|
|
29
|
-
| `height`
|
|
30
|
-
| `onRefresh`
|
|
31
|
-
| `header`
|
|
32
|
-
| `footer`
|
|
33
|
-
| `submitBtnLabel`
|
|
34
|
-
| `refreshing`
|
|
35
|
-
| `onEndReached`
|
|
17
|
+
| Prop | Tipe | Default | Keterangan |
|
|
18
|
+
| ------------------ | -------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
19
|
+
| `isOpen` | `boolean` | `false` | Menentukan apakah bottom sheet terbuka |
|
|
20
|
+
| `data` | `ChipOptionProps[]` | - | Data pilihan untuk ditampilkan |
|
|
21
|
+
| `multiple` | `boolean` | `false` | Mengizinkan multiple selection |
|
|
22
|
+
| `renderItem` | `(item, selected, disabled) => React.ReactNode` | - | Kustom tampilan item |
|
|
23
|
+
| `onSubmit` | `(selected: ChipSelectedProps) => void` | - | Callback saat tombol submit ditekan |
|
|
24
|
+
| `onClose` | `(val: boolean) => void` | - | Callback saat bottom sheet ditutup |
|
|
25
|
+
| `onSearch` | `(val: string) => void` | - | Callback saat input pencarian berubah, dipanggil setelah debounce berdasarkan `delaySearch` |
|
|
26
|
+
| `required` | `boolean` | `false` | Jika `true`, user wajib memilih minimal 1 item sebelum bisa submit. Untuk single select, item pertama akan langsung disubmit saat dipilih. |
|
|
27
|
+
| `loading` | `boolean` | `false` | Menampilkan loading saat data di-fetch |
|
|
28
|
+
| `delaySearch` | `number` | `300` | Delay pencarian dalam milidetik |
|
|
29
|
+
| `height` | `BottomSheetHeighProps` | - | Ukuran tinggi BottomSheet |
|
|
30
|
+
| `onRefresh` | `() => void` | - | Callback saat pull-to-refresh dilakukan |
|
|
31
|
+
| `header` | ReactElement | – | Jika ingin chip mempunyai header. |
|
|
32
|
+
| `footer` | ReactElement | – | Jika ingin chip mempunyai footer. |
|
|
33
|
+
| `submitBtnLabel` | `string` | 'Lanjutkan' | Label tombol submit saat multiple select |
|
|
34
|
+
| `refreshing` | `boolean` | `false` | Status untuk pull-to-refresh |
|
|
35
|
+
| `onEndReached` | `() => void` | - | Dipanggil saat scroll mencapai akhir list |
|
|
36
|
+
| `onSelectedChange` | `onSelectedChange?: (value: ChipOptionProps[]) => void;` | - | Dipanggil saat selected berubah |
|
|
36
37
|
|
|
37
38
|
## 📌 Contoh Penggunaan
|
|
38
39
|
|
|
@@ -29,18 +29,14 @@ export default function Select({
|
|
|
29
29
|
onEndReached,
|
|
30
30
|
submitBtnLabel,
|
|
31
31
|
searchValue,
|
|
32
|
-
value
|
|
32
|
+
value,
|
|
33
|
+
onSelectedChange
|
|
33
34
|
}) {
|
|
34
|
-
// const [isOpenSelect, setIsOpenSelect] = useState<boolean | undefined>(false);
|
|
35
35
|
const [selected, setSelected] = useState();
|
|
36
36
|
const [searchQuery, setSearchQuery] = useState(searchValue || '');
|
|
37
37
|
const {
|
|
38
38
|
show
|
|
39
39
|
} = useToast();
|
|
40
|
-
// useEffect(() => {
|
|
41
|
-
// setIsOpenSelect(isOpen);
|
|
42
|
-
// }, [isOpen]);
|
|
43
|
-
|
|
44
40
|
const handleOnCloseBottom = useCallback(val => {
|
|
45
41
|
if (onClose) {
|
|
46
42
|
onClose?.(val);
|
|
@@ -69,10 +65,16 @@ export default function Select({
|
|
|
69
65
|
}, delaySearch);
|
|
70
66
|
};
|
|
71
67
|
useEffect(() => {
|
|
72
|
-
if (value !== undefined) {
|
|
68
|
+
if (!multiple && value !== undefined) {
|
|
73
69
|
setSelected(value);
|
|
74
70
|
}
|
|
75
|
-
}, [value]);
|
|
71
|
+
}, [value, multiple]);
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
if (multiple && isOpen) {
|
|
74
|
+
setSelected(value ?? []);
|
|
75
|
+
}
|
|
76
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
77
|
+
}, [isOpen]);
|
|
76
78
|
useEffect(() => {
|
|
77
79
|
if (searchValue !== undefined) {
|
|
78
80
|
setSearchQuery(searchValue);
|
|
@@ -122,6 +124,9 @@ export default function Select({
|
|
|
122
124
|
header: header,
|
|
123
125
|
onSelect: item => {
|
|
124
126
|
setSelected(item);
|
|
127
|
+
console.log('selected item', item);
|
|
128
|
+
const selectedData = data.filter(option => Array.isArray(item) && item.includes(option.value));
|
|
129
|
+
onSelectedChange?.(selectedData);
|
|
125
130
|
if (!multiple && required) {
|
|
126
131
|
onSubmit?.(item);
|
|
127
132
|
handleOnCloseBottom(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useState","useEffect","Keyboard","StyleSheet","TouchableWithoutFeedback","View","BottomSheet","Button","Chip","Input","Loading","useToast","useRef","jsx","_jsx","jsxs","_jsxs","Select","isOpen","data","renderItem","onClose","onSubmit","multiple","onSearch","required","loading","delaySearch","height","onRefresh","refreshing","footer","header","onEndReached","submitBtnLabel","searchValue","value","selected","setSelected","searchQuery","setSearchQuery","show","handleOnCloseBottom","val","handleOnPresSubmitSelect","length","searchTimeout","handleOnSearch","current","clearTimeout","setTimeout","undefined","title","color","disabled","onPress","children","style","styles","container","containerSearch","dismiss","accessible","submitBehavior","icon","placeholder","onChangeText","containerChip","options","direction","scrollable","size","block","onSelect","item","
|
|
1
|
+
{"version":3,"names":["useCallback","useState","useEffect","Keyboard","StyleSheet","TouchableWithoutFeedback","View","BottomSheet","Button","Chip","Input","Loading","useToast","useRef","jsx","_jsx","jsxs","_jsxs","Select","isOpen","data","renderItem","onClose","onSubmit","multiple","onSearch","required","loading","delaySearch","height","onRefresh","refreshing","footer","header","onEndReached","submitBtnLabel","searchValue","value","onSelectedChange","selected","setSelected","searchQuery","setSearchQuery","show","handleOnCloseBottom","val","handleOnPresSubmitSelect","length","searchTimeout","handleOnSearch","current","clearTimeout","setTimeout","undefined","title","color","disabled","onPress","children","style","styles","container","containerSearch","dismiss","accessible","submitBehavior","icon","placeholder","onChangeText","containerChip","options","direction","scrollable","size","block","onSelect","item","console","log","selectedData","filter","option","Array","isArray","includes","isSame","nextValue","create","marginBottom","gap","paddingBottom"],"sourceRoot":"../../../src","sources":["Select/Select.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { type SelectProps } from './type';
|
|
2
|
-
export default function Select({ isOpen, data, renderItem, onClose, onSubmit, multiple, onSearch, required, loading, delaySearch, height, onRefresh, refreshing, footer, header, onEndReached, submitBtnLabel, searchValue, value, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export default function Select({ isOpen, data, renderItem, onClose, onSubmit, multiple, onSearch, required, loading, delaySearch, height, onRefresh, refreshing, footer, header, onEndReached, submitBtnLabel, searchValue, value, onSelectedChange, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/Select/Select.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,OAAe,EACf,WAAiB,EACjB,MAAM,EACN,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,YAAY,EACZ,cAAc,EACd,WAAW,EACX,KAAK,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/Select/Select.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,OAAe,EACf,WAAiB,EACjB,MAAM,EACN,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,YAAY,EACZ,cAAc,EACd,WAAW,EACX,KAAK,EACL,gBAAgB,GACjB,EAAE,WAAW,2CA2Ib"}
|
|
@@ -27,5 +27,6 @@ export interface SelectProps {
|
|
|
27
27
|
footer?: React.ComponentType<any> | React.ReactElement | null | undefined;
|
|
28
28
|
header?: React.ComponentType<any> | React.ReactElement | null | undefined;
|
|
29
29
|
searchValue?: string;
|
|
30
|
+
onSelectedChange?: (value: ChipOptionProps[]) => void;
|
|
30
31
|
}
|
|
31
32
|
//# sourceMappingURL=type.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Select/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAClC,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,KACd,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1E,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Select/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAClC,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,KACd,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1E,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CACvD"}
|
package/package.json
CHANGED
|
@@ -14,25 +14,26 @@ Komponen `Select` adalah komponen pemilihan data berbasis bottom sheet dengan du
|
|
|
14
14
|
|
|
15
15
|
## 📦 Props
|
|
16
16
|
|
|
17
|
-
| Prop
|
|
18
|
-
|
|
|
19
|
-
| `isOpen`
|
|
20
|
-
| `data`
|
|
21
|
-
| `multiple`
|
|
22
|
-
| `renderItem`
|
|
23
|
-
| `onSubmit`
|
|
24
|
-
| `onClose`
|
|
25
|
-
| `onSearch`
|
|
26
|
-
| `required`
|
|
27
|
-
| `loading`
|
|
28
|
-
| `delaySearch`
|
|
29
|
-
| `height`
|
|
30
|
-
| `onRefresh`
|
|
31
|
-
| `header`
|
|
32
|
-
| `footer`
|
|
33
|
-
| `submitBtnLabel`
|
|
34
|
-
| `refreshing`
|
|
35
|
-
| `onEndReached`
|
|
17
|
+
| Prop | Tipe | Default | Keterangan |
|
|
18
|
+
| ------------------ | -------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
19
|
+
| `isOpen` | `boolean` | `false` | Menentukan apakah bottom sheet terbuka |
|
|
20
|
+
| `data` | `ChipOptionProps[]` | - | Data pilihan untuk ditampilkan |
|
|
21
|
+
| `multiple` | `boolean` | `false` | Mengizinkan multiple selection |
|
|
22
|
+
| `renderItem` | `(item, selected, disabled) => React.ReactNode` | - | Kustom tampilan item |
|
|
23
|
+
| `onSubmit` | `(selected: ChipSelectedProps) => void` | - | Callback saat tombol submit ditekan |
|
|
24
|
+
| `onClose` | `(val: boolean) => void` | - | Callback saat bottom sheet ditutup |
|
|
25
|
+
| `onSearch` | `(val: string) => void` | - | Callback saat input pencarian berubah, dipanggil setelah debounce berdasarkan `delaySearch` |
|
|
26
|
+
| `required` | `boolean` | `false` | Jika `true`, user wajib memilih minimal 1 item sebelum bisa submit. Untuk single select, item pertama akan langsung disubmit saat dipilih. |
|
|
27
|
+
| `loading` | `boolean` | `false` | Menampilkan loading saat data di-fetch |
|
|
28
|
+
| `delaySearch` | `number` | `300` | Delay pencarian dalam milidetik |
|
|
29
|
+
| `height` | `BottomSheetHeighProps` | - | Ukuran tinggi BottomSheet |
|
|
30
|
+
| `onRefresh` | `() => void` | - | Callback saat pull-to-refresh dilakukan |
|
|
31
|
+
| `header` | ReactElement | – | Jika ingin chip mempunyai header. |
|
|
32
|
+
| `footer` | ReactElement | – | Jika ingin chip mempunyai footer. |
|
|
33
|
+
| `submitBtnLabel` | `string` | 'Lanjutkan' | Label tombol submit saat multiple select |
|
|
34
|
+
| `refreshing` | `boolean` | `false` | Status untuk pull-to-refresh |
|
|
35
|
+
| `onEndReached` | `() => void` | - | Dipanggil saat scroll mencapai akhir list |
|
|
36
|
+
| `onSelectedChange` | `onSelectedChange?: (value: ChipOptionProps[]) => void;` | - | Dipanggil saat selected berubah |
|
|
36
37
|
|
|
37
38
|
## 📌 Contoh Penggunaan
|
|
38
39
|
|
package/src/Select/Select.tsx
CHANGED
|
@@ -34,14 +34,11 @@ export default function Select({
|
|
|
34
34
|
submitBtnLabel,
|
|
35
35
|
searchValue,
|
|
36
36
|
value,
|
|
37
|
+
onSelectedChange,
|
|
37
38
|
}: SelectProps) {
|
|
38
|
-
// const [isOpenSelect, setIsOpenSelect] = useState<boolean | undefined>(false);
|
|
39
39
|
const [selected, setSelected] = useState<ChipSelectedProps>();
|
|
40
40
|
const [searchQuery, setSearchQuery] = useState<string>(searchValue || '');
|
|
41
41
|
const { show } = useToast();
|
|
42
|
-
// useEffect(() => {
|
|
43
|
-
// setIsOpenSelect(isOpen);
|
|
44
|
-
// }, [isOpen]);
|
|
45
42
|
|
|
46
43
|
const handleOnCloseBottom = useCallback(
|
|
47
44
|
(val: boolean) => {
|
|
@@ -61,7 +58,7 @@ export default function Select({
|
|
|
61
58
|
return true;
|
|
62
59
|
};
|
|
63
60
|
|
|
64
|
-
const searchTimeout = useRef<
|
|
61
|
+
const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
65
62
|
|
|
66
63
|
const handleOnSearch = (val: string) => {
|
|
67
64
|
setSearchQuery(val);
|
|
@@ -78,10 +75,17 @@ export default function Select({
|
|
|
78
75
|
};
|
|
79
76
|
|
|
80
77
|
useEffect(() => {
|
|
81
|
-
if (value !== undefined) {
|
|
78
|
+
if (!multiple && value !== undefined) {
|
|
82
79
|
setSelected(value);
|
|
83
80
|
}
|
|
84
|
-
}, [value]);
|
|
81
|
+
}, [value, multiple]);
|
|
82
|
+
|
|
83
|
+
useEffect(() => {
|
|
84
|
+
if (multiple && isOpen) {
|
|
85
|
+
setSelected(value ?? []);
|
|
86
|
+
}
|
|
87
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
88
|
+
}, [isOpen]);
|
|
85
89
|
|
|
86
90
|
useEffect(() => {
|
|
87
91
|
if (searchValue !== undefined) {
|
|
@@ -140,6 +144,13 @@ export default function Select({
|
|
|
140
144
|
header={header}
|
|
141
145
|
onSelect={(item) => {
|
|
142
146
|
setSelected(item);
|
|
147
|
+
console.log('selected item', item);
|
|
148
|
+
const selectedData = data.filter(
|
|
149
|
+
(option) => Array.isArray(item) && item.includes(option.value)
|
|
150
|
+
);
|
|
151
|
+
|
|
152
|
+
onSelectedChange?.(selectedData);
|
|
153
|
+
|
|
143
154
|
if (!multiple && required) {
|
|
144
155
|
onSubmit?.(item);
|
|
145
156
|
handleOnCloseBottom(false);
|
package/src/Select/type.tsx
CHANGED
|
@@ -34,4 +34,5 @@ export interface SelectProps {
|
|
|
34
34
|
footer?: React.ComponentType<any> | React.ReactElement | null | undefined;
|
|
35
35
|
header?: React.ComponentType<any> | React.ReactElement | null | undefined;
|
|
36
36
|
searchValue?: string;
|
|
37
|
+
onSelectedChange?: (value: ChipOptionProps[]) => void;
|
|
37
38
|
}
|