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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.onOpen = exports.onClose = exports.Picker = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _reactNativeActionsSheet = _interopRequireWildcard(require("react-native-actions-sheet"));

var _reactNativeGestureHandler = require("react-native-gesture-handler");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

const onOpen = id => {
  _reactNativeActionsSheet.SheetManager.show(id);
};

exports.onOpen = onOpen;

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

exports.onClose = onClose;

const Picker = _ref => {
  let {
    id,
    data = [],
    inputValue,
    searchable = false,
    loading = false,
    label,
    height = Math.floor(_reactNative.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] = (0, _react.useState)(null);
  const actionSheetRef = /*#__PURE__*/(0, _react.createRef)();
  const scrollViewRef = (0, _react.useRef)(null);

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

  const Item = _ref2 => {
    let {
      item,
      index
    } = _ref2;
    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
      style: {
        paddingVertical: 20,
        borderBottomWidth: 0.5,
        borderColor: '#CDD4D9'
      },
      onPress: () => {
        itemOnPress(item);
        setSelectedKey(index);
      }
    }, /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNativeActionsSheet.default, _extends({
    id: id,
    ref: actionSheetRef,
    indicatorColor: 'transparent',
    gestureEnabled: true,
    keyboardShouldPersistTaps: "always"
  }, actionsSheetProps), /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
    style: {
      height: height
    }
  }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.FlatList, _extends({
    disableScrollViewPanResponder: true,
    contentContainerStyle: {
      paddingHorizontal: 20
    },
    stickyHeaderIndices: [0],
    ListHeaderComponent: /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: {
        backgroundColor: '#ffffff'
      }
    }, searchable ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: {
        flexDirection: 'row',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 10
      }
    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: {
        flexBasis: '75%'
      }
    }, /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNative.TouchableOpacity, {
      style: {
        padding: 10
      },
      onPress: () => {
        onClose();
      }
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: {
        color: '#333'
      }
    }, closeText))) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: {
        marginTop: 10,
        paddingBottom: 5
      }
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: {
        color: '#333',
        fontSize: 16,
        fontWeight: 'bold'
      }
    }, label)), loading ? /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
      style: {
        marginVertical: 20
      },
      color: "#999999"
    }) : null),
    ListEmptyComponent: () => {
      if (!loading) {
        return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
          style: {
            flex: 1,
            alignItems: 'center',
            paddingTop: 20
          }
        }, /*#__PURE__*/_react.default.createElement(_reactNative.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.default.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))));
};

exports.Picker = Picker;
//# sourceMappingURL=Picker.js.map