@tecsinapse/react-native-kit 3.4.1 → 3.5.0

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 TecSinapse
+Copyright (c) 2024 TecSinapse
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -4,8 +4,7 @@
 
 [![Stars](https://img.shields.io/github/stars/tecsinapse/design-system?style=social)](https://github.com/tecsinapse/design-system/) [![License](https://img.shields.io/github/license/tecsinapse/design-system)](./LICENSE.md) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)![build workflow](https://github.com/tecsinapse/design-system/actions/workflows/ci.yml/badge.svg)
 
-
-[TecSinapse Design System](https://tecsinapse.github.io/design-system) is the hybrid implementation of the [TecSinapse](https://www.tecsinapse.com.br/) Design System. 
+[TecSinapse Design System](https://tecsinapse.github.io/design-system) is the hybrid implementation of the [TecSinapse](https://www.tecsinapse.com.br/) Design System.
 Our primary goal is to create a system that can be used to build a wide variety of TecSinapase websites and apps, while providing a consistent and inclusive user experience to our end users.
 In addition, the design system and component library should be easy to use for developers and designers.
 
@@ -24,11 +23,12 @@ Here are a few helpful links for getting started:
 ## Packages
 
 | Package                                                         | Content                                              | Version                                                                                                                                    |
-|-----------------------------------------------------------------|------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
+| --------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
 | **[@tecsinapse/react-core](./packages/react-core)**             | the core hybrid React component library              | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-core)             |
 | **[@tecsinapse/react-web-kit](./packages/react-web-kit)**       | the React component library focused on web           | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit)       |
 | **[@tecsinapse/react-native-kit](./packages/react-native-kit)** | the React native component library focused on mobile | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit) |
 | **[@tecsinapse/react-charts](./packages/react-charts)**         | Charts for React based on SVG                        | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-charts.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-charts)         |
+| **[@tecsinapse/cortex-core](./packages/cortex-core)**           | The core library for tailwindcss based design        | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Fcortex-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Fcortex-core)           |
 
 ## Code of conduct
 
@@ -41,27 +41,29 @@ If you feel another member of the community violated our code or you are experie
 At times, it may be necessary to test changes directly in a product, and not in the design system, and for this to work in a less laborious way, we can follow the steps below:
 
 3 terminal tabs should open:
+
 - In one run the JS code watch:
+
 ```
 yarn build:watch
 ```
+
 - In another run the watch of the TS code watch
+
 ```
 yarn build:declarations:watch
 ```
+
 - On another run yalc push (this script updates linked local projects)
+
 ```
 yarn yalc:push
 ```
 
 With that, all changes will be in yalc locally.
 
-To access in your application, see this [example](https://github.com/tecsinapse/vendas-web-poc-playground#tools) in topic "**Yalc link Design System:**"
-
-
 ### Maintainers
 
-- [Beatriz Silva](mailto:beatriz.silva@tecsinapse.com.br)
 - [Denner Vidal](mailto:denner.vidal@tecsinapse.com.br)
 - [Gabriel Sanches](mailto:gabriel.sanches@tecsinapse.com.br)
 - [Lucas Ramos](mailto:lucas.ramos@tecsinapse.com.br)

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

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

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

@@ -121,6 +121,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/cjs/components/atoms/Modal/ui/BaseModalView.js

@@ -29,8 +29,7 @@ const ModalView = ({
   const opacityCarrier = React.useRef(new reactNative.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(reactNative.Dimensions.get("window").height);
     const sHeight = Math.ceil(reactNative.Dimensions.get("screen").height);
     if (wHeight !== sHeight) {
@@ -101,14 +100,12 @@ const ModalView = ({
     [show, ready, visible, setReady]
   );
   React.useEffect(() => {
-    if (visible && ready)
-      requestAnimationFrame(() => show());
+    if (visible && ready) requestAnimationFrame(() => show());
     if (!visible && !ready) {
       reactNative.Keyboard.dismiss();
       requestAnimationFrame(() => hide(boxHeight));
     }
-    if (!visible && ready)
-      setReady(false);
+    if (!visible && ready) setReady(false);
   }, [ready, visible]);
   React.useEffect(() => {
     const showEvent = reactNative.Keyboard.addListener(

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

@@ -2,158 +2,48 @@
 
 var reactCore = require('@tecsinapse/react-core');
 var React = require('react');
-require('react-native');
-require('react-native-safe-area-context');
-require('../../atoms/Modal/ui/styled.js');
-var useLazyModalManager = require('../../atoms/Modal/useLazyModalManager.js');
 var Text = require('../../atoms/Text/Text.js');
-var Modal = require('./Modal.js');
+var Modal = require('./components/Modal.js');
 var styled = require('./styled.js');
+var useSelect = require('./hooks/useSelect.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-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 } = 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__namespace.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__namespace.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__namespace.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__namespace.createElement(
+    /* @__PURE__ */ React.createElement(
       Modal.Modal,
       {
         options: selectOptions || [],
@@ -181,14 +71,10 @@ function Select({
       }
     )
   );
-  const handlePressInput = async () => {
-    modal.show();
-    handleFocus();
-    await handleLazyFocus();
-  };
-  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue() || "") : /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue() || "") : /* @__PURE__ */ React.createElement(
     reactCore.HintInputContainer,
     {
+      ...rest,
       viewStyle: style,
       onPress: handlePressInput,
       focused,
@@ -198,10 +84,9 @@ function Select({
       hint,
       hintComponent,
       label: _label,
-      rightComponent: /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(styled.SelectIcon, { name: "chevron-down", type: "ionicon", size: "centi" }), rightComponent),
-      ...rest
+      rightComponent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(styled.SelectIcon, { name: "chevron-down", type: "ionicon", size: "centi" }), rightComponent)
     },
-    /* @__PURE__ */ React__namespace.createElement(
+    /* @__PURE__ */ React.createElement(
       styled.StyledSelectionText,
       {
         numberOfLines,

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var styled = require('../styled.js');
+var reactNative = require('react-native');
+
+const Flat = ({ options, keyExtractor, renderItem, getData }) => {
+  const data = React.useMemo(
+    () => typeof options !== "function" ? getData(options) : [],
+    [options, getData]
+  );
+  return /* @__PURE__ */ React.createElement(
+    reactNative.FlatList,
+    {
+      data,
+      keyExtractor,
+      fadingEdgeLength: 200,
+      ItemSeparatorComponent: styled.Divider,
+      renderItem
+    }
+  );
+};
+
+module.exports = Flat;

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

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

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

@@ -0,0 +1,50 @@
+'use strict';
+
+var React = require('react');
+var styled = require('../styled.js');
+var reactNative = require('react-native');
+var reactCore = require('@tecsinapse/react-core');
+
+const Component = ({
+  handlePressItem,
+  labelExtractor,
+  item,
+  type
+}) => {
+  const label = labelExtractor(item);
+  return /* @__PURE__ */ React.createElement(styled.ListItem, { onPress: () => handlePressItem(item) }, /* @__PURE__ */ React.createElement(reactNative.View, { pointerEvents: "none" }, type === "multi" ? /* @__PURE__ */ React.createElement(
+    reactCore.Checkbox,
+    {
+      color: "primary",
+      labelPosition: "right",
+      checked: item._checked
+    },
+    /* @__PURE__ */ React.createElement(
+      styled.StyledTextItemSelect,
+      {
+        fontWeight: item._checked ? "bold" : "regular",
+        ellipsizeMode: "tail",
+        numberOfLines: 1
+      },
+      label
+    )
+  ) : /* @__PURE__ */ React.createElement(
+    reactCore.RadioButton,
+    {
+      color: "primary",
+      labelPosition: "right",
+      checked: item._checked
+    },
+    /* @__PURE__ */ React.createElement(
+      styled.StyledTextItemSelect,
+      {
+        fontWeight: item._checked ? "bold" : "regular",
+        ellipsizeMode: "tail",
+        numberOfLines: 1
+      },
+      label
+    )
+  )));
+};
+
+module.exports = Component;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var styled = require('../styled.js');
+var reactNative = require('react-native');
+var Text = require('../../../atoms/Text/Text.js');
+
+const SectionHead = ({ section: { title } }) => /* @__PURE__ */ React.createElement(styled.SectionHeader, null, /* @__PURE__ */ React.createElement(Text, { fontWeight: "bold" }, title));
+const Section = ({ options, renderItem, getData, keyExtractor }) => {
+  const sectionList = React.useMemo(
+    () => options instanceof Map ? [...options].map(([key, value]) => ({
+      title: key,
+      data: getData(value)
+    })) : [],
+    [options, getData]
+  );
+  return /* @__PURE__ */ React.createElement(
+    reactNative.SectionList,
+    {
+      sections: sectionList,
+      renderItem,
+      ItemSeparatorComponent: styled.Divider,
+      renderSectionHeader: SectionHead,
+      keyExtractor
+    }
+  );
+};
+
+module.exports = Section;

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

@@ -0,0 +1,43 @@
+'use strict';
+
+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);
+};
+
+exports.findValue = findValue;
+exports.getMultiLabel = getMultiLabel;
+exports.getSingleLabel = getSingleLabel;
+exports.isOptionChecked = isOptionChecked;
+exports.mapToArray = mapToArray;
+exports.multiBuilder = multiBuilder;
+exports.singleBuilder = singleBuilder;