@tecsinapse/react-native-kit 3.4.2 → 3.5.0

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/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 };

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

@@ -0,0 +1,48 @@
+import React__default from 'react';
+import { ListItem, StyledTextItemSelect } from '../styled.js';
+import { View } from 'react-native';
+import { Checkbox, RadioButton } from '@tecsinapse/react-core';
+
+const Component = ({
+  handlePressItem,
+  labelExtractor,
+  item,
+  type
+}) => {
+  const label = labelExtractor(item);
+  return /* @__PURE__ */ React__default.createElement(ListItem, { onPress: () => handlePressItem(item) }, /* @__PURE__ */ React__default.createElement(View, { pointerEvents: "none" }, type === "multi" ? /* @__PURE__ */ React__default.createElement(
+    Checkbox,
+    {
+      color: "primary",
+      labelPosition: "right",
+      checked: item._checked
+    },
+    /* @__PURE__ */ React__default.createElement(
+      StyledTextItemSelect,
+      {
+        fontWeight: item._checked ? "bold" : "regular",
+        ellipsizeMode: "tail",
+        numberOfLines: 1
+      },
+      label
+    )
+  ) : /* @__PURE__ */ React__default.createElement(
+    RadioButton,
+    {
+      color: "primary",
+      labelPosition: "right",
+      checked: item._checked
+    },
+    /* @__PURE__ */ React__default.createElement(
+      StyledTextItemSelect,
+      {
+        fontWeight: item._checked ? "bold" : "regular",
+        ellipsizeMode: "tail",
+        numberOfLines: 1
+      },
+      label
+    )
+  )));
+};
+
+export { Component as default };

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

@@ -0,0 +1,27 @@
+import React__default, { useMemo } from 'react';
+import { Divider, SectionHeader } from '../styled.js';
+import { SectionList } from 'react-native';
+import Text from '../../../atoms/Text/Text.js';
+
+const SectionHead = ({ section: { title } }) => /* @__PURE__ */ React__default.createElement(SectionHeader, null, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold" }, title));
+const Section = ({ options, renderItem, getData, keyExtractor }) => {
+  const sectionList = useMemo(
+    () => options instanceof Map ? [...options].map(([key, value]) => ({
+      title: key,
+      data: getData(value)
+    })) : [],
+    [options, getData]
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    SectionList,
+    {
+      sections: sectionList,
+      renderItem,
+      ItemSeparatorComponent: Divider,
+      renderSectionHeader: SectionHead,
+      keyExtractor
+    }
+  );
+};
+
+export { Section as default };

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

@@ -0,0 +1,35 @@
+const findValue = (array, value, keyExtractor, idx) => array.find((it) => keyExtractor(value, idx) === keyExtractor(it, idx));
+const isOptionChecked = (type, option, src, keyExtractor, idx) => type === "multi" ? !!findValue(src, option, keyExtractor, idx) : keyExtractor(src[0] ?? {}, idx) == keyExtractor(option, idx);
+const multiBuilder = (option, src, keyExtractor) => {
+  const array = [];
+  let found = false;
+  for (const value of src) {
+    if (keyExtractor(value) != keyExtractor(option)) array.push(value);
+    else found = true;
+  }
+  if (!found) array.push(option);
+  return array;
+};
+const singleBuilder = (option, src, keyExtractor) => keyExtractor(src[0] ?? {}) === keyExtractor(option) ? [] : [option];
+const mapToArray = (map) => [...map.values()].flatMap((v) => v);
+const getMultiLabel = (value, placeholder, options, keyExtractor, labelExtractor) => {
+  if (value.length === 0) return placeholder;
+  else {
+    const optionsArray = options instanceof Map ? mapToArray(options) : options;
+    const available = optionsArray.length > 0 ? optionsArray : value;
+    return available?.reduce(
+      (acc, option, index) => findValue(value, option, keyExtractor, index) ? acc + labelExtractor(option) + ", " : acc,
+      ""
+    ).slice(0, -2);
+  }
+};
+const getSingleLabel = (value, placeholder, options, keyExtractor, labelExtractor) => {
+  if (!value) return placeholder;
+  const optionsArray = options instanceof Map ? mapToArray(options) : options;
+  const selectedOption = optionsArray?.find(
+    (option, index) => keyExtractor(option, index) == keyExtractor(value, index)
+  );
+  return labelExtractor(selectedOption ?? value);
+};
+
+export { findValue, getMultiLabel, getSingleLabel, isOptionChecked, mapToArray, multiBuilder, singleBuilder };