UNPKG

@quidone/react-native-wheel-picker

Version:

Picker is a UI component for selecting an item from a list of options.

90 lines (89 loc) 2.78 kB
"use strict"; import React, { forwardRef, memo, useCallback, useMemo } from 'react'; import { Animated, StyleSheet } from 'react-native'; import { withScrollStartEndEvent } from '../../utils/scrolling'; import { jsx as _jsx } from "react/jsx-runtime"; // TODO "any" is not an exact type. How to pass the generic type? const ExtendedAnimatedFlatList = withScrollStartEndEvent(Animated.FlatList); const VirtualizedList = ({ initialIndex, data, keyExtractor, renderItem, itemHeight, pickerHeight, visibleItemCount, readOnly, scrollOffset, onTouchEnd, onTouchStart, onTouchCancel, onScrollStart, onScrollEnd, contentContainerStyle: contentContainerStyleProp, initialNumToRender, maxToRenderPerBatch, updateCellsBatchingPeriod = 10, windowSize, disableIntervalMomentum, ...restProps }, forwardedRef) => { const snapToOffsets = useMemo(() => data.map((_, i) => i * itemHeight), [data, itemHeight]); const onScroll = useMemo(() => Animated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], { useNativeDriver: true }), [scrollOffset]); const getItemLayout = useCallback((_, index) => ({ length: itemHeight, offset: itemHeight * index, index }), [itemHeight]); const contentContainerStyle = useMemo(() => { return [{ paddingVertical: (pickerHeight - itemHeight) / 2 }, contentContainerStyleProp]; }, [pickerHeight, itemHeight, contentContainerStyleProp]); return /*#__PURE__*/_jsx(ExtendedAnimatedFlatList, { showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, scrollEventThrottle: 16, scrollEnabled: !readOnly, ...restProps, ref: forwardedRef, data: data, renderItem: renderItem, keyExtractor: keyExtractor, getItemLayout: getItemLayout, initialScrollIndex: initialIndex, onScroll: onScroll, scrollOffset: scrollOffset, snapToOffsets: snapToOffsets, disableIntervalMomentum: disableIntervalMomentum, style: styles.list, contentContainerStyle: contentContainerStyle, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, onTouchCancel: onTouchCancel, onScrollStart: onScrollStart, onScrollEnd: onScrollEnd, initialNumToRender: initialNumToRender ?? Math.ceil(visibleItemCount / 2), maxToRenderPerBatch: maxToRenderPerBatch ?? Math.ceil(visibleItemCount / 2), updateCellsBatchingPeriod: updateCellsBatchingPeriod, windowSize: windowSize, nestedScrollEnabled: true, removeClippedSubviews: false }); }; const styles = StyleSheet.create({ list: { width: '100%', overflow: 'visible' } }); export default /*#__PURE__*/memo(/*#__PURE__*/forwardRef(VirtualizedList)); //# sourceMappingURL=VirtualizedList.js.map