@eslam-elmeniawy/react-native-common-components/lib/commonjs/components/TextInput/SelectInput.js

Common `ReactNative` components packed in library for usage in projects.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNativePaper = require("react-native-paper");
var _reactNative = require("react-native");
var _lodash = require("lodash");
var _TextInputStyles = _interopRequireDefault(require("./TextInput.styles.js"));
var _SelectInputMenu = _interopRequireDefault(require("./SelectInputMenu.js"));
var _SelectInputInput = _interopRequireDefault(require("./SelectInputInput.js"));
var _index = require("../SelectDialog/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// External imports.

// Types imports.

// Internal imports.

const SelectInput = /*#__PURE__*/React.memo(props => {
  const {
    style,
    selectProps,
    value: propsValue,
    editable
  } = props;
  const {
    marginVertical,
    marginTop,
    marginBottom,
    width,
    marginHorizontal,
    marginStart,
    marginEnd,
    marginLeft,
    marginRight,
    alignSelf
  } = style ?? {};
  const _widthHorizontalMarginStyle = {
    width,
    marginHorizontal,
    marginStart,
    marginEnd,
    marginLeft,
    marginRight,
    alignSelf
  };
  const [isSelectVisible, setIsSelectVisible] = React.useState(false);
  const [value, setValue] = React.useState(propsValue ?? '');
  const [selectedItems, setSelectedItems] = React.useState(selectProps?.selectedItems);

  // #region Lifecycle
  React.useEffect(() => {
    setSelectedItems(selectProps?.selectedItems);
    if ((selectProps?.selectedItems ?? []).length) {
      const names = [];
      (selectProps?.selectedItems ?? []).forEach(item => {
        if (item) {
          names.push(item.dropdownTitle ?? '');
        }
      });
      setValue(names.join(' - '));
    }
  }, [selectProps]);
  // #endregion

  const _showSelect = React.useCallback(() => {
    setIsSelectVisible(true);
  }, []);
  const _dismissSelect = React.useCallback(() => {
    setIsSelectVisible(false);
  }, []);
  const _setSelectedText = React.useCallback(items => {
    if (items?.length) {
      const names = [];
      items?.forEach(item => {
        if (item) {
          names.push(item.dropdownTitle ?? '');
        }
      });
      setValue(names.join(' - '));
    } else {
      setValue(propsValue ?? '');
    }
  }, [propsValue]);
  const _onItemsSelected = React.useCallback(items => {
    _setSelectedText(items);
    if (selectProps?.onItemsSelected) {
      selectProps?.onItemsSelected(items);
    }
  }, [_setSelectedText, selectProps]);
  const _isItemSelected = React.useCallback(item => {
    let itemSelected = false;
    selectedItems?.some(dataItem => {
      if (dataItem && dataItem.key === item.key) {
        itemSelected = true;
        return true;
      }
      return false;
    });
    return itemSelected;
  }, [selectedItems]);

  // #region Press events
  const _onPress = React.useCallback(() => {
    isSelectVisible ? _dismissSelect() : _showSelect();
  }, [_dismissSelect, _showSelect, isSelectVisible]);
  const _onItemPressed = React.useCallback(item => {
    let newSelectedItems = Array.from(selectedItems ?? []);
    let index = -1;
    newSelectedItems.some((dataItem, i) => {
      if (dataItem && dataItem.key === item.key) {
        index = i;
        return true;
      }
      return false;
    });
    if (index > -1) {
      newSelectedItems.splice(index, 1);
    } else if (selectProps?.allowMultiSelect) {
      newSelectedItems.push(item);
    } else {
      newSelectedItems = [item];
    }
    setSelectedItems(newSelectedItems);
    _onItemsSelected(newSelectedItems);
    if (!selectProps?.allowMultiSelect) {
      _dismissSelect();
    }
  }, [_dismissSelect, _onItemsSelected, selectProps, selectedItems]);
  // #endregion

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativePaper.TouchableRipple, {
      disabled: editable === false,
      onPress: _onPress,
      style: _reactNative.StyleSheet.flatten([_TextInputStyles.default.noVerticalMargin, {
        marginTop: marginVertical ?? marginTop,
        marginBottom: marginVertical ?? marginBottom
      }, _widthHorizontalMarginStyle]),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        pointerEvents: "box-only",
        children: selectProps?.mode === 'dropdown' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectInputMenu.default, {
          value: value,
          isSelectVisible: isSelectVisible,
          dismissSelect: _dismissSelect,
          marginVertical: marginVertical,
          marginTop: marginTop,
          marginBottom: marginBottom,
          widthHorizontalMarginStyle: _widthHorizontalMarginStyle,
          onItemPressed: _onItemPressed,
          isItemSelected: _isItemSelected,
          onPress: _onPress,
          ...props
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectInputInput.default, {
          value: value,
          onPress: _onPress,
          ...(0, _lodash.omit)(props, ['theme'])
        })
      })
    }), selectProps?.mode !== 'dropdown' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SelectDialog, {
      visible: isSelectVisible,
      onDismiss: _dismissSelect,
      items: selectProps?.items,
      selectedItems: selectProps?.selectedItems,
      allowMultiSelect: selectProps?.allowMultiSelect,
      onItemsSelected: _onItemsSelected,
      searchLabel: selectProps?.searchLabel,
      noDataMessage: selectProps?.noDataMessage,
      closeText: selectProps?.closeText
    })]
  });
});
var _default = exports.default = SelectInput;
//# sourceMappingURL=SelectInput.js.map