@herca/rn-kit 0.1.107 → 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/Icon/Icon.js +144 -140
- package/lib/module/Icon/Icon.js.map +1 -1
- package/lib/module/Icon/README.md +2 -0
- package/lib/module/Icon/icons/BanOutline.js +22 -0
- package/lib/module/Icon/icons/BanOutline.js.map +1 -0
- package/lib/module/Icon/icons/PlayFill.js +22 -0
- package/lib/module/Icon/icons/PlayFill.js.map +1 -0
- package/lib/module/Input/InputSelect.js +7 -6
- package/lib/module/Input/InputSelect.js.map +1 -1
- package/lib/module/Input/README_INPUT_SELECT.md +2 -0
- 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/Icon/Icon.d.ts.map +1 -1
- package/lib/typescript/src/Icon/icons/BanOutline.d.ts +9 -0
- package/lib/typescript/src/Icon/icons/BanOutline.d.ts.map +1 -0
- package/lib/typescript/src/Icon/icons/PlayFill.d.ts +9 -0
- package/lib/typescript/src/Icon/icons/PlayFill.d.ts.map +1 -0
- package/lib/typescript/src/Icon/type.d.ts +1 -1
- package/lib/typescript/src/Icon/type.d.ts.map +1 -1
- package/lib/typescript/src/Input/InputSelect.d.ts +3 -1
- package/lib/typescript/src/Input/InputSelect.d.ts.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/Icon/Icon.tsx +144 -140
- package/src/Icon/README.md +2 -0
- package/src/Icon/icons/BanOutline.tsx +19 -0
- package/src/Icon/icons/PlayFill.tsx +19 -0
- package/src/Icon/type.tsx +2 -0
- package/src/Input/InputSelect.tsx +6 -3
- package/src/Input/README_INPUT_SELECT.md +2 -0
- package/src/Select/README_Select.md +20 -19
- package/src/Select/Select.tsx +18 -7
- package/src/Select/type.tsx +1 -0
|
@@ -2,6 +2,7 @@ import {
|
|
|
2
2
|
Badge,
|
|
3
3
|
Color,
|
|
4
4
|
Icon,
|
|
5
|
+
LabelForm,
|
|
5
6
|
Select,
|
|
6
7
|
Typography,
|
|
7
8
|
type ChipOptionProps,
|
|
@@ -18,6 +19,8 @@ type SelectProps = React.ComponentProps<typeof Select>;
|
|
|
18
19
|
type SelectPropsWithoutData = Omit<SelectProps, 'data'>;
|
|
19
20
|
|
|
20
21
|
interface Props extends React.ComponentProps<typeof Pressable> {
|
|
22
|
+
required?: boolean;
|
|
23
|
+
labelColor?: string;
|
|
21
24
|
label: string;
|
|
22
25
|
placeholder?: string;
|
|
23
26
|
options?: ChipOptionProps[];
|
|
@@ -54,6 +57,8 @@ export default function InputSelect({
|
|
|
54
57
|
subtitle,
|
|
55
58
|
badge,
|
|
56
59
|
useModal = true,
|
|
60
|
+
required,
|
|
61
|
+
labelColor,
|
|
57
62
|
...props
|
|
58
63
|
}: Props) {
|
|
59
64
|
const [isSelectOpen, setSelectOpen] = useState<boolean>(false);
|
|
@@ -80,9 +85,7 @@ export default function InputSelect({
|
|
|
80
85
|
|
|
81
86
|
return (
|
|
82
87
|
<View style={spacing.gap[4]}>
|
|
83
|
-
<
|
|
84
|
-
{label}
|
|
85
|
-
</Typography>
|
|
88
|
+
<LabelForm title={label} required={required} color={labelColor} />
|
|
86
89
|
|
|
87
90
|
<View style={[spacing.gap[4], layouting.flex.grow]}>
|
|
88
91
|
<Pressable
|
|
@@ -69,6 +69,8 @@ export default function Example() {
|
|
|
69
69
|
| `subtitle` | `string` | `undefined` | Subtitle tambahan di bawah value |
|
|
70
70
|
| `badge` | `{ value: string; color: Variant }` | `undefined` | Badge yang ditampilkan di samping value |
|
|
71
71
|
| `useModal` | `boolean` | `true` | Gunakan modal untuk menampilkan opsi |
|
|
72
|
+
| `required` | `boolean` | `false` | Untuk menampilkan indikator bintang di label |
|
|
73
|
+
| `labelColor` | `stirng` | `true` | Untuk mengubah warna label |
|
|
72
74
|
|
|
73
75
|
### Pressable Props
|
|
74
76
|
|
|
@@ -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
|
}
|