@tecsinapse/react-native-kit 3.4.1 → 3.5.0-beta.0

package/dist/cjs/components/molecules/Select/hooks/useModal.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var React = require('react');
+var styled = require('../styled.js');
+var Option = require('../components/Option.js');
+var reactCore = require('@tecsinapse/react-core');
+var functions = require('../functions.js');
+
+const useModal = ({
+  keyExtractor,
+  labelExtractor,
+  focused,
+  type,
+  value,
+  onSelect,
+  onSearch,
+  close,
+  closeOnPick,
+  ...others
+}) => {
+  const [selectedValues, setSelectedValues] = React.useState([]);
+  const [searchArg, setSearchArg] = reactCore.useDebouncedState("", onSearch);
+  const ModalComponent = React.useMemo(
+    () => styled.getStyledModal(reactCore.getStatusBarHeight(true)),
+    []
+  );
+  const _closeOnPick = closeOnPick && type === "single";
+  React.useEffect(() => {
+    setSelectedValues(
+      value ? type === "multi" ? value : [value] : []
+    );
+  }, [value, focused, setSelectedValues]);
+  const getData = React.useCallback(
+    (_options) => {
+      return _options.map((option, index) => {
+        return {
+          ...option,
+          _checked: functions.isOptionChecked(
+            type,
+            option,
+            selectedValues,
+            keyExtractor,
+            index
+          )
+        };
+      });
+    },
+    [type, selectedValues, keyExtractor]
+  );
+  const handlePressItem = React.useCallback(
+    (option) => {
+      setSelectedValues(
+        (prev) => type === "multi" ? functions.multiBuilder(option, prev, keyExtractor) : functions.singleBuilder(option, prev, keyExtractor)
+      );
+    },
+    [keyExtractor, type]
+  );
+  React.useEffect(() => {
+    if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {
+      handleConfirm();
+    }
+  }, [selectedValues[0], value, closeOnPick]);
+  const handleConfirm = React.useCallback(() => {
+    onSelect(
+      type === "single" ? selectedValues[0] : selectedValues
+    );
+    close?.();
+  }, [selectedValues]);
+  const renderItem = React.useCallback(
+    ({ item }) => /* @__PURE__ */ React.createElement(
+      Option,
+      {
+        item,
+        type,
+        handlePressItem: (t) => {
+          handlePressItem(t);
+        },
+        labelExtractor
+      }
+    ),
+    [type, handlePressItem, labelExtractor]
+  );
+  return {
+    /**
+     * Hook props
+     */
+    searchArg,
+    setSearchArg,
+    ModalComponent,
+    renderItem,
+    getData,
+    handleConfirm,
+    /**
+     * Component props
+     */
+    keyExtractor,
+    labelExtractor,
+    focused,
+    type,
+    value,
+    onSelect,
+    onSearch,
+    close,
+    closeOnPick: _closeOnPick,
+    ...others
+  };
+};
+
+module.exports = useModal;

package/dist/cjs/components/molecules/Select/hooks/useSelect.js

@@ -0,0 +1,147 @@
+'use strict';
+
+var React = require('react');
+require('react-native');
+var reactCore = require('@tecsinapse/react-core');
+require('react-native-safe-area-context');
+require('../../../atoms/Modal/ui/styled.js');
+var useLazyModalManager = require('../../../atoms/Modal/useLazyModalManager.js');
+var functions = require('../functions.js');
+
+const useSelect = ({
+  value,
+  options,
+  keyExtractor,
+  type,
+  labelExtractor,
+  placeholder,
+  onFocus,
+  onBlur,
+  disabled,
+  onSearch,
+  label,
+  ...rest
+}) => {
+  const { focused, handleBlur, handleFocus } = reactCore.useInputFocus(
+    onFocus,
+    onBlur,
+    !disabled
+  );
+  const [selectOptions, setSelectOptions] = React.useState([]);
+  const modal = useLazyModalManager.useLazyModalManager();
+  const [loading, setLoading] = React.useState(false);
+  const onlyLabel = label && !placeholder;
+  const hasValue = type === "single" ? !!value : (value || []).length > 0;
+  const _placeholder = onlyLabel ? label : placeholder;
+  const _label = hasValue ? label : void 0;
+  React.useEffect(() => {
+    if (typeof options !== "function") {
+      setSelectOptions(options);
+    }
+  }, [options]);
+  const handleLazyFocus = React.useCallback(async () => {
+    if (typeof options === "function" && !onSearch) {
+      setLoading(true);
+      try {
+        const result = await options();
+        if (result) {
+          const _value = value;
+          if (_value && !(result instanceof Map) && !functions.findValue(result, _value, keyExtractor)) {
+            setSelectOptions([_value, ...result]);
+          } else setSelectOptions(result);
+        }
+      } catch (e) {
+      } finally {
+        setLoading(false);
+      }
+    }
+  }, [options, value, setSelectOptions]);
+  const handleOnSearch = React.useCallback(
+    async (searchInput) => {
+      if (searchInput !== void 0 && onSearch) {
+        setLoading(true);
+        modal.requestUpdate();
+        try {
+          const result = await onSearch(searchInput);
+          if (result) {
+            if (type === "single") {
+              const _value = value;
+              if (_value && !(result instanceof Map) && !functions.findValue(result, _value, keyExtractor)) {
+                setSelectOptions([_value, ...result]);
+              } else setSelectOptions(result);
+            } else {
+              const _value = value;
+              if (_value?.length && !(result instanceof Map)) {
+                const selected = _value.filter((it) => !functions.findValue(result, it, keyExtractor)) ?? [];
+                setSelectOptions([...selected, ...result]);
+              } else {
+                setSelectOptions(result);
+              }
+            }
+          }
+        } catch (e) {
+        } finally {
+          modal.requestUpdate();
+          setLoading(false);
+        }
+      }
+    },
+    [options, value, keyExtractor]
+  );
+  const getDisplayValue = React.useCallback(() => {
+    if (Array.isArray(value)) {
+      return functions.getMultiLabel(
+        value,
+        String(_placeholder),
+        selectOptions,
+        keyExtractor,
+        labelExtractor
+      );
+    } else {
+      return functions.getSingleLabel(
+        value,
+        String(_placeholder),
+        selectOptions,
+        keyExtractor,
+        labelExtractor
+      );
+    }
+  }, [_placeholder, value, selectOptions]);
+  const handlePressInput = async () => {
+    modal.show();
+    handleFocus();
+    await handleLazyFocus();
+  };
+  return {
+    /**
+     * Hook props
+     */
+    focused,
+    handleBlur,
+    handlePressInput,
+    getDisplayValue,
+    handleOnSearch,
+    _label,
+    loading,
+    modal,
+    selectOptions,
+    setSelectOptions,
+    /**
+     * Component props
+     */
+    value,
+    options,
+    keyExtractor,
+    type,
+    labelExtractor,
+    placeholder,
+    onFocus,
+    onBlur,
+    disabled,
+    onSearch,
+    label,
+    ...rest
+  };
+};
+
+module.exports = useSelect;

package/dist/cjs/components/molecules/Select/styled.js

@@ -33,8 +33,6 @@ const SearchBarContainer = styled(reactNative.View)`
   position: relative;
 `;
 const ListItem = styled(reactCore.PressableSurface)`
-  border-bottom-width: ${reactCore.RFValueStr("1px")};
-  border-color: ${({ theme }) => theme.color.secondary.light};
   padding-top: ${({ theme }) => theme.spacing.mili};
   padding-bottom: ${({ theme }) => theme.spacing.mili};
   padding-left: ${({ theme }) => theme.spacing.deca};
@@ -60,11 +58,23 @@ const TextTitleModal = styled(Text)`
 const StyledTextItemSelect = styled(Text)`
   width: 90%;
 `;
+const Divider = styled(reactNative.View)`
+  height: ${reactCore.RFValueStr("1px")};
+  display: flex;
+  flex: 1 1 auto;
+  background-color: ${({ theme }) => theme.color.secondary.light};
+`;
+const SectionHeader = styled(reactNative.View)`
+  background-color: #fff;
+  padding: ${({ theme }) => theme.spacing.deca};
+`;
 
+exports.Divider = Divider;
 exports.FetchIndicator = FetchIndicator;
 exports.ListItem = ListItem;
 exports.ModalFooter = ModalFooter;
 exports.SearchBarContainer = SearchBarContainer;
+exports.SectionHeader = SectionHeader;
 exports.SelectIcon = SelectIcon;
 exports.StyledSelectionText = StyledSelectionText;
 exports.StyledTextItemSelect = StyledTextItemSelect;

package/dist/esm/components/atoms/Modal/ModalGroupManager.js

@@ -14,6 +14,7 @@ const ModalGroupManager = ({ children, ...others }) => {
       statusBarTranslucent: true,
       animationType: "none",
       visible: hasModals,
+      onRequestClose: modalLifecycle.closeLastOpenedModal,
       ...others
     },
     _render

package/dist/esm/components/atoms/Modal/ModalLifecycleHandler.js

@@ -119,6 +119,11 @@ class ModalLifecycleHandler {
     savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false });
     this.update();
   };
+  closeLastOpenedModal = () => {
+    const [modals] = this.state || [];
+    const lastModal = modals?.pop();
+    lastModal?.props?.close?.();
+  };
 }
 const createModalLifecycleHandler = () => {
   return new ModalLifecycleHandler();

package/dist/esm/components/atoms/Modal/ui/BaseModalView.js

@@ -27,8 +27,7 @@ const ModalView = ({
   const opacityCarrier = useRef(new Animated.Value(0)).current;
   const offset = isLastShown && keyboardOpened > 0 ? 0 : bottom;
   const getKeyboardHeight = (keyboard) => {
-    if (keyboard === 0)
-      return 0;
+    if (keyboard === 0) return 0;
     const wHeight = Math.ceil(Dimensions.get("window").height);
     const sHeight = Math.ceil(Dimensions.get("screen").height);
     if (wHeight !== sHeight) {
@@ -99,14 +98,12 @@ const ModalView = ({
     [show, ready, visible, setReady]
   );
   useEffect(() => {
-    if (visible && ready)
-      requestAnimationFrame(() => show());
+    if (visible && ready) requestAnimationFrame(() => show());
     if (!visible && !ready) {
       Keyboard.dismiss();
       requestAnimationFrame(() => hide(boxHeight));
     }
-    if (!visible && ready)
-      setReady(false);
+    if (!visible && ready) setReady(false);
   }, [ready, visible]);
   useEffect(() => {
     const showEvent = Keyboard.addListener(

package/dist/esm/components/molecules/Select/Select.js

@@ -1,139 +1,47 @@
-import { useInputFocus, HintInputContainer } from '@tecsinapse/react-core';
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import 'react-native';
-import 'react-native-safe-area-context';
-import '../../atoms/Modal/ui/styled.js';
-import { useLazyModalManager } from '../../atoms/Modal/useLazyModalManager.js';
+import { HintInputContainer } from '@tecsinapse/react-core';
+import React__default from 'react';
 import Text from '../../atoms/Text/Text.js';
-import { Modal } from './Modal.js';
+import { Modal } from './components/Modal.js';
 import { SelectIcon, StyledSelectionText } from './styled.js';
+import useSelect from './hooks/useSelect.js';
 
-function Select({
-  /** Select props */
-  value,
-  options,
-  keyExtractor,
-  groupKeyExtractor,
-  onSelect,
-  type,
-  labelExtractor,
-  placeholder,
-  onFocus,
-  onBlur,
-  disabled,
-  onSearch,
-  selectModalTitle,
-  selectModalTitleComponent,
-  searchBarPlaceholder,
-  hideSearchBar,
-  confirmButtonText,
-  rightComponent,
-  variant = "default",
-  hintComponent,
-  hint,
-  style,
-  controlComponent,
-  closeOnPick = type === "single",
-  label,
-  numberOfLines,
-  ...rest
-}) {
-  const { focused, handleBlur, handleFocus } = useInputFocus(
-    onFocus,
-    onBlur,
-    !disabled
-  );
-  const [selectOptions, setSelectOptions] = useState([]);
-  const modal = useLazyModalManager();
-  const [loading, setLoading] = useState(false);
-  const onlyLabel = label && !placeholder;
-  const hasValue = type === "single" ? !!value : (value || []).length > 0;
-  const _placeholder = onlyLabel ? label : placeholder;
-  const _label = hasValue ? label : void 0;
-  useEffect(() => {
-    if (typeof options !== "function") {
-      setSelectOptions(options);
-    }
-  }, [options]);
-  const handleLazyFocus = React.useCallback(async () => {
-    if (typeof options === "function" && !onSearch) {
-      setLoading(true);
-      try {
-        const result = await options();
-        if (result) {
-          if (value && !result.find((v) => keyExtractor(value) === keyExtractor(v))) {
-            setSelectOptions([value, ...result]);
-          } else
-            setSelectOptions(result);
-        }
-      } catch (e) {
-      } finally {
-        setLoading(false);
-      }
-    }
-  }, [options, value, setSelectOptions]);
-  const handleOnSearch = React.useCallback(
-    async (searchInput) => {
-      if (searchInput !== void 0 && onSearch) {
-        setLoading(true);
-        modal.requestUpdate();
-        try {
-          const result = await onSearch(searchInput);
-          if (result) {
-            if (type === "single") {
-              if (value && !result.find(
-                (v) => keyExtractor(value) === keyExtractor(v)
-              )) {
-                setSelectOptions([value, ...result]);
-              } else
-                setSelectOptions(result);
-            } else {
-              if (value?.length) {
-                const selectedValues = value.filter(
-                  (v) => !result.find(
-                    (current) => keyExtractor(v) === keyExtractor(current)
-                  )
-                ) || [];
-                setSelectOptions([...selectedValues, ...result]);
-              } else {
-                setSelectOptions(result);
-              }
-            }
-          }
-        } catch (e) {
-        } finally {
-          modal.requestUpdate();
-          setLoading(false);
-        }
-      }
-    },
-    [options, value, keyExtractor]
-  );
-  const getDisplayValue = React.useCallback(() => {
-    if (Array.isArray(value)) {
-      if (value.length === 0)
-        return _placeholder;
-      else {
-        const options2 = selectOptions.length > 0 ? selectOptions : value;
-        return options2?.reduce(
-          (acc, option, index) => value.find(
-            (key) => keyExtractor(option, index) == keyExtractor(key, index)
-          ) ? acc + labelExtractor(option) + ", " : acc,
-          ""
-        ).slice(0, -2);
-      }
-    } else {
-      if (!value)
-        return _placeholder;
-      const selectedOption = selectOptions?.find(
-        (option, index) => keyExtractor(option, index) == keyExtractor(value, index)
-      );
-      return labelExtractor(selectedOption ?? value);
-    }
-  }, [_placeholder, value, selectOptions]);
+function Select(props) {
+  const {
+    groupKeyExtractor,
+    onSelect,
+    selectModalTitle,
+    selectModalTitleComponent,
+    searchBarPlaceholder,
+    hideSearchBar,
+    confirmButtonText,
+    rightComponent,
+    variant = "default",
+    hintComponent,
+    hint,
+    style,
+    controlComponent,
+    type,
+    numberOfLines,
+    closeOnPick = type === "single",
+    modal,
+    selectOptions,
+    keyExtractor,
+    labelExtractor,
+    value,
+    handleOnSearch,
+    loading,
+    options,
+    setSelectOptions,
+    handleBlur,
+    handlePressInput,
+    getDisplayValue,
+    focused,
+    disabled,
+    _label,
+    ...rest
+  } = useSelect(props);
   modal.sync(
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       Modal,
       {
         options: selectOptions || [],
@@ -161,14 +69,10 @@ function Select({
       }
     )
   );
-  const handlePressInput = async () => {
-    modal.show();
-    handleFocus();
-    await handleLazyFocus();
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue() || "") : /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue() || "") : /* @__PURE__ */ React__default.createElement(
     HintInputContainer,
     {
+      ...rest,
       viewStyle: style,
       onPress: handlePressInput,
       focused,
@@ -178,10 +82,9 @@ function Select({
       hint,
       hintComponent,
       label: _label,
-      rightComponent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SelectIcon, { name: "chevron-down", type: "ionicon", size: "centi" }), rightComponent),
-      ...rest
+      rightComponent: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(SelectIcon, { name: "chevron-down", type: "ionicon", size: "centi" }), rightComponent)
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       StyledSelectionText,
       {
         numberOfLines,

package/dist/esm/components/molecules/Select/components/Flat.js

@@ -0,0 +1,22 @@
+import React__default from 'react';
+import { Divider } from '../styled.js';
+import { FlatList } from 'react-native';
+
+const Flat = ({ options, keyExtractor, renderItem, getData }) => {
+  const data = React__default.useMemo(
+    () => typeof options !== "function" ? getData(options) : [],
+    [options, getData]
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    FlatList,
+    {
+      data,
+      keyExtractor,
+      fadingEdgeLength: 200,
+      ItemSeparatorComponent: Divider,
+      renderItem
+    }
+  );
+};
+
+export { Flat as default };

package/dist/esm/components/molecules/Select/components/Modal.js

@@ -0,0 +1,94 @@
+import React__default from 'react';
+import { Button } from '../../../atoms/Button/Button.js';
+import { RFValue } from '@tecsinapse/react-core';
+import Text from '../../../atoms/Text/Text.js';
+import Header from '../../../atoms/Header/Header.js';
+import Input from '../../../atoms/Input/Input.js';
+import 'react-native';
+import { ModalView } from '../../../atoms/Modal/ui/BaseModalView.js';
+import { SearchBarContainer, SelectIcon, FetchIndicator, ModalFooter, TextTitleModal } from '../styled.js';
+import Section from './Section.js';
+import Flat from './Flat.js';
+import useModal from '../hooks/useModal.js';
+
+const ModalTitle = ({ title }) => title ? /* @__PURE__ */ React__default.createElement(
+  TextTitleModal,
+  {
+    typography: "h4",
+    fontWeight: "bold",
+    numberOfLines: 3,
+    style: { maxWidth: RFValue(250) }
+  },
+  title
+) : null;
+const Component = (props) => {
+  const {
+    ModalComponent,
+    selectModalTitleComponent,
+    selectModalTitle,
+    hideSearchBar,
+    searchBarPlaceholder,
+    searchArg,
+    setSearchArg,
+    loading,
+    options,
+    getData,
+    renderItem,
+    keyExtractor,
+    closeOnPick,
+    confirmButtonText,
+    handleConfirm,
+    close,
+    ...others
+  } = useModal(props);
+  return /* @__PURE__ */ React__default.createElement(ModalView, { ...others, BoxComponent: ModalComponent, showCloseBar: false }, /* @__PURE__ */ React__default.createElement(
+    Header,
+    {
+      rightButton: {
+        onPress: close,
+        icon: {
+          name: "close",
+          type: "material-community",
+          fontColor: "light"
+        }
+      }
+    },
+    selectModalTitleComponent ? selectModalTitleComponent : /* @__PURE__ */ React__default.createElement(ModalTitle, { title: selectModalTitle })
+  ), !hideSearchBar ? /* @__PURE__ */ React__default.createElement(SearchBarContainer, null, /* @__PURE__ */ React__default.createElement(
+    Input,
+    {
+      placeholder: searchBarPlaceholder,
+      value: searchArg,
+      onChange: setSearchArg,
+      leftComponent: /* @__PURE__ */ React__default.createElement(SelectIcon, { name: "search", type: "ionicon", size: "centi" })
+    }
+  )) : null, loading ? /* @__PURE__ */ React__default.createElement(FetchIndicator, { animating: true, color: "grey", size: "large" }) : null, options instanceof Map ? /* @__PURE__ */ React__default.createElement(
+    Section,
+    {
+      options,
+      getData,
+      renderItem,
+      keyExtractor
+    }
+  ) : /* @__PURE__ */ React__default.createElement(
+    Flat,
+    {
+      renderItem,
+      getData,
+      options,
+      keyExtractor
+    }
+  ), !closeOnPick ? /* @__PURE__ */ React__default.createElement(ModalFooter, null, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "filled",
+      color: "primary",
+      onPress: handleConfirm,
+      disabled: loading
+    },
+    /* @__PURE__ */ React__default.createElement(Text, { fontColor: "light", fontWeight: "bold" }, confirmButtonText)
+  )) : null);
+};
+const Modal = Component;
+
+export { Modal };