@herca/rn-kit 0.1.68 → 0.1.69
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/DatePicker/TimePicker.js +26 -46
- package/lib/module/DatePicker/TimePicker.js.map +1 -1
- package/lib/module/DatePicker/partials/AnimatedItem.js +52 -0
- package/lib/module/DatePicker/partials/AnimatedItem.js.map +1 -0
- package/lib/module/Input/TextArea.js +5 -2
- package/lib/module/Input/TextArea.js.map +1 -1
- package/lib/module/LabelForm/LabelForm.js +3 -1
- package/lib/module/LabelForm/LabelForm.js.map +1 -1
- package/lib/module/Step/Step.js +1 -1
- package/lib/module/Step/StepItem.js +14 -6
- package/lib/module/Step/StepItem.js.map +1 -1
- package/lib/typescript/src/DatePicker/TimePicker.d.ts +4 -1
- package/lib/typescript/src/DatePicker/TimePicker.d.ts.map +1 -1
- package/lib/typescript/src/DatePicker/partials/AnimatedItem.d.ts +11 -0
- package/lib/typescript/src/DatePicker/partials/AnimatedItem.d.ts.map +1 -0
- package/lib/typescript/src/Input/TextArea.d.ts +1 -1
- package/lib/typescript/src/Input/TextArea.d.ts.map +1 -1
- package/lib/typescript/src/LabelForm/LabelForm.d.ts +2 -1
- package/lib/typescript/src/LabelForm/LabelForm.d.ts.map +1 -1
- package/lib/typescript/src/Step/StepItem.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/DatePicker/TimePicker.tsx +37 -74
- package/src/DatePicker/partials/AnimatedItem.tsx +62 -0
- package/src/Input/TextArea.tsx +3 -0
- package/src/LabelForm/LabelForm.tsx +7 -2
- package/src/Step/Step.tsx +1 -1
- package/src/Step/StepItem.tsx +15 -3
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React, {
|
|
4
|
-
import {
|
|
3
|
+
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
+
import { Animated, Dimensions, StyleSheet, View } from 'react-native';
|
|
5
5
|
import BottomSheet from "../BottomSheet/BottomSheet.js";
|
|
6
6
|
import Button from "../Button/Button.js";
|
|
7
|
-
import Typography from "../Typography/Typography.js";
|
|
8
7
|
import Color from "../Color/Color.js";
|
|
8
|
+
import Typography from "../Typography/Typography.js";
|
|
9
|
+
import AnimatedItem from "./partials/AnimatedItem.js";
|
|
9
10
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
11
|
const ITEM_HEIGHT = 40;
|
|
11
12
|
const SCREEN_WIDTH = Dimensions.get('window').width;
|
|
@@ -21,7 +22,10 @@ const repeatItems = (items, repeatCount) => Array.from({
|
|
|
21
22
|
export default function TimePickerWheel({
|
|
22
23
|
isOpen,
|
|
23
24
|
onClose,
|
|
24
|
-
onChange
|
|
25
|
+
onChange,
|
|
26
|
+
title = 'Pilih Waktu',
|
|
27
|
+
cancelLabel = 'Batal',
|
|
28
|
+
confirmLabel = 'Pilih'
|
|
25
29
|
}) {
|
|
26
30
|
const [selectedHour, setSelectedHour] = useState(0);
|
|
27
31
|
const [selectedMinute, setSelectedMinute] = useState(0);
|
|
@@ -42,7 +46,9 @@ export default function TimePickerWheel({
|
|
|
42
46
|
scrollToIndex(minuteRef, CENTER_INDEX_MINUTE);
|
|
43
47
|
}, 100);
|
|
44
48
|
}
|
|
45
|
-
|
|
49
|
+
|
|
50
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
|
+
}, [isOpen]);
|
|
46
52
|
const scrollToIndex = (ref, index, animated = true) => {
|
|
47
53
|
ref.current?.scrollTo({
|
|
48
54
|
y: index * ITEM_HEIGHT,
|
|
@@ -75,32 +81,6 @@ export default function TimePickerWheel({
|
|
|
75
81
|
});
|
|
76
82
|
onClose?.();
|
|
77
83
|
};
|
|
78
|
-
const renderAnimatedItem = (value, type, index, scrollY) => {
|
|
79
|
-
const normalizedValue = type === 'hour' ? (value % 24 + 24) % 24 : (value % 60 + 60) % 60;
|
|
80
|
-
const inputRange = [(index - 2) * ITEM_HEIGHT, (index - 1) * ITEM_HEIGHT, index * ITEM_HEIGHT, (index + 1) * ITEM_HEIGHT, (index + 2) * ITEM_HEIGHT];
|
|
81
|
-
const scale = scrollY.interpolate({
|
|
82
|
-
inputRange,
|
|
83
|
-
outputRange: [0.7, 0.85, 1, 0.85, 0.7],
|
|
84
|
-
extrapolate: 'clamp'
|
|
85
|
-
});
|
|
86
|
-
const opacity = scrollY.interpolate({
|
|
87
|
-
inputRange,
|
|
88
|
-
outputRange: [0.3, 0.6, 1, 0.6, 0.3],
|
|
89
|
-
extrapolate: 'clamp'
|
|
90
|
-
});
|
|
91
|
-
return /*#__PURE__*/_jsx(Animated.View, {
|
|
92
|
-
style: [styles.item, {
|
|
93
|
-
transform: [{
|
|
94
|
-
scale
|
|
95
|
-
}],
|
|
96
|
-
opacity
|
|
97
|
-
}],
|
|
98
|
-
children: /*#__PURE__*/_jsx(Text, {
|
|
99
|
-
style: styles.itemText,
|
|
100
|
-
children: normalizedValue.toString().padStart(2, '0')
|
|
101
|
-
})
|
|
102
|
-
}, `${type}-${index}`);
|
|
103
|
-
};
|
|
104
84
|
return /*#__PURE__*/_jsxs(BottomSheet, {
|
|
105
85
|
isOpen: isOpen,
|
|
106
86
|
onClose: onClose,
|
|
@@ -109,7 +89,7 @@ export default function TimePickerWheel({
|
|
|
109
89
|
children: [/*#__PURE__*/_jsx(View, {
|
|
110
90
|
style: styles.flex1,
|
|
111
91
|
children: /*#__PURE__*/_jsx(Button, {
|
|
112
|
-
title:
|
|
92
|
+
title: cancelLabel,
|
|
113
93
|
variant: "tertiary",
|
|
114
94
|
onPress: onClose,
|
|
115
95
|
color: "primary",
|
|
@@ -118,7 +98,7 @@ export default function TimePickerWheel({
|
|
|
118
98
|
}), /*#__PURE__*/_jsx(View, {
|
|
119
99
|
style: styles.flex1,
|
|
120
100
|
children: /*#__PURE__*/_jsx(Button, {
|
|
121
|
-
title:
|
|
101
|
+
title: confirmLabel,
|
|
122
102
|
onPress: handleSubmit,
|
|
123
103
|
color: "primary",
|
|
124
104
|
size: "medium"
|
|
@@ -131,7 +111,7 @@ export default function TimePickerWheel({
|
|
|
131
111
|
color: Color.gray[900],
|
|
132
112
|
center: true,
|
|
133
113
|
style: styles.hintTime,
|
|
134
|
-
children:
|
|
114
|
+
children: title
|
|
135
115
|
}), /*#__PURE__*/_jsxs(View, {
|
|
136
116
|
style: styles.container,
|
|
137
117
|
children: [/*#__PURE__*/_jsx(View, {
|
|
@@ -161,7 +141,12 @@ export default function TimePickerWheel({
|
|
|
161
141
|
}),
|
|
162
142
|
scrollEventThrottle: 16,
|
|
163
143
|
contentContainerStyle: styles.scrollContent,
|
|
164
|
-
children: hours.map((h, i) =>
|
|
144
|
+
children: hours.map((h, i) => /*#__PURE__*/_jsx(AnimatedItem, {
|
|
145
|
+
index: i,
|
|
146
|
+
value: h,
|
|
147
|
+
type: "hour",
|
|
148
|
+
scrollY: hourScrollY
|
|
149
|
+
}, i))
|
|
165
150
|
})
|
|
166
151
|
}), /*#__PURE__*/_jsx(View, {
|
|
167
152
|
style: styles.pickerColumn,
|
|
@@ -182,7 +167,12 @@ export default function TimePickerWheel({
|
|
|
182
167
|
}),
|
|
183
168
|
scrollEventThrottle: 16,
|
|
184
169
|
contentContainerStyle: styles.scrollContent,
|
|
185
|
-
children: minutes.map((m, i) =>
|
|
170
|
+
children: minutes.map((m, i) => /*#__PURE__*/_jsx(AnimatedItem, {
|
|
171
|
+
index: i,
|
|
172
|
+
value: m,
|
|
173
|
+
type: "minute",
|
|
174
|
+
scrollY: minuteScrollY
|
|
175
|
+
}, i))
|
|
186
176
|
})
|
|
187
177
|
})]
|
|
188
178
|
})]
|
|
@@ -214,16 +204,6 @@ const styles = StyleSheet.create({
|
|
|
214
204
|
height: ITEM_HEIGHT * VISIBLE_ITEMS,
|
|
215
205
|
overflow: 'hidden'
|
|
216
206
|
},
|
|
217
|
-
item: {
|
|
218
|
-
height: ITEM_HEIGHT,
|
|
219
|
-
justifyContent: 'center',
|
|
220
|
-
alignItems: 'center'
|
|
221
|
-
},
|
|
222
|
-
itemText: {
|
|
223
|
-
fontSize: 22,
|
|
224
|
-
color: Color.gray[900],
|
|
225
|
-
fontWeight: '600'
|
|
226
|
-
},
|
|
227
207
|
highlightOverlay: {
|
|
228
208
|
position: 'absolute',
|
|
229
209
|
zIndex: -1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useMemo","useRef","useState","Animated","Dimensions","StyleSheet","View","BottomSheet","Button","Color","Typography","AnimatedItem","jsx","_jsx","jsxs","_jsxs","ITEM_HEIGHT","SCREEN_WIDTH","get","width","VISIBLE_ITEMS","MIDDLE_INDEX","Math","floor","REPEAT_COUNT","generateItems","max","Array","from","length","_","i","repeatItems","items","repeatCount","flatMap","TimePickerWheel","isOpen","onClose","onChange","title","cancelLabel","confirmLabel","selectedHour","setSelectedHour","selectedMinute","setSelectedMinute","hourRef","minuteRef","hourScrollY","Value","current","minuteScrollY","hoursBase","minutesBase","hours","minutes","CENTER_INDEX_HOUR","CENTER_INDEX_MINUTE","setTimeout","scrollToIndex","ref","index","animated","scrollTo","y","handleScrollEnd","event","type","offsetY","nativeEvent","contentOffset","round","realValue","newCenter","abs","handleSubmit","hour","minute","footer","style","styles","children","flex1","variant","onPress","color","size","weight","gray","center","hintTime","container","highlightOverlay","pointerEvents","highlight","scrollContainer","pickerColumn","ScrollView","showsVerticalScrollIndicator","snapToInterval","decelerationRate","onMomentumScrollEnd","e","onScroll","useNativeDriver","scrollEventThrottle","contentContainerStyle","scrollContent","map","h","value","scrollY","m","create","position","height","marginBottom","flexDirection","gap","flex","justifyContent","paddingVertical","overflow","zIndex","top","left","right","bottom","backgroundColor","primary"],"sourceRoot":"../../../src","sources":["DatePicker/TimePicker.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Animated, StyleSheet, Text } from 'react-native';
|
|
5
|
+
import Color from "../../Color/Color.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
const ITEM_HEIGHT = 40;
|
|
8
|
+
const AnimatedItem = /*#__PURE__*/React.memo(({
|
|
9
|
+
value,
|
|
10
|
+
scrollY,
|
|
11
|
+
index,
|
|
12
|
+
type
|
|
13
|
+
}) => {
|
|
14
|
+
const normalizedValue = type === 'hour' ? (value % 24 + 24) % 24 : (value % 60 + 60) % 60;
|
|
15
|
+
const inputRange = [(index - 2) * ITEM_HEIGHT, (index - 1) * ITEM_HEIGHT, index * ITEM_HEIGHT, (index + 1) * ITEM_HEIGHT, (index + 2) * ITEM_HEIGHT];
|
|
16
|
+
const scale = scrollY.interpolate({
|
|
17
|
+
inputRange,
|
|
18
|
+
outputRange: [0.7, 0.85, 1, 0.85, 0.7],
|
|
19
|
+
extrapolate: 'clamp'
|
|
20
|
+
});
|
|
21
|
+
const opacity = scrollY.interpolate({
|
|
22
|
+
inputRange,
|
|
23
|
+
outputRange: [0.3, 0.6, 1, 0.6, 0.3],
|
|
24
|
+
extrapolate: 'clamp'
|
|
25
|
+
});
|
|
26
|
+
return /*#__PURE__*/_jsx(Animated.View, {
|
|
27
|
+
style: [styles.item, {
|
|
28
|
+
transform: [{
|
|
29
|
+
scale
|
|
30
|
+
}],
|
|
31
|
+
opacity
|
|
32
|
+
}],
|
|
33
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
34
|
+
style: styles.itemText,
|
|
35
|
+
children: normalizedValue.toString().padStart(2, '0')
|
|
36
|
+
})
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
const styles = StyleSheet.create({
|
|
40
|
+
itemText: {
|
|
41
|
+
fontSize: 22,
|
|
42
|
+
color: Color.gray[900],
|
|
43
|
+
fontWeight: '600'
|
|
44
|
+
},
|
|
45
|
+
item: {
|
|
46
|
+
height: ITEM_HEIGHT,
|
|
47
|
+
justifyContent: 'center',
|
|
48
|
+
alignItems: 'center'
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
export default AnimatedItem;
|
|
52
|
+
//# sourceMappingURL=AnimatedItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Animated","StyleSheet","Text","Color","jsx","_jsx","ITEM_HEIGHT","AnimatedItem","memo","value","scrollY","index","type","normalizedValue","inputRange","scale","interpolate","outputRange","extrapolate","opacity","View","style","styles","item","transform","children","itemText","toString","padStart","create","fontSize","color","gray","fontWeight","height","justifyContent","alignItems"],"sourceRoot":"../../../../src","sources":["DatePicker/partials/AnimatedItem.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AACzD,OAAOC,KAAK,MAAM,sBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAStC,MAAMC,WAAW,GAAG,EAAE;AAEtB,MAAMC,YAAY,gBAAGR,KAAK,CAACS,IAAI,CAC7B,CAAC;EAAEC,KAAK;EAAEC,OAAO;EAAEC,KAAK;EAAEC;AAAwB,CAAC,KAAK;EACtD,MAAMC,eAAe,GACnBD,IAAI,KAAK,MAAM,GAAG,CAAEH,KAAK,GAAG,EAAE,GAAI,EAAE,IAAI,EAAE,GAAG,CAAEA,KAAK,GAAG,EAAE,GAAI,EAAE,IAAI,EAAE;EAEvE,MAAMK,UAAU,GAAG,CACjB,CAACH,KAAK,GAAG,CAAC,IAAIL,WAAW,EACzB,CAACK,KAAK,GAAG,CAAC,IAAIL,WAAW,EACzBK,KAAK,GAAGL,WAAW,EACnB,CAACK,KAAK,GAAG,CAAC,IAAIL,WAAW,EACzB,CAACK,KAAK,GAAG,CAAC,IAAIL,WAAW,CAC1B;EAED,MAAMS,KAAK,GAAGL,OAAO,CAACM,WAAW,CAAC;IAChCF,UAAU;IACVG,WAAW,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC;IACtCC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAGT,OAAO,CAACM,WAAW,CAAC;IAClCF,UAAU;IACVG,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC;IACpCC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,oBACEb,IAAA,CAACL,QAAQ,CAACoB,IAAI;IAACC,KAAK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAE;MAAEC,SAAS,EAAE,CAAC;QAAET;MAAM,CAAC,CAAC;MAAEI;IAAQ,CAAC,CAAE;IAAAM,QAAA,eACvEpB,IAAA,CAACH,IAAI;MAACmB,KAAK,EAAEC,MAAM,CAACI,QAAS;MAAAD,QAAA,EAC1BZ,eAAe,CAACc,QAAQ,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG;IAAC,CACxC;EAAC,CACM,CAAC;AAEpB,CACF,CAAC;AAED,MAAMN,MAAM,GAAGrB,UAAU,CAAC4B,MAAM,CAAC;EAC/BH,QAAQ,EAAE;IACRI,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAE5B,KAAK,CAAC6B,IAAI,CAAC,GAAG,CAAC;IACtBC,UAAU,EAAE;EACd,CAAC;EACDV,IAAI,EAAE;IACJW,MAAM,EAAE5B,WAAW;IACnB6B,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAe7B,YAAY","ignoreList":[]}
|
|
@@ -11,7 +11,8 @@ export default function TextArea({
|
|
|
11
11
|
hasError,
|
|
12
12
|
style,
|
|
13
13
|
hint,
|
|
14
|
-
onChangeText
|
|
14
|
+
onChangeText,
|
|
15
|
+
...props
|
|
15
16
|
}) {
|
|
16
17
|
const handleOnChangeText = value => {
|
|
17
18
|
onChangeText?.(value);
|
|
@@ -31,7 +32,9 @@ export default function TextArea({
|
|
|
31
32
|
multiline: true,
|
|
32
33
|
numberOfLines: 14,
|
|
33
34
|
style: [styles.input, style],
|
|
34
|
-
textAlignVertical: "top"
|
|
35
|
+
textAlignVertical: "top",
|
|
36
|
+
placeholderTextColor: Color.gray[500],
|
|
37
|
+
...props
|
|
35
38
|
})
|
|
36
39
|
}), hint ? /*#__PURE__*/_jsx(Typography, {
|
|
37
40
|
color: hasError ? Color.danger[500] : '',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","TextInput","View","LabelForm","Color","Typography","jsx","_jsx","jsxs","_jsxs","TextArea","height","label","hasError","style","hint","onChangeText","handleOnChangeText","value","styles","gap","children","title","container","borderColor","danger","gray","editable","multiline","numberOfLines","input","textAlignVertical","color","variant","create","position","borderRadius","borderWidth","backgroundColor","base","white100","fontSize","padding","flex"],"sourceRoot":"../../../src","sources":["Input/TextArea.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC1D,OAAOC,SAAS,MAAM,2BAAwB;AAC9C,OAAOC,KAAK,MAAM,mBAAgB;AAClC,OAAOC,UAAU,MAAM,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGlD,eAAe,SAASC,QAAQA,CAAC;EAC/BC,MAAM,GAAG,GAAG;EACZC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,IAAI;EACJC;
|
|
1
|
+
{"version":3,"names":["StyleSheet","TextInput","View","LabelForm","Color","Typography","jsx","_jsx","jsxs","_jsxs","TextArea","height","label","hasError","style","hint","onChangeText","props","handleOnChangeText","value","styles","gap","children","title","container","borderColor","danger","gray","editable","multiline","numberOfLines","input","textAlignVertical","placeholderTextColor","color","variant","create","position","borderRadius","borderWidth","backgroundColor","base","white100","fontSize","padding","flex"],"sourceRoot":"../../../src","sources":["Input/TextArea.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC1D,OAAOC,SAAS,MAAM,2BAAwB;AAC9C,OAAOC,KAAK,MAAM,mBAAgB;AAClC,OAAOC,UAAU,MAAM,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGlD,eAAe,SAASC,QAAQA,CAAC;EAC/BC,MAAM,GAAG,GAAG;EACZC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,IAAI;EACJC,YAAY;EACZ,GAAGC;AACU,CAAC,EAAE;EAChB,MAAMC,kBAAkB,GAAIC,KAAa,IAAK;IAC5CH,YAAY,GAAGG,KAAK,CAAC;EACvB,CAAC;EAED,oBACEV,KAAA,CAACP,IAAI;IAACY,KAAK,EAAEM,MAAM,CAACC,GAAI;IAAAC,QAAA,GACrBV,KAAK,gBAAGL,IAAA,CAACJ,SAAS;MAACoB,KAAK,EAAEX;IAAM,CAAE,CAAC,GAAG,IAAI,eAE3CL,IAAA,CAACL,IAAI;MACHY,KAAK,EAAE,CACLM,MAAM,CAACI,SAAS,EAChB;QACEC,WAAW,EAAEZ,QAAQ,GAAGT,KAAK,CAACsB,MAAM,CAAC,GAAG,CAAC,GAAGtB,KAAK,CAACuB,IAAI,CAAC,GAAG,CAAC;QAC3DhB;MACF,CAAC,CACD;MAAAW,QAAA,eAEFf,IAAA,CAACN,SAAS;QACRe,YAAY,EAAEE,kBAAmB;QACjCU,QAAQ;QACRC,SAAS;QACTC,aAAa,EAAE,EAAG;QAClBhB,KAAK,EAAE,CAACM,MAAM,CAACW,KAAK,EAAEjB,KAAK,CAAE;QAC7BkB,iBAAiB,EAAC,KAAK;QACvBC,oBAAoB,EAAE7B,KAAK,CAACuB,IAAI,CAAC,GAAG,CAAE;QAAA,GAClCV;MAAK,CACV;IAAC,CACE,CAAC,EACNF,IAAI,gBACHR,IAAA,CAACF,UAAU;MAAC6B,KAAK,EAAErB,QAAQ,GAAGT,KAAK,CAACsB,MAAM,CAAC,GAAG,CAAC,GAAG,EAAG;MAACS,OAAO,EAAC,IAAI;MAAAb,QAAA,EAC/DP;IAAI,CACK,CAAC,GACX,IAAI;EAAA,CACJ,CAAC;AAEX;AAEA,MAAMK,MAAM,GAAGpB,UAAU,CAACoC,MAAM,CAAC;EAC/Bf,GAAG,EAAE;IACHA,GAAG,EAAE;EACP,CAAC;EACDG,SAAS,EAAE;IACTa,QAAQ,EAAE,UAAU;IACpBC,YAAY,EAAE,CAAC;IACfC,WAAW,EAAE,CAAC;IACdC,eAAe,EAAEpC,KAAK,CAACqC,IAAI,CAACC;EAC9B,CAAC;EACDX,KAAK,EAAE;IACLY,QAAQ,EAAE,EAAE;IACZT,KAAK,EAAE,MAAM;IACbU,OAAO,EAAE,EAAE;IACXZ,iBAAiB,EAAE,KAAK;IACxBa,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -6,12 +6,14 @@ import Color from "../Color/Color.js";
|
|
|
6
6
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
7
|
export default function LabelForm({
|
|
8
8
|
title,
|
|
9
|
-
required
|
|
9
|
+
required,
|
|
10
|
+
color = Color.gray[900]
|
|
10
11
|
}) {
|
|
11
12
|
return /*#__PURE__*/_jsx(View, {
|
|
12
13
|
children: /*#__PURE__*/_jsxs(Typography, {
|
|
13
14
|
variant: "t2",
|
|
14
15
|
weight: "semibold",
|
|
16
|
+
color: color,
|
|
15
17
|
children: [title, ' ', required && /*#__PURE__*/_jsx(Typography, {
|
|
16
18
|
variant: "t2",
|
|
17
19
|
weight: "semibold",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["View","Typography","Color","jsx","_jsx","jsxs","_jsxs","LabelForm","title","required","children","variant","weight","
|
|
1
|
+
{"version":3,"names":["View","Typography","Color","jsx","_jsx","jsxs","_jsxs","LabelForm","title","required","color","gray","children","variant","weight","danger"],"sourceRoot":"../../../src","sources":["LabelForm/LabelForm.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AACnC,OAAOC,UAAU,MAAM,6BAA0B;AACjD,OAAOC,KAAK,MAAM,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQnC,eAAe,SAASC,SAASA,CAAC;EAChCC,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAGR,KAAK,CAACS,IAAI,CAAC,GAAG;AACjB,CAAC,EAAE;EACR,oBACEP,IAAA,CAACJ,IAAI;IAAAY,QAAA,eACHN,KAAA,CAACL,UAAU;MAACY,OAAO,EAAC,IAAI;MAACC,MAAM,EAAC,UAAU;MAACJ,KAAK,EAAEA,KAAM;MAAAE,QAAA,GACrDJ,KAAK,EAAE,GAAG,EACVC,QAAQ,iBACPL,IAAA,CAACH,UAAU;QAACY,OAAO,EAAC,IAAI;QAACC,MAAM,EAAC,UAAU;QAACJ,KAAK,EAAER,KAAK,CAACa,MAAM,CAAC,GAAG,CAAE;QAAAH,QAAA,EAAC;MAErE,CAAY,CACb;IAAA,CACS;EAAC,CACT,CAAC;AAEX","ignoreList":[]}
|
package/lib/module/Step/Step.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { View, Text, StyleSheet, FlatList } from 'react-native';
|
|
5
5
|
import Color from "../Color/Color.js";
|
|
6
|
+
import Icon from "../Icon/index.js";
|
|
6
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
8
|
const StepItem = ({
|
|
8
9
|
index = 0,
|
|
@@ -16,14 +17,18 @@ const StepItem = ({
|
|
|
16
17
|
if (isHeader) {
|
|
17
18
|
return /*#__PURE__*/_jsxs(View, {
|
|
18
19
|
style: [styles.headerItem, style],
|
|
19
|
-
children: [/*#__PURE__*/
|
|
20
|
+
children: [/*#__PURE__*/_jsxs(View, {
|
|
20
21
|
style: [styles.circle, isCompleted && styles.completed, isActive && styles.active],
|
|
21
|
-
children: /*#__PURE__*/_jsx(Text, {
|
|
22
|
+
children: [!isCompleted && /*#__PURE__*/_jsx(Text, {
|
|
22
23
|
style: styles.circleText,
|
|
23
24
|
children: index + 1
|
|
24
|
-
})
|
|
25
|
+
}), isCompleted && /*#__PURE__*/_jsx(Icon, {
|
|
26
|
+
name: "Check",
|
|
27
|
+
size: 20,
|
|
28
|
+
color: "white"
|
|
29
|
+
})]
|
|
25
30
|
}), !isLast && /*#__PURE__*/_jsx(View, {
|
|
26
|
-
style: styles.line
|
|
31
|
+
style: [styles.line, isCompleted ? styles.completedLine : undefined]
|
|
27
32
|
})]
|
|
28
33
|
});
|
|
29
34
|
}
|
|
@@ -61,7 +66,7 @@ const styles = StyleSheet.create({
|
|
|
61
66
|
backgroundColor: Color.info[500]
|
|
62
67
|
},
|
|
63
68
|
completed: {
|
|
64
|
-
backgroundColor: Color.
|
|
69
|
+
backgroundColor: Color.success[500]
|
|
65
70
|
},
|
|
66
71
|
line: {
|
|
67
72
|
width: 40,
|
|
@@ -72,7 +77,10 @@ const styles = StyleSheet.create({
|
|
|
72
77
|
content: {
|
|
73
78
|
flex: 1
|
|
74
79
|
},
|
|
75
|
-
listContent: {}
|
|
80
|
+
listContent: {},
|
|
81
|
+
completedLine: {
|
|
82
|
+
backgroundColor: Color.success[500]
|
|
83
|
+
}
|
|
76
84
|
});
|
|
77
85
|
export default StepItem;
|
|
78
86
|
//# sourceMappingURL=StepItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","Text","StyleSheet","FlatList","Color","jsx","_jsx","jsxs","_jsxs","StepItem","index","isActive","isCompleted","isLast","isHeader","children","style","styles","headerItem","circle","completed","active","circleText","line","isValidElement","type","flatListElement","cloneElement","content","props","contentContainerStyle","listContent","nestedScrollEnabled","create","flexDirection","alignItems","width","height","borderRadius","backgroundColor","justifyContent","
|
|
1
|
+
{"version":3,"names":["React","View","Text","StyleSheet","FlatList","Color","Icon","jsx","_jsx","jsxs","_jsxs","StepItem","index","isActive","isCompleted","isLast","isHeader","children","style","styles","headerItem","circle","completed","active","circleText","name","size","color","line","completedLine","undefined","isValidElement","type","flatListElement","cloneElement","content","props","contentContainerStyle","listContent","nestedScrollEnabled","create","flexDirection","alignItems","width","height","borderRadius","backgroundColor","justifyContent","fontWeight","info","success","marginHorizontal","flex"],"sourceRoot":"../../../src","sources":["Step/StepItem.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,7 +5,10 @@ interface TimePickerProps {
|
|
|
5
5
|
hour: number;
|
|
6
6
|
minute: number;
|
|
7
7
|
}) => void;
|
|
8
|
+
title?: string;
|
|
9
|
+
confirmLabel?: string;
|
|
10
|
+
cancelLabel?: string;
|
|
8
11
|
}
|
|
9
|
-
export default function TimePickerWheel({ isOpen, onClose, onChange, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default function TimePickerWheel({ isOpen, onClose, onChange, title, cancelLabel, confirmLabel, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
10
13
|
export {};
|
|
11
14
|
//# sourceMappingURL=TimePicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/DatePicker/TimePicker.tsx"],"names":[],"mappings":"AAsBA,UAAU,eAAe;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/DatePicker/TimePicker.tsx"],"names":[],"mappings":"AAsBA,UAAU,eAAe;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAOD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,MAAM,EACN,OAAO,EACP,QAAQ,EACR,KAAqB,EACrB,WAAqB,EACrB,YAAsB,GACvB,EAAE,eAAe,2CA+KjB"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Animated } from 'react-native';
|
|
3
|
+
interface AnimatedItemProps {
|
|
4
|
+
value: number;
|
|
5
|
+
scrollY: Animated.Value;
|
|
6
|
+
index: number;
|
|
7
|
+
type: 'hour' | 'minute';
|
|
8
|
+
}
|
|
9
|
+
declare const AnimatedItem: React.MemoExoticComponent<({ value, scrollY, index, type }: AnimatedItemProps) => import("react/jsx-runtime").JSX.Element>;
|
|
10
|
+
export default AnimatedItem;
|
|
11
|
+
//# sourceMappingURL=AnimatedItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatedItem.d.ts","sourceRoot":"","sources":["../../../../../src/DatePicker/partials/AnimatedItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAoB,MAAM,cAAc,CAAC;AAG1D,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;CACzB;AAID,QAAA,MAAM,YAAY,8DACkB,iBAAiB,6CAgCpD,CAAC;AAeF,eAAe,YAAY,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { TextAreaProps } from './type';
|
|
2
|
-
export default function TextArea({ height, label, hasError, style, hint, onChangeText, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export default function TextArea({ height, label, hasError, style, hint, onChangeText, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=TextArea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/Input/TextArea.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAY,EACZ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,YAAY,
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/Input/TextArea.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAY,EACZ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,aAAa,2CAoCf"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
interface Props {
|
|
2
2
|
title: string;
|
|
3
3
|
required?: boolean;
|
|
4
|
+
color?: string;
|
|
4
5
|
}
|
|
5
|
-
export default function LabelForm({ title, required }: Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default function LabelForm({ title, required, color, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
export {};
|
|
7
8
|
//# sourceMappingURL=LabelForm.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabelForm.d.ts","sourceRoot":"","sources":["../../../../src/LabelForm/LabelForm.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"LabelForm.d.ts","sourceRoot":"","sources":["../../../../src/LabelForm/LabelForm.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,KAAuB,GACxB,EAAE,KAAK,2CAaP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepItem.d.ts","sourceRoot":"","sources":["../../../../src/Step/StepItem.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"StepItem.d.ts","sourceRoot":"","sources":["../../../../src/Step/StepItem.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,QAAA,MAAM,QAAQ,GAAI,sEAQf,aAAa,4CAuCf,CAAC;AAsCF,eAAe,QAAQ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import {
|
|
3
|
-
View,
|
|
4
|
-
StyleSheet,
|
|
5
|
-
Text,
|
|
6
|
-
Dimensions,
|
|
7
3
|
Animated,
|
|
8
|
-
|
|
4
|
+
Dimensions,
|
|
9
5
|
type NativeScrollEvent,
|
|
6
|
+
type NativeSyntheticEvent,
|
|
10
7
|
ScrollView,
|
|
8
|
+
StyleSheet,
|
|
9
|
+
View,
|
|
11
10
|
} from 'react-native';
|
|
12
11
|
import BottomSheet from '../BottomSheet/BottomSheet';
|
|
13
12
|
import Button from '../Button/Button';
|
|
14
|
-
import Typography from '../Typography/Typography';
|
|
15
13
|
import Color from '../Color/Color';
|
|
14
|
+
import Typography from '../Typography/Typography';
|
|
15
|
+
import AnimatedItem from './partials/AnimatedItem';
|
|
16
16
|
|
|
17
17
|
const ITEM_HEIGHT = 40;
|
|
18
18
|
const SCREEN_WIDTH = Dimensions.get('window').width;
|
|
@@ -24,6 +24,9 @@ interface TimePickerProps {
|
|
|
24
24
|
isOpen: boolean;
|
|
25
25
|
onClose?: () => void;
|
|
26
26
|
onChange?: (value: { hour: number; minute: number }) => void;
|
|
27
|
+
title?: string;
|
|
28
|
+
confirmLabel?: string;
|
|
29
|
+
cancelLabel?: string;
|
|
27
30
|
}
|
|
28
31
|
|
|
29
32
|
const generateItems = (max: number) => Array.from({ length: max }, (_, i) => i);
|
|
@@ -35,6 +38,9 @@ export default function TimePickerWheel({
|
|
|
35
38
|
isOpen,
|
|
36
39
|
onClose,
|
|
37
40
|
onChange,
|
|
41
|
+
title = 'Pilih Waktu',
|
|
42
|
+
cancelLabel = 'Batal',
|
|
43
|
+
confirmLabel = 'Pilih',
|
|
38
44
|
}: TimePickerProps) {
|
|
39
45
|
const [selectedHour, setSelectedHour] = useState<number>(0);
|
|
40
46
|
const [selectedMinute, setSelectedMinute] = useState<number>(0);
|
|
@@ -69,13 +75,9 @@ export default function TimePickerWheel({
|
|
|
69
75
|
scrollToIndex(minuteRef, CENTER_INDEX_MINUTE);
|
|
70
76
|
}, 100);
|
|
71
77
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
selectedHour,
|
|
76
|
-
CENTER_INDEX_HOUR,
|
|
77
|
-
CENTER_INDEX_MINUTE,
|
|
78
|
-
]);
|
|
78
|
+
|
|
79
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
80
|
+
}, [isOpen]);
|
|
79
81
|
|
|
80
82
|
const scrollToIndex = (
|
|
81
83
|
ref: React.RefObject<ScrollView | null>,
|
|
@@ -116,47 +118,6 @@ export default function TimePickerWheel({
|
|
|
116
118
|
onClose?.();
|
|
117
119
|
};
|
|
118
120
|
|
|
119
|
-
const renderAnimatedItem = (
|
|
120
|
-
value: number,
|
|
121
|
-
type: 'hour' | 'minute',
|
|
122
|
-
index: number,
|
|
123
|
-
scrollY: Animated.Value
|
|
124
|
-
) => {
|
|
125
|
-
const normalizedValue =
|
|
126
|
-
type === 'hour' ? ((value % 24) + 24) % 24 : ((value % 60) + 60) % 60;
|
|
127
|
-
|
|
128
|
-
const inputRange = [
|
|
129
|
-
(index - 2) * ITEM_HEIGHT,
|
|
130
|
-
(index - 1) * ITEM_HEIGHT,
|
|
131
|
-
index * ITEM_HEIGHT,
|
|
132
|
-
(index + 1) * ITEM_HEIGHT,
|
|
133
|
-
(index + 2) * ITEM_HEIGHT,
|
|
134
|
-
];
|
|
135
|
-
|
|
136
|
-
const scale = scrollY.interpolate({
|
|
137
|
-
inputRange,
|
|
138
|
-
outputRange: [0.7, 0.85, 1, 0.85, 0.7],
|
|
139
|
-
extrapolate: 'clamp',
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
const opacity = scrollY.interpolate({
|
|
143
|
-
inputRange,
|
|
144
|
-
outputRange: [0.3, 0.6, 1, 0.6, 0.3],
|
|
145
|
-
extrapolate: 'clamp',
|
|
146
|
-
});
|
|
147
|
-
|
|
148
|
-
return (
|
|
149
|
-
<Animated.View
|
|
150
|
-
key={`${type}-${index}`}
|
|
151
|
-
style={[styles.item, { transform: [{ scale }], opacity }]}
|
|
152
|
-
>
|
|
153
|
-
<Text style={styles.itemText}>
|
|
154
|
-
{normalizedValue.toString().padStart(2, '0')}
|
|
155
|
-
</Text>
|
|
156
|
-
</Animated.View>
|
|
157
|
-
);
|
|
158
|
-
};
|
|
159
|
-
|
|
160
121
|
return (
|
|
161
122
|
<BottomSheet
|
|
162
123
|
isOpen={isOpen}
|
|
@@ -165,7 +126,7 @@ export default function TimePickerWheel({
|
|
|
165
126
|
<View style={styles.footer}>
|
|
166
127
|
<View style={styles.flex1}>
|
|
167
128
|
<Button
|
|
168
|
-
title=
|
|
129
|
+
title={cancelLabel}
|
|
169
130
|
variant="tertiary"
|
|
170
131
|
onPress={onClose}
|
|
171
132
|
color="primary"
|
|
@@ -174,7 +135,7 @@ export default function TimePickerWheel({
|
|
|
174
135
|
</View>
|
|
175
136
|
<View style={styles.flex1}>
|
|
176
137
|
<Button
|
|
177
|
-
title=
|
|
138
|
+
title={confirmLabel}
|
|
178
139
|
onPress={handleSubmit}
|
|
179
140
|
color="primary"
|
|
180
141
|
size="medium"
|
|
@@ -190,7 +151,7 @@ export default function TimePickerWheel({
|
|
|
190
151
|
center
|
|
191
152
|
style={styles.hintTime}
|
|
192
153
|
>
|
|
193
|
-
|
|
154
|
+
{title}
|
|
194
155
|
</Typography>
|
|
195
156
|
|
|
196
157
|
<View style={styles.container}>
|
|
@@ -214,9 +175,15 @@ export default function TimePickerWheel({
|
|
|
214
175
|
scrollEventThrottle={16}
|
|
215
176
|
contentContainerStyle={styles.scrollContent}
|
|
216
177
|
>
|
|
217
|
-
{hours.map((h, i) =>
|
|
218
|
-
|
|
219
|
-
|
|
178
|
+
{hours.map((h, i) => (
|
|
179
|
+
<AnimatedItem
|
|
180
|
+
key={i}
|
|
181
|
+
index={i}
|
|
182
|
+
value={h}
|
|
183
|
+
type="hour"
|
|
184
|
+
scrollY={hourScrollY}
|
|
185
|
+
/>
|
|
186
|
+
))}
|
|
220
187
|
</Animated.ScrollView>
|
|
221
188
|
</View>
|
|
222
189
|
|
|
@@ -234,9 +201,15 @@ export default function TimePickerWheel({
|
|
|
234
201
|
scrollEventThrottle={16}
|
|
235
202
|
contentContainerStyle={styles.scrollContent}
|
|
236
203
|
>
|
|
237
|
-
{minutes.map((m, i) =>
|
|
238
|
-
|
|
239
|
-
|
|
204
|
+
{minutes.map((m, i) => (
|
|
205
|
+
<AnimatedItem
|
|
206
|
+
key={i}
|
|
207
|
+
index={i}
|
|
208
|
+
value={m}
|
|
209
|
+
type="minute"
|
|
210
|
+
scrollY={minuteScrollY}
|
|
211
|
+
/>
|
|
212
|
+
))}
|
|
240
213
|
</Animated.ScrollView>
|
|
241
214
|
</View>
|
|
242
215
|
</View>
|
|
@@ -270,16 +243,6 @@ const styles = StyleSheet.create({
|
|
|
270
243
|
height: ITEM_HEIGHT * VISIBLE_ITEMS,
|
|
271
244
|
overflow: 'hidden',
|
|
272
245
|
},
|
|
273
|
-
item: {
|
|
274
|
-
height: ITEM_HEIGHT,
|
|
275
|
-
justifyContent: 'center',
|
|
276
|
-
alignItems: 'center',
|
|
277
|
-
},
|
|
278
|
-
itemText: {
|
|
279
|
-
fontSize: 22,
|
|
280
|
-
color: Color.gray[900],
|
|
281
|
-
fontWeight: '600',
|
|
282
|
-
},
|
|
283
246
|
highlightOverlay: {
|
|
284
247
|
position: 'absolute',
|
|
285
248
|
zIndex: -1,
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Animated, StyleSheet, Text } from 'react-native';
|
|
3
|
+
import Color from '../../Color/Color';
|
|
4
|
+
|
|
5
|
+
interface AnimatedItemProps {
|
|
6
|
+
value: number;
|
|
7
|
+
scrollY: Animated.Value;
|
|
8
|
+
index: number;
|
|
9
|
+
type: 'hour' | 'minute';
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const ITEM_HEIGHT = 40;
|
|
13
|
+
|
|
14
|
+
const AnimatedItem = React.memo(
|
|
15
|
+
({ value, scrollY, index, type }: AnimatedItemProps) => {
|
|
16
|
+
const normalizedValue =
|
|
17
|
+
type === 'hour' ? ((value % 24) + 24) % 24 : ((value % 60) + 60) % 60;
|
|
18
|
+
|
|
19
|
+
const inputRange = [
|
|
20
|
+
(index - 2) * ITEM_HEIGHT,
|
|
21
|
+
(index - 1) * ITEM_HEIGHT,
|
|
22
|
+
index * ITEM_HEIGHT,
|
|
23
|
+
(index + 1) * ITEM_HEIGHT,
|
|
24
|
+
(index + 2) * ITEM_HEIGHT,
|
|
25
|
+
];
|
|
26
|
+
|
|
27
|
+
const scale = scrollY.interpolate({
|
|
28
|
+
inputRange,
|
|
29
|
+
outputRange: [0.7, 0.85, 1, 0.85, 0.7],
|
|
30
|
+
extrapolate: 'clamp',
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
const opacity = scrollY.interpolate({
|
|
34
|
+
inputRange,
|
|
35
|
+
outputRange: [0.3, 0.6, 1, 0.6, 0.3],
|
|
36
|
+
extrapolate: 'clamp',
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Animated.View style={[styles.item, { transform: [{ scale }], opacity }]}>
|
|
41
|
+
<Text style={styles.itemText}>
|
|
42
|
+
{normalizedValue.toString().padStart(2, '0')}
|
|
43
|
+
</Text>
|
|
44
|
+
</Animated.View>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
const styles = StyleSheet.create({
|
|
50
|
+
itemText: {
|
|
51
|
+
fontSize: 22,
|
|
52
|
+
color: Color.gray[900],
|
|
53
|
+
fontWeight: '600',
|
|
54
|
+
},
|
|
55
|
+
item: {
|
|
56
|
+
height: ITEM_HEIGHT,
|
|
57
|
+
justifyContent: 'center',
|
|
58
|
+
alignItems: 'center',
|
|
59
|
+
},
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
export default AnimatedItem;
|
package/src/Input/TextArea.tsx
CHANGED
|
@@ -11,6 +11,7 @@ export default function TextArea({
|
|
|
11
11
|
style,
|
|
12
12
|
hint,
|
|
13
13
|
onChangeText,
|
|
14
|
+
...props
|
|
14
15
|
}: TextAreaProps) {
|
|
15
16
|
const handleOnChangeText = (value: string) => {
|
|
16
17
|
onChangeText?.(value);
|
|
@@ -36,6 +37,8 @@ export default function TextArea({
|
|
|
36
37
|
numberOfLines={14}
|
|
37
38
|
style={[styles.input, style]}
|
|
38
39
|
textAlignVertical="top"
|
|
40
|
+
placeholderTextColor={Color.gray[500]}
|
|
41
|
+
{...props}
|
|
39
42
|
/>
|
|
40
43
|
</View>
|
|
41
44
|
{hint ? (
|
|
@@ -5,12 +5,17 @@ import Color from '../Color/Color';
|
|
|
5
5
|
interface Props {
|
|
6
6
|
title: string;
|
|
7
7
|
required?: boolean;
|
|
8
|
+
color?: string;
|
|
8
9
|
}
|
|
9
10
|
|
|
10
|
-
export default function LabelForm({
|
|
11
|
+
export default function LabelForm({
|
|
12
|
+
title,
|
|
13
|
+
required,
|
|
14
|
+
color = Color.gray[900],
|
|
15
|
+
}: Props) {
|
|
11
16
|
return (
|
|
12
17
|
<View>
|
|
13
|
-
<Typography variant="t2" weight="semibold">
|
|
18
|
+
<Typography variant="t2" weight="semibold" color={color}>
|
|
14
19
|
{title}{' '}
|
|
15
20
|
{required && (
|
|
16
21
|
<Typography variant="t2" weight="semibold" color={Color.danger[500]}>
|
package/src/Step/Step.tsx
CHANGED
package/src/Step/StepItem.tsx
CHANGED
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
} from 'react-native';
|
|
9
9
|
import Color from '../Color/Color';
|
|
10
10
|
import type { StepItemProps } from './type';
|
|
11
|
+
import Icon from '../Icon';
|
|
11
12
|
|
|
12
13
|
const StepItem = ({
|
|
13
14
|
index = 0,
|
|
@@ -28,9 +29,17 @@ const StepItem = ({
|
|
|
28
29
|
isActive && styles.active,
|
|
29
30
|
]}
|
|
30
31
|
>
|
|
31
|
-
<Text style={styles.circleText}>{index + 1}</Text>
|
|
32
|
+
{!isCompleted && <Text style={styles.circleText}>{index + 1}</Text>}
|
|
33
|
+
{isCompleted && <Icon name="Check" size={20} color="white" />}
|
|
32
34
|
</View>
|
|
33
|
-
{!isLast &&
|
|
35
|
+
{!isLast && (
|
|
36
|
+
<View
|
|
37
|
+
style={[
|
|
38
|
+
styles.line,
|
|
39
|
+
isCompleted ? styles.completedLine : undefined,
|
|
40
|
+
]}
|
|
41
|
+
/>
|
|
42
|
+
)}
|
|
34
43
|
</View>
|
|
35
44
|
);
|
|
36
45
|
}
|
|
@@ -70,7 +79,7 @@ const styles = StyleSheet.create({
|
|
|
70
79
|
backgroundColor: Color.info[500],
|
|
71
80
|
},
|
|
72
81
|
completed: {
|
|
73
|
-
backgroundColor: Color.
|
|
82
|
+
backgroundColor: Color.success[500],
|
|
74
83
|
},
|
|
75
84
|
line: {
|
|
76
85
|
width: 40,
|
|
@@ -82,5 +91,8 @@ const styles = StyleSheet.create({
|
|
|
82
91
|
flex: 1,
|
|
83
92
|
},
|
|
84
93
|
listContent: {},
|
|
94
|
+
completedLine: {
|
|
95
|
+
backgroundColor: Color.success[500],
|
|
96
|
+
},
|
|
85
97
|
});
|
|
86
98
|
export default StepItem;
|