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

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

"use strict";

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

// Types imports.

// Internal imports.
import styles from "./TextInput.styles.js";
import SelectInputMenu from "./SelectInputMenu.js";
import SelectInputInput from "./SelectInputInput.js";
import { SelectDialog } from "../SelectDialog/index.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
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__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(TouchableRipple, {
      disabled: editable === false,
      onPress: _onPress,
      style: StyleSheet.flatten([styles.noVerticalMargin, {
        marginTop: marginVertical ?? marginTop,
        marginBottom: marginVertical ?? marginBottom
      }, _widthHorizontalMarginStyle]),
      children: /*#__PURE__*/_jsx(View, {
        pointerEvents: "box-only",
        children: selectProps?.mode === 'dropdown' ? /*#__PURE__*/_jsx(SelectInputMenu, {
          value: value,
          isSelectVisible: isSelectVisible,
          dismissSelect: _dismissSelect,
          marginVertical: marginVertical,
          marginTop: marginTop,
          marginBottom: marginBottom,
          widthHorizontalMarginStyle: _widthHorizontalMarginStyle,
          onItemPressed: _onItemPressed,
          isItemSelected: _isItemSelected,
          onPress: _onPress,
          ...props
        }) : /*#__PURE__*/_jsx(SelectInputInput, {
          value: value,
          onPress: _onPress,
          ...omit(props, ['theme'])
        })
      })
    }), selectProps?.mode !== 'dropdown' && /*#__PURE__*/_jsx(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
    })]
  });
});
export default SelectInput;
//# sourceMappingURL=SelectInput.js.map