react-native-actions-sheet-picker/lib/module/components/Picker.js

A React Native component that provides a filterable select dropdown/picker.

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); }

import React, { useRef, createRef, useState } from 'react';
import { View, TouchableOpacity, TextInput, ActivityIndicator, Text, Dimensions, SafeAreaView } from 'react-native';
import ActionSheet, { SheetManager } from 'react-native-actions-sheet';
import { FlatList } from 'react-native-gesture-handler';
export const onOpen = id => {
  SheetManager.show(id);
};
export const onClose = id => {
  SheetManager.hide(id);
};
export const Picker = _ref => {
  let {
    id,
    data = [],
    inputValue,
    searchable = false,
    loading = false,
    label,
    height = Math.floor(Dimensions.get('window').height * 0.5),
    closeText = 'Close',
    placeholderText = 'Search',
    noDataFoundText = 'No Data Found.',
    placeholderTextColor = '#8B93A5',
    setSelected,
    onSearch,
    searchInputProps,
    flatListProps,
    actionsSheetProps,
    renderListItem
  } = _ref;
  const [selectedKey, setSelectedKey] = useState(null);
  const actionSheetRef = /*#__PURE__*/createRef();
  const scrollViewRef = useRef(null);

  const onClose = () => {
    SheetManager.hide(id);
  };

  const Item = _ref2 => {
    let {
      item,
      index
    } = _ref2;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: {
        paddingVertical: 20,
        borderBottomWidth: 0.5,
        borderColor: '#CDD4D9'
      },
      onPress: () => {
        itemOnPress(item);
        setSelectedKey(index);
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: selectedKey !== index ? 'normal' : 'bold'
      }
    }, item.name ? item.name : null));
  };

  const itemOnPress = item => {
    setSelected(item);
    onClose();
  };

  const keyExtractor = (_item, index) => index.toString();

  return /*#__PURE__*/React.createElement(ActionSheet, _extends({
    id: id,
    ref: actionSheetRef,
    indicatorColor: 'transparent',
    gestureEnabled: true,
    keyboardShouldPersistTaps: "always"
  }, actionsSheetProps), /*#__PURE__*/React.createElement(SafeAreaView, {
    style: {
      height: height
    }
  }, /*#__PURE__*/React.createElement(FlatList, _extends({
    disableScrollViewPanResponder: true,
    contentContainerStyle: {
      paddingHorizontal: 20
    },
    stickyHeaderIndices: [0],
    ListHeaderComponent: /*#__PURE__*/React.createElement(View, {
      style: {
        backgroundColor: '#ffffff'
      }
    }, searchable ? /*#__PURE__*/React.createElement(View, {
      style: {
        flexDirection: 'row',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 10
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flexBasis: '75%'
      }
    }, /*#__PURE__*/React.createElement(TextInput, _extends({
      style: {
        height: 40,
        borderWidth: 1,
        borderColor: '#CDD4D9',
        borderRadius: 6,
        padding: 10,
        color: '#333'
      },
      value: inputValue,
      placeholderTextColor: placeholderTextColor,
      onChangeText: onSearch,
      placeholder: placeholderText,
      clearButtonMode: "always",
      autoCapitalize: "none",
      autoCorrect: false
    }, searchInputProps))), /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: {
        padding: 10
      },
      onPress: () => {
        onClose();
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        color: '#333'
      }
    }, closeText))) : null, /*#__PURE__*/React.createElement(View, {
      style: {
        marginTop: 10,
        paddingBottom: 5
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        color: '#333',
        fontSize: 16,
        fontWeight: 'bold'
      }
    }, label)), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
      style: {
        marginVertical: 20
      },
      color: "#999999"
    }) : null),
    ListEmptyComponent: () => {
      if (!loading) {
        return /*#__PURE__*/React.createElement(View, {
          style: {
            flex: 1,
            alignItems: 'center',
            paddingTop: 20
          }
        }, /*#__PURE__*/React.createElement(Text, {
          style: {
            color: '#333'
          }
        }, noDataFoundText));
      }

      return null;
    },
    ref: scrollViewRef,
    nestedScrollEnabled: true,
    data: data,
    renderItem: _ref3 => {
      let {
        item,
        index
      } = _ref3;

      if (renderListItem) {
        return renderListItem(item, index);
      }

      return /*#__PURE__*/React.createElement(Item, {
        item: item,
        index: index
      });
    },
    keyExtractor: keyExtractor,
    onMomentumScrollEnd: () => {
      var _actionSheetRef$curre;

      return (_actionSheetRef$curre = actionSheetRef.current) === null || _actionSheetRef$curre === void 0 ? void 0 : _actionSheetRef$curre.handleChildScrollEnd();
    }
  }, flatListProps))));
};
//# sourceMappingURL=Picker.js.map