react-native-wheel-picker-expo/lib/module/index.js

React Native wheel picker like iOS

function _extends() { _extends = Object.assign || 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); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { PureComponent } from 'react';
import { FlatList, Text, StyleSheet, View, Platform, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { adaptiveColor, setAlphaColor } from './util';
import * as Haptics from 'expo-haptics';

class WheelPickerExpo extends PureComponent {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "flatListRef", /*#__PURE__*/React.createRef());

    _defineProperty(this, "backgroundColor", setAlphaColor(this.props.backgroundColor, 1));

    _defineProperty(this, "state", {
      selectedIndex: 0,
      itemHeight: 40,
      listHeight: 200,
      data: []
    });

    _defineProperty(this, "userTouch", false);

    _defineProperty(this, "handleOnPressItem", index => {
      if (index >= 0 && index <= this.props.items.length - 1) {
        var _this$flatListRef$cur;

        (_this$flatListRef$cur = this.flatListRef.current) === null || _this$flatListRef$cur === void 0 ? void 0 : _this$flatListRef$cur.scrollToIndex({
          animated: true,
          index: index
        });
      }
    });
  }

  componentDidUpdate(prevProps) {
    var _this$props$items, _prevProps$items;

    if (((_this$props$items = this.props.items) === null || _this$props$items === void 0 ? void 0 : _this$props$items.length) !== ((_prevProps$items = prevProps.items) === null || _prevProps$items === void 0 ? void 0 : _prevProps$items.length)) {
      this.setData();
    }
  }

  componentDidMount() {
    this.setData();
  }

  get gradientColor() {
    return Platform.select({
      ios: setAlphaColor(this.backgroundColor, 0.2),
      android: setAlphaColor(this.backgroundColor, 0.4),
      web: setAlphaColor(this.backgroundColor, 0.4)
    });
  }

  get gradientContainerStyle() {
    const {
      itemHeight
    } = this.state;
    const {
      selectedStyle
    } = this.props;
    return [{
      height: 2 * itemHeight,
      borderColor: selectedStyle === null || selectedStyle === void 0 ? void 0 : selectedStyle.borderColor
    }, styles.gradientContainer];
  }

  handleOnSelect(index) {
    const {
      items,
      onChange,
      haptics
    } = this.props;
    const selectedIndex = Math.abs(index);

    if (selectedIndex >= 0 && selectedIndex <= items.length - 1) {
      if (haptics && this.userTouch && this.state.selectedIndex !== selectedIndex) {
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
      }

      this.setState({
        selectedIndex
      });
      onChange && onChange({
        index: selectedIndex,
        item: items[selectedIndex]
      });
    }
  }

  setData() {
    let {
      itemHeight,
      listHeight
    } = this.state;
    const {
      items,
      height
    } = this.props;

    if (items !== null && items !== void 0 && items.length) {
      const additionalItem = {
        label: '',
        value: null
      };
      const data = [additionalItem, additionalItem, ...items, additionalItem, additionalItem];

      if (height) {
        listHeight = height;
        itemHeight = listHeight / 5;
      }

      this.setState({
        data,
        itemHeight,
        listHeight
      });
    }
  }

  render() {
    const {
      data,
      itemHeight,
      listHeight,
      selectedIndex
    } = this.state;
    const {
      width,
      initialSelectedIndex,
      flatListProps,
      selectedStyle
    } = this.props;
    if (!data.length) return;
    return /*#__PURE__*/React.createElement(View, {
      style: {
        height: listHeight,
        width,
        backgroundColor: this.backgroundColor
      }
    }, /*#__PURE__*/React.createElement(FlatList, _extends({
      keyExtractor: (_, index) => index.toString(),
      showsVerticalScrollIndicator: false,
      renderItem: options => PickerItem(options, selectedIndex, { ...styles.listItem,
        backgroundColor: this.backgroundColor,
        fontSize: itemHeight / 2,
        height: itemHeight
      }, this.handleOnPressItem, this.props.renderItem)
    }, flatListProps, {
      onTouchStart: e => {
        this.userTouch = true;
        !!(flatListProps !== null && flatListProps !== void 0 && flatListProps.onTouchStart) && flatListProps.onTouchStart(e);
      },
      ref: this.flatListRef,
      initialScrollIndex: initialSelectedIndex,
      data: data,
      onScroll: event => {
        let index = Math.round(event.nativeEvent.contentOffset.y / itemHeight);
        this.handleOnSelect(index);
      },
      getItemLayout: (_, index) => ({
        length: itemHeight,
        offset: index * itemHeight,
        index
      }),
      snapToInterval: itemHeight
    })), /*#__PURE__*/React.createElement(View, {
      style: [this.gradientContainerStyle, styles.topGradient, {
        borderBottomWidth: selectedStyle === null || selectedStyle === void 0 ? void 0 : selectedStyle.borderWidth
      }],
      pointerEvents: "none"
    }, /*#__PURE__*/React.createElement(LinearGradient, {
      style: styles.linearGradient,
      colors: [this.backgroundColor, this.gradientColor]
    })), /*#__PURE__*/React.createElement(View, {
      style: [this.gradientContainerStyle, styles.bottomGradient, {
        borderTopWidth: selectedStyle === null || selectedStyle === void 0 ? void 0 : selectedStyle.borderWidth
      }],
      pointerEvents: "none"
    }, /*#__PURE__*/React.createElement(LinearGradient, {
      style: styles.linearGradient,
      colors: [this.gradientColor, this.backgroundColor]
    })));
  }

}

_defineProperty(WheelPickerExpo, "defaultProps", {
  items: [],
  backgroundColor: '#FFFFFF',
  width: 150,
  haptics: false
});

const Item = /*#__PURE__*/React.memo(({
  fontSize,
  label,
  fontColor,
  textAlign
}) => /*#__PURE__*/React.createElement(Text, {
  style: {
    fontSize,
    color: fontColor,
    textAlign
  }
}, label));

const PickerItem = ({
  item,
  index
}, indexSelected, style, onPress, renderItem) => {
  const gap = Math.abs(index - (indexSelected + 2));
  const sizeText = [style.fontSize, style.fontSize / 1.5, style.fontSize / 2];
  const fontSize = gap > 1 ? sizeText[2] : sizeText[gap];
  const fontColor = adaptiveColor(style.backgroundColor);
  const textAlign = 'center';
  return /*#__PURE__*/React.createElement(TouchableOpacity, {
    activeOpacity: 1,
    onPress: () => onPress(index - 2)
  }, /*#__PURE__*/React.createElement(View, {
    style: style
  }, typeof renderItem === 'function' && renderItem({
    fontSize,
    fontColor,
    label: item.label,
    textAlign
  }), !renderItem && /*#__PURE__*/React.createElement(Item, {
    fontSize: fontSize,
    fontColor: fontColor,
    textAlign: textAlign,
    label: item.label
  })));
};

const styles = StyleSheet.create({
  listItem: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  gradientContainer: {
    position: 'absolute',
    width: '100%'
  },
  linearGradient: {
    flex: 1
  },
  topGradient: {
    top: 0
  },
  bottomGradient: {
    bottom: 0
  }
});
export default WheelPickerExpo;
//# sourceMappingURL=index.js.map