@eslam-elmeniawy/react-native-common-components/lib/module/components/SelectDialog/SelectDialog.js

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

"use strict";

// External imports.
import * as React from 'react';
import { withTheme } from 'react-native-paper';
import { View, I18nManager, StyleSheet } from 'react-native';

// Types imports.

// Internal imports.
import styles from "./SelectDialog.styles.js";
import { Dialog } from "../Dialog/index.js";
import SearchInput from "./SearchInput.js";
import List from "./List.js";
import NoData from "./NoData.js";
import { Button } from "../Button/index.js";

/**
 * SelectDialogComponent (unwrapped, for testing)
 * @internal For testing purposes only. Do not use in production code.
 */
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const SelectDialogComponent = /*#__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 = (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__*/_jsx(Dialog, {
    visible: visible,
    onDismiss: _dismissDialog,
    style: styles.dialog,
    children: /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsxs(View, {
        style: StyleSheet.flatten([styles.container, {
          backgroundColor: theme.colors.surface,
          borderRadius: _dialogBorderRadius,
          padding: _dialogBorderRadius
        }]),
        children: [/*#__PURE__*/_jsx(SearchInput, {
          searchLabel: searchLabel,
          searchComponent: searchComponent,
          theme: theme,
          onChangeText: _onChangeTextSearchText
        }), _filteredList?.length ? /*#__PURE__*/_jsx(List, {
          items: _filteredList,
          theme: theme,
          onItemPressed: _onItemPressed,
          isItemSelected: _isItemSelected
        }) : /*#__PURE__*/_jsx(NoData, {
          noDataMessage: noDataMessage,
          noDataComponent: noDataComponent
        })]
      }), /*#__PURE__*/_jsx(Button, {
        text: closeText ?? (isArabic ? 'تم' : 'Done'),
        onPress: _dismissDialog,
        style: StyleSheet.flatten([styles.closeButton, {
          backgroundColor: theme.colors.surface,
          borderRadius: _closeButtonBorderRadius
        }]),
        textProps: {
          style: {
            color: theme.colors.onSurface
          }
        }
      })]
    })
  });
});
const SelectDialog = withTheme(SelectDialogComponent);
export { SelectDialogComponent };
export default SelectDialog;
//# sourceMappingURL=SelectDialog.js.map