@herca/rn-kit 0.1.8 → 0.1.10
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/README.md +1 -0
- package/lib/module/CheckBox/CheckBox.js +21 -1
- package/lib/module/CheckBox/CheckBox.js.map +1 -1
- package/lib/module/CheckBox/README_CHECKBOXLIST.md +1 -0
- package/lib/module/Drawing/Drawing.js +90 -9
- package/lib/module/Drawing/Drawing.js.map +1 -1
- package/lib/module/Modal/Modal.js +19 -8
- package/lib/module/Modal/Modal.js.map +1 -1
- package/lib/module/Step/Step.js.map +1 -1
- package/lib/module/Tab/README.md +74 -0
- package/lib/module/Tab/Tab.js +97 -0
- package/lib/module/Tab/Tab.js.map +1 -0
- package/lib/module/Tab/TabItem.js +9 -0
- package/lib/module/Tab/TabItem.js.map +1 -0
- package/lib/module/Tab/type.js +4 -0
- package/lib/module/Tab/type.js.map +1 -0
- package/lib/module/index.js +2 -0
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/CheckBox/CheckBox.d.ts.map +1 -1
- package/lib/typescript/src/Drawing/Drawing.d.ts +5 -1
- package/lib/typescript/src/Drawing/Drawing.d.ts.map +1 -1
- package/lib/typescript/src/Modal/Modal.d.ts.map +1 -1
- package/lib/typescript/src/Step/Step.d.ts.map +1 -1
- package/lib/typescript/src/Tab/Tab.d.ts +5 -0
- package/lib/typescript/src/Tab/Tab.d.ts.map +1 -0
- package/lib/typescript/src/Tab/TabItem.d.ts +3 -0
- package/lib/typescript/src/Tab/TabItem.d.ts.map +1 -0
- package/lib/typescript/src/Tab/type.d.ts +11 -0
- package/lib/typescript/src/Tab/type.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +3 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +8 -2
- package/src/CheckBox/CheckBox.tsx +21 -1
- package/src/CheckBox/README_CHECKBOXLIST.md +1 -0
- package/src/Drawing/Drawing.tsx +93 -5
- package/src/Modal/Modal.tsx +16 -7
- package/src/Step/Step.tsx +0 -1
- package/src/Tab/README.md +74 -0
- package/src/Tab/Tab.tsx +112 -0
- package/src/Tab/TabItem.tsx +6 -0
- package/src/Tab/type.tsx +11 -0
- package/src/index.tsx +8 -0
package/README.md
CHANGED
|
@@ -2,16 +2,36 @@
|
|
|
2
2
|
|
|
3
3
|
import React, { useState, useEffect } from 'react';
|
|
4
4
|
import { Pressable, View, Text, StyleSheet } from 'react-native';
|
|
5
|
-
import { Color, Icon } from '@herca/rn-kit';
|
|
5
|
+
import { Color, Icon } from '@herca/rn-kit';
|
|
6
|
+
// import type { ColorVariantType } from '../Color/type';
|
|
6
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
// const COLOR_MAP: Record<
|
|
9
|
+
// ColorVariantType,
|
|
10
|
+
// {
|
|
11
|
+
// backgroundColor: ColorValue;
|
|
12
|
+
// backgroundColorDisabled: ColorValue;
|
|
13
|
+
// }
|
|
14
|
+
// > = {
|
|
15
|
+
// primary : {
|
|
16
|
+
// backgroundColor : Color.primary[1000],
|
|
17
|
+
// backgroundColorDisabled : Color.primary[100],
|
|
18
|
+
// },
|
|
19
|
+
// danger: {
|
|
20
|
+
// backgroundColor : Color.danger[500],
|
|
21
|
+
// backgroundColorDisabled : Color.danger[100],
|
|
22
|
+
// },
|
|
23
|
+
// }
|
|
7
24
|
const CheckBox = ({
|
|
8
25
|
checked = false,
|
|
9
26
|
onChange,
|
|
10
27
|
label,
|
|
11
28
|
disabled = false,
|
|
12
29
|
renderLabel
|
|
30
|
+
// color= 'primary'
|
|
13
31
|
}) => {
|
|
14
32
|
const [value, setValue] = useState(false);
|
|
33
|
+
// const _selectedColor = COLOR_MAP[color];
|
|
34
|
+
|
|
15
35
|
const handlePress = () => {
|
|
16
36
|
const newValue = !value;
|
|
17
37
|
setValue(newValue);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useEffect","Pressable","View","Text","StyleSheet","Color","Icon","jsx","_jsx","jsxs","_jsxs","CheckBox","checked","onChange","label","disabled","renderLabel","value","setValue","handlePress","newValue","onPress","style","styles","container","children","checkBox","name","size","color","base","white100","create","flexDirection","alignItems","width","height","borderWidth","borderColor","gray","justifyContent","borderRadius","marginRight","backgroundColor","primary","opacity","fontSize"],"sourceRoot":"../../../src","sources":["CheckBox/CheckBox.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAChE,SAASC,KAAK,EAAEC,IAAI,QAAQ,eAAe
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","Pressable","View","Text","StyleSheet","Color","Icon","jsx","_jsx","jsxs","_jsxs","CheckBox","checked","onChange","label","disabled","renderLabel","value","setValue","handlePress","newValue","onPress","style","styles","container","children","checkBox","name","size","color","base","white100","create","flexDirection","alignItems","width","height","borderWidth","borderColor","gray","justifyContent","borderRadius","marginRight","backgroundColor","primary","opacity","fontSize"],"sourceRoot":"../../../src","sources":["CheckBox/CheckBox.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAChE,SAASC,KAAK,EAAEC,IAAI,QAAQ,eAAe;AAC3C;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAiC,GAAGA,CAAC;EACzCC,OAAO,GAAG,KAAK;EACfC,QAAQ;EACRC,KAAK;EACLC,QAAQ,GAAG,KAAK;EAChBC;EACA;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGnB,QAAQ,CAAU,KAAK,CAAC;EAClD;;EAEA,MAAMoB,WAAW,GAAGA,CAAA,KAAM;IACxB,MAAMC,QAAQ,GAAG,CAACH,KAAK;IACvBC,QAAQ,CAACE,QAAQ,CAAC;IAClBP,QAAQ,GAAGO,QAAQ,CAAC;EACtB,CAAC;EAEDpB,SAAS,CAAC,MAAM;IACdkB,QAAQ,CAACN,OAAO,CAAC;EACnB,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,oBACEF,KAAA,CAACT,SAAS;IACRoB,OAAO,EAAEA,CAAA,KAAM,CAACN,QAAQ,IAAII,WAAW,CAAC,CAAE;IAC1CG,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAExBjB,IAAA,CAACN,IAAI;MACHoB,KAAK,EAAE,CACLC,MAAM,CAACG,QAAQ,EACfT,KAAK,IAAIM,MAAM,CAACX,OAAO,EACvBG,QAAQ,IAAIQ,MAAM,CAACR,QAAQ,CAC3B;MAAAU,QAAA,EAEDR,KAAK,iBAAIT,IAAA,CAACF,IAAI;QAACqB,IAAI,EAAC,OAAO;QAACC,IAAI,EAAE,EAAG;QAACC,KAAK,EAAExB,KAAK,CAACyB,IAAI,CAACC;MAAS,CAAE;IAAC,CACjE,CAAC,EACNjB,KAAK,iBAAIN,IAAA,CAACL,IAAI;MAACmB,KAAK,EAAEC,MAAM,CAACT,KAAM;MAAAW,QAAA,EAAEX;IAAK,CAAO,CAAC,EAClDE,WAAW,GAAG,CAAC;EAAA,CACP,CAAC;AAEhB,CAAC;AAED,MAAMO,MAAM,GAAGnB,UAAU,CAAC4B,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd,CAAC;EACDR,QAAQ,EAAE;IACRS,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEjC,KAAK,CAACkC,IAAI,CAAC,GAAG,CAAC;IAC5BC,cAAc,EAAE,QAAQ;IACxBN,UAAU,EAAE,QAAQ;IACpBO,YAAY,EAAE,CAAC;IACfC,WAAW,EAAE;EACf,CAAC;EACD9B,OAAO,EAAE;IACP+B,eAAe,EAAEtC,KAAK,CAACuC,OAAO,CAAC,IAAI,CAAC;IACpCN,WAAW,EAAEjC,KAAK,CAACuC,OAAO,CAAC,IAAI;EACjC,CAAC;EACD7B,QAAQ,EAAE;IACR8B,OAAO,EAAE;EACX,CAAC;EACD/B,KAAK,EAAE;IACLgC,QAAQ,EAAE,EAAE;IACZjB,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,eAAelB,QAAQ","ignoreList":[]}
|
|
@@ -1,18 +1,98 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
import { useRef } from 'react';
|
|
4
|
+
import { StyleSheet, View, TouchableOpacity } from 'react-native';
|
|
5
|
+
import SignatureCanvas from 'react-native-signature-canvas';
|
|
6
|
+
import Icon from "../Icon/index.js";
|
|
7
|
+
import Button from "../Button/Button.js";
|
|
8
|
+
import Color from "../Color/Color.js";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
const Drawing = ({
|
|
11
|
+
onDraw
|
|
12
|
+
}) => {
|
|
13
|
+
const ref = useRef(null);
|
|
14
|
+
const handleSignature = signature => {
|
|
15
|
+
if (signature && onDraw) {
|
|
16
|
+
onDraw(signature);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
const handleEmpty = () => {
|
|
20
|
+
console.log('Signature is empty');
|
|
21
|
+
};
|
|
22
|
+
const handleClear = () => {
|
|
23
|
+
console.log('Signature cleared');
|
|
24
|
+
};
|
|
25
|
+
const handleError = error => {
|
|
26
|
+
console.error('Signature pad error:', error);
|
|
27
|
+
};
|
|
28
|
+
const handleEnd = () => {
|
|
29
|
+
ref.current?.readSignature();
|
|
30
|
+
};
|
|
31
|
+
const undo = () => ref.current?.undo();
|
|
32
|
+
const redo = () => ref.current?.redo();
|
|
33
|
+
const clear = () => ref.current?.clearSignature();
|
|
34
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
7
35
|
style: styles.container,
|
|
8
|
-
children: /*#__PURE__*/_jsx(
|
|
9
|
-
|
|
10
|
-
|
|
36
|
+
children: [/*#__PURE__*/_jsx(SignatureCanvas, {
|
|
37
|
+
ref: ref,
|
|
38
|
+
onEnd: handleEnd,
|
|
39
|
+
onOK: handleSignature,
|
|
40
|
+
onEmpty: handleEmpty,
|
|
41
|
+
onClear: handleClear,
|
|
42
|
+
onError: handleError,
|
|
43
|
+
descriptionText: " ",
|
|
44
|
+
webStyle: `
|
|
45
|
+
.m-signature-pad {box-shadow: none; border-color:${Color.gray[200]}; border-radius: 12px;}
|
|
46
|
+
.m-signature-pad--body {border-color:${Color.gray[200]}; border-radius:12px;}
|
|
47
|
+
.m-signature-pad--footer{
|
|
48
|
+
display: none; margin: 0,
|
|
49
|
+
}
|
|
50
|
+
`,
|
|
51
|
+
clearText: 'Clear',
|
|
52
|
+
penColor: Color.gray[900],
|
|
53
|
+
backgroundColor: Color.base.white100,
|
|
54
|
+
webviewProps: {
|
|
55
|
+
cacheEnabled: true,
|
|
56
|
+
androidLayerType: 'hardware'
|
|
57
|
+
}
|
|
58
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
59
|
+
style: styles.footerConteiner,
|
|
60
|
+
children: [/*#__PURE__*/_jsxs(View, {
|
|
61
|
+
style: styles.actionButtonContainer,
|
|
62
|
+
children: [/*#__PURE__*/_jsx(TouchableOpacity, {
|
|
63
|
+
onPress: undo,
|
|
64
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
65
|
+
name: "ArrowBackAlt"
|
|
66
|
+
})
|
|
67
|
+
}), /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
68
|
+
onPress: redo,
|
|
69
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
70
|
+
name: "ArrowForwardAlt"
|
|
71
|
+
})
|
|
72
|
+
})]
|
|
73
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
74
|
+
variant: "outline",
|
|
75
|
+
color: "primary",
|
|
76
|
+
title: "Clear",
|
|
77
|
+
size: "small",
|
|
78
|
+
onPress: clear
|
|
79
|
+
})]
|
|
80
|
+
})]
|
|
11
81
|
});
|
|
12
|
-
}
|
|
82
|
+
};
|
|
13
83
|
const styles = StyleSheet.create({
|
|
14
84
|
container: {
|
|
15
|
-
|
|
85
|
+
height: 350
|
|
86
|
+
},
|
|
87
|
+
footerConteiner: {
|
|
88
|
+
flexDirection: 'row',
|
|
89
|
+
justifyContent: 'space-between',
|
|
90
|
+
alignContent: 'center',
|
|
91
|
+
alignItems: 'center'
|
|
92
|
+
},
|
|
93
|
+
actionButtonContainer: {
|
|
94
|
+
flexDirection: 'row',
|
|
95
|
+
gap: 10
|
|
16
96
|
},
|
|
17
97
|
preview: {
|
|
18
98
|
width: 335,
|
|
@@ -23,4 +103,5 @@ const styles = StyleSheet.create({
|
|
|
23
103
|
marginTop: 15
|
|
24
104
|
}
|
|
25
105
|
});
|
|
106
|
+
export default Drawing;
|
|
26
107
|
//# sourceMappingURL=Drawing.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","View","
|
|
1
|
+
{"version":3,"names":["useRef","StyleSheet","View","TouchableOpacity","SignatureCanvas","Icon","Button","Color","jsx","_jsx","jsxs","_jsxs","Drawing","onDraw","ref","handleSignature","signature","handleEmpty","console","log","handleClear","handleError","error","handleEnd","current","readSignature","undo","redo","clear","clearSignature","style","styles","container","children","onEnd","onOK","onEmpty","onClear","onError","descriptionText","webStyle","gray","clearText","penColor","backgroundColor","base","white100","webviewProps","cacheEnabled","androidLayerType","footerConteiner","actionButtonContainer","onPress","name","variant","color","title","size","create","height","flexDirection","justifyContent","alignContent","alignItems","gap","preview","width","marginTop"],"sourceRoot":"../../../src","sources":["Drawing/Drawing.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
4
4
|
import { View, StyleSheet, Modal, TouchableOpacity, Animated, SafeAreaView, Platform } from 'react-native';
|
|
5
|
+
import Icon from "../Icon/index.js";
|
|
6
|
+
import Color from "../Color/Color.js";
|
|
5
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
8
|
const ModalPopUp = ({
|
|
7
9
|
isOpen,
|
|
@@ -22,8 +24,8 @@ const ModalPopUp = ({
|
|
|
22
24
|
Animated.spring(scaleAnim, {
|
|
23
25
|
toValue: 1,
|
|
24
26
|
useNativeDriver: true,
|
|
25
|
-
damping:
|
|
26
|
-
stiffness:
|
|
27
|
+
damping: 20,
|
|
28
|
+
stiffness: 200
|
|
27
29
|
}).start();
|
|
28
30
|
}, [scaleAnim]);
|
|
29
31
|
const hideModal = useCallback(() => {
|
|
@@ -78,12 +80,14 @@ const ModalPopUp = ({
|
|
|
78
80
|
children: /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
79
81
|
onPress: hideModal,
|
|
80
82
|
style: styles.closeButton,
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
84
|
+
style: styles.iconButtonClose,
|
|
85
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
86
|
+
name: "Times",
|
|
87
|
+
size: 13,
|
|
88
|
+
color: Color.gray[900]
|
|
89
|
+
})
|
|
90
|
+
})
|
|
87
91
|
})
|
|
88
92
|
}), /*#__PURE__*/_jsx(SafeAreaView, {
|
|
89
93
|
style: styles.contentContainer,
|
|
@@ -135,6 +139,13 @@ const styles = StyleSheet.create({
|
|
|
135
139
|
right: 10,
|
|
136
140
|
zIndex: 1
|
|
137
141
|
},
|
|
142
|
+
iconButtonClose: {
|
|
143
|
+
justifyContent: 'center',
|
|
144
|
+
alignContent: 'center',
|
|
145
|
+
alignItems: 'center',
|
|
146
|
+
top: 'auto',
|
|
147
|
+
flex: 1
|
|
148
|
+
},
|
|
138
149
|
closeButton: {
|
|
139
150
|
width: 24,
|
|
140
151
|
height: 24,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useEffect","useCallback","View","StyleSheet","Modal","TouchableOpacity","Animated","SafeAreaView","Platform","jsx","_jsx","jsxs","_jsxs","ModalPopUp","isOpen","onClose","children","backdrop","closable","onRequestClose","bgColor","width","containerStyle","modalStyle","isVisible","setIsVisible","scaleAnim","Value","showModal","spring","toValue","useNativeDriver","damping","stiffness","start","hideModal","setTimeout","handleBackdropPress","modalContentStyle","flatten","transform","scale","backgroundColor","maxHeight","transparent","visible","statusBarTranslucent","style","styles","modalContainer","backdropTouch","activeOpacity","onPress","modalContent","closeButtonContainer","closeButton","
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","useCallback","View","StyleSheet","Modal","TouchableOpacity","Animated","SafeAreaView","Platform","Icon","Color","jsx","_jsx","jsxs","_jsxs","ModalPopUp","isOpen","onClose","children","backdrop","closable","onRequestClose","bgColor","width","containerStyle","modalStyle","isVisible","setIsVisible","scaleAnim","Value","showModal","spring","toValue","useNativeDriver","damping","stiffness","start","hideModal","setTimeout","handleBackdropPress","modalContentStyle","flatten","transform","scale","backgroundColor","maxHeight","transparent","visible","statusBarTranslucent","style","styles","modalContainer","backdropTouch","activeOpacity","onPress","modalContent","closeButtonContainer","closeButton","iconButtonClose","name","size","color","gray","contentContainer","create","flex","justifyContent","alignItems","position","top","left","right","bottom","height","borderRadius","overflow","select","ios","shadowColor","shadowOffset","shadowOpacity","shadowRadius","android","elevation","zIndex","alignContent","padding"],"sourceRoot":"../../../src","sources":["Modal/Modal.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useRef","View","StyleSheet","Dimensions","ScrollView","Color","jsx","_jsx","jsxs","_jsxs","width","screenWidth","get","Step","children","current","onChangeStep","childrenArray","Children","toArray","filter","isValidElement","totalSteps","length","scrollRef","stepWidth","scrollTo","x","Math","max","animated","style","styles","container","headerContainer","ref","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","containerScrollView","justifyContent","map","child","index","cloneElement","isActive","isCompleted","isLast","isHeader","content","create","flex","paddingHorizontal","backgroundColor","info","paddingVertical","contentContainer","flexGrow"],"sourceRoot":"../../../src","sources":["Step/Step.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SAASC,IAAI,EAAEC,UAAU,EAAEC,UAAU,EAAEC,UAAU,QAAQ,cAAc;AACvE,OAAOC,KAAK,MAAM,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC,MAAM;EAAEC,KAAK,EAAEC;AAAY,CAAC,GAAGR,UAAU,CAACS,GAAG,CAAC,QAAQ,CAAC;AAEvD,MAAMC,IAAI,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO,GAAG,CAAC;EAAEC;AAAwB,CAAC,KAAK;EACnE,MAAMC,aAAa,GAAGnB,KAAK,CAACoB,QAAQ,CAACC,OAAO,CAACL,QAAQ,CAAC,CAACM,MAAM,CAC3DtB,KAAK,CAACuB,cACR,CAAwC;EACxC,MAAMC,UAAU,GAAGL,aAAa,CAACM,MAAM;EAEvC,MAAMC,SAAS,GAAGxB,MAAM,CAAa,IAAI,CAAC;EAC1C,MAAMyB,SAAS,GAAG,GAAG;EACrB1B,SAAS,CAAC,MAAM;IACdiB,YAAY,GAAGD,OAAO,CAAC;IAEvB,IAAIS,SAAS,CAACT,OAAO,EAAE;MACrBS,SAAS,CAACT,OAAO,CAACW,QAAQ,CAAC;QACzBC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEd,OAAO,GAAGU,SAAS,CAAC,GAAGd,WAAW,GAAG,CAAC,GAAGc,SAAS,GAAG,CAAC;QACrEK,QAAQ,EAAE;MACZ,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACf,OAAO,EAAEC,YAAY,CAAC,CAAC;EAE3B,oBACEP,KAAA,CAACR,IAAI;IAAC8B,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAnB,QAAA,
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","View","StyleSheet","Dimensions","ScrollView","Color","jsx","_jsx","jsxs","_jsxs","width","screenWidth","get","Step","children","current","onChangeStep","childrenArray","Children","toArray","filter","isValidElement","totalSteps","length","scrollRef","stepWidth","scrollTo","x","Math","max","animated","style","styles","container","headerContainer","ref","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","containerScrollView","justifyContent","map","child","index","cloneElement","isActive","isCompleted","isLast","isHeader","content","create","flex","paddingHorizontal","backgroundColor","info","paddingVertical","contentContainer","flexGrow"],"sourceRoot":"../../../src","sources":["Step/Step.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# 📱 Komponen Tab Kustom untuk React Native
|
|
2
|
+
|
|
3
|
+
Komponen tab ringan dan fleksibel untuk React Native yang mendukung:
|
|
4
|
+
|
|
5
|
+
* ✅ Swipe kiri/kanan antar tab
|
|
6
|
+
* ✅ Scroll vertikal di dalam konten tiap tab
|
|
7
|
+
* ✅ Tampilan tab yang bisa disesuaikan
|
|
8
|
+
* ✅ Tanpa dependensi eksternal (tidak butuh react-navigation)
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## 💡 Contoh Penggunaan
|
|
13
|
+
|
|
14
|
+
```tsx
|
|
15
|
+
import Tab from './Tab';
|
|
16
|
+
import TabItem from './TabItem';
|
|
17
|
+
import HomeScreen from './screens/Home';
|
|
18
|
+
import ProfileScreen from './screens/Profile';
|
|
19
|
+
|
|
20
|
+
export default function App() {
|
|
21
|
+
return (
|
|
22
|
+
<Tab>
|
|
23
|
+
<TabItem name="Beranda" component={HomeScreen} />
|
|
24
|
+
<TabItem name="Profil" component={ProfileScreen} />
|
|
25
|
+
</Tab>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## ✨ Fitur
|
|
33
|
+
|
|
34
|
+
### 1. Navigasi Tab
|
|
35
|
+
|
|
36
|
+
* Tap pada header tab untuk berpindah
|
|
37
|
+
* Swipe kiri/kanan untuk berpindah antar tab
|
|
38
|
+
|
|
39
|
+
### 2. Konten Scrollable
|
|
40
|
+
|
|
41
|
+
Setiap tab dibungkus dalam `ScrollView` vertikal, sehingga bisa discroll ke bawah jika konten panjang.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## 🧩 Props
|
|
46
|
+
|
|
47
|
+
### `TabProps`
|
|
48
|
+
|
|
49
|
+
| Properti | Tipe | Keterangan |
|
|
50
|
+
| -------------- | ------------------------- | ----------------------------- |
|
|
51
|
+
| `children` | `React.ReactNode` | Daftar elemen `<TabItem />` |
|
|
52
|
+
| `current?` | `number` | Indeks tab aktif (default: 0) |
|
|
53
|
+
| `onChangeTab?` | `(index: number) => void` | Callback saat tab berpindah |
|
|
54
|
+
|
|
55
|
+
### `TabItemProps`
|
|
56
|
+
|
|
57
|
+
| Properti | Tipe | Keterangan |
|
|
58
|
+
| ----------- | --------------------- | ---------------------------------- |
|
|
59
|
+
| `name` | `string` | Nama/tab label yang ditampilkan |
|
|
60
|
+
| `component` | `React.ComponentType` | Komponen yang akan dirender di tab |
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## 🧪 Contoh Screen
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
const HomeScreen = () => (
|
|
68
|
+
<View style={{ padding: 20 }}>
|
|
69
|
+
<Text>Selamat datang di tab Beranda!</Text>
|
|
70
|
+
</View>
|
|
71
|
+
);
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
---
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { useCallback, useState, useEffect, useRef, Children, isValidElement } from 'react';
|
|
4
|
+
import { View, Pressable, StyleSheet } from 'react-native';
|
|
5
|
+
import PagerView from 'react-native-pager-view';
|
|
6
|
+
import Color from "../Color/Color.js";
|
|
7
|
+
import Typography from "../Typography/Typography.js";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
const Tab = ({
|
|
10
|
+
children,
|
|
11
|
+
current = 0,
|
|
12
|
+
onChangeTab
|
|
13
|
+
}) => {
|
|
14
|
+
const items = Children.toArray(children).filter(isValidElement);
|
|
15
|
+
const [activeIndex, setActiveIndex] = useState(current);
|
|
16
|
+
const pagerRef = useRef(null);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
setActiveIndex(current);
|
|
19
|
+
pagerRef.current?.setPageWithoutAnimation(current);
|
|
20
|
+
}, [current]);
|
|
21
|
+
const updateActive = useCallback(index => {
|
|
22
|
+
if (index !== activeIndex) {
|
|
23
|
+
setActiveIndex(index);
|
|
24
|
+
onChangeTab?.(index);
|
|
25
|
+
}
|
|
26
|
+
}, [activeIndex, onChangeTab]);
|
|
27
|
+
const handleHeaderPress = index => {
|
|
28
|
+
pagerRef.current?.setPage(index);
|
|
29
|
+
updateActive(index);
|
|
30
|
+
};
|
|
31
|
+
if (items.length === 0) return null;
|
|
32
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
33
|
+
style: styles.container,
|
|
34
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
35
|
+
style: styles.headerContainer,
|
|
36
|
+
children: items.map((item, index) => {
|
|
37
|
+
const isActive = index === activeIndex;
|
|
38
|
+
return /*#__PURE__*/_jsx(Pressable, {
|
|
39
|
+
style: [styles.tabButton, isActive ? styles.tabActive : styles.tabInactive],
|
|
40
|
+
onPress: () => handleHeaderPress(index),
|
|
41
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
|
42
|
+
center: true,
|
|
43
|
+
variant: "t2",
|
|
44
|
+
weight: "semibold",
|
|
45
|
+
color: isActive ? Color.base.white100 : Color.gray[700],
|
|
46
|
+
children: item.props.name
|
|
47
|
+
})
|
|
48
|
+
}, index);
|
|
49
|
+
})
|
|
50
|
+
}), /*#__PURE__*/_jsx(PagerView, {
|
|
51
|
+
ref: pagerRef,
|
|
52
|
+
style: styles.pager,
|
|
53
|
+
initialPage: current,
|
|
54
|
+
onPageSelected: e => updateActive(e.nativeEvent.position),
|
|
55
|
+
children: items.map((item, index) => {
|
|
56
|
+
const Comp = item.props.component;
|
|
57
|
+
return /*#__PURE__*/_jsx(View, {
|
|
58
|
+
collapsable: false,
|
|
59
|
+
style: {
|
|
60
|
+
flex: 1
|
|
61
|
+
},
|
|
62
|
+
children: Comp ? /*#__PURE__*/_jsx(Comp, {}) : null
|
|
63
|
+
}, index);
|
|
64
|
+
})
|
|
65
|
+
})]
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
export default Tab;
|
|
69
|
+
const styles = StyleSheet.create({
|
|
70
|
+
container: {
|
|
71
|
+
flex: 1
|
|
72
|
+
},
|
|
73
|
+
headerContainer: {
|
|
74
|
+
flexDirection: 'row',
|
|
75
|
+
backgroundColor: Color.gray[100],
|
|
76
|
+
padding: 4,
|
|
77
|
+
borderRadius: 8
|
|
78
|
+
},
|
|
79
|
+
tabButton: {
|
|
80
|
+
flex: 1,
|
|
81
|
+
borderRadius: 8,
|
|
82
|
+
paddingVertical: 6,
|
|
83
|
+
paddingHorizontal: 16,
|
|
84
|
+
justifyContent: 'center',
|
|
85
|
+
alignItems: 'center'
|
|
86
|
+
},
|
|
87
|
+
tabActive: {
|
|
88
|
+
backgroundColor: Color.primary[1000]
|
|
89
|
+
},
|
|
90
|
+
tabInactive: {
|
|
91
|
+
backgroundColor: Color.gray[100]
|
|
92
|
+
},
|
|
93
|
+
pager: {
|
|
94
|
+
flex: 1
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
//# sourceMappingURL=Tab.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useCallback","useState","useEffect","useRef","Children","isValidElement","View","Pressable","StyleSheet","PagerView","Color","Typography","jsx","_jsx","jsxs","_jsxs","Tab","children","current","onChangeTab","items","toArray","filter","activeIndex","setActiveIndex","pagerRef","setPageWithoutAnimation","updateActive","index","handleHeaderPress","setPage","length","style","styles","container","headerContainer","map","item","isActive","tabButton","tabActive","tabInactive","onPress","center","variant","weight","color","base","white100","gray","props","name","ref","pager","initialPage","onPageSelected","e","nativeEvent","position","Comp","component","collapsable","flex","create","flexDirection","backgroundColor","padding","borderRadius","paddingVertical","paddingHorizontal","justifyContent","alignItems","primary"],"sourceRoot":"../../../src","sources":["Tab/Tab.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IACVC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,cAAc,QACT,OAAO;AACd,SAASC,IAAI,EAAEC,SAAS,EAAEC,UAAU,QAAQ,cAAc;AAC1D,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,KAAK,MAAM,mBAAgB;AAClC,OAAOC,UAAU,MAAM,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGlD,MAAMC,GAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO,GAAG,CAAC;EAAEC;AAAY,CAAC,KAAK;EAC1E,MAAMC,KAAK,GAAGhB,QAAQ,CAACiB,OAAO,CAACJ,QAAQ,CAAC,CAACK,MAAM,CAC7CjB,cACF,CAAuC;EAEvC,MAAM,CAACkB,WAAW,EAAEC,cAAc,CAAC,GAAGvB,QAAQ,CAASiB,OAAO,CAAC;EAC/D,MAAMO,QAAQ,GAAGtB,MAAM,CAAY,IAAI,CAAC;EAExCD,SAAS,CAAC,MAAM;IACdsB,cAAc,CAACN,OAAO,CAAC;IACvBO,QAAQ,CAACP,OAAO,EAAEQ,uBAAuB,CAACR,OAAO,CAAC;EACpD,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,MAAMS,YAAY,GAAG3B,WAAW,CAC7B4B,KAAa,IAAK;IACjB,IAAIA,KAAK,KAAKL,WAAW,EAAE;MACzBC,cAAc,CAACI,KAAK,CAAC;MACrBT,WAAW,GAAGS,KAAK,CAAC;IACtB;EACF,CAAC,EACD,CAACL,WAAW,EAAEJ,WAAW,CAC3B,CAAC;EAED,MAAMU,iBAAiB,GAAID,KAAa,IAAK;IAC3CH,QAAQ,CAACP,OAAO,EAAEY,OAAO,CAACF,KAAK,CAAC;IAChCD,YAAY,CAACC,KAAK,CAAC;EACrB,CAAC;EAED,IAAIR,KAAK,CAACW,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAEnC,oBACEhB,KAAA,CAACT,IAAI;IAAC0B,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAjB,QAAA,gBAE5BJ,IAAA,CAACP,IAAI;MAAC0B,KAAK,EAAEC,MAAM,CAACE,eAAgB;MAAAlB,QAAA,EACjCG,KAAK,CAACgB,GAAG,CAAC,CAACC,IAAI,EAAET,KAAK,KAAK;QAC1B,MAAMU,QAAQ,GAAGV,KAAK,KAAKL,WAAW;QACtC,oBACEV,IAAA,CAACN,SAAS;UAERyB,KAAK,EAAE,CACLC,MAAM,CAACM,SAAS,EAChBD,QAAQ,GAAGL,MAAM,CAACO,SAAS,GAAGP,MAAM,CAACQ,WAAW,CAChD;UACFC,OAAO,EAAEA,CAAA,KAAMb,iBAAiB,CAACD,KAAK,CAAE;UAAAX,QAAA,eAExCJ,IAAA,CAACF,UAAU;YACTgC,MAAM;YACNC,OAAO,EAAC,IAAI;YACZC,MAAM,EAAC,UAAU;YACjBC,KAAK,EAAER,QAAQ,GAAG5B,KAAK,CAACqC,IAAI,CAACC,QAAQ,GAAGtC,KAAK,CAACuC,IAAI,CAAC,GAAG,CAAE;YAAAhC,QAAA,EAEvDoB,IAAI,CAACa,KAAK,CAACC;UAAI,CACN;QAAC,GAdRvB,KAeI,CAAC;MAEhB,CAAC;IAAC,CACE,CAAC,eACPf,IAAA,CAACJ,SAAS;MACR2C,GAAG,EAAE3B,QAAS;MACdO,KAAK,EAAEC,MAAM,CAACoB,KAAM;MACpBC,WAAW,EAAEpC,OAAQ;MACrBqC,cAAc,EAAGC,CAAC,IAAK7B,YAAY,CAAC6B,CAAC,CAACC,WAAW,CAACC,QAAQ,CAAE;MAAAzC,QAAA,EAE3DG,KAAK,CAACgB,GAAG,CAAC,CAACC,IAAI,EAAET,KAAK,KAAK;QAC1B,MAAM+B,IAAI,GAAGtB,IAAI,CAACa,KAAK,CAACU,SAAS;QACjC,oBACE/C,IAAA,CAACP,IAAI;UAAauD,WAAW,EAAE,KAAM;UAAC7B,KAAK,EAAE;YAAE8B,IAAI,EAAE;UAAE,CAAE;UAAA7C,QAAA,EACtD0C,IAAI,gBAAG9C,IAAA,CAAC8C,IAAI,IAAE,CAAC,GAAG;QAAI,GADd/B,KAEL,CAAC;MAEX,CAAC;IAAC,CACO,CAAC;EAAA,CACR,CAAC;AAEX,CAAC;AAED,eAAeZ,GAAG;AAElB,MAAMiB,MAAM,GAAGzB,UAAU,CAACuD,MAAM,CAAC;EAC/B7B,SAAS,EAAE;IAAE4B,IAAI,EAAE;EAAE,CAAC;EACtB3B,eAAe,EAAE;IACf6B,aAAa,EAAE,KAAK;IACpBC,eAAe,EAAEvD,KAAK,CAACuC,IAAI,CAAC,GAAG,CAAC;IAChCiB,OAAO,EAAE,CAAC;IACVC,YAAY,EAAE;EAChB,CAAC;EACD5B,SAAS,EAAE;IACTuB,IAAI,EAAE,CAAC;IACPK,YAAY,EAAE,CAAC;IACfC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACD/B,SAAS,EAAE;IAAEyB,eAAe,EAAEvD,KAAK,CAAC8D,OAAO,CAAC,IAAI;EAAE,CAAC;EACnD/B,WAAW,EAAE;IAAEwB,eAAe,EAAEvD,KAAK,CAACuC,IAAI,CAAC,GAAG;EAAE,CAAC;EACjDI,KAAK,EAAE;IAAES,IAAI,EAAE;EAAE;AACnB,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["View","jsx","_jsx","TabItem"],"sourceRoot":"../../../src","sources":["Tab/TabItem.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,MAAMC,OAAO,GAAGA,CAAA,KAAM;EACpB,oBAAOD,IAAA,CAACF,IAAI,IAAO,CAAC;AACtB,CAAC;AACD,eAAeG,OAAO","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["Tab/type.tsx"],"mappings":"","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -53,6 +53,8 @@ export { default as MonthPicker } from "./DatePicker/MonthPicker.js";
|
|
|
53
53
|
export { default as TimePicker } from "./DatePicker/TimePicker.js";
|
|
54
54
|
export { default as Step } from "./Step/Step.js";
|
|
55
55
|
export { default as StepItem } from "./Step/StepItem.js";
|
|
56
|
+
export { default as Tab } from "./Tab/Tab.js";
|
|
57
|
+
export { default as TabItem } from "./Tab/TabItem.js";
|
|
56
58
|
export { default as Toast } from "./Toast/Toast.js";
|
|
57
59
|
export { default as TextArea } from "./Input/TextArea.js";
|
|
58
60
|
// export { default as PdfView } from './FileView/PdfView';
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["RnKit","multiply","a","b","default","Accordion","AccordionItem","Button","Color","Typography","BottomSheet","Container","Card","DropDown","Center","Gap","Grid","Col","Chip","Footer","Devider","Select","LabelForm","Input","InputPassword","InputFile","InputOtp","Switch","CheckBox","CheckBoxList","RadioButton","Icon","Modal","Label","List","ListItem","Loading","Avatar","AvatarGroup","Badge","Alert","Timeline","TimelineItem","Theme","Provider","useFooter","Drawing","Calendar","DatePicker","YearPicker","MonthPicker","TimePicker","Step","StepItem","Toast","TextArea","ToastProvider","useToast"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,kBAAe;AAEjC,OAAO,SAASC,QAAQA,CAACC,CAAS,EAAEC,CAAS,EAAU;EACrD,OAAOH,KAAK,CAACC,QAAQ,CAACC,CAAC,EAAEC,CAAC,CAAC;AAC7B;AAEA,SAASC,OAAO,IAAIC,SAAS,QAAQ,0BAAuB;AAC5D,SAASD,OAAO,IAAIE,aAAa,QAAQ,8BAA2B;AAEpE,SAASF,OAAO,IAAIG,MAAM,QAAQ,oBAAiB;AACnD,SAASH,OAAO,IAAII,KAAK,QAAQ,kBAAe;AAChD,SAASJ,OAAO,IAAIK,UAAU,QAAQ,4BAAyB;
|
|
1
|
+
{"version":3,"names":["RnKit","multiply","a","b","default","Accordion","AccordionItem","Button","Color","Typography","BottomSheet","Container","Card","DropDown","Center","Gap","Grid","Col","Chip","Footer","Devider","Select","LabelForm","Input","InputPassword","InputFile","InputOtp","Switch","CheckBox","CheckBoxList","RadioButton","Icon","Modal","Label","List","ListItem","Loading","Avatar","AvatarGroup","Badge","Alert","Timeline","TimelineItem","Theme","Provider","useFooter","Drawing","Calendar","DatePicker","YearPicker","MonthPicker","TimePicker","Step","StepItem","Tab","TabItem","Toast","TextArea","ToastProvider","useToast"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAErC;AAkBD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuCrC,CAAC;AA8BF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
interface DrawingProps {
|
|
2
|
+
onDraw?: (value?: string | undefined) => void;
|
|
3
|
+
}
|
|
4
|
+
declare const Drawing: ({ onDraw }: DrawingProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export default Drawing;
|
|
2
6
|
//# sourceMappingURL=Drawing.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawing.d.ts","sourceRoot":"","sources":["../../../../src/Drawing/Drawing.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Drawing.d.ts","sourceRoot":"","sources":["../../../../src/Drawing/Drawing.tsx"],"names":[],"mappings":"AAOA,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,OAAO,GAAI,YAAY,YAAY,4CAyExC,CAAC;AA0BF,eAAe,OAAO,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAML,KAAK,cAAc,EAGnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAML,KAAK,cAAc,EAGnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,UAAU,eAAe;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgGzC,CAAC;AA8DF,eAAe,UAAU,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/Step/Step.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,QAAQ,CAAC;AAIvD,QAAA,MAAM,IAAI,GAAI,qCAAyC,SAAS,
|
|
1
|
+
{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/Step/Step.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,QAAQ,CAAC;AAIvD,QAAA,MAAM,IAAI,GAAI,qCAAyC,SAAS,4CA4D/D,CAAC;AAuBF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAgB,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAErD,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA0E3B,CAAC;AAEF,eAAe,GAAG,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabItem.d.ts","sourceRoot":"","sources":["../../../../src/Tab/TabItem.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,OAAO,+CAEZ,CAAC;AACF,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, { type ReactElement } from 'react';
|
|
2
|
+
export interface TabItemProps {
|
|
3
|
+
name: string | number;
|
|
4
|
+
component: React.ComponentType<any>;
|
|
5
|
+
}
|
|
6
|
+
export interface TabProps {
|
|
7
|
+
children: ReactElement<TabItemProps> | ReactElement<TabItemProps>[];
|
|
8
|
+
current?: number;
|
|
9
|
+
onChangeTab?: (e: any) => void;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=type.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Tab/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CACrC;AACD,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC"}
|
|
@@ -5,6 +5,7 @@ export type { AccordionRenderHeaderProps } from './Accordion/type';
|
|
|
5
5
|
export { default as Button } from './Button/Button';
|
|
6
6
|
export { default as Color } from './Color/Color';
|
|
7
7
|
export { default as Typography } from './Typography/Typography';
|
|
8
|
+
export type { fontSizeMap, fontWeightMap, lineHeightMap, TypographyVariantProps, } from './Typography/type';
|
|
8
9
|
export { default as BottomSheet } from './BottomSheet/BottomSheet';
|
|
9
10
|
export { default as Container } from './Ui/Container';
|
|
10
11
|
export { default as Card } from './Ui/Card';
|
|
@@ -52,6 +53,8 @@ export { default as MonthPicker } from './DatePicker/MonthPicker';
|
|
|
52
53
|
export { default as TimePicker } from './DatePicker/TimePicker';
|
|
53
54
|
export { default as Step } from './Step/Step';
|
|
54
55
|
export { default as StepItem } from './Step/StepItem';
|
|
56
|
+
export { default as Tab } from './Tab/Tab';
|
|
57
|
+
export { default as TabItem } from './Tab/TabItem';
|
|
55
58
|
export { default as Toast } from './Toast/Toast';
|
|
56
59
|
export { default as TextArea } from './Input/TextArea';
|
|
57
60
|
export { ToastProvider, useToast } from './Toast/ToastContext';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAErD;AAED,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrE,YAAY,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,WAAW,EACX,aAAa,EACb,aAAa,EACb,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@herca/rn-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10",
|
|
4
4
|
"description": "React Native UI Kit",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -164,9 +164,15 @@
|
|
|
164
164
|
"dependencies": {
|
|
165
165
|
"@react-native-documents/picker": "^10.1.3",
|
|
166
166
|
"@react-native-documents/viewer": "^1.0.1",
|
|
167
|
+
"@react-navigation/native": "^7.1.14",
|
|
167
168
|
"react-native-blob-util": "^0.22.2",
|
|
168
169
|
"react-native-image-picker": "^8.2.1",
|
|
170
|
+
"react-native-pager-view": "^6.8.1",
|
|
169
171
|
"react-native-pdf": "^6.7.7",
|
|
170
|
-
"react-native-
|
|
172
|
+
"react-native-safe-area-context": "^5.5.1",
|
|
173
|
+
"react-native-screens": "^4.11.1",
|
|
174
|
+
"react-native-signature-canvas": "^5.0.1",
|
|
175
|
+
"react-native-svg": "^15.12.0",
|
|
176
|
+
"react-native-webview": "^13.15.0"
|
|
171
177
|
}
|
|
172
178
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
2
|
import { Pressable, View, Text, StyleSheet } from 'react-native';
|
|
3
|
-
import { Color, Icon } from '@herca/rn-kit';
|
|
3
|
+
import { Color, Icon } from '@herca/rn-kit';
|
|
4
|
+
// import type { ColorVariantType } from '../Color/type';
|
|
4
5
|
|
|
5
6
|
interface CheckBoxProps {
|
|
6
7
|
checked?: boolean;
|
|
@@ -8,16 +9,35 @@ interface CheckBoxProps {
|
|
|
8
9
|
label?: string | React.ReactNode;
|
|
9
10
|
disabled?: boolean;
|
|
10
11
|
renderLabel?: () => React.ReactNode;
|
|
12
|
+
// color?: ColorVariantType;
|
|
11
13
|
}
|
|
12
14
|
|
|
15
|
+
// const COLOR_MAP: Record<
|
|
16
|
+
// ColorVariantType,
|
|
17
|
+
// {
|
|
18
|
+
// backgroundColor: ColorValue;
|
|
19
|
+
// backgroundColorDisabled: ColorValue;
|
|
20
|
+
// }
|
|
21
|
+
// > = {
|
|
22
|
+
// primary : {
|
|
23
|
+
// backgroundColor : Color.primary[1000],
|
|
24
|
+
// backgroundColorDisabled : Color.primary[100],
|
|
25
|
+
// },
|
|
26
|
+
// danger: {
|
|
27
|
+
// backgroundColor : Color.danger[500],
|
|
28
|
+
// backgroundColorDisabled : Color.danger[100],
|
|
29
|
+
// },
|
|
30
|
+
// }
|
|
13
31
|
const CheckBox: React.FC<CheckBoxProps> = ({
|
|
14
32
|
checked = false,
|
|
15
33
|
onChange,
|
|
16
34
|
label,
|
|
17
35
|
disabled = false,
|
|
18
36
|
renderLabel,
|
|
37
|
+
// color= 'primary'
|
|
19
38
|
}) => {
|
|
20
39
|
const [value, setValue] = useState<boolean>(false);
|
|
40
|
+
// const _selectedColor = COLOR_MAP[color];
|
|
21
41
|
|
|
22
42
|
const handlePress = () => {
|
|
23
43
|
const newValue = !value;
|
package/src/Drawing/Drawing.tsx
CHANGED
|
@@ -1,16 +1,102 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useRef } from 'react';
|
|
2
|
+
import { StyleSheet, View, TouchableOpacity } from 'react-native';
|
|
3
|
+
import SignatureCanvas, { type SignatureViewRef } from 'react-native-signature-canvas';
|
|
4
|
+
import Icon from '../Icon';
|
|
5
|
+
import Button from '../Button/Button';
|
|
6
|
+
import Color from '../Color/Color';
|
|
7
|
+
|
|
8
|
+
interface DrawingProps {
|
|
9
|
+
onDraw?: (value?: string | undefined) => void;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const Drawing = ({ onDraw }: DrawingProps) => {
|
|
13
|
+
const ref = useRef<SignatureViewRef | null>(null);
|
|
14
|
+
|
|
15
|
+
const handleSignature = (signature : string) => {
|
|
16
|
+
if (signature && onDraw) {
|
|
17
|
+
onDraw(signature);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const handleEmpty = () => {
|
|
22
|
+
console.log('Signature is empty');
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const handleClear = () => {
|
|
26
|
+
console.log('Signature cleared');
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const handleError = (error : Error) => {
|
|
30
|
+
console.error('Signature pad error:', error);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const handleEnd = () => {
|
|
34
|
+
ref.current?.readSignature();
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const undo = () => ref.current?.undo();
|
|
38
|
+
const redo = () => ref.current?.redo();
|
|
39
|
+
const clear = () => ref.current?.clearSignature();
|
|
2
40
|
|
|
3
|
-
export default function Drawing() {
|
|
4
41
|
return (
|
|
5
42
|
<View style={styles.container}>
|
|
6
|
-
<
|
|
43
|
+
<SignatureCanvas
|
|
44
|
+
ref={ref}
|
|
45
|
+
onEnd={handleEnd}
|
|
46
|
+
onOK={handleSignature}
|
|
47
|
+
onEmpty={handleEmpty}
|
|
48
|
+
onClear={handleClear}
|
|
49
|
+
onError={handleError}
|
|
50
|
+
descriptionText=" "
|
|
51
|
+
webStyle={`
|
|
52
|
+
.m-signature-pad {box-shadow: none; border-color:${Color.gray[200]}; border-radius: 12px;}
|
|
53
|
+
.m-signature-pad--body {border-color:${Color.gray[200]}; border-radius:12px;}
|
|
54
|
+
.m-signature-pad--footer{
|
|
55
|
+
display: none; margin: 0,
|
|
56
|
+
}
|
|
57
|
+
`}
|
|
58
|
+
clearText={'Clear'}
|
|
59
|
+
penColor={Color.gray[900]}
|
|
60
|
+
backgroundColor={Color.base.white100}
|
|
61
|
+
webviewProps={{
|
|
62
|
+
cacheEnabled: true,
|
|
63
|
+
androidLayerType: 'hardware',
|
|
64
|
+
}}
|
|
65
|
+
/>
|
|
66
|
+
<View style={styles.footerConteiner}>
|
|
67
|
+
<View style={styles.actionButtonContainer}>
|
|
68
|
+
<TouchableOpacity onPress={undo}>
|
|
69
|
+
<Icon name="ArrowBackAlt" />
|
|
70
|
+
</TouchableOpacity>
|
|
71
|
+
<TouchableOpacity onPress={redo}>
|
|
72
|
+
<Icon name="ArrowForwardAlt" />
|
|
73
|
+
</TouchableOpacity>
|
|
74
|
+
</View>
|
|
75
|
+
<Button
|
|
76
|
+
variant="outline"
|
|
77
|
+
color="primary"
|
|
78
|
+
title="Clear"
|
|
79
|
+
size="small"
|
|
80
|
+
onPress={clear}
|
|
81
|
+
/>
|
|
82
|
+
</View>
|
|
7
83
|
</View>
|
|
8
84
|
);
|
|
9
|
-
}
|
|
85
|
+
};
|
|
10
86
|
|
|
11
87
|
const styles = StyleSheet.create({
|
|
12
88
|
container: {
|
|
13
|
-
|
|
89
|
+
height: 350,
|
|
90
|
+
},
|
|
91
|
+
footerConteiner: {
|
|
92
|
+
flexDirection: 'row',
|
|
93
|
+
justifyContent: 'space-between',
|
|
94
|
+
alignContent: 'center',
|
|
95
|
+
alignItems: 'center',
|
|
96
|
+
},
|
|
97
|
+
actionButtonContainer: {
|
|
98
|
+
flexDirection: 'row',
|
|
99
|
+
gap: 10,
|
|
14
100
|
},
|
|
15
101
|
preview: {
|
|
16
102
|
width: 335,
|
|
@@ -21,3 +107,5 @@ const styles = StyleSheet.create({
|
|
|
21
107
|
marginTop: 15,
|
|
22
108
|
},
|
|
23
109
|
});
|
|
110
|
+
|
|
111
|
+
export default Drawing;
|
package/src/Modal/Modal.tsx
CHANGED
|
@@ -10,6 +10,8 @@ import {
|
|
|
10
10
|
Platform,
|
|
11
11
|
type ViewStyle,
|
|
12
12
|
} from 'react-native';
|
|
13
|
+
import Icon from '../Icon';
|
|
14
|
+
import Color from '../Color/Color';
|
|
13
15
|
|
|
14
16
|
interface ModalPopUpProps {
|
|
15
17
|
isOpen: boolean;
|
|
@@ -45,8 +47,8 @@ const ModalPopUp: React.FC<ModalPopUpProps> = ({
|
|
|
45
47
|
Animated.spring(scaleAnim, {
|
|
46
48
|
toValue: 1,
|
|
47
49
|
useNativeDriver: true,
|
|
48
|
-
damping:
|
|
49
|
-
stiffness:
|
|
50
|
+
damping: 20,
|
|
51
|
+
stiffness: 200,
|
|
50
52
|
}).start();
|
|
51
53
|
}, [scaleAnim]);
|
|
52
54
|
|
|
@@ -107,11 +109,11 @@ const ModalPopUp: React.FC<ModalPopUpProps> = ({
|
|
|
107
109
|
<Animated.View style={[styles.modalContent, modalContentStyle]}>
|
|
108
110
|
{closable && (
|
|
109
111
|
<View style={styles.closeButtonContainer}>
|
|
110
|
-
<TouchableOpacity
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
<TouchableOpacity onPress={hideModal} style={styles.closeButton}>
|
|
113
|
+
<View style={styles.iconButtonClose}>
|
|
114
|
+
<Icon name="Times" size={13} color={Color.gray[900]} />
|
|
115
|
+
</View>
|
|
116
|
+
</TouchableOpacity>
|
|
115
117
|
</View>
|
|
116
118
|
)}
|
|
117
119
|
<SafeAreaView style={styles.contentContainer}>
|
|
@@ -165,6 +167,13 @@ const styles = StyleSheet.create({
|
|
|
165
167
|
right: 10,
|
|
166
168
|
zIndex: 1,
|
|
167
169
|
},
|
|
170
|
+
iconButtonClose: {
|
|
171
|
+
justifyContent: 'center',
|
|
172
|
+
alignContent: 'center',
|
|
173
|
+
alignItems: 'center',
|
|
174
|
+
top: 'auto',
|
|
175
|
+
flex: 1,
|
|
176
|
+
},
|
|
168
177
|
closeButton: {
|
|
169
178
|
width: 24,
|
|
170
179
|
height: 24,
|
package/src/Step/Step.tsx
CHANGED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# 📱 Komponen Tab Kustom untuk React Native
|
|
2
|
+
|
|
3
|
+
Komponen tab ringan dan fleksibel untuk React Native yang mendukung:
|
|
4
|
+
|
|
5
|
+
* ✅ Swipe kiri/kanan antar tab
|
|
6
|
+
* ✅ Scroll vertikal di dalam konten tiap tab
|
|
7
|
+
* ✅ Tampilan tab yang bisa disesuaikan
|
|
8
|
+
* ✅ Tanpa dependensi eksternal (tidak butuh react-navigation)
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## 💡 Contoh Penggunaan
|
|
13
|
+
|
|
14
|
+
```tsx
|
|
15
|
+
import Tab from './Tab';
|
|
16
|
+
import TabItem from './TabItem';
|
|
17
|
+
import HomeScreen from './screens/Home';
|
|
18
|
+
import ProfileScreen from './screens/Profile';
|
|
19
|
+
|
|
20
|
+
export default function App() {
|
|
21
|
+
return (
|
|
22
|
+
<Tab>
|
|
23
|
+
<TabItem name="Beranda" component={HomeScreen} />
|
|
24
|
+
<TabItem name="Profil" component={ProfileScreen} />
|
|
25
|
+
</Tab>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## ✨ Fitur
|
|
33
|
+
|
|
34
|
+
### 1. Navigasi Tab
|
|
35
|
+
|
|
36
|
+
* Tap pada header tab untuk berpindah
|
|
37
|
+
* Swipe kiri/kanan untuk berpindah antar tab
|
|
38
|
+
|
|
39
|
+
### 2. Konten Scrollable
|
|
40
|
+
|
|
41
|
+
Setiap tab dibungkus dalam `ScrollView` vertikal, sehingga bisa discroll ke bawah jika konten panjang.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## 🧩 Props
|
|
46
|
+
|
|
47
|
+
### `TabProps`
|
|
48
|
+
|
|
49
|
+
| Properti | Tipe | Keterangan |
|
|
50
|
+
| -------------- | ------------------------- | ----------------------------- |
|
|
51
|
+
| `children` | `React.ReactNode` | Daftar elemen `<TabItem />` |
|
|
52
|
+
| `current?` | `number` | Indeks tab aktif (default: 0) |
|
|
53
|
+
| `onChangeTab?` | `(index: number) => void` | Callback saat tab berpindah |
|
|
54
|
+
|
|
55
|
+
### `TabItemProps`
|
|
56
|
+
|
|
57
|
+
| Properti | Tipe | Keterangan |
|
|
58
|
+
| ----------- | --------------------- | ---------------------------------- |
|
|
59
|
+
| `name` | `string` | Nama/tab label yang ditampilkan |
|
|
60
|
+
| `component` | `React.ComponentType` | Komponen yang akan dirender di tab |
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## 🧪 Contoh Screen
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
const HomeScreen = () => (
|
|
68
|
+
<View style={{ padding: 20 }}>
|
|
69
|
+
<Text>Selamat datang di tab Beranda!</Text>
|
|
70
|
+
</View>
|
|
71
|
+
);
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
---
|
package/src/Tab/Tab.tsx
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import React, {
|
|
2
|
+
useCallback,
|
|
3
|
+
useState,
|
|
4
|
+
useEffect,
|
|
5
|
+
useRef,
|
|
6
|
+
Children,
|
|
7
|
+
isValidElement,
|
|
8
|
+
} from 'react';
|
|
9
|
+
import { View, Pressable, StyleSheet } from 'react-native';
|
|
10
|
+
import PagerView from 'react-native-pager-view';
|
|
11
|
+
import Color from '../Color/Color';
|
|
12
|
+
import Typography from '../Typography/Typography';
|
|
13
|
+
import type { TabItemProps, TabProps } from './type';
|
|
14
|
+
|
|
15
|
+
const Tab: React.FC<TabProps> = ({ children, current = 0, onChangeTab }) => {
|
|
16
|
+
const items = Children.toArray(children).filter(
|
|
17
|
+
isValidElement
|
|
18
|
+
) as React.ReactElement<TabItemProps>[];
|
|
19
|
+
|
|
20
|
+
const [activeIndex, setActiveIndex] = useState<number>(current);
|
|
21
|
+
const pagerRef = useRef<PagerView>(null);
|
|
22
|
+
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
setActiveIndex(current);
|
|
25
|
+
pagerRef.current?.setPageWithoutAnimation(current);
|
|
26
|
+
}, [current]);
|
|
27
|
+
|
|
28
|
+
const updateActive = useCallback(
|
|
29
|
+
(index: number) => {
|
|
30
|
+
if (index !== activeIndex) {
|
|
31
|
+
setActiveIndex(index);
|
|
32
|
+
onChangeTab?.(index);
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
[activeIndex, onChangeTab]
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
const handleHeaderPress = (index: number) => {
|
|
39
|
+
pagerRef.current?.setPage(index);
|
|
40
|
+
updateActive(index);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
if (items.length === 0) return null;
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<View style={styles.container}>
|
|
47
|
+
{/* Header */}
|
|
48
|
+
<View style={styles.headerContainer}>
|
|
49
|
+
{items.map((item, index) => {
|
|
50
|
+
const isActive = index === activeIndex;
|
|
51
|
+
return (
|
|
52
|
+
<Pressable
|
|
53
|
+
key={index}
|
|
54
|
+
style={[
|
|
55
|
+
styles.tabButton,
|
|
56
|
+
isActive ? styles.tabActive : styles.tabInactive,
|
|
57
|
+
]}
|
|
58
|
+
onPress={() => handleHeaderPress(index)}
|
|
59
|
+
>
|
|
60
|
+
<Typography
|
|
61
|
+
center
|
|
62
|
+
variant="t2"
|
|
63
|
+
weight="semibold"
|
|
64
|
+
color={isActive ? Color.base.white100 : Color.gray[700]}
|
|
65
|
+
>
|
|
66
|
+
{item.props.name}
|
|
67
|
+
</Typography>
|
|
68
|
+
</Pressable>
|
|
69
|
+
);
|
|
70
|
+
})}
|
|
71
|
+
</View>
|
|
72
|
+
<PagerView
|
|
73
|
+
ref={pagerRef}
|
|
74
|
+
style={styles.pager}
|
|
75
|
+
initialPage={current}
|
|
76
|
+
onPageSelected={(e) => updateActive(e.nativeEvent.position)}
|
|
77
|
+
>
|
|
78
|
+
{items.map((item, index) => {
|
|
79
|
+
const Comp = item.props.component;
|
|
80
|
+
return (
|
|
81
|
+
<View key={index} collapsable={false} style={{ flex: 1 }}>
|
|
82
|
+
{Comp ? <Comp /> : null}
|
|
83
|
+
</View>
|
|
84
|
+
);
|
|
85
|
+
})}
|
|
86
|
+
</PagerView>
|
|
87
|
+
</View>
|
|
88
|
+
);
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export default Tab;
|
|
92
|
+
|
|
93
|
+
const styles = StyleSheet.create({
|
|
94
|
+
container: { flex: 1 },
|
|
95
|
+
headerContainer: {
|
|
96
|
+
flexDirection: 'row',
|
|
97
|
+
backgroundColor: Color.gray[100],
|
|
98
|
+
padding: 4,
|
|
99
|
+
borderRadius: 8,
|
|
100
|
+
},
|
|
101
|
+
tabButton: {
|
|
102
|
+
flex: 1,
|
|
103
|
+
borderRadius: 8,
|
|
104
|
+
paddingVertical: 6,
|
|
105
|
+
paddingHorizontal: 16,
|
|
106
|
+
justifyContent: 'center',
|
|
107
|
+
alignItems: 'center',
|
|
108
|
+
},
|
|
109
|
+
tabActive: { backgroundColor: Color.primary[1000] },
|
|
110
|
+
tabInactive: { backgroundColor: Color.gray[100] },
|
|
111
|
+
pager: { flex: 1 },
|
|
112
|
+
});
|
package/src/Tab/type.tsx
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, { type ReactElement } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface TabItemProps {
|
|
4
|
+
name: string | number;
|
|
5
|
+
component: React.ComponentType<any>;
|
|
6
|
+
}
|
|
7
|
+
export interface TabProps {
|
|
8
|
+
children: ReactElement<TabItemProps> | ReactElement<TabItemProps>[];
|
|
9
|
+
current?: number;
|
|
10
|
+
onChangeTab?: (e: any) => void;
|
|
11
|
+
}
|
package/src/index.tsx
CHANGED
|
@@ -10,6 +10,12 @@ export type { AccordionRenderHeaderProps } from './Accordion/type';
|
|
|
10
10
|
export { default as Button } from './Button/Button';
|
|
11
11
|
export { default as Color } from './Color/Color';
|
|
12
12
|
export { default as Typography } from './Typography/Typography';
|
|
13
|
+
export type {
|
|
14
|
+
fontSizeMap,
|
|
15
|
+
fontWeightMap,
|
|
16
|
+
lineHeightMap,
|
|
17
|
+
TypographyVariantProps,
|
|
18
|
+
} from './Typography/type';
|
|
13
19
|
export { default as BottomSheet } from './BottomSheet/BottomSheet';
|
|
14
20
|
export { default as Container } from './Ui/Container';
|
|
15
21
|
export { default as Card } from './Ui/Card';
|
|
@@ -61,6 +67,8 @@ export { default as MonthPicker } from './DatePicker/MonthPicker';
|
|
|
61
67
|
export { default as TimePicker } from './DatePicker/TimePicker';
|
|
62
68
|
export { default as Step } from './Step/Step';
|
|
63
69
|
export { default as StepItem } from './Step/StepItem';
|
|
70
|
+
export { default as Tab } from './Tab/Tab';
|
|
71
|
+
export { default as TabItem } from './Tab/TabItem';
|
|
64
72
|
export { default as Toast } from './Toast/Toast';
|
|
65
73
|
export { default as TextArea } from './Input/TextArea';
|
|
66
74
|
// export { default as PdfView } from './FileView/PdfView';
|