expo-horizontal-picker 0.1.3 → 0.1.4
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/.lintstagedrc +3 -0
- package/.nvmrc +1 -0
- package/build/index.d.ts +1 -1
- package/build/index.d.ts.map +1 -1
- package/build/index.js.map +1 -1
- package/expo-module.config.json +9 -0
- package/package.json +1 -4
- package/src/index.tsx +232 -0
package/.lintstagedrc
ADDED
package/.nvmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
v22.11.0
|
package/build/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ interface PickerOption {
|
|
|
4
4
|
label: string;
|
|
5
5
|
value: string | number;
|
|
6
6
|
}
|
|
7
|
-
interface HorizontalPickerProps extends Omit<AnimatedScrollViewProps, 'style'> {
|
|
7
|
+
export interface HorizontalPickerProps extends Omit<AnimatedScrollViewProps, 'style'> {
|
|
8
8
|
items: PickerOption[];
|
|
9
9
|
initialIndex?: number;
|
|
10
10
|
visibleItemCount?: number;
|
package/build/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,SAAS,EAGd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EACf,KAAK,uBAAuB,EAM7B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,SAAS,EAGd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EACf,KAAK,uBAAuB,EAM7B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IACnF,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAgB,EAChB,gBAAoB,EACpB,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAsHvB"}
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport {\n type LayoutChangeEvent,\n PixelRatio,\n Platform,\n Pressable,\n type StyleProp,\n StyleSheet,\n Text,\n type TextStyle,\n View,\n type ViewStyle,\n} from 'react-native';\nimport Animated, {\n type AnimatedScrollViewProps,\n runOnJS,\n type SharedValue,\n useAnimatedReaction,\n useAnimatedScrollHandler,\n useSharedValue,\n} from 'react-native-reanimated';\n\ninterface PickerOption {\n label: string;\n value: string | number;\n}\n\ninterface HorizontalPickerProps extends Omit<AnimatedScrollViewProps, 'style'> {\n items: PickerOption[];\n initialIndex?: number;\n visibleItemCount?: number;\n onChange?: (value: PickerOption['value'], index: number) => void;\n onHapticFeedback?: () => void;\n containerStyle?: AnimatedScrollViewProps['style'];\n itemContainerStyle?: StyleProp<ViewStyle>;\n itemTextStyle?: StyleProp<TextStyle>;\n selectedItemTextStyle?: StyleProp<TextStyle>;\n}\n\nexport function HorizontalPicker({\n items,\n initialIndex = 0,\n visibleItemCount = 7,\n onChange,\n onHapticFeedback,\n containerStyle,\n itemContainerStyle,\n itemTextStyle,\n selectedItemTextStyle,\n ...props\n}: HorizontalPickerProps) {\n const scrollViewRef = useRef<Animated.ScrollView>(null);\n const lastHapticIndexRef = useRef<number>(-1);\n const [scrollViewWidth, setScrollViewWidth] = useState<number>(0);\n const scrollX = useSharedValue<number>(0);\n const currentIndex = useSharedValue<number>(initialIndex);\n\n const { itemWidth, paddingSide } = useMemo(() => {\n const width = PixelRatio.roundToNearestPixel(scrollViewWidth / visibleItemCount);\n const padding = PixelRatio.roundToNearestPixel(scrollViewWidth / 2 - width / 2);\n return {\n itemWidth: width,\n paddingSide: padding,\n };\n }, [scrollViewWidth, visibleItemCount]);\n\n const snapOffsets = useMemo(() => {\n return items.map((_, index) => PixelRatio.roundToNearestPixel(index * itemWidth));\n }, [items, itemWidth]);\n\n const handleOnLayout = useCallback(\n (e: LayoutChangeEvent) => {\n const layoutWidth = e.nativeEvent.layout.width;\n setScrollViewWidth(layoutWidth);\n\n const safeIndex = Math.max(0, Math.min(items.length - 1, initialIndex));\n const rawItemWidth = layoutWidth / visibleItemCount;\n const x = PixelRatio.roundToNearestPixel(safeIndex * rawItemWidth);\n requestAnimationFrame(() => {\n scrollViewRef.current?.scrollTo({ x, y: 0, animated: false });\n });\n },\n [initialIndex, items.length, visibleItemCount],\n );\n\n const handleOnScroll = useAnimatedScrollHandler({\n onScroll: (event) => {\n scrollX.value = event.contentOffset.x;\n },\n });\n\n const handleOnPress = useCallback(\n (newIndex: number) => {\n const safeIndex = Math.max(0, Math.min(items.length - 1, newIndex));\n const x = PixelRatio.roundToNearestPixel(safeIndex * itemWidth);\n scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n },\n [items.length, itemWidth],\n );\n\n const handleOnChange = useCallback(\n (index: number) => {\n const item = items[index];\n if (item) {\n onChange?.(item.value, index);\n }\n },\n [onChange, items],\n );\n\n const handleOnHapticFeedback = useCallback(\n (index: number) => {\n if (index !== lastHapticIndexRef.current && index >= 0 && index < items.length) {\n lastHapticIndexRef.current = index;\n onHapticFeedback?.();\n }\n },\n [items.length, onHapticFeedback],\n );\n\n useAnimatedReaction(\n () => {\n if (scrollViewWidth === 0) {\n return null;\n }\n const newIndex = Math.round(scrollX.value / itemWidth);\n const safeIndex = Math.max(0, Math.min(items.length - 1, newIndex));\n currentIndex.value = safeIndex;\n return safeIndex;\n },\n (safeIndex, prevIndex) => {\n if (safeIndex !== null && safeIndex !== prevIndex) {\n runOnJS(handleOnChange)(safeIndex);\n runOnJS(handleOnHapticFeedback)(safeIndex);\n }\n },\n [itemWidth, items.length, scrollViewWidth],\n );\n\n return (\n <Animated.ScrollView\n ref={scrollViewRef}\n horizontal\n onLayout={handleOnLayout}\n onScroll={handleOnScroll}\n showsHorizontalScrollIndicator={false}\n scrollEventThrottle={Platform.select({ ios: 16, android: 2 })}\n decelerationRate={Platform.select({ ios: undefined, android: 'fast' })}\n snapToOffsets={snapOffsets}\n contentContainerStyle={{ paddingHorizontal: paddingSide }}\n style={[styles.container, containerStyle]}\n {...props}\n >\n {items.map((item, index) => (\n <PickerItem\n key={`picker-item-${item.label}-${index}`}\n label={item.label}\n index={index}\n currentIndex={currentIndex}\n itemWidth={itemWidth}\n onPress={() => handleOnPress(index)}\n itemContainerStyle={itemContainerStyle}\n itemTextStyle={itemTextStyle}\n selectedItemTextStyle={selectedItemTextStyle}\n />\n ))}\n </Animated.ScrollView>\n );\n}\n\ninterface PickerItemProps\n extends Pick<HorizontalPickerProps, 'itemContainerStyle' | 'itemTextStyle' | 'selectedItemTextStyle'> {\n label: PickerOption['label'];\n index: number;\n currentIndex: SharedValue<number>;\n itemWidth: number;\n onPress: () => void;\n}\n\nfunction PickerItem({\n label,\n index,\n currentIndex,\n itemWidth,\n onPress,\n itemContainerStyle,\n itemTextStyle,\n selectedItemTextStyle,\n}: PickerItemProps) {\n const [isFocused, setIsFocused] = useState(false);\n\n useAnimatedReaction(\n () => currentIndex.value === index,\n (shouldBeFocused, isCurrentFocused) => {\n if (shouldBeFocused !== isCurrentFocused) {\n runOnJS(setIsFocused)(shouldBeFocused);\n }\n },\n [index],\n );\n\n return (\n <Pressable onPress={onPress}>\n <View style={[{ width: itemWidth }, styles.itemContainer, itemContainerStyle]}>\n <Text style={isFocused ? [styles.itemTextSelected, selectedItemTextStyle] : [styles.itemText, itemTextStyle]}>\n {label}\n </Text>\n </View>\n </Pressable>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n width: '100%',\n },\n itemContainer: {\n justifyContent: 'center',\n alignItems: 'center',\n height: 60,\n },\n itemText: {\n fontSize: 13,\n fontWeight: '700',\n color: '#C9CED9',\n },\n itemTextSelected: {\n fontSize: 15,\n fontWeight: '800',\n color: '#000000',\n },\n});\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport {\n type LayoutChangeEvent,\n PixelRatio,\n Platform,\n Pressable,\n type StyleProp,\n StyleSheet,\n Text,\n type TextStyle,\n View,\n type ViewStyle,\n} from 'react-native';\nimport Animated, {\n type AnimatedScrollViewProps,\n runOnJS,\n type SharedValue,\n useAnimatedReaction,\n useAnimatedScrollHandler,\n useSharedValue,\n} from 'react-native-reanimated';\n\ninterface PickerOption {\n label: string;\n value: string | number;\n}\n\nexport interface HorizontalPickerProps extends Omit<AnimatedScrollViewProps, 'style'> {\n items: PickerOption[];\n initialIndex?: number;\n visibleItemCount?: number;\n onChange?: (value: PickerOption['value'], index: number) => void;\n onHapticFeedback?: () => void;\n containerStyle?: AnimatedScrollViewProps['style'];\n itemContainerStyle?: StyleProp<ViewStyle>;\n itemTextStyle?: StyleProp<TextStyle>;\n selectedItemTextStyle?: StyleProp<TextStyle>;\n}\n\nexport function HorizontalPicker({\n items,\n initialIndex = 0,\n visibleItemCount = 7,\n onChange,\n onHapticFeedback,\n containerStyle,\n itemContainerStyle,\n itemTextStyle,\n selectedItemTextStyle,\n ...props\n}: HorizontalPickerProps) {\n const scrollViewRef = useRef<Animated.ScrollView>(null);\n const lastHapticIndexRef = useRef<number>(-1);\n const [scrollViewWidth, setScrollViewWidth] = useState<number>(0);\n const scrollX = useSharedValue<number>(0);\n const currentIndex = useSharedValue<number>(initialIndex);\n\n const { itemWidth, paddingSide } = useMemo(() => {\n const width = PixelRatio.roundToNearestPixel(scrollViewWidth / visibleItemCount);\n const padding = PixelRatio.roundToNearestPixel(scrollViewWidth / 2 - width / 2);\n return {\n itemWidth: width,\n paddingSide: padding,\n };\n }, [scrollViewWidth, visibleItemCount]);\n\n const snapOffsets = useMemo(() => {\n return items.map((_, index) => PixelRatio.roundToNearestPixel(index * itemWidth));\n }, [items, itemWidth]);\n\n const handleOnLayout = useCallback(\n (e: LayoutChangeEvent) => {\n const layoutWidth = e.nativeEvent.layout.width;\n setScrollViewWidth(layoutWidth);\n\n const safeIndex = Math.max(0, Math.min(items.length - 1, initialIndex));\n const rawItemWidth = layoutWidth / visibleItemCount;\n const x = PixelRatio.roundToNearestPixel(safeIndex * rawItemWidth);\n requestAnimationFrame(() => {\n scrollViewRef.current?.scrollTo({ x, y: 0, animated: false });\n });\n },\n [initialIndex, items.length, visibleItemCount],\n );\n\n const handleOnScroll = useAnimatedScrollHandler({\n onScroll: (event) => {\n scrollX.value = event.contentOffset.x;\n },\n });\n\n const handleOnPress = useCallback(\n (newIndex: number) => {\n const safeIndex = Math.max(0, Math.min(items.length - 1, newIndex));\n const x = PixelRatio.roundToNearestPixel(safeIndex * itemWidth);\n scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n },\n [items.length, itemWidth],\n );\n\n const handleOnChange = useCallback(\n (index: number) => {\n const item = items[index];\n if (item) {\n onChange?.(item.value, index);\n }\n },\n [onChange, items],\n );\n\n const handleOnHapticFeedback = useCallback(\n (index: number) => {\n if (index !== lastHapticIndexRef.current && index >= 0 && index < items.length) {\n lastHapticIndexRef.current = index;\n onHapticFeedback?.();\n }\n },\n [items.length, onHapticFeedback],\n );\n\n useAnimatedReaction(\n () => {\n if (scrollViewWidth === 0) {\n return null;\n }\n const newIndex = Math.round(scrollX.value / itemWidth);\n const safeIndex = Math.max(0, Math.min(items.length - 1, newIndex));\n currentIndex.value = safeIndex;\n return safeIndex;\n },\n (safeIndex, prevIndex) => {\n if (safeIndex !== null && safeIndex !== prevIndex) {\n runOnJS(handleOnChange)(safeIndex);\n runOnJS(handleOnHapticFeedback)(safeIndex);\n }\n },\n [itemWidth, items.length, scrollViewWidth],\n );\n\n return (\n <Animated.ScrollView\n ref={scrollViewRef}\n horizontal\n onLayout={handleOnLayout}\n onScroll={handleOnScroll}\n showsHorizontalScrollIndicator={false}\n scrollEventThrottle={Platform.select({ ios: 16, android: 2 })}\n decelerationRate={Platform.select({ ios: undefined, android: 'fast' })}\n snapToOffsets={snapOffsets}\n contentContainerStyle={{ paddingHorizontal: paddingSide }}\n style={[styles.container, containerStyle]}\n {...props}\n >\n {items.map((item, index) => (\n <PickerItem\n key={`picker-item-${item.label}-${index}`}\n label={item.label}\n index={index}\n currentIndex={currentIndex}\n itemWidth={itemWidth}\n onPress={() => handleOnPress(index)}\n itemContainerStyle={itemContainerStyle}\n itemTextStyle={itemTextStyle}\n selectedItemTextStyle={selectedItemTextStyle}\n />\n ))}\n </Animated.ScrollView>\n );\n}\n\ninterface PickerItemProps\n extends Pick<HorizontalPickerProps, 'itemContainerStyle' | 'itemTextStyle' | 'selectedItemTextStyle'> {\n label: PickerOption['label'];\n index: number;\n currentIndex: SharedValue<number>;\n itemWidth: number;\n onPress: () => void;\n}\n\nfunction PickerItem({\n label,\n index,\n currentIndex,\n itemWidth,\n onPress,\n itemContainerStyle,\n itemTextStyle,\n selectedItemTextStyle,\n}: PickerItemProps) {\n const [isFocused, setIsFocused] = useState(false);\n\n useAnimatedReaction(\n () => currentIndex.value === index,\n (shouldBeFocused, isCurrentFocused) => {\n if (shouldBeFocused !== isCurrentFocused) {\n runOnJS(setIsFocused)(shouldBeFocused);\n }\n },\n [index],\n );\n\n return (\n <Pressable onPress={onPress}>\n <View style={[{ width: itemWidth }, styles.itemContainer, itemContainerStyle]}>\n <Text style={isFocused ? [styles.itemTextSelected, selectedItemTextStyle] : [styles.itemText, itemTextStyle]}>\n {label}\n </Text>\n </View>\n </Pressable>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n width: '100%',\n },\n itemContainer: {\n justifyContent: 'center',\n alignItems: 'center',\n height: 60,\n },\n itemText: {\n fontSize: 13,\n fontWeight: '700',\n color: '#C9CED9',\n },\n itemTextSelected: {\n fontSize: 15,\n fontWeight: '800',\n color: '#000000',\n },\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "expo-horizontal-picker",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "A performant horizontal picker component for React Native and Expo apps",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -49,9 +49,6 @@
|
|
|
49
49
|
"typescript": "^5.8.3",
|
|
50
50
|
"react-native-reanimated": "^3.18.0"
|
|
51
51
|
},
|
|
52
|
-
"files": [
|
|
53
|
-
"/build"
|
|
54
|
-
],
|
|
55
52
|
"peerDependencies": {
|
|
56
53
|
"expo": "*",
|
|
57
54
|
"react": "*",
|
package/src/index.tsx
ADDED
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
import { useCallback, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
type LayoutChangeEvent,
|
|
4
|
+
PixelRatio,
|
|
5
|
+
Platform,
|
|
6
|
+
Pressable,
|
|
7
|
+
type StyleProp,
|
|
8
|
+
StyleSheet,
|
|
9
|
+
Text,
|
|
10
|
+
type TextStyle,
|
|
11
|
+
View,
|
|
12
|
+
type ViewStyle,
|
|
13
|
+
} from 'react-native';
|
|
14
|
+
import Animated, {
|
|
15
|
+
type AnimatedScrollViewProps,
|
|
16
|
+
runOnJS,
|
|
17
|
+
type SharedValue,
|
|
18
|
+
useAnimatedReaction,
|
|
19
|
+
useAnimatedScrollHandler,
|
|
20
|
+
useSharedValue,
|
|
21
|
+
} from 'react-native-reanimated';
|
|
22
|
+
|
|
23
|
+
interface PickerOption {
|
|
24
|
+
label: string;
|
|
25
|
+
value: string | number;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export interface HorizontalPickerProps extends Omit<AnimatedScrollViewProps, 'style'> {
|
|
29
|
+
items: PickerOption[];
|
|
30
|
+
initialIndex?: number;
|
|
31
|
+
visibleItemCount?: number;
|
|
32
|
+
onChange?: (value: PickerOption['value'], index: number) => void;
|
|
33
|
+
onHapticFeedback?: () => void;
|
|
34
|
+
containerStyle?: AnimatedScrollViewProps['style'];
|
|
35
|
+
itemContainerStyle?: StyleProp<ViewStyle>;
|
|
36
|
+
itemTextStyle?: StyleProp<TextStyle>;
|
|
37
|
+
selectedItemTextStyle?: StyleProp<TextStyle>;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export function HorizontalPicker({
|
|
41
|
+
items,
|
|
42
|
+
initialIndex = 0,
|
|
43
|
+
visibleItemCount = 7,
|
|
44
|
+
onChange,
|
|
45
|
+
onHapticFeedback,
|
|
46
|
+
containerStyle,
|
|
47
|
+
itemContainerStyle,
|
|
48
|
+
itemTextStyle,
|
|
49
|
+
selectedItemTextStyle,
|
|
50
|
+
...props
|
|
51
|
+
}: HorizontalPickerProps) {
|
|
52
|
+
const scrollViewRef = useRef<Animated.ScrollView>(null);
|
|
53
|
+
const lastHapticIndexRef = useRef<number>(-1);
|
|
54
|
+
const [scrollViewWidth, setScrollViewWidth] = useState<number>(0);
|
|
55
|
+
const scrollX = useSharedValue<number>(0);
|
|
56
|
+
const currentIndex = useSharedValue<number>(initialIndex);
|
|
57
|
+
|
|
58
|
+
const { itemWidth, paddingSide } = useMemo(() => {
|
|
59
|
+
const width = PixelRatio.roundToNearestPixel(scrollViewWidth / visibleItemCount);
|
|
60
|
+
const padding = PixelRatio.roundToNearestPixel(scrollViewWidth / 2 - width / 2);
|
|
61
|
+
return {
|
|
62
|
+
itemWidth: width,
|
|
63
|
+
paddingSide: padding,
|
|
64
|
+
};
|
|
65
|
+
}, [scrollViewWidth, visibleItemCount]);
|
|
66
|
+
|
|
67
|
+
const snapOffsets = useMemo(() => {
|
|
68
|
+
return items.map((_, index) => PixelRatio.roundToNearestPixel(index * itemWidth));
|
|
69
|
+
}, [items, itemWidth]);
|
|
70
|
+
|
|
71
|
+
const handleOnLayout = useCallback(
|
|
72
|
+
(e: LayoutChangeEvent) => {
|
|
73
|
+
const layoutWidth = e.nativeEvent.layout.width;
|
|
74
|
+
setScrollViewWidth(layoutWidth);
|
|
75
|
+
|
|
76
|
+
const safeIndex = Math.max(0, Math.min(items.length - 1, initialIndex));
|
|
77
|
+
const rawItemWidth = layoutWidth / visibleItemCount;
|
|
78
|
+
const x = PixelRatio.roundToNearestPixel(safeIndex * rawItemWidth);
|
|
79
|
+
requestAnimationFrame(() => {
|
|
80
|
+
scrollViewRef.current?.scrollTo({ x, y: 0, animated: false });
|
|
81
|
+
});
|
|
82
|
+
},
|
|
83
|
+
[initialIndex, items.length, visibleItemCount],
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
const handleOnScroll = useAnimatedScrollHandler({
|
|
87
|
+
onScroll: (event) => {
|
|
88
|
+
scrollX.value = event.contentOffset.x;
|
|
89
|
+
},
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
const handleOnPress = useCallback(
|
|
93
|
+
(newIndex: number) => {
|
|
94
|
+
const safeIndex = Math.max(0, Math.min(items.length - 1, newIndex));
|
|
95
|
+
const x = PixelRatio.roundToNearestPixel(safeIndex * itemWidth);
|
|
96
|
+
scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });
|
|
97
|
+
},
|
|
98
|
+
[items.length, itemWidth],
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
const handleOnChange = useCallback(
|
|
102
|
+
(index: number) => {
|
|
103
|
+
const item = items[index];
|
|
104
|
+
if (item) {
|
|
105
|
+
onChange?.(item.value, index);
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
[onChange, items],
|
|
109
|
+
);
|
|
110
|
+
|
|
111
|
+
const handleOnHapticFeedback = useCallback(
|
|
112
|
+
(index: number) => {
|
|
113
|
+
if (index !== lastHapticIndexRef.current && index >= 0 && index < items.length) {
|
|
114
|
+
lastHapticIndexRef.current = index;
|
|
115
|
+
onHapticFeedback?.();
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
[items.length, onHapticFeedback],
|
|
119
|
+
);
|
|
120
|
+
|
|
121
|
+
useAnimatedReaction(
|
|
122
|
+
() => {
|
|
123
|
+
if (scrollViewWidth === 0) {
|
|
124
|
+
return null;
|
|
125
|
+
}
|
|
126
|
+
const newIndex = Math.round(scrollX.value / itemWidth);
|
|
127
|
+
const safeIndex = Math.max(0, Math.min(items.length - 1, newIndex));
|
|
128
|
+
currentIndex.value = safeIndex;
|
|
129
|
+
return safeIndex;
|
|
130
|
+
},
|
|
131
|
+
(safeIndex, prevIndex) => {
|
|
132
|
+
if (safeIndex !== null && safeIndex !== prevIndex) {
|
|
133
|
+
runOnJS(handleOnChange)(safeIndex);
|
|
134
|
+
runOnJS(handleOnHapticFeedback)(safeIndex);
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
[itemWidth, items.length, scrollViewWidth],
|
|
138
|
+
);
|
|
139
|
+
|
|
140
|
+
return (
|
|
141
|
+
<Animated.ScrollView
|
|
142
|
+
ref={scrollViewRef}
|
|
143
|
+
horizontal
|
|
144
|
+
onLayout={handleOnLayout}
|
|
145
|
+
onScroll={handleOnScroll}
|
|
146
|
+
showsHorizontalScrollIndicator={false}
|
|
147
|
+
scrollEventThrottle={Platform.select({ ios: 16, android: 2 })}
|
|
148
|
+
decelerationRate={Platform.select({ ios: undefined, android: 'fast' })}
|
|
149
|
+
snapToOffsets={snapOffsets}
|
|
150
|
+
contentContainerStyle={{ paddingHorizontal: paddingSide }}
|
|
151
|
+
style={[styles.container, containerStyle]}
|
|
152
|
+
{...props}
|
|
153
|
+
>
|
|
154
|
+
{items.map((item, index) => (
|
|
155
|
+
<PickerItem
|
|
156
|
+
key={`picker-item-${item.label}-${index}`}
|
|
157
|
+
label={item.label}
|
|
158
|
+
index={index}
|
|
159
|
+
currentIndex={currentIndex}
|
|
160
|
+
itemWidth={itemWidth}
|
|
161
|
+
onPress={() => handleOnPress(index)}
|
|
162
|
+
itemContainerStyle={itemContainerStyle}
|
|
163
|
+
itemTextStyle={itemTextStyle}
|
|
164
|
+
selectedItemTextStyle={selectedItemTextStyle}
|
|
165
|
+
/>
|
|
166
|
+
))}
|
|
167
|
+
</Animated.ScrollView>
|
|
168
|
+
);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
interface PickerItemProps
|
|
172
|
+
extends Pick<HorizontalPickerProps, 'itemContainerStyle' | 'itemTextStyle' | 'selectedItemTextStyle'> {
|
|
173
|
+
label: PickerOption['label'];
|
|
174
|
+
index: number;
|
|
175
|
+
currentIndex: SharedValue<number>;
|
|
176
|
+
itemWidth: number;
|
|
177
|
+
onPress: () => void;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
function PickerItem({
|
|
181
|
+
label,
|
|
182
|
+
index,
|
|
183
|
+
currentIndex,
|
|
184
|
+
itemWidth,
|
|
185
|
+
onPress,
|
|
186
|
+
itemContainerStyle,
|
|
187
|
+
itemTextStyle,
|
|
188
|
+
selectedItemTextStyle,
|
|
189
|
+
}: PickerItemProps) {
|
|
190
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
191
|
+
|
|
192
|
+
useAnimatedReaction(
|
|
193
|
+
() => currentIndex.value === index,
|
|
194
|
+
(shouldBeFocused, isCurrentFocused) => {
|
|
195
|
+
if (shouldBeFocused !== isCurrentFocused) {
|
|
196
|
+
runOnJS(setIsFocused)(shouldBeFocused);
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
[index],
|
|
200
|
+
);
|
|
201
|
+
|
|
202
|
+
return (
|
|
203
|
+
<Pressable onPress={onPress}>
|
|
204
|
+
<View style={[{ width: itemWidth }, styles.itemContainer, itemContainerStyle]}>
|
|
205
|
+
<Text style={isFocused ? [styles.itemTextSelected, selectedItemTextStyle] : [styles.itemText, itemTextStyle]}>
|
|
206
|
+
{label}
|
|
207
|
+
</Text>
|
|
208
|
+
</View>
|
|
209
|
+
</Pressable>
|
|
210
|
+
);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
const styles = StyleSheet.create({
|
|
214
|
+
container: {
|
|
215
|
+
width: '100%',
|
|
216
|
+
},
|
|
217
|
+
itemContainer: {
|
|
218
|
+
justifyContent: 'center',
|
|
219
|
+
alignItems: 'center',
|
|
220
|
+
height: 60,
|
|
221
|
+
},
|
|
222
|
+
itemText: {
|
|
223
|
+
fontSize: 13,
|
|
224
|
+
fontWeight: '700',
|
|
225
|
+
color: '#C9CED9',
|
|
226
|
+
},
|
|
227
|
+
itemTextSelected: {
|
|
228
|
+
fontSize: 15,
|
|
229
|
+
fontWeight: '800',
|
|
230
|
+
color: '#000000',
|
|
231
|
+
},
|
|
232
|
+
});
|