@herca/rn-kit 0.1.6 → 0.1.7
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 +22 -0
- package/lib/module/DropDown/DropDown.js +49 -45
- package/lib/module/DropDown/DropDown.js.map +1 -1
- package/lib/module/DropDown/README.md +1 -0
- package/lib/module/Provider/Provider.js +2 -0
- package/lib/module/Provider/Provider.js.map +1 -1
- package/lib/module/Timeline/Timeline.js +7 -1
- package/lib/module/Timeline/Timeline.js.map +1 -1
- package/lib/module/Timeline/TimelineItem.js +15 -5
- package/lib/module/Timeline/TimelineItem.js.map +1 -1
- package/lib/typescript/src/DropDown/DropDown.d.ts.map +1 -1
- package/lib/typescript/src/DropDown/type.d.ts +1 -1
- package/lib/typescript/src/DropDown/type.d.ts.map +1 -1
- package/lib/typescript/src/Provider/Provider.d.ts +2 -2
- package/lib/typescript/src/Provider/Provider.d.ts.map +1 -1
- package/lib/typescript/src/Provider/type.d.ts +2 -2
- package/lib/typescript/src/Provider/type.d.ts.map +1 -1
- package/lib/typescript/src/Timeline/TimelineItem.d.ts +1 -1
- package/lib/typescript/src/Timeline/TimelineItem.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/DropDown/DropDown.tsx +54 -58
- package/src/DropDown/README.md +1 -0
- package/src/DropDown/type.tsx +1 -1
- package/src/Provider/Provider.tsx +4 -2
- package/src/Provider/type.tsx +2 -2
- package/src/Timeline/Timeline.tsx +8 -2
- package/src/Timeline/TimelineItem.tsx +16 -3
package/README.md
CHANGED
|
@@ -70,6 +70,19 @@ cd ios
|
|
|
70
70
|
pod install
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
+
Wrap content utama dengan Provider
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
|
|
77
|
+
import {Provider} from '@herca/rn-kit';
|
|
78
|
+
const Stack = createNativeStackNavigator();
|
|
79
|
+
|
|
80
|
+
const App = () => {
|
|
81
|
+
return (
|
|
82
|
+
<Provider>
|
|
83
|
+
<YoyrCode>
|
|
84
|
+
</Provider>
|
|
85
|
+
```
|
|
73
86
|
---
|
|
74
87
|
|
|
75
88
|
## 🚀 Penggunaan
|
|
@@ -88,13 +101,17 @@ import { Button } from '@herca/rn-kit';
|
|
|
88
101
|
|
|
89
102
|
Komponen untuk mengumpulkan input dari pengguna.
|
|
90
103
|
|
|
104
|
+
- [Button](./src/Button/README.md)
|
|
91
105
|
- [Checkbox](./src/Checkbox/README_CHECKBOX.md)
|
|
92
106
|
- [Checkbox](./src/Checkbox/README_CHECKBOXLIST.md)
|
|
93
107
|
- [Chip-(Select)](./src/Chip/README.md)
|
|
94
108
|
- [DatePicker](./src/DatePicker/README.md)
|
|
95
109
|
- [DropDown](./src/DropDown/README.md)
|
|
96
110
|
- [Input](./src/Input/README.md)
|
|
111
|
+
- [Input Month](./src/InputMonth/README.md)
|
|
97
112
|
- [Input Password](./src/InputPassword/README.md)
|
|
113
|
+
- [Input Time](./src/InputTime/README.md)
|
|
114
|
+
- [Input Year](./src/InputYear/README.md)
|
|
98
115
|
- [Radio Button](./src/RadioButton/README.md)
|
|
99
116
|
- [Select](./src/Select/README.md)
|
|
100
117
|
- [Switch](./src/Switch/README.md)
|
|
@@ -140,12 +157,17 @@ Komponen untuk menampilkan informasi atau elemen visual.
|
|
|
140
157
|
- [Color](./src/Color/README.md)
|
|
141
158
|
- [Card](./src/Ui/README_CARD.md)
|
|
142
159
|
- [Drawing](./src/Drawing/README.md)
|
|
160
|
+
- [Footer](./src/Footer/README.md)
|
|
143
161
|
- [List](./src/List/README.md)
|
|
144
162
|
- [Timeline](./src/Timeline/README.md)
|
|
145
163
|
- [Typography](./src/Typography/README.md)
|
|
146
164
|
|
|
147
165
|
---
|
|
148
166
|
|
|
167
|
+
### Contex
|
|
168
|
+
|
|
169
|
+
- [Provider](./src/Provider/README.md)
|
|
170
|
+
|
|
149
171
|
## 🤝 Kontribusi
|
|
150
172
|
|
|
151
173
|
Silakan baca panduan kontribusi pada [CONTRIBUTING.md](CONTRIBUTING.md) untuk mengetahui alur pengembangan dan kontribusi pada proyek ini.
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { useState, useRef } from 'react';
|
|
4
|
-
import { View, Text, TouchableOpacity, StyleSheet, ScrollView, useWindowDimensions, findNodeHandle, UIManager } from 'react-native';
|
|
4
|
+
import { View, Text, TouchableOpacity, Pressable, StyleSheet, ScrollView, useWindowDimensions, findNodeHandle, UIManager, Modal } from 'react-native';
|
|
5
5
|
import Color from "../Color/Color.js";
|
|
6
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
7
|
const Dropdown = ({
|
|
8
8
|
options,
|
|
9
9
|
maxHeight = 200,
|
|
@@ -12,16 +12,28 @@ const Dropdown = ({
|
|
|
12
12
|
}) => {
|
|
13
13
|
const [isOpen, setIsOpen] = useState(false);
|
|
14
14
|
const [selected, setSelected] = useState();
|
|
15
|
-
const [
|
|
15
|
+
const [align, setAlign] = useState('left');
|
|
16
|
+
const [buttonLayout, setButtonLayout] = useState({
|
|
17
|
+
x: 0,
|
|
18
|
+
y: 0,
|
|
19
|
+
width: 0,
|
|
20
|
+
height: 0
|
|
21
|
+
});
|
|
16
22
|
const buttonRef = useRef(null);
|
|
17
23
|
const windowWidth = useWindowDimensions().width;
|
|
18
24
|
const handleToggle = () => {
|
|
19
25
|
if (!isOpen) {
|
|
20
26
|
const handle = findNodeHandle(buttonRef.current);
|
|
21
27
|
if (handle) {
|
|
22
|
-
UIManager.measureInWindow(handle, (x,
|
|
28
|
+
UIManager.measureInWindow(handle, (x, y, width, height) => {
|
|
23
29
|
const middle = windowWidth / 2;
|
|
24
|
-
|
|
30
|
+
setAlign(x + width / 2 > middle ? 'right' : 'left');
|
|
31
|
+
setButtonLayout({
|
|
32
|
+
x,
|
|
33
|
+
y,
|
|
34
|
+
width,
|
|
35
|
+
height
|
|
36
|
+
});
|
|
25
37
|
setIsOpen(true);
|
|
26
38
|
});
|
|
27
39
|
}
|
|
@@ -34,56 +46,54 @@ const Dropdown = ({
|
|
|
34
46
|
setIsOpen(false);
|
|
35
47
|
onSelect?.(value.value);
|
|
36
48
|
};
|
|
37
|
-
return /*#__PURE__*/_jsxs(
|
|
38
|
-
style: styles.container,
|
|
49
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
39
50
|
children: [/*#__PURE__*/_jsx(TouchableOpacity, {
|
|
40
51
|
ref: buttonRef,
|
|
41
|
-
style: styles.dropdownButton,
|
|
42
52
|
onPress: handleToggle,
|
|
43
|
-
children: renderButton
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
children: /*#__PURE__*/_jsx(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
53
|
+
children: renderButton
|
|
54
|
+
}), isOpen && /*#__PURE__*/_jsxs(Modal, {
|
|
55
|
+
transparent: true,
|
|
56
|
+
animationType: "none",
|
|
57
|
+
visible: true,
|
|
58
|
+
children: [/*#__PURE__*/_jsx(Pressable, {
|
|
59
|
+
style: StyleSheet.absoluteFillObject,
|
|
60
|
+
onPress: () => setIsOpen(false)
|
|
61
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
62
|
+
style: [styles.dropdownList, {
|
|
63
|
+
top: buttonLayout.y + buttonLayout.height,
|
|
64
|
+
left: align === 'left' ? buttonLayout.x : undefined,
|
|
65
|
+
right: align === 'right' ? windowWidth - (buttonLayout.x + buttonLayout.width) : undefined
|
|
66
|
+
}],
|
|
67
|
+
children: /*#__PURE__*/_jsx(ScrollView, {
|
|
68
|
+
nestedScrollEnabled: true,
|
|
69
|
+
style: {
|
|
70
|
+
maxHeight
|
|
71
|
+
},
|
|
72
|
+
children: options.map((item, idx) => /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
73
|
+
onPress: () => handlePressOption(item),
|
|
74
|
+
style: [styles.option, selected === item.value && styles.optionSelected],
|
|
75
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
76
|
+
children: item.label
|
|
77
|
+
})
|
|
78
|
+
}, idx))
|
|
79
|
+
})
|
|
80
|
+
})]
|
|
61
81
|
})]
|
|
62
82
|
});
|
|
63
83
|
};
|
|
64
84
|
export default Dropdown;
|
|
65
85
|
const styles = StyleSheet.create({
|
|
66
|
-
|
|
67
|
-
// width: 200, // or flexible
|
|
68
|
-
},
|
|
69
|
-
dropdownButton: {
|
|
70
|
-
// borderWidth: 1,
|
|
71
|
-
// borderColor: '#ccc',
|
|
72
|
-
// padding: 12,
|
|
73
|
-
// borderRadius: 6,
|
|
74
|
-
// backgroundColor: '#fff',
|
|
75
|
-
},
|
|
86
|
+
button: {},
|
|
76
87
|
dropdownList: {
|
|
77
88
|
position: 'absolute',
|
|
78
|
-
marginTop: 18,
|
|
79
89
|
padding: 8,
|
|
80
|
-
zIndex:
|
|
90
|
+
zIndex: 10,
|
|
81
91
|
gap: 4,
|
|
82
92
|
borderWidth: 1,
|
|
83
93
|
borderColor: Color.gray[50],
|
|
84
94
|
borderRadius: 8,
|
|
85
95
|
backgroundColor: Color.base.white100,
|
|
86
|
-
width:
|
|
96
|
+
width: 120
|
|
87
97
|
},
|
|
88
98
|
option: {
|
|
89
99
|
gap: 8,
|
|
@@ -96,12 +106,6 @@ const styles = StyleSheet.create({
|
|
|
96
106
|
optionSelected: {
|
|
97
107
|
backgroundColor: Color.primary[50],
|
|
98
108
|
borderColor: Color.primary[300]
|
|
99
|
-
},
|
|
100
|
-
left: {
|
|
101
|
-
left: 0
|
|
102
|
-
},
|
|
103
|
-
right: {
|
|
104
|
-
right: 0
|
|
105
109
|
}
|
|
106
110
|
});
|
|
107
111
|
//# sourceMappingURL=DropDown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","useRef","View","Text","TouchableOpacity","StyleSheet","ScrollView","useWindowDimensions","findNodeHandle","UIManager","Color","jsx","_jsx","jsxs","_jsxs","Dropdown","options","maxHeight","onSelect","renderButton","isOpen","setIsOpen","selected","setSelected","
|
|
1
|
+
{"version":3,"names":["useState","useRef","View","Text","TouchableOpacity","Pressable","StyleSheet","ScrollView","useWindowDimensions","findNodeHandle","UIManager","Modal","Color","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Dropdown","options","maxHeight","onSelect","renderButton","isOpen","setIsOpen","selected","setSelected","align","setAlign","buttonLayout","setButtonLayout","x","y","width","height","buttonRef","windowWidth","handleToggle","handle","current","measureInWindow","middle","handlePressOption","value","children","ref","onPress","transparent","animationType","visible","style","absoluteFillObject","styles","dropdownList","top","left","undefined","right","nestedScrollEnabled","map","item","idx","option","optionSelected","label","create","button","position","padding","zIndex","gap","borderWidth","borderColor","gray","borderRadius","backgroundColor","base","white100","paddingVertical","paddingHorizontal","primary"],"sourceRoot":"../../../src","sources":["DropDown/DropDown.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# Dropdown
|
|
@@ -5,6 +5,7 @@ import { createContext, useContext, useState } from 'react';
|
|
|
5
5
|
import { StyleSheet, View } from 'react-native';
|
|
6
6
|
import LayoutWithFooter from "./LayoutWithFooter.js";
|
|
7
7
|
import RequiredUpdateAppsProvider from "./RequiredUpdateAppsProvider.js";
|
|
8
|
+
import Color from "../Color/Color.js";
|
|
8
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
10
|
const FooterContext = /*#__PURE__*/createContext(undefined);
|
|
10
11
|
export default function Provider({
|
|
@@ -37,6 +38,7 @@ export const useFooter = () => {
|
|
|
37
38
|
};
|
|
38
39
|
const styles = StyleSheet.create({
|
|
39
40
|
container: {
|
|
41
|
+
backgroundColor: Color.base.white100,
|
|
40
42
|
flex: 1
|
|
41
43
|
}
|
|
42
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useContext","useState","StyleSheet","View","LayoutWithFooter","RequiredUpdateAppsProvider","jsx","_jsx","jsxs","_jsxs","FooterContext","undefined","Provider","children","requiredUpdated","updateConfig","footer","setFooter","style","styles","container","value","useFooter","context","Error","create","flex"],"sourceRoot":"../../../src","sources":["Provider/Provider.tsx"],"mappings":";;AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAC3D,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,gBAAgB,MAAM,uBAAoB;AACjD,OAAOC,0BAA0B,MAAM,iCAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;
|
|
1
|
+
{"version":3,"names":["createContext","useContext","useState","StyleSheet","View","LayoutWithFooter","RequiredUpdateAppsProvider","Color","jsx","_jsx","jsxs","_jsxs","FooterContext","undefined","Provider","children","requiredUpdated","updateConfig","footer","setFooter","style","styles","container","value","useFooter","context","Error","create","backgroundColor","base","white100","flex"],"sourceRoot":"../../../src","sources":["Provider/Provider.tsx"],"mappings":";;AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAC3D,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,gBAAgB,MAAM,uBAAoB;AACjD,OAAOC,0BAA0B,MAAM,iCAA8B;AAGrE,OAAOC,KAAK,MAAM,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAanC,MAAMC,aAAa,gBAAGZ,aAAa,CAAgCa,SAAS,CAAC;AAE7E,eAAe,SAASC,QAAQA,CAAC;EAC/BC,QAAQ;EACRC,eAAe,GAAG,KAAK;EACvBC;AACa,CAAC,EAAE;EAChB,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGjB,QAAQ,CAAC,IAAI,CAAC;EAE1C,oBACES,KAAA,CAACP,IAAI;IAACgB,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAP,QAAA,GAC3BC,eAAe,gBACdP,IAAA,CAACH,0BAA0B;MAAA,GAAKW;IAAY,CAAG,CAAC,GAC9C,IAAI,eACRR,IAAA,CAACG,aAAa,CAACE,QAAQ;MAACS,KAAK,EAAE;QAAEL,MAAM;QAAEC;MAAU,CAAE;MAAAJ,QAAA,eACnDN,IAAA,CAACJ,gBAAgB;QAAAU,QAAA,EAAEA;MAAQ,CAAmB;IAAC,CACzB,CAAC;EAAA,CACrB,CAAC;AAEX;AAEA,OAAO,MAAMS,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAGxB,UAAU,CAACW,aAAa,CAAC;EACzC,IAAIa,OAAO,KAAKZ,SAAS,EAAE;IACzB,MAAM,IAAIa,KAAK,CAAC,iDAAiD,CAAC;EACpE;EACA,OAAOD,OAAO;AAChB,CAAC;AAED,MAAMJ,MAAM,GAAGlB,UAAU,CAACwB,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,eAAe,EAAErB,KAAK,CAACsB,IAAI,CAACC,QAAQ;IACpCC,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { View } from 'react-native';
|
|
3
|
+
import { StyleSheet, View } from 'react-native';
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
5
|
export default function Timeline({
|
|
6
6
|
children
|
|
7
7
|
}) {
|
|
8
8
|
return /*#__PURE__*/_jsx(View, {
|
|
9
|
+
style: styles.gap14,
|
|
9
10
|
children: children
|
|
10
11
|
});
|
|
11
12
|
}
|
|
13
|
+
const styles = StyleSheet.create({
|
|
14
|
+
gap14: {
|
|
15
|
+
gap: 14
|
|
16
|
+
}
|
|
17
|
+
});
|
|
12
18
|
//# sourceMappingURL=Timeline.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["View","jsx","_jsx","Timeline","children"],"sourceRoot":"../../../src","sources":["Timeline/Timeline.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;
|
|
1
|
+
{"version":3,"names":["StyleSheet","View","jsx","_jsx","Timeline","children","style","styles","gap14","create","gap"],"sourceRoot":"../../../src","sources":["Timeline/Timeline.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMhD,eAAe,SAASC,QAAQA,CAAC;EAAEC;AAAmB,CAAC,EAAE;EACvD,oBAAOF,IAAA,CAACF,IAAI;IAACK,KAAK,EAAEC,MAAM,CAACC,KAAM;IAAAH,QAAA,EAAEA;EAAQ,CAAO,CAAC;AACrD;AAEA,MAAME,MAAM,GAAGP,UAAU,CAACS,MAAM,CAAC;EAC/BD,KAAK,EAAE;IACLE,GAAG,EAAE;EACP;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -17,6 +17,18 @@ export default function TimelineItem({
|
|
|
17
17
|
color = 'primary'
|
|
18
18
|
}) {
|
|
19
19
|
const [contentHeight, setContentHeight] = useState(0);
|
|
20
|
+
const renderDashes = count => {
|
|
21
|
+
return Array.from({
|
|
22
|
+
length: count
|
|
23
|
+
}).map((_, index) => /*#__PURE__*/_jsx(View, {
|
|
24
|
+
style: {
|
|
25
|
+
width: 1,
|
|
26
|
+
height: 4,
|
|
27
|
+
backgroundColor: Color.gray[400],
|
|
28
|
+
marginVertical: 2
|
|
29
|
+
}
|
|
30
|
+
}, index));
|
|
31
|
+
};
|
|
20
32
|
return /*#__PURE__*/_jsxs(View, {
|
|
21
33
|
style: styles.container,
|
|
22
34
|
children: [/*#__PURE__*/_jsxs(View, {
|
|
@@ -25,9 +37,7 @@ export default function TimelineItem({
|
|
|
25
37
|
name: "RadioButton",
|
|
26
38
|
color: COLOR_MAP[color]
|
|
27
39
|
}), /*#__PURE__*/_jsx(View, {
|
|
28
|
-
|
|
29
|
-
height: contentHeight - 20
|
|
30
|
-
}]
|
|
40
|
+
children: renderDashes(Math.floor((contentHeight - 20) / 6))
|
|
31
41
|
})]
|
|
32
42
|
}), /*#__PURE__*/_jsx(View, {
|
|
33
43
|
style: styles.flex,
|
|
@@ -54,10 +64,10 @@ const styles = StyleSheet.create({
|
|
|
54
64
|
},
|
|
55
65
|
border: {
|
|
56
66
|
width: 1,
|
|
67
|
+
borderWidth: 1,
|
|
57
68
|
borderLeftWidth: 1,
|
|
58
69
|
borderLeftColor: Color.gray[400],
|
|
59
|
-
borderStyle: 'dashed'
|
|
60
|
-
marginTop: 4
|
|
70
|
+
borderStyle: 'dashed'
|
|
61
71
|
},
|
|
62
72
|
flex: {
|
|
63
73
|
flex: 1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","StyleSheet","View","Color","Icon","jsx","_jsx","jsxs","_jsxs","COLOR_MAP","warning","primary","success","purple","danger","TimelineItem","children","color","contentHeight","setContentHeight","style","styles","container","contentLeft","name","
|
|
1
|
+
{"version":3,"names":["useState","StyleSheet","View","Color","Icon","jsx","_jsx","jsxs","_jsxs","COLOR_MAP","warning","primary","success","purple","danger","TimelineItem","children","color","contentHeight","setContentHeight","renderDashes","count","Array","from","length","map","_","index","style","width","height","backgroundColor","gray","marginVertical","styles","container","contentLeft","name","Math","floor","flex","onLayout","e","nativeEvent","layout","create","flexDirection","alignItems","marginRight","border","borderWidth","borderLeftWidth","borderLeftColor","borderStyle"],"sourceRoot":"../../../src","sources":["Timeline/TimelineItem.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,KAAK,MAAM,mBAAgB;AAClC,SAASC,IAAI,QAAQ,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/B,MAAMC,SAAS,GAAG;EAChBC,OAAO,EAAEP,KAAK,CAACO,OAAO,CAAC,GAAG,CAAC;EAC3BC,OAAO,EAAER,KAAK,CAACQ,OAAO,CAAC,GAAG,CAAC;EAC3BC,OAAO,EAAET,KAAK,CAACS,OAAO,CAAC,GAAG,CAAC;EAC3BC,MAAM,EAAEV,KAAK,CAACU,MAAM,CAAC,GAAG,CAAC;EACzBC,MAAM,EAAEX,KAAK,CAACW,MAAM,CAAC,GAAG;AAC1B,CAAC;AAQD,eAAe,SAASC,YAAYA,CAAC;EACnCC,QAAQ;EACRC,KAAK,GAAG;AACS,CAAC,EAAE;EACpB,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGnB,QAAQ,CAAC,CAAC,CAAC;EACrD,MAAMoB,YAAY,GAAIC,KAAa,IAAK;IACtC,OAAOC,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAEH;IAAM,CAAC,CAAC,CAACI,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,kBAChDrB,IAAA,CAACJ,IAAI;MAEH0B,KAAK,EAAE;QACLC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE,CAAC;QACTC,eAAe,EAAE5B,KAAK,CAAC6B,IAAI,CAAC,GAAG,CAAC;QAChCC,cAAc,EAAE;MAClB;IAAE,GANGN,KAON,CACF,CAAC;EACJ,CAAC;EAED,oBACEnB,KAAA,CAACN,IAAI;IAAC0B,KAAK,EAAEM,MAAM,CAACC,SAAU;IAAAnB,QAAA,gBAC5BR,KAAA,CAACN,IAAI;MAAC0B,KAAK,EAAEM,MAAM,CAACE,WAAY;MAAApB,QAAA,gBAC9BV,IAAA,CAACF,IAAI;QAACiC,IAAI,EAAC,aAAa;QAACpB,KAAK,EAAER,SAAS,CAACQ,KAAK;MAAE,CAAE,CAAC,eACpDX,IAAA,CAACJ,IAAI;QAAAc,QAAA,EAAEI,YAAY,CAACkB,IAAI,CAACC,KAAK,CAAC,CAACrB,aAAa,GAAG,EAAE,IAAI,CAAC,CAAC;MAAC,CAAO,CAAC;IAAA,CAC7D,CAAC,eACPZ,IAAA,CAACJ,IAAI;MACH0B,KAAK,EAAEM,MAAM,CAACM,IAAK;MACnBC,QAAQ,EAAGC,CAAC,IAAK;QACf,MAAM;UAAEZ;QAAO,CAAC,GAAGY,CAAC,CAACC,WAAW,CAACC,MAAM;QACvCzB,gBAAgB,CAACW,MAAM,CAAC;MAC1B,CAAE;MAAAd,QAAA,eAEFV,IAAA,CAACJ,IAAI;QAAAc,QAAA,EAAEA;MAAQ,CAAO;IAAC,CACnB,CAAC;EAAA,CACH,CAAC;AAEX;AACA,MAAMkB,MAAM,GAAGjC,UAAU,CAAC4C,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd,CAAC;EACDX,WAAW,EAAE;IACXW,UAAU,EAAE,QAAQ;IACpBC,WAAW,EAAE;EACf,CAAC;EACDC,MAAM,EAAE;IACNpB,KAAK,EAAE,CAAC;IACRqB,WAAW,EAAE,CAAC;IACdC,eAAe,EAAE,CAAC;IAClBC,eAAe,EAAEjD,KAAK,CAAC6B,IAAI,CAAC,GAAG,CAAC;IAChCqB,WAAW,EAAE;EACf,CAAC;EACDb,IAAI,EAAE;IACJA,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../../src/DropDown/DropDown.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../../src/DropDown/DropDown.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,QAAA,MAAM,QAAQ,GAAI,iDAKf,aAAa,4CAgFf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/DropDown/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,
|
|
1
|
+
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/DropDown/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B"}
|
|
@@ -6,8 +6,8 @@ interface FooterContextType {
|
|
|
6
6
|
}
|
|
7
7
|
interface ProviderProps {
|
|
8
8
|
children: ReactNode;
|
|
9
|
-
requiredUpdated
|
|
10
|
-
updateConfig
|
|
9
|
+
requiredUpdated?: boolean;
|
|
10
|
+
updateConfig?: RequiredUpdateAppsProviderProps;
|
|
11
11
|
}
|
|
12
12
|
export default function Provider({ children, requiredUpdated, updateConfig, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
export declare const useFooter: () => FooterContextType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/Provider/Provider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/Provider/Provider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,QAAQ,CAAC;AAG9D,UAAU,iBAAiB;IACzB,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;AAED,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,+BAA+B,CAAC;CAChD;AAID,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,QAAQ,EACR,eAAuB,EACvB,YAAY,GACb,EAAE,aAAa,2CAaf;AAED,eAAO,MAAM,SAAS,yBAMrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Provider/type.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Provider/type.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,+BAA+B;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC"}
|
|
@@ -8,7 +8,7 @@ declare const COLOR_MAP: {
|
|
|
8
8
|
type ColorKey = keyof typeof COLOR_MAP;
|
|
9
9
|
interface TimelineItemProps {
|
|
10
10
|
children: React.ReactNode;
|
|
11
|
-
color
|
|
11
|
+
color?: ColorKey;
|
|
12
12
|
}
|
|
13
13
|
export default function TimelineItem({ children, color, }: TimelineItemProps): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../src/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,SAAS;;;;;;CAMd,CAAC;AACF,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAEvC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../src/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,SAAS;;;;;;CAMd,CAAC;AACF,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAEvC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,KAAiB,GAClB,EAAE,iBAAiB,2CAiCnB"}
|
package/package.json
CHANGED
|
@@ -3,11 +3,13 @@ import {
|
|
|
3
3
|
View,
|
|
4
4
|
Text,
|
|
5
5
|
TouchableOpacity,
|
|
6
|
+
Pressable,
|
|
6
7
|
StyleSheet,
|
|
7
8
|
ScrollView,
|
|
8
9
|
useWindowDimensions,
|
|
9
10
|
findNodeHandle,
|
|
10
11
|
UIManager,
|
|
12
|
+
Modal,
|
|
11
13
|
} from 'react-native';
|
|
12
14
|
import Color from '../Color/Color';
|
|
13
15
|
import type { DropDownProps } from './type';
|
|
@@ -21,9 +23,13 @@ const Dropdown = ({
|
|
|
21
23
|
}: DropDownProps) => {
|
|
22
24
|
const [isOpen, setIsOpen] = useState(false);
|
|
23
25
|
const [selected, setSelected] = useState<string | number>();
|
|
24
|
-
const [
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
const [align, setAlign] = useState<'left' | 'right'>('left');
|
|
27
|
+
const [buttonLayout, setButtonLayout] = useState({
|
|
28
|
+
x: 0,
|
|
29
|
+
y: 0,
|
|
30
|
+
width: 0,
|
|
31
|
+
height: 0,
|
|
32
|
+
});
|
|
27
33
|
|
|
28
34
|
const buttonRef = useRef<View>(null);
|
|
29
35
|
const windowWidth = useWindowDimensions().width;
|
|
@@ -32,9 +38,10 @@ const Dropdown = ({
|
|
|
32
38
|
if (!isOpen) {
|
|
33
39
|
const handle = findNodeHandle(buttonRef.current);
|
|
34
40
|
if (handle) {
|
|
35
|
-
UIManager.measureInWindow(handle, (x,
|
|
41
|
+
UIManager.measureInWindow(handle, (x, y, width, height) => {
|
|
36
42
|
const middle = windowWidth / 2;
|
|
37
|
-
|
|
43
|
+
setAlign(x + width / 2 > middle ? 'right' : 'left');
|
|
44
|
+
setButtonLayout({ x, y, width, height });
|
|
38
45
|
setIsOpen(true);
|
|
39
46
|
});
|
|
40
47
|
}
|
|
@@ -50,70 +57,65 @@ const Dropdown = ({
|
|
|
50
57
|
};
|
|
51
58
|
|
|
52
59
|
return (
|
|
53
|
-
|
|
54
|
-
<TouchableOpacity
|
|
55
|
-
|
|
56
|
-
style={styles.dropdownButton}
|
|
57
|
-
onPress={handleToggle}
|
|
58
|
-
>
|
|
59
|
-
{renderButton ? (
|
|
60
|
-
renderButton
|
|
61
|
-
) : (
|
|
62
|
-
<Text>{selected || 'Select an option'}</Text>
|
|
63
|
-
)}
|
|
60
|
+
<>
|
|
61
|
+
<TouchableOpacity ref={buttonRef} onPress={handleToggle}>
|
|
62
|
+
{renderButton}
|
|
64
63
|
</TouchableOpacity>
|
|
65
|
-
|
|
66
64
|
{isOpen && (
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<
|
|
74
|
-
{
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
65
|
+
<Modal transparent animationType="none" visible>
|
|
66
|
+
<Pressable
|
|
67
|
+
style={StyleSheet.absoluteFillObject}
|
|
68
|
+
onPress={() => setIsOpen(false)}
|
|
69
|
+
/>
|
|
70
|
+
|
|
71
|
+
<View
|
|
72
|
+
style={[
|
|
73
|
+
styles.dropdownList,
|
|
74
|
+
{
|
|
75
|
+
top: buttonLayout.y + buttonLayout.height,
|
|
76
|
+
left: align === 'left' ? buttonLayout.x : undefined,
|
|
77
|
+
right:
|
|
78
|
+
align === 'right'
|
|
79
|
+
? windowWidth - (buttonLayout.x + buttonLayout.width)
|
|
80
|
+
: undefined,
|
|
81
|
+
},
|
|
82
|
+
]}
|
|
83
|
+
>
|
|
84
|
+
<ScrollView nestedScrollEnabled style={{ maxHeight }}>
|
|
85
|
+
{options.map((item, idx) => (
|
|
86
|
+
<TouchableOpacity
|
|
87
|
+
key={idx}
|
|
88
|
+
onPress={() => handlePressOption(item)}
|
|
89
|
+
style={[
|
|
90
|
+
styles.option,
|
|
91
|
+
selected === item.value && styles.optionSelected,
|
|
92
|
+
]}
|
|
93
|
+
>
|
|
94
|
+
<Text>{item.label}</Text>
|
|
95
|
+
</TouchableOpacity>
|
|
96
|
+
))}
|
|
97
|
+
</ScrollView>
|
|
98
|
+
</View>
|
|
99
|
+
</Modal>
|
|
88
100
|
)}
|
|
89
|
-
|
|
101
|
+
</>
|
|
90
102
|
);
|
|
91
103
|
};
|
|
92
104
|
|
|
93
105
|
export default Dropdown;
|
|
94
106
|
|
|
95
107
|
const styles = StyleSheet.create({
|
|
96
|
-
|
|
97
|
-
// width: 200, // or flexible
|
|
98
|
-
},
|
|
99
|
-
dropdownButton: {
|
|
100
|
-
// borderWidth: 1,
|
|
101
|
-
// borderColor: '#ccc',
|
|
102
|
-
// padding: 12,
|
|
103
|
-
// borderRadius: 6,
|
|
104
|
-
// backgroundColor: '#fff',
|
|
105
|
-
},
|
|
108
|
+
button: {},
|
|
106
109
|
dropdownList: {
|
|
107
110
|
position: 'absolute',
|
|
108
|
-
marginTop: 18,
|
|
109
111
|
padding: 8,
|
|
110
|
-
zIndex:
|
|
112
|
+
zIndex: 10,
|
|
111
113
|
gap: 4,
|
|
112
114
|
borderWidth: 1,
|
|
113
115
|
borderColor: Color.gray[50],
|
|
114
116
|
borderRadius: 8,
|
|
115
117
|
backgroundColor: Color.base.white100,
|
|
116
|
-
width:
|
|
118
|
+
width: 120,
|
|
117
119
|
},
|
|
118
120
|
option: {
|
|
119
121
|
gap: 8,
|
|
@@ -127,10 +129,4 @@ const styles = StyleSheet.create({
|
|
|
127
129
|
backgroundColor: Color.primary[50],
|
|
128
130
|
borderColor: Color.primary[300],
|
|
129
131
|
},
|
|
130
|
-
left: {
|
|
131
|
-
left: 0,
|
|
132
|
-
},
|
|
133
|
-
right: {
|
|
134
|
-
right: 0,
|
|
135
|
-
},
|
|
136
132
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# Dropdown
|
package/src/DropDown/type.tsx
CHANGED
|
@@ -5,6 +5,7 @@ import LayoutWithFooter from './LayoutWithFooter';
|
|
|
5
5
|
import RequiredUpdateAppsProvider from './RequiredUpdateAppsProvider';
|
|
6
6
|
import { type ReactNode } from 'react';
|
|
7
7
|
import type { RequiredUpdateAppsProviderProps } from './type';
|
|
8
|
+
import Color from '../Color/Color';
|
|
8
9
|
|
|
9
10
|
interface FooterContextType {
|
|
10
11
|
footer: any | null;
|
|
@@ -13,8 +14,8 @@ interface FooterContextType {
|
|
|
13
14
|
|
|
14
15
|
interface ProviderProps {
|
|
15
16
|
children: ReactNode;
|
|
16
|
-
requiredUpdated
|
|
17
|
-
updateConfig
|
|
17
|
+
requiredUpdated?: boolean;
|
|
18
|
+
updateConfig?: RequiredUpdateAppsProviderProps;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
const FooterContext = createContext<FooterContextType | undefined>(undefined);
|
|
@@ -48,6 +49,7 @@ export const useFooter = () => {
|
|
|
48
49
|
|
|
49
50
|
const styles = StyleSheet.create({
|
|
50
51
|
container: {
|
|
52
|
+
backgroundColor: Color.base.white100,
|
|
51
53
|
flex: 1,
|
|
52
54
|
},
|
|
53
55
|
});
|
package/src/Provider/type.tsx
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
import { View } from 'react-native';
|
|
1
|
+
import { StyleSheet, View } from 'react-native';
|
|
2
2
|
|
|
3
3
|
interface Timeline {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
export default function Timeline({ children }: Timeline) {
|
|
8
|
-
return <View>{children}</View>;
|
|
8
|
+
return <View style={styles.gap14}>{children}</View>;
|
|
9
9
|
}
|
|
10
|
+
|
|
11
|
+
const styles = StyleSheet.create({
|
|
12
|
+
gap14: {
|
|
13
|
+
gap: 14,
|
|
14
|
+
},
|
|
15
|
+
});
|
|
@@ -14,7 +14,7 @@ type ColorKey = keyof typeof COLOR_MAP;
|
|
|
14
14
|
|
|
15
15
|
interface TimelineItemProps {
|
|
16
16
|
children: React.ReactNode;
|
|
17
|
-
color
|
|
17
|
+
color?: ColorKey;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
export default function TimelineItem({
|
|
@@ -22,12 +22,25 @@ export default function TimelineItem({
|
|
|
22
22
|
color = 'primary',
|
|
23
23
|
}: TimelineItemProps) {
|
|
24
24
|
const [contentHeight, setContentHeight] = useState(0);
|
|
25
|
+
const renderDashes = (count: number) => {
|
|
26
|
+
return Array.from({ length: count }).map((_, index) => (
|
|
27
|
+
<View
|
|
28
|
+
key={index}
|
|
29
|
+
style={{
|
|
30
|
+
width: 1,
|
|
31
|
+
height: 4,
|
|
32
|
+
backgroundColor: Color.gray[400],
|
|
33
|
+
marginVertical: 2,
|
|
34
|
+
}}
|
|
35
|
+
/>
|
|
36
|
+
));
|
|
37
|
+
};
|
|
25
38
|
|
|
26
39
|
return (
|
|
27
40
|
<View style={styles.container}>
|
|
28
41
|
<View style={styles.contentLeft}>
|
|
29
42
|
<Icon name="RadioButton" color={COLOR_MAP[color]} />
|
|
30
|
-
<View
|
|
43
|
+
<View>{renderDashes(Math.floor((contentHeight - 20) / 6))}</View>
|
|
31
44
|
</View>
|
|
32
45
|
<View
|
|
33
46
|
style={styles.flex}
|
|
@@ -52,10 +65,10 @@ const styles = StyleSheet.create({
|
|
|
52
65
|
},
|
|
53
66
|
border: {
|
|
54
67
|
width: 1,
|
|
68
|
+
borderWidth: 1,
|
|
55
69
|
borderLeftWidth: 1,
|
|
56
70
|
borderLeftColor: Color.gray[400],
|
|
57
71
|
borderStyle: 'dashed',
|
|
58
|
-
marginTop: 4,
|
|
59
72
|
},
|
|
60
73
|
flex: {
|
|
61
74
|
flex: 1,
|