UNPKG

@quidone/react-native-wheel-picker

Version:

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

84 lines 2.96 kB
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } import React, { forwardRef, memo, useCallback, useMemo } from 'react'; import { Animated, StyleSheet } from 'react-native'; import { withScrollEndEvent } from '../../utils/scrolling'; // TODO "any" is not an exact type. How to pass the generic type? const ExtendedAnimatedFlatList = withScrollEndEvent(Animated.FlatList); const VirtualizedList = (_ref, forwardedRef) => { let { initialIndex, data, keyExtractor, renderItem, itemHeight, pickerHeight, visibleItemCount, readOnly, scrollOffset, onTouchEnd, onTouchStart, onTouchCancel, onScrollEnd, contentContainerStyle: contentContainerStyleProp, initialNumToRender, maxToRenderPerBatch, updateCellsBatchingPeriod = 10, windowSize, ...restProps } = _ref; 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__*/React.createElement(ExtendedAnimatedFlatList, _extends({ showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, scrollEventThrottle: 16, scrollEnabled: !readOnly }, restProps, { ref: forwardedRef, data: data, renderItem: renderItem, keyExtractor: keyExtractor, getItemLayout: getItemLayout, initialScrollIndex: initialIndex, onScroll: onScroll, snapToOffsets: snapToOffsets, style: styles.list, contentContainerStyle: contentContainerStyle, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, onTouchCancel: onTouchCancel, 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