@herca/rn-kit 0.1.34 → 0.1.36
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/Accordion/Accordion.js +11 -2
- package/lib/module/Accordion/Accordion.js.map +1 -1
- package/lib/module/Accordion/AccordionItem.js +1 -0
- package/lib/module/Accordion/AccordionItem.js.map +1 -1
- package/lib/module/Accordion/README.md +14 -11
- package/lib/module/BadgeIcon/BadgeIcon.js +117 -0
- package/lib/module/BadgeIcon/BadgeIcon.js.map +1 -0
- package/lib/module/BadgeIcon/README.md +77 -0
- package/lib/module/BadgeIcon/type.js +2 -0
- package/lib/module/BadgeIcon/type.js.map +1 -0
- package/lib/module/BottomSheet/BottomSheet.js +1 -1
- package/lib/module/BottomSheet/BottomSheet.js.map +1 -1
- package/lib/module/CheckBox/CheckBox.js +65 -32
- package/lib/module/CheckBox/CheckBox.js.map +1 -1
- package/lib/module/CheckBox/CheckBoxList.js +10 -2
- package/lib/module/CheckBox/CheckBoxList.js.map +1 -1
- package/lib/module/CheckBox/README_CHECKBOX.md +10 -7
- package/lib/module/CheckBox/README_CHECKBOXLIST.md +13 -7
- package/lib/module/CheckBox/type.js +2 -0
- package/lib/module/CheckBox/type.js.map +1 -0
- package/lib/module/Icon/Icon.js +7 -1
- package/lib/module/Icon/Icon.js.map +1 -1
- package/lib/module/Icon/README.md +3 -0
- package/lib/module/Icon/icons/CopyFill.js +25 -0
- package/lib/module/Icon/icons/CopyFill.js.map +1 -0
- package/lib/module/Icon/icons/CopyTextFill.js +22 -0
- package/lib/module/Icon/icons/CopyTextFill.js.map +1 -0
- package/lib/module/Icon/icons/RadioButton.js +0 -1
- package/lib/module/Icon/icons/RadioButton.js.map +1 -1
- package/lib/module/Icon/icons/ShieldFillChecked.js +22 -0
- package/lib/module/Icon/icons/ShieldFillChecked.js.map +1 -0
- package/lib/module/Input/Input.js +19 -23
- package/lib/module/Input/Input.js.map +1 -1
- package/lib/module/Input/README_INPUT.md +17 -15
- package/lib/module/Tab/README.md +1 -0
- package/lib/module/Tab/Tab.js +58 -38
- package/lib/module/Tab/Tab.js.map +1 -1
- package/lib/module/Tab/TabItem.js.map +1 -1
- package/lib/module/Timeline/README.md +5 -5
- package/lib/module/Timeline/TimelineItem.js +4 -1
- package/lib/module/Timeline/TimelineItem.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/Accordion/Accordion.d.ts +1 -1
- package/lib/typescript/src/Accordion/Accordion.d.ts.map +1 -1
- package/lib/typescript/src/Accordion/AccordionItem.d.ts.map +1 -1
- package/lib/typescript/src/Accordion/type.d.ts +1 -0
- package/lib/typescript/src/Accordion/type.d.ts.map +1 -1
- package/lib/typescript/src/BadgeIcon/BadgeIcon.d.ts +20 -0
- package/lib/typescript/src/BadgeIcon/BadgeIcon.d.ts.map +1 -0
- package/lib/typescript/src/BadgeIcon/type.d.ts +11 -0
- package/lib/typescript/src/BadgeIcon/type.d.ts.map +1 -0
- package/lib/typescript/src/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/lib/typescript/src/CheckBox/CheckBox.d.ts +4 -0
- package/lib/typescript/src/CheckBox/CheckBox.d.ts.map +1 -1
- package/lib/typescript/src/CheckBox/CheckBoxList.d.ts +3 -0
- package/lib/typescript/src/CheckBox/CheckBoxList.d.ts.map +1 -1
- package/lib/typescript/src/CheckBox/type.d.ts +2 -0
- package/lib/typescript/src/CheckBox/type.d.ts.map +1 -0
- package/lib/typescript/src/Icon/Icon.d.ts.map +1 -1
- package/lib/typescript/src/Icon/icons/CopyFill.d.ts +9 -0
- package/lib/typescript/src/Icon/icons/CopyFill.d.ts.map +1 -0
- package/lib/typescript/src/Icon/icons/CopyTextFill.d.ts +9 -0
- package/lib/typescript/src/Icon/icons/CopyTextFill.d.ts.map +1 -0
- package/lib/typescript/src/Icon/icons/ShieldFillChecked.d.ts +9 -0
- package/lib/typescript/src/Icon/icons/ShieldFillChecked.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/Input.d.ts.map +1 -1
- package/lib/typescript/src/Input/type.d.ts +1 -0
- package/lib/typescript/src/Input/type.d.ts.map +1 -1
- package/lib/typescript/src/Tab/Tab.d.ts.map +1 -1
- package/lib/typescript/src/Tab/TabItem.d.ts.map +1 -1
- package/lib/typescript/src/Tab/type.d.ts +2 -1
- package/lib/typescript/src/Tab/type.d.ts.map +1 -1
- package/lib/typescript/src/Timeline/TimelineItem.d.ts +3 -0
- package/lib/typescript/src/Timeline/TimelineItem.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Accordion/Accordion.tsx +15 -3
- package/src/Accordion/AccordionItem.tsx +5 -1
- package/src/Accordion/README.md +14 -11
- package/src/Accordion/type.tsx +1 -0
- package/src/BadgeIcon/BadgeIcon.tsx +126 -0
- package/src/BadgeIcon/README.md +77 -0
- package/src/BadgeIcon/type.tsx +21 -0
- package/src/BottomSheet/BottomSheet.tsx +3 -1
- package/src/CheckBox/CheckBox.tsx +45 -29
- package/src/CheckBox/CheckBoxList.tsx +12 -0
- package/src/CheckBox/README_CHECKBOX.md +10 -7
- package/src/CheckBox/README_CHECKBOXLIST.md +13 -7
- package/src/CheckBox/type.ts +9 -0
- package/src/Icon/Icon.tsx +6 -0
- package/src/Icon/README.md +3 -0
- package/src/Icon/icons/CopyFill.tsx +23 -0
- package/src/Icon/icons/CopyTextFill.tsx +29 -0
- package/src/Icon/icons/RadioButton.tsx +1 -1
- package/src/Icon/icons/ShieldFillChecked.tsx +23 -0
- package/src/Icon/type.tsx +3 -0
- package/src/Input/Input.tsx +17 -25
- package/src/Input/README_INPUT.md +17 -15
- package/src/Input/type.tsx +1 -0
- package/src/Tab/README.md +1 -0
- package/src/Tab/Tab.tsx +68 -44
- package/src/Tab/TabItem.tsx +1 -1
- package/src/Tab/type.tsx +2 -1
- package/src/Timeline/README.md +5 -5
- package/src/Timeline/TimelineItem.tsx +3 -0
- package/src/index.tsx +1 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { useState, useEffect } from 'react';
|
|
4
|
-
import { TouchableOpacity, View } from 'react-native';
|
|
4
|
+
import { StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
5
5
|
import List from "../List/List.js";
|
|
6
6
|
import ListItem from "../List/ListItem.js";
|
|
7
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -9,7 +9,8 @@ export default function Accordion({
|
|
|
9
9
|
children,
|
|
10
10
|
renderHeader,
|
|
11
11
|
isOpen,
|
|
12
|
-
onCollapse
|
|
12
|
+
onCollapse,
|
|
13
|
+
variant = 'default'
|
|
13
14
|
}) {
|
|
14
15
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
15
16
|
const toggle = () => {
|
|
@@ -21,13 +22,21 @@ export default function Accordion({
|
|
|
21
22
|
}, [isOpen]);
|
|
22
23
|
return /*#__PURE__*/_jsx(View, {
|
|
23
24
|
children: /*#__PURE__*/_jsxs(List, {
|
|
25
|
+
style: variant === 'borderless' ? styles.borderless : undefined,
|
|
24
26
|
children: [renderHeader && /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
25
27
|
onPress: toggle,
|
|
26
28
|
children: /*#__PURE__*/_jsx(ListItem, {
|
|
29
|
+
style: variant === 'borderless' ? styles.borderless : undefined,
|
|
27
30
|
children: renderHeader
|
|
28
31
|
})
|
|
29
32
|
}), isExpanded && React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child) : child)]
|
|
30
33
|
})
|
|
31
34
|
});
|
|
32
35
|
}
|
|
36
|
+
const styles = StyleSheet.create({
|
|
37
|
+
borderless: {
|
|
38
|
+
borderWidth: 0,
|
|
39
|
+
borderBottomWidth: 0
|
|
40
|
+
}
|
|
41
|
+
});
|
|
33
42
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useEffect","TouchableOpacity","View","List","ListItem","jsx","_jsx","jsxs","_jsxs","Accordion","children","renderHeader","isOpen","onCollapse","isExpanded","setIsExpanded","toggle","onPress","Children","map","child","isValidElement","cloneElement"],"sourceRoot":"../../../src","sources":["Accordion/Accordion.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,gBAAgB,EAAEC,IAAI,QAAQ,cAAc;
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","StyleSheet","TouchableOpacity","View","List","ListItem","jsx","_jsx","jsxs","_jsxs","Accordion","children","renderHeader","isOpen","onCollapse","variant","isExpanded","setIsExpanded","toggle","style","styles","borderless","undefined","onPress","Children","map","child","isValidElement","cloneElement","create","borderWidth","borderBottomWidth"],"sourceRoot":"../../../src","sources":["Accordion/Accordion.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,UAAU,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,cAAc;AACjE,OAAOC,IAAI,MAAM,iBAAc;AAC/B,OAAOC,QAAQ,MAAM,qBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGxC,eAAe,SAASC,SAASA,CAAC;EAChCC,QAAQ;EACRC,YAAY;EACZC,MAAM;EACNC,UAAU;EACVC,OAAO,GAAG;AACI,CAAC,EAAE;EACjB,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGlB,QAAQ,CAAU,KAAK,CAAC;EAC5D,MAAMmB,MAAM,GAAGA,CAAA,KAAM;IACnBJ,UAAU,GAAGE,UAAU,GAAG,KAAK,GAAG,IAAI,CAAC;IACvCC,aAAa,CAACD,UAAU,GAAG,KAAK,GAAG,IAAI,CAAC;EAC1C,CAAC;EAEDhB,SAAS,CAAC,MAAM;IACdiB,aAAa,CAACJ,MAAM,IAAI,KAAK,CAAC;EAChC,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,oBACEN,IAAA,CAACJ,IAAI;IAAAQ,QAAA,eACHF,KAAA,CAACL,IAAI;MAACe,KAAK,EAAEJ,OAAO,KAAK,YAAY,GAAGK,MAAM,CAACC,UAAU,GAAGC,SAAU;MAAAX,QAAA,GACnEC,YAAY,iBACXL,IAAA,CAACL,gBAAgB;QAACqB,OAAO,EAAEL,MAAO;QAAAP,QAAA,eAChCJ,IAAA,CAACF,QAAQ;UACPc,KAAK,EAAEJ,OAAO,KAAK,YAAY,GAAGK,MAAM,CAACC,UAAU,GAAGC,SAAU;UAAAX,QAAA,EAE/DC;QAAY,CACL;MAAC,CACK,CACnB,EACAI,UAAU,IACTlB,KAAK,CAAC0B,QAAQ,CAACC,GAAG,CAACd,QAAQ,EAAGe,KAAK,IACjC,aAAA5B,KAAK,CAAC6B,cAAc,CAACD,KAAK,CAAC,gBAAG5B,KAAK,CAAC8B,YAAY,CAACF,KAAK,CAAC,GAAGA,KAC5D,CAAC;IAAA,CACC;EAAC,CACH,CAAC;AAEX;AAEA,MAAMN,MAAM,GAAGnB,UAAU,CAAC4B,MAAM,CAAC;EAC/BR,UAAU,EAAE;IACVS,WAAW,EAAE,CAAC;IACdC,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ListItem","jsx","_jsx","AccordionItem","children","index"],"sourceRoot":"../../../src","sources":["Accordion/AccordionItem.tsx"],"mappings":";;AACA,OAAOA,QAAQ,MAAM,qBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,eAAe,SAASC,aAAaA,CAAC;EACpCC,QAAQ;EACRC,KAAK,GAAG;AACU,CAAC,EAAE;EACrB,
|
|
1
|
+
{"version":3,"names":["ListItem","jsx","_jsx","AccordionItem","children","index","isLast"],"sourceRoot":"../../../src","sources":["Accordion/AccordionItem.tsx"],"mappings":";;AACA,OAAOA,QAAQ,MAAM,qBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,eAAe,SAASC,aAAaA,CAAC;EACpCC,QAAQ;EACRC,KAAK,GAAG;AACU,CAAC,EAAE;EACrB,oBACEH,IAAA,CAACF,QAAQ;IAAaM,MAAM;IAAAF,QAAA,EACzBA;EAAQ,GADIC,KAEL,CAAC;AAEf","ignoreList":[]}
|
|
@@ -15,7 +15,9 @@ import AccordionItem from '@herca/rn-kit/Accordion/AccordionItem';
|
|
|
15
15
|
export default function FAQSection() {
|
|
16
16
|
return (
|
|
17
17
|
<Accordion
|
|
18
|
-
header={() =>
|
|
18
|
+
header={() => (
|
|
19
|
+
<Text style={{ fontWeight: 'bold' }}>Apa itu produk ini?</Text>
|
|
20
|
+
)}
|
|
19
21
|
isOpen={false}
|
|
20
22
|
onCollapse={(isOpen) => console.log('Status:', isOpen)}
|
|
21
23
|
>
|
|
@@ -28,25 +30,26 @@ export default function FAQSection() {
|
|
|
28
30
|
</Accordion>
|
|
29
31
|
);
|
|
30
32
|
}
|
|
31
|
-
|
|
32
33
|
```
|
|
33
34
|
|
|
34
|
-
|
|
35
35
|
## Props
|
|
36
|
+
|
|
36
37
|
### Accordion
|
|
38
|
+
|
|
37
39
|
| Props | Tipe | Wajib | Default | Deskripsi |
|
|
38
40
|
| -------------- | --------------------------- | ----- | ------- | ------------------------------------------------------------------------------- |
|
|
39
|
-
| `children` | `ReactNode` | ✅
|
|
40
|
-
| `renderHeader` | `ReactNode \| null` | ❌
|
|
41
|
-
| `isOpen` | `boolean` | ❌
|
|
42
|
-
| `onCollapse` | `(isOpen: boolean) => void` | ❌
|
|
41
|
+
| `children` | `ReactNode` | ✅ | - | Isi Accordion, harus terdiri dari satu atau beberapa `AccordionItem`. |
|
|
42
|
+
| `renderHeader` | `ReactNode \| null` | ❌ | `null` | Komponen untuk menampilkan header. Biasanya berupa `Text` atau komponen kustom. |
|
|
43
|
+
| `isOpen` | `boolean` | ❌ | `true` | Menentukan apakah Accordion terbuka saat pertama kali dirender. |
|
|
44
|
+
| `onCollapse` | `(isOpen: boolean) => void` | ❌ | - | Callback saat status terbuka/tutup berubah. |
|
|
45
|
+
| `variant` | `'default' \| 'borderless'` | ❌ | - | Opsi untuk menampilkan sebuah border di pembungkus accordion nya atau tidak |
|
|
43
46
|
|
|
44
47
|
### AccordionItem
|
|
48
|
+
|
|
45
49
|
| Props | Tipe | Wajib | Default | Deskripsi |
|
|
46
50
|
| ---------- | ----------- | ----- | ------- | --------------------------------------------------------------- |
|
|
47
|
-
| `children` | `ReactNode` | ✅
|
|
48
|
-
| `index` | `number` | ❌
|
|
49
|
-
|
|
51
|
+
| `children` | `ReactNode` | ✅ | - | Konten yang akan ditampilkan saat Accordion dibuka. |
|
|
52
|
+
| `index` | `number` | ❌ | - | Untuk pengendalian item tertentu jika diperlukan secara manual. |
|
|
50
53
|
|
|
51
54
|
## Note
|
|
52
55
|
|
|
@@ -54,4 +57,4 @@ Komponen Accordion menggunakan state internal (useState) untuk mengatur apakah k
|
|
|
54
57
|
|
|
55
58
|
Fungsi header digunakan untuk merender tampilan judul Accordion dan dapat disesuaikan.
|
|
56
59
|
|
|
57
|
-
Konten yang disembunyikan/diperluas sebaiknya dibungkus dalam AccordionItem.
|
|
60
|
+
Konten yang disembunyikan/diperluas sebaiknya dibungkus dalam AccordionItem.
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { StyleSheet, View } from 'react-native';
|
|
5
|
+
import Color from "../Color/Color.js";
|
|
6
|
+
import Icon from "../Icon/index.js";
|
|
7
|
+
import { hexToRGBA } from "../helpers/hexToRgba.js";
|
|
8
|
+
|
|
9
|
+
// Union tipe
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
const COLORS = {
|
|
12
|
+
default: {
|
|
13
|
+
background: Color.gray[100],
|
|
14
|
+
fontColor: Color.gray[800]
|
|
15
|
+
},
|
|
16
|
+
primary: {
|
|
17
|
+
background: Color.primary[50],
|
|
18
|
+
fontColor: Color.primary[1000]
|
|
19
|
+
},
|
|
20
|
+
success: {
|
|
21
|
+
background: Color.success[50],
|
|
22
|
+
fontColor: Color.success[500]
|
|
23
|
+
},
|
|
24
|
+
info: {
|
|
25
|
+
background: Color.info[50],
|
|
26
|
+
fontColor: Color.info[500]
|
|
27
|
+
},
|
|
28
|
+
danger: {
|
|
29
|
+
background: Color.danger[50],
|
|
30
|
+
fontColor: Color.danger[600]
|
|
31
|
+
},
|
|
32
|
+
warning: {
|
|
33
|
+
background: Color.warning[50],
|
|
34
|
+
fontColor: Color.warning[300]
|
|
35
|
+
},
|
|
36
|
+
orange: {
|
|
37
|
+
background: Color.orange[50],
|
|
38
|
+
fontColor: Color.orange[500]
|
|
39
|
+
},
|
|
40
|
+
purple: {
|
|
41
|
+
background: Color.purple[50],
|
|
42
|
+
fontColor: Color.purple[500]
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
const SIZE_MAP = {
|
|
46
|
+
small: {
|
|
47
|
+
minHeight: 24,
|
|
48
|
+
minWidth: 24,
|
|
49
|
+
padding: 4,
|
|
50
|
+
borderRadius: 4
|
|
51
|
+
},
|
|
52
|
+
medium: {
|
|
53
|
+
minHeight: 32,
|
|
54
|
+
minWidth: 32,
|
|
55
|
+
padding: 4,
|
|
56
|
+
borderRadius: 4
|
|
57
|
+
},
|
|
58
|
+
large: {
|
|
59
|
+
minHeight: 40,
|
|
60
|
+
minWidth: 40,
|
|
61
|
+
padding: 8,
|
|
62
|
+
borderRadius: 4
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
const ICON_SIZE_MAP = {
|
|
66
|
+
small: 16,
|
|
67
|
+
medium: 24,
|
|
68
|
+
large: 24
|
|
69
|
+
};
|
|
70
|
+
const BadgeIcon = ({
|
|
71
|
+
icon,
|
|
72
|
+
size = 'medium',
|
|
73
|
+
color = 'default',
|
|
74
|
+
children
|
|
75
|
+
}) => {
|
|
76
|
+
const safeSize = ['small', 'medium', 'large'].includes(size) ? size : 'medium';
|
|
77
|
+
const isVariant = Object.prototype.hasOwnProperty.call(COLORS, color);
|
|
78
|
+
const {
|
|
79
|
+
background,
|
|
80
|
+
fontColor
|
|
81
|
+
} = isVariant ? COLORS[color] : {
|
|
82
|
+
background: color,
|
|
83
|
+
fontColor: '#fff'
|
|
84
|
+
};
|
|
85
|
+
const {
|
|
86
|
+
minHeight,
|
|
87
|
+
padding,
|
|
88
|
+
minWidth,
|
|
89
|
+
borderRadius
|
|
90
|
+
} = SIZE_MAP[safeSize];
|
|
91
|
+
const iconSize = ICON_SIZE_MAP[safeSize];
|
|
92
|
+
const bgRgba = hexToRGBA(typeof color === 'string' && color.startsWith('#') ? color : background, 0.1);
|
|
93
|
+
const isHex = typeof color === 'string' && color.startsWith('#');
|
|
94
|
+
return /*#__PURE__*/_jsx(View, {
|
|
95
|
+
style: [styles.badge, {
|
|
96
|
+
minHeight: minHeight,
|
|
97
|
+
minWidth: minWidth,
|
|
98
|
+
backgroundColor: isHex ? bgRgba : background,
|
|
99
|
+
padding: padding,
|
|
100
|
+
borderRadius: borderRadius
|
|
101
|
+
}],
|
|
102
|
+
children: children ? children : icon && /*#__PURE__*/_jsx(Icon, {
|
|
103
|
+
name: icon,
|
|
104
|
+
color: isHex ? color : fontColor,
|
|
105
|
+
size: iconSize
|
|
106
|
+
})
|
|
107
|
+
});
|
|
108
|
+
};
|
|
109
|
+
const styles = StyleSheet.create({
|
|
110
|
+
badge: {
|
|
111
|
+
justifyContent: 'center',
|
|
112
|
+
alignItems: 'center',
|
|
113
|
+
alignSelf: 'flex-start'
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
export default BadgeIcon;
|
|
117
|
+
//# sourceMappingURL=BadgeIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","View","Color","Icon","hexToRGBA","jsx","_jsx","COLORS","default","background","gray","fontColor","primary","success","info","danger","warning","orange","purple","SIZE_MAP","small","minHeight","minWidth","padding","borderRadius","medium","large","ICON_SIZE_MAP","BadgeIcon","icon","size","color","children","safeSize","includes","isVariant","Object","prototype","hasOwnProperty","call","iconSize","bgRgba","startsWith","isHex","style","styles","badge","backgroundColor","name","create","justifyContent","alignItems","alignSelf"],"sourceRoot":"../../../src","sources":["BadgeIcon/BadgeIcon.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# BadgeIcon Component
|
|
2
|
+
|
|
3
|
+
`BadgeIcon` adalah komponen React Native untuk menampilkan **badge** yang dapat berisi **ikon** atau **konten custom** (children). Komponen ini fleksibel dalam ukuran (`size`), warna (`color`), dan varian (`variant`).
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## ⚙️ Props
|
|
8
|
+
|
|
9
|
+
### **BaseBadgeProps**
|
|
10
|
+
|
|
11
|
+
| Prop | Tipe | Default | Deskripsi |
|
|
12
|
+
| --------- | ------------------------------------ | ----------- | ------------------------------------------------------------------------- |
|
|
13
|
+
| `color` | `Variant` \| `HexColor` | `"default"` | Warna badge. Bisa berupa nama varian yang tersedia atau kode warna HEX. |
|
|
14
|
+
| `size` | `"small"` \| `"medium"` \| `"large"` | `"medium"` | Ukuran badge. Mengatur tinggi, lebar minimum, padding, dan radius border. |
|
|
15
|
+
| `variant` | `Variant` | - | Alias untuk varian warna (tidak digunakan langsung di komponen ini). |
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
### **IconBadgeProps** (Badge dengan Icon)
|
|
20
|
+
|
|
21
|
+
| Prop | Tipe | Deskripsi |
|
|
22
|
+
| ---------- | --------------- | ----------------------------------------------- |
|
|
23
|
+
| `icon` | `IconNameProps` | Nama ikon yang akan ditampilkan. |
|
|
24
|
+
| `children` | `never` | Tidak boleh ada children jika menggunakan ikon. |
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
### **ChildrenBadgeProps** (Badge dengan Konten Custom)
|
|
29
|
+
|
|
30
|
+
| Prop | Tipe | Deskripsi |
|
|
31
|
+
| ---------- | ----------------- | ----------------------------------------------- |
|
|
32
|
+
| `children` | `React.ReactNode` | Konten yang akan ditampilkan di dalam badge. |
|
|
33
|
+
| `icon` | `never` | Tidak boleh ada icon jika menggunakan children. |
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## 🎨 Varian Warna (`Variant`)
|
|
38
|
+
|
|
39
|
+
| Nama Varian | Background | Font Color |
|
|
40
|
+
| ----------- | ------------------- | --------------------- |
|
|
41
|
+
| `default` | `Color.gray[100]` | `Color.gray[800]` |
|
|
42
|
+
| `primary` | `Color.primary[50]` | `Color.primary[1000]` |
|
|
43
|
+
| `success` | `Color.success[50]` | `Color.success[500]` |
|
|
44
|
+
| `info` | `Color.info[50]` | `Color.info[500]` |
|
|
45
|
+
| `danger` | `Color.danger[50]` | `Color.danger[600]` |
|
|
46
|
+
| `warning` | `Color.warning[50]` | `Color.warning[300]` |
|
|
47
|
+
| `orange` | `Color.orange[50]` | `Color.orange[500]` |
|
|
48
|
+
| `purple` | `Color.purple[50]` | `Color.purple[500]` |
|
|
49
|
+
|
|
50
|
+
> Jika `color` berupa kode HEX, maka background badge akan otomatis diubah menjadi warna transparan (`opacity 0.1`) menggunakan helper `hexToRGBA`.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## 📏 Ukuran Badge (`size`)
|
|
55
|
+
|
|
56
|
+
| Ukuran | minHeight | minWidth | Padding | BorderRadius | Icon Size |
|
|
57
|
+
| -------- | --------- | -------- | ------- | ------------ | --------- |
|
|
58
|
+
| `small` | 24 | 24 | 4 | 4 | 16 |
|
|
59
|
+
| `medium` | 32 | 32 | 4 | 4 | 24 |
|
|
60
|
+
| `large` | 40 | 40 | 8 | 4 | 24 |
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## 💻 Contoh Penggunaan
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
<BadgeIcon icon="check" size="small" color="success" />
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## 🛠 Catatan Implementasi
|
|
73
|
+
|
|
74
|
+
- Jika `color` adalah varian (`default`, `primary`, dsb.), warna background dan font color akan diambil dari konstanta `COLORS`.
|
|
75
|
+
- Jika `color` adalah kode HEX (`#rrggbb`), maka background akan menggunakan versi transparan dari warna tersebut.
|
|
76
|
+
- Menggunakan helper `hexToRGBA` untuk mengubah HEX menjadi warna RGBA.
|
|
77
|
+
- Komponen `Icon` digunakan untuk menampilkan ikon sesuai ukuran badge.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["BadgeIcon/type.tsx"],"mappings":"","ignoreList":[]}
|
|
@@ -6,7 +6,7 @@ import Container from "../Ui/Container.js";
|
|
|
6
6
|
import Typography from "../Typography/Typography.js";
|
|
7
7
|
import Color from "../Color/Color.js";
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
const statusBarHeight = Platform.OS === 'android' && Platform.Version < 35 ? StatusBar.currentHeight ?? 24 : 65;
|
|
9
|
+
const statusBarHeight = Platform.OS === 'android' && Platform.Version < 35 ? StatusBar.currentHeight ?? 24 : Platform.OS === 'android' && Platform.Version >= 35 ? 80 : 65;
|
|
10
10
|
const screenHeight = Dimensions.get('window').height;
|
|
11
11
|
const actualScreenHeight = screenHeight - statusBarHeight;
|
|
12
12
|
const DEFAULT_PADDING_BOTTOM = 40;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useRef","useState","useCallback","View","StyleSheet","PanResponder","TouchableOpacity","Animated","Modal","KeyboardAvoidingView","Keyboard","Dimensions","SafeAreaView","Platform","StatusBar","Container","Typography","Color","jsx","_jsx","jsxs","_jsxs","statusBarHeight","OS","Version","currentHeight","screenHeight","get","height","actualScreenHeight","DEFAULT_PADDING_BOTTOM","BottomSheet","isOpen","onClose","children","backdrop","closable","onRequestClose","buttonClose","pullBar","footer","isVisible","setIsVisible","heightFooter","setHeightFooter","heighContent","setHeighContent","maxHeight","setMaxHeight","translateY","Value","current","panResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderMove","_","gestureState","dy","setValue","onPanResponderRelease","handleRequestClose","resetModalPosition","hideModal","timing","toValue","duration","useNativeDriver","start","showModal","spring","e","keyboardDidShowListener","addListener","keyboardHeight","endCoordinates","keyboardDidHideListener","remove","transparent","visible","animationType","style","styles","modalContainer","onPress","activeOpacity","backdropTouchable","behavior","undefined","enabled","keyboardAvoiding","bottomSheet","transform","paddingBottom","closeButton","panHandlers","dragIndicatorContainer","dragIndicator","contentContainer","contentWithFooter","onLayout","event","nativeEvent","layout","flex","justifyContent","backgroundColor","borderTopLeftRadius","borderTopRightRadius","position","paddingVertical","paddingHorizontal","borderRadius","top","right","zIndex","alignItems","width","marginTop","flexGrow","borderTopWidth","borderTopColor","gray","base","white100","paddingTop","bottom","left"],"sourceRoot":"../../../src","sources":["BottomSheet/BottomSheet.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AAChE,SACEC,IAAI,EACJC,UAAU,EACVC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,EACRC,KAAK,EACLC,oBAAoB,EACpBC,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,SAAS,QAEJ,cAAc;AACrB,OAAOC,SAAS,MAAM,oBAAiB;AACvC,OAAOC,UAAU,MAAM,6BAA0B;AACjD,OAAOC,KAAK,MAAM,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC,MAAMC,eAAe,GACnBT,QAAQ,CAACU,EAAE,KAAK,SAAS,IAAIV,QAAQ,CAACW,OAAO,GAAG,EAAE,GAC7CV,SAAS,CAACW,aAAa,IAAI,EAAE,
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","useState","useCallback","View","StyleSheet","PanResponder","TouchableOpacity","Animated","Modal","KeyboardAvoidingView","Keyboard","Dimensions","SafeAreaView","Platform","StatusBar","Container","Typography","Color","jsx","_jsx","jsxs","_jsxs","statusBarHeight","OS","Version","currentHeight","screenHeight","get","height","actualScreenHeight","DEFAULT_PADDING_BOTTOM","BottomSheet","isOpen","onClose","children","backdrop","closable","onRequestClose","buttonClose","pullBar","footer","isVisible","setIsVisible","heightFooter","setHeightFooter","heighContent","setHeighContent","maxHeight","setMaxHeight","translateY","Value","current","panResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderMove","_","gestureState","dy","setValue","onPanResponderRelease","handleRequestClose","resetModalPosition","hideModal","timing","toValue","duration","useNativeDriver","start","showModal","spring","e","keyboardDidShowListener","addListener","keyboardHeight","endCoordinates","keyboardDidHideListener","remove","transparent","visible","animationType","style","styles","modalContainer","onPress","activeOpacity","backdropTouchable","behavior","undefined","enabled","keyboardAvoiding","bottomSheet","transform","paddingBottom","closeButton","panHandlers","dragIndicatorContainer","dragIndicator","contentContainer","contentWithFooter","onLayout","event","nativeEvent","layout","flex","justifyContent","backgroundColor","borderTopLeftRadius","borderTopRightRadius","position","paddingVertical","paddingHorizontal","borderRadius","top","right","zIndex","alignItems","width","marginTop","flexGrow","borderTopWidth","borderTopColor","gray","base","white100","paddingTop","bottom","left"],"sourceRoot":"../../../src","sources":["BottomSheet/BottomSheet.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,37 +1,60 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
3
|
+
import { Color, Icon, Typography } from '@herca/rn-kit';
|
|
4
|
+
import React, { useEffect, useState } from 'react';
|
|
5
|
+
import { Pressable, StyleSheet, View } from 'react-native';
|
|
6
|
+
|
|
6
7
|
// import type { ColorVariantType } from '../Color/type';
|
|
7
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
9
|
+
const COLORS = {
|
|
10
|
+
default: {
|
|
11
|
+
background: Color.gray[100],
|
|
12
|
+
borderColor: Color.gray[500]
|
|
13
|
+
},
|
|
14
|
+
primary: {
|
|
15
|
+
background: Color.primary[1000],
|
|
16
|
+
borderColor: Color.primary[1000]
|
|
17
|
+
},
|
|
18
|
+
success: {
|
|
19
|
+
background: Color.success[500],
|
|
20
|
+
borderColor: Color.success[500]
|
|
21
|
+
},
|
|
22
|
+
info: {
|
|
23
|
+
background: Color.info[500],
|
|
24
|
+
borderColor: Color.info[500]
|
|
25
|
+
},
|
|
26
|
+
danger: {
|
|
27
|
+
background: Color.danger[500],
|
|
28
|
+
borderColor: Color.danger[500]
|
|
29
|
+
},
|
|
30
|
+
warning: {
|
|
31
|
+
background: Color.warning[500],
|
|
32
|
+
borderColor: Color.warning[500]
|
|
33
|
+
},
|
|
34
|
+
orange: {
|
|
35
|
+
background: Color.orange[500],
|
|
36
|
+
borderColor: Color.orange[500]
|
|
37
|
+
},
|
|
38
|
+
purple: {
|
|
39
|
+
background: Color.purple[500],
|
|
40
|
+
borderColor: Color.purple[500]
|
|
41
|
+
}
|
|
42
|
+
};
|
|
24
43
|
const CheckBox = ({
|
|
25
44
|
checked = false,
|
|
26
45
|
onChange,
|
|
27
46
|
label,
|
|
47
|
+
hint,
|
|
28
48
|
disabled = false,
|
|
29
|
-
renderLabel
|
|
30
|
-
|
|
49
|
+
renderLabel,
|
|
50
|
+
renderHint,
|
|
51
|
+
color = 'primary'
|
|
31
52
|
}) => {
|
|
32
53
|
const [value, setValue] = useState(false);
|
|
33
|
-
|
|
34
|
-
|
|
54
|
+
const {
|
|
55
|
+
background,
|
|
56
|
+
borderColor
|
|
57
|
+
} = COLORS[color];
|
|
35
58
|
const handlePress = () => {
|
|
36
59
|
const newValue = !value;
|
|
37
60
|
setValue(newValue);
|
|
@@ -44,16 +67,30 @@ const CheckBox = ({
|
|
|
44
67
|
onPress: () => !disabled && handlePress(),
|
|
45
68
|
style: styles.container,
|
|
46
69
|
children: [/*#__PURE__*/_jsx(View, {
|
|
47
|
-
style: [styles.checkBox, value &&
|
|
70
|
+
style: [styles.checkBox, value && {
|
|
71
|
+
backgroundColor: background,
|
|
72
|
+
borderColor
|
|
73
|
+
}, disabled && styles.disabled],
|
|
48
74
|
children: value && /*#__PURE__*/_jsx(Icon, {
|
|
49
75
|
name: "Check",
|
|
50
76
|
size: 14,
|
|
51
77
|
color: Color.base.white100
|
|
52
78
|
})
|
|
53
|
-
}),
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
79
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
80
|
+
children: [label && /*#__PURE__*/_jsx(Typography, {
|
|
81
|
+
variant: "t2",
|
|
82
|
+
weight: "medium",
|
|
83
|
+
color: Color.gray[900],
|
|
84
|
+
children: label
|
|
85
|
+
}), hint && /*#__PURE__*/_jsx(Typography, {
|
|
86
|
+
variant: "t3",
|
|
87
|
+
weight: "medium",
|
|
88
|
+
color: Color.gray[600],
|
|
89
|
+
children: hint
|
|
90
|
+
})]
|
|
91
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
92
|
+
children: [renderLabel?.(), renderHint?.()]
|
|
93
|
+
})]
|
|
57
94
|
});
|
|
58
95
|
};
|
|
59
96
|
const styles = StyleSheet.create({
|
|
@@ -77,10 +114,6 @@ const styles = StyleSheet.create({
|
|
|
77
114
|
},
|
|
78
115
|
disabled: {
|
|
79
116
|
opacity: 0.5
|
|
80
|
-
},
|
|
81
|
-
label: {
|
|
82
|
-
fontSize: 14,
|
|
83
|
-
color: '#333'
|
|
84
117
|
}
|
|
85
118
|
});
|
|
86
119
|
export default CheckBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["Color","Icon","Typography","React","useEffect","useState","Pressable","StyleSheet","View","jsx","_jsx","jsxs","_jsxs","COLORS","default","background","gray","borderColor","primary","success","info","danger","warning","orange","purple","CheckBox","checked","onChange","label","hint","disabled","renderLabel","renderHint","color","value","setValue","handlePress","newValue","onPress","style","styles","container","children","checkBox","backgroundColor","name","size","base","white100","variant","weight","create","flexDirection","alignItems","width","height","borderWidth","justifyContent","borderRadius","marginRight","opacity"],"sourceRoot":"../../../src","sources":["CheckBox/CheckBox.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,7 +8,8 @@ const CheckBoxList = ({
|
|
|
8
8
|
items,
|
|
9
9
|
selectedValues,
|
|
10
10
|
onChange,
|
|
11
|
-
direction = 'vertical'
|
|
11
|
+
direction = 'vertical',
|
|
12
|
+
color = 'primary'
|
|
12
13
|
}) => {
|
|
13
14
|
const toggleValue = value => {
|
|
14
15
|
const newSelected = selectedValues.includes(value) ? selectedValues.filter(v => v !== value) : [...selectedValues, value];
|
|
@@ -18,13 +19,20 @@ const CheckBoxList = ({
|
|
|
18
19
|
style: [styles.container, direction === 'horizontal' && styles.horizontal],
|
|
19
20
|
children: items.map(item => /*#__PURE__*/_jsx(CheckBox, {
|
|
20
21
|
checked: selectedValues.includes(item.value),
|
|
22
|
+
color: color,
|
|
21
23
|
onChange: () => toggleValue(item.value),
|
|
22
24
|
renderLabel: () => /*#__PURE__*/_jsx(Typography, {
|
|
23
25
|
variant: "t2",
|
|
24
26
|
weight: "medium",
|
|
25
27
|
color: Color.gray[800],
|
|
26
28
|
children: item.label
|
|
27
|
-
})
|
|
29
|
+
}),
|
|
30
|
+
renderHint: () => item.hint ? /*#__PURE__*/_jsx(Typography, {
|
|
31
|
+
variant: "t3",
|
|
32
|
+
weight: "medium",
|
|
33
|
+
color: Color.gray[700],
|
|
34
|
+
children: item.hint
|
|
35
|
+
}) : undefined
|
|
28
36
|
}, item.value))
|
|
29
37
|
});
|
|
30
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","StyleSheet","Typography","Color","CheckBox","jsx","_jsx","CheckBoxList","items","selectedValues","onChange","direction","toggleValue","value","newSelected","includes","filter","v","style","styles","container","horizontal","children","map","item","checked","renderLabel","variant","weight","
|
|
1
|
+
{"version":3,"names":["React","View","StyleSheet","Typography","Color","CheckBox","jsx","_jsx","CheckBoxList","items","selectedValues","onChange","direction","color","toggleValue","value","newSelected","includes","filter","v","style","styles","container","horizontal","children","map","item","checked","renderLabel","variant","weight","gray","label","renderHint","hint","undefined","create","gap","flexDirection","flexWrap"],"sourceRoot":"../../../src","sources":["CheckBox/CheckBoxList.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiB5D,MAAMC,YAAyC,GAAGA,CAAC;EACjDC,KAAK;EACLC,cAAc;EACdC,QAAQ;EACRC,SAAS,GAAG,UAAU;EACtBC,KAAK,GAAG;AACV,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAIC,KAAa,IAAK;IACrC,MAAMC,WAAW,GAAGN,cAAc,CAACO,QAAQ,CAACF,KAAK,CAAC,GAC9CL,cAAc,CAACQ,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKJ,KAAK,CAAC,GACzC,CAAC,GAAGL,cAAc,EAAEK,KAAK,CAAC;IAE9BJ,QAAQ,CAACK,WAAW,CAAC;EACvB,CAAC;EAED,oBACET,IAAA,CAACN,IAAI;IACHmB,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChBV,SAAS,KAAK,YAAY,IAAIS,MAAM,CAACE,UAAU,CAC/C;IAAAC,QAAA,EAEDf,KAAK,CAACgB,GAAG,CAAEC,IAAI,iBACdnB,IAAA,CAACF,QAAQ;MAEPsB,OAAO,EAAEjB,cAAc,CAACO,QAAQ,CAACS,IAAI,CAACX,KAAK,CAAE;MAC7CF,KAAK,EAAEA,KAAM;MACbF,QAAQ,EAAEA,CAAA,KAAMG,WAAW,CAACY,IAAI,CAACX,KAAK,CAAE;MACxCa,WAAW,EAAEA,CAAA,kBACXrB,IAAA,CAACJ,UAAU;QAAC0B,OAAO,EAAC,IAAI;QAACC,MAAM,EAAC,QAAQ;QAACjB,KAAK,EAAET,KAAK,CAAC2B,IAAI,CAAC,GAAG,CAAE;QAAAP,QAAA,EAC7DE,IAAI,CAACM;MAAK,CACD,CACZ;MACFC,UAAU,EAAEA,CAAA,KACVP,IAAI,CAACQ,IAAI,gBACP3B,IAAA,CAACJ,UAAU;QAAC0B,OAAO,EAAC,IAAI;QAACC,MAAM,EAAC,QAAQ;QAACjB,KAAK,EAAET,KAAK,CAAC2B,IAAI,CAAC,GAAG,CAAE;QAAAP,QAAA,EAC7DE,IAAI,CAACQ;MAAI,CACA,CAAC,GACXC;IACL,GAfIT,IAAI,CAACX,KAgBX,CACF;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMM,MAAM,GAAGnB,UAAU,CAACkC,MAAM,CAAC;EAC/Bd,SAAS,EAAE;IACTe,GAAG,EAAE;EACP,CAAC;EACDd,UAAU,EAAE;IACVe,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAe/B,YAAY","ignoreList":[]}
|
|
@@ -37,10 +37,13 @@ export default function App() {
|
|
|
37
37
|
|
|
38
38
|
##⚙️ Props
|
|
39
39
|
|
|
40
|
-
| Prop | Tipe
|
|
41
|
-
| ------------- |
|
|
42
|
-
| `checked` | `boolean`
|
|
43
|
-
| `onChange` | `(checked: boolean) => void`
|
|
44
|
-
| `label` |
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
40
|
+
| Prop | Tipe | Deskripsi |
|
|
41
|
+
| ------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
42
|
+
| `checked` | `boolean` | Status awal checkbox (centang atau tidak). Default: `false`. |
|
|
43
|
+
| `onChange` | `(checked: boolean) => void` | Fungsi callback saat status checkbox berubah. |
|
|
44
|
+
| `label` | `string ` | Label teks atau komponen yang ditampilkan di samping checkbox. |
|
|
45
|
+
| `hint` | `string ` | Label teks atau komponen yang ditampilkan di samping checkbox dibawah label. |
|
|
46
|
+
| `color` | `primary \| danger \| warning \| orange \| info \| success \| purple ` | warna background jika checkbox di centang |
|
|
47
|
+
| `disabled` | `boolean` | Jika `true`, checkbox tidak bisa ditekan. Default: `false`. |
|
|
48
|
+
| `renderLabel` | `() => React.ReactNode` | Alternatif render untuk label kustom selain `label`. |
|
|
49
|
+
| `renderHint` | `() => React.ReactNode` | Alternatif render untuk hint kustom selain `hint`. |
|