UNPKG

@quidone/react-native-wheel-picker

Version:

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

91 lines 3.04 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, useImperativeHandle, useMemo, useRef } from 'react'; import { Animated, StyleSheet } from 'react-native'; import { useInit } from '@rozhkov/react-useful-hooks'; import { withScrollEndEvent } from '../../utils/scrolling'; const ExtendedAnimatedScrollView = withScrollEndEvent(Animated.ScrollView); const OFFSET_X = 0; const getOffsetY = (index, itemHeight) => index * itemHeight; const List = (_ref, forwardedRef) => { let { initialIndex, data, keyExtractor, renderItem, itemHeight, pickerHeight, readOnly, scrollOffset, onTouchEnd, onTouchStart, onTouchCancel, onScrollEnd, contentContainerStyle: contentContainerStyleProp, ...restProps } = _ref; const listRef = useRef(null); useImperativeHandle(forwardedRef, () => ({ scrollToIndex: _ref2 => { var _listRef$current; let { index, animated } = _ref2; (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollTo({ x: OFFSET_X, y: getOffsetY(index, itemHeight), animated }); } }), [itemHeight]); const initialOffset = useInit(() => ({ x: OFFSET_X, y: getOffsetY(initialIndex, itemHeight) })); const snapToOffsets = useMemo(() => data.map((_, i) => i * itemHeight), [data, itemHeight]); const onScroll = useMemo(() => Animated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], { useNativeDriver: true }), [scrollOffset]); const contentContainerStyle = useMemo(() => { return [{ paddingVertical: (pickerHeight - itemHeight) / 2 }, contentContainerStyleProp]; }, [pickerHeight, itemHeight, contentContainerStyleProp]); return /*#__PURE__*/React.createElement(ExtendedAnimatedScrollView, _extends({ showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, scrollEventThrottle: 16, scrollEnabled: !readOnly }, restProps, { ref: listRef, contentOffset: initialOffset, onScroll: onScroll, snapToOffsets: snapToOffsets, style: styles.list, contentContainerStyle: contentContainerStyle, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, onTouchCancel: onTouchCancel, nestedScrollEnabled: true, removeClippedSubviews: false, onScrollEnd: onScrollEnd }), data.map((item, index) => renderItem({ key: keyExtractor(item, index), item, index }))); }; const styles = StyleSheet.create({ list: { width: '100%', overflow: 'visible' } }); export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(List)); //# sourceMappingURL=List.js.map