@eslam-elmeniawy/react-native-common-components/lib/commonjs/components/SelectDialog/SelectDialog.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 _SelectDialogStyles = _interopRequireDefault(require("./SelectDialog.styles.js"));
var _index = require("../Dialog/index.js");
var _SearchInput = _interopRequireDefault(require("./SearchInput.js"));
var _List = _interopRequireDefault(require("./List.js"));
var _NoData = _interopRequireDefault(require("./NoData.js"));
var _index2 = require("../Button/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 SelectDialog = /*#__PURE__*/React.memo(props => {
  const {
    items,
    selectedItems: propsSelectedItems,
    allowMultiSelect,
    onItemsSelected,
    visible,
    onDismiss,
    searchLabel,
    searchComponent,
    noDataMessage,
    noDataComponent,
    closeText,
    theme
  } = props;
  const _dialogBorderRadius = (theme.isV3 ? 7 : 1) * theme.roundness;
  const isArabic = (_reactNative.I18nManager.getConstants().localeIdentifier?.indexOf('ar') ?? -1) > -1;
  const _closeButtonBorderRadius = (theme.isV3 ? 5 : 1) * theme.roundness;
  const [selectedItems, setSelectedItems] = React.useState(propsSelectedItems);
  const [searchText, setSearchText] = React.useState(undefined);
  const _filteredList = React.useMemo(() => {
    if (items && searchText) {
      const filteredItems = items.filter(item => (item.dropdownTitle ?? '').toLowerCase().indexOf(searchText.toLowerCase()) > -1);
      return filteredItems;
    }
    return items;
  }, [items, searchText]);
  const _dismissDialog = React.useCallback(() => {
    setSearchText(undefined);
    if (onDismiss) {
      onDismiss();
    }
  }, [onDismiss]);

  // #region Lifecycle
  React.useEffect(() => {
    setSelectedItems(propsSelectedItems);
  }, [propsSelectedItems]);
  // #endregion

  // #region Text change events
  const _onChangeTextSearchText = React.useCallback(text => {
    setSearchText(text);
  }, []);
  // #endregion

  // #region Press events
  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 (allowMultiSelect) {
      newSelectedItems.push(item);
    } else {
      newSelectedItems = [item];
    }
    setSelectedItems(newSelectedItems);
    if (onItemsSelected) {
      onItemsSelected(newSelectedItems);
    }
    if (!allowMultiSelect) {
      _dismissDialog();
    }
  }, [_dismissDialog, allowMultiSelect, onItemsSelected, selectedItems]);
  // #endregion

  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]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Dialog, {
    visible: visible,
    onDismiss: _dismissDialog,
    style: _SelectDialogStyles.default.dialog,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: _reactNative.StyleSheet.flatten([_SelectDialogStyles.default.container, {
          backgroundColor: theme.colors.surface,
          borderRadius: _dialogBorderRadius,
          padding: _dialogBorderRadius
        }]),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchInput.default, {
          searchLabel: searchLabel,
          searchComponent: searchComponent,
          theme: theme,
          onChangeText: _onChangeTextSearchText
        }), _filteredList?.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
          items: _filteredList,
          theme: theme,
          onItemPressed: _onItemPressed,
          isItemSelected: _isItemSelected
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoData.default, {
          noDataMessage: noDataMessage,
          noDataComponent: noDataComponent
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
        text: closeText ?? (isArabic ? 'تم' : 'Done'),
        onPress: _dismissDialog,
        style: _reactNative.StyleSheet.flatten([_SelectDialogStyles.default.closeButton, {
          backgroundColor: theme.colors.surface,
          borderRadius: _closeButtonBorderRadius
        }]),
        textProps: {
          style: {
            color: theme.colors.onSurface
          }
        }
      })]
    })
  });
});
var _default = exports.default = (0, _reactNativePaper.withTheme)(SelectDialog);
//# sourceMappingURL=SelectDialog.js.map