@tecsinapse/react-native-kit 3.4.1 → 3.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
-  "description": "TecSinapse React Native components",
-  "version": "3.4.1",
+  "description": "React Native components library",
+  "version": "3.5.0",
   "license": "MIT",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -20,9 +20,12 @@
   "dependencies": {
     "@emotion/native": "~11.11.0",
     "@emotion/react": "~11.11.0",
-    "@tecsinapse/react-core": "3.4.0",
+    "@tecsinapse/react-core": "3.4.1",
     "react-native-linear-gradient": "~2.8.3"
   },
+  "devDependencies": {
+    "react-native-safe-area-context": "^4"
+  },
   "repository": {
     "type": "git",
     "directory": "packages/react-native-kit",
@@ -33,11 +36,11 @@
   },
   "homepage": "https://tecsinapse.github.io/design-system/",
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-native": "^0.71.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.71.0",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-safe-area-context": "^4.0.0",
     "react-native-vector-icons": "^9.2.0"
   },
-  "gitHead": "c34d507099dda166804b5a2562337583dc58caaa"
+  "gitHead": "555f96fdf1bfb87f0b339668a1ccfa6e4dc6611e"
 }

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

@@ -1,224 +0,0 @@
-'use strict';
-
-var reactCore = require('@tecsinapse/react-core');
-var React = require('react');
-var reactNative = require('react-native');
-var Button = require('../../atoms/Button/Button.js');
-var Text = require('../../atoms/Text/Text.js');
-var Header = require('../../atoms/Header/Header.js');
-var Input = require('../../atoms/Input/Input.js');
-var BaseModalView = require('../../atoms/Modal/ui/BaseModalView.js');
-var styled = require('./styled.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);
-
-const Component = ({
-  options,
-  keyExtractor,
-  labelExtractor,
-  hideSearchBar,
-  searchBarPlaceholder,
-  focused,
-  type,
-  value,
-  onSelect,
-  onSearch,
-  selectModalTitle,
-  selectModalTitleComponent,
-  confirmButtonText,
-  loading,
-  close,
-  closeOnPick,
-  ...others
-}) => {
-  const [selectedValues, setSelectedValues] = React__namespace.useState([]);
-  const [searchArg, setSearchArg] = reactCore.useDebouncedState("", onSearch);
-  const ModalComponent = React__namespace.useMemo(
-    () => styled.getStyledModal(reactCore.getStatusBarHeight(true)),
-    []
-  );
-  const _closeOnPick = closeOnPick && type === "single";
-  React__namespace.useEffect(() => {
-    setSelectedValues(
-      value ? type === "multi" ? value : [value] : []
-    );
-  }, [value, focused, setSelectedValues]);
-  const getData = React__namespace.useCallback(
-    (options2) => {
-      return options2?.map((option, index) => ({
-        ...option,
-        _checked: type === "multi" ? !!selectedValues.find(
-          (value2) => keyExtractor(option, index) == keyExtractor(value2, index)
-        ) : keyExtractor(selectedValues[0] || {}, index) == keyExtractor(option, index)
-      }));
-    },
-    [keyExtractor, selectedValues, type]
-  );
-  const data = React__namespace.useMemo(
-    () => typeof options !== "function" ? getData(options) : [],
-    [options, getData]
-  );
-  const handlePressItem = React__namespace.useCallback(
-    (option) => {
-      setSelectedValues((selectedValues2) => {
-        if (type === "multi") {
-          const newArr = [];
-          let found = false;
-          for (const value2 of selectedValues2) {
-            if (keyExtractor(value2) != keyExtractor(option))
-              newArr.push(value2);
-            else
-              found = true;
-          }
-          if (!found)
-            newArr.push(option);
-          return newArr;
-        }
-        return keyExtractor(selectedValues2[0] || {}) === keyExtractor(option) ? [] : [option];
-      });
-    },
-    [selectedValues, setSelectedValues, keyExtractor, type]
-  );
-  React__namespace.useEffect(() => {
-    if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {
-      handleConfirm();
-    }
-  }, [selectedValues[0], value, closeOnPick]);
-  const handleConfirm = React__namespace.useCallback(() => {
-    onSelect(
-      type === "single" ? selectedValues[0] : selectedValues
-    );
-    close?.();
-  }, [selectedValues]);
-  const optionBuilder = React__namespace.useCallback(
-    ({ item }) => /* @__PURE__ */ React__namespace.createElement(
-      MemoizedOption,
-      {
-        item,
-        type,
-        handlePressItem,
-        labelExtractor
-      }
-    ),
-    []
-  );
-  const anyChecked = data.filter((item) => item._checked).length;
-  const dataLengthChanged = data.length;
-  const memoizedFlatlist = React__namespace.useMemo(
-    () => /* @__PURE__ */ React__namespace.createElement(
-      reactNative.FlatList,
-      {
-        data,
-        keyExtractor,
-        fadingEdgeLength: 200,
-        renderItem: optionBuilder
-      }
-    ),
-    [selectedValues, anyChecked, dataLengthChanged]
-  );
-  const titleTextModal = selectModalTitle ? /* @__PURE__ */ React__namespace.createElement(
-    styled.TextTitleModal,
-    {
-      typography: "h4",
-      fontWeight: "bold",
-      numberOfLines: 3,
-      style: { maxWidth: reactCore.RFValue(250) }
-    },
-    selectModalTitle
-  ) : null;
-  const headerContent = selectModalTitleComponent ? selectModalTitleComponent : titleTextModal;
-  return /* @__PURE__ */ React__namespace.createElement(BaseModalView.ModalView, { ...others, BoxComponent: ModalComponent, showCloseBar: false }, /* @__PURE__ */ React__namespace.createElement(
-    Header,
-    {
-      rightButton: {
-        onPress: close,
-        icon: {
-          name: "close",
-          type: "material-community",
-          fontColor: "light"
-        }
-      }
-    },
-    headerContent
-  ), !hideSearchBar && /* @__PURE__ */ React__namespace.createElement(styled.SearchBarContainer, null, /* @__PURE__ */ React__namespace.createElement(
-    Input,
-    {
-      placeholder: searchBarPlaceholder,
-      value: searchArg,
-      onChange: setSearchArg,
-      leftComponent: /* @__PURE__ */ React__namespace.createElement(styled.SelectIcon, { name: "search", type: "ionicon", size: "centi" })
-    }
-  )), loading && /* @__PURE__ */ React__namespace.createElement(styled.FetchIndicator, { animating: true, color: "grey", size: "large" }), memoizedFlatlist, !_closeOnPick && /* @__PURE__ */ React__namespace.createElement(styled.ModalFooter, null, /* @__PURE__ */ React__namespace.createElement(
-    Button.Button,
-    {
-      variant: "filled",
-      color: "primary",
-      onPress: handleConfirm,
-      disabled: loading
-    },
-    /* @__PURE__ */ React__namespace.createElement(Text, { fontColor: "light", fontWeight: "bold" }, confirmButtonText)
-  )));
-};
-const MemoizedOption = ({
-  handlePressItem,
-  labelExtractor,
-  item,
-  type
-}) => {
-  return React__namespace.useMemo(() => {
-    const label = labelExtractor(item);
-    return /* @__PURE__ */ React__namespace.createElement(styled.ListItem, { onPress: () => handlePressItem(item) }, /* @__PURE__ */ React__namespace.createElement(reactNative.View, { pointerEvents: "none" }, type === "multi" ? /* @__PURE__ */ React__namespace.createElement(
-      reactCore.Checkbox,
-      {
-        color: "primary",
-        labelPosition: "right",
-        checked: item._checked
-      },
-      /* @__PURE__ */ React__namespace.createElement(
-        styled.StyledTextItemSelect,
-        {
-          fontWeight: item._checked ? "bold" : "regular",
-          ellipsizeMode: "tail",
-          numberOfLines: 1
-        },
-        label
-      )
-    ) : /* @__PURE__ */ React__namespace.createElement(
-      reactCore.RadioButton,
-      {
-        color: "primary",
-        labelPosition: "right",
-        checked: item._checked
-      },
-      /* @__PURE__ */ React__namespace.createElement(
-        styled.StyledTextItemSelect,
-        {
-          fontWeight: item._checked ? "bold" : "regular",
-          ellipsizeMode: "tail",
-          numberOfLines: 1
-        },
-        label
-      )
-    )));
-  }, [item._checked]);
-};
-const Modal = Component;
-
-exports.Modal = Modal;

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

@@ -1,203 +0,0 @@
-import { useDebouncedState, getStatusBarHeight, RFValue, Checkbox, RadioButton } from '@tecsinapse/react-core';
-import * as React from 'react';
-import { FlatList, View } from 'react-native';
-import { Button } from '../../atoms/Button/Button.js';
-import Text from '../../atoms/Text/Text.js';
-import Header from '../../atoms/Header/Header.js';
-import Input from '../../atoms/Input/Input.js';
-import { ModalView } from '../../atoms/Modal/ui/BaseModalView.js';
-import { getStyledModal, TextTitleModal, SearchBarContainer, SelectIcon, FetchIndicator, ModalFooter, ListItem, StyledTextItemSelect } from './styled.js';
-
-const Component = ({
-  options,
-  keyExtractor,
-  labelExtractor,
-  hideSearchBar,
-  searchBarPlaceholder,
-  focused,
-  type,
-  value,
-  onSelect,
-  onSearch,
-  selectModalTitle,
-  selectModalTitleComponent,
-  confirmButtonText,
-  loading,
-  close,
-  closeOnPick,
-  ...others
-}) => {
-  const [selectedValues, setSelectedValues] = React.useState([]);
-  const [searchArg, setSearchArg] = useDebouncedState("", onSearch);
-  const ModalComponent = React.useMemo(
-    () => getStyledModal(getStatusBarHeight(true)),
-    []
-  );
-  const _closeOnPick = closeOnPick && type === "single";
-  React.useEffect(() => {
-    setSelectedValues(
-      value ? type === "multi" ? value : [value] : []
-    );
-  }, [value, focused, setSelectedValues]);
-  const getData = React.useCallback(
-    (options2) => {
-      return options2?.map((option, index) => ({
-        ...option,
-        _checked: type === "multi" ? !!selectedValues.find(
-          (value2) => keyExtractor(option, index) == keyExtractor(value2, index)
-        ) : keyExtractor(selectedValues[0] || {}, index) == keyExtractor(option, index)
-      }));
-    },
-    [keyExtractor, selectedValues, type]
-  );
-  const data = React.useMemo(
-    () => typeof options !== "function" ? getData(options) : [],
-    [options, getData]
-  );
-  const handlePressItem = React.useCallback(
-    (option) => {
-      setSelectedValues((selectedValues2) => {
-        if (type === "multi") {
-          const newArr = [];
-          let found = false;
-          for (const value2 of selectedValues2) {
-            if (keyExtractor(value2) != keyExtractor(option))
-              newArr.push(value2);
-            else
-              found = true;
-          }
-          if (!found)
-            newArr.push(option);
-          return newArr;
-        }
-        return keyExtractor(selectedValues2[0] || {}) === keyExtractor(option) ? [] : [option];
-      });
-    },
-    [selectedValues, setSelectedValues, 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 optionBuilder = React.useCallback(
-    ({ item }) => /* @__PURE__ */ React.createElement(
-      MemoizedOption,
-      {
-        item,
-        type,
-        handlePressItem,
-        labelExtractor
-      }
-    ),
-    []
-  );
-  const anyChecked = data.filter((item) => item._checked).length;
-  const dataLengthChanged = data.length;
-  const memoizedFlatlist = React.useMemo(
-    () => /* @__PURE__ */ React.createElement(
-      FlatList,
-      {
-        data,
-        keyExtractor,
-        fadingEdgeLength: 200,
-        renderItem: optionBuilder
-      }
-    ),
-    [selectedValues, anyChecked, dataLengthChanged]
-  );
-  const titleTextModal = selectModalTitle ? /* @__PURE__ */ React.createElement(
-    TextTitleModal,
-    {
-      typography: "h4",
-      fontWeight: "bold",
-      numberOfLines: 3,
-      style: { maxWidth: RFValue(250) }
-    },
-    selectModalTitle
-  ) : null;
-  const headerContent = selectModalTitleComponent ? selectModalTitleComponent : titleTextModal;
-  return /* @__PURE__ */ React.createElement(ModalView, { ...others, BoxComponent: ModalComponent, showCloseBar: false }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      rightButton: {
-        onPress: close,
-        icon: {
-          name: "close",
-          type: "material-community",
-          fontColor: "light"
-        }
-      }
-    },
-    headerContent
-  ), !hideSearchBar && /* @__PURE__ */ React.createElement(SearchBarContainer, null, /* @__PURE__ */ React.createElement(
-    Input,
-    {
-      placeholder: searchBarPlaceholder,
-      value: searchArg,
-      onChange: setSearchArg,
-      leftComponent: /* @__PURE__ */ React.createElement(SelectIcon, { name: "search", type: "ionicon", size: "centi" })
-    }
-  )), loading && /* @__PURE__ */ React.createElement(FetchIndicator, { animating: true, color: "grey", size: "large" }), memoizedFlatlist, !_closeOnPick && /* @__PURE__ */ React.createElement(ModalFooter, null, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "filled",
-      color: "primary",
-      onPress: handleConfirm,
-      disabled: loading
-    },
-    /* @__PURE__ */ React.createElement(Text, { fontColor: "light", fontWeight: "bold" }, confirmButtonText)
-  )));
-};
-const MemoizedOption = ({
-  handlePressItem,
-  labelExtractor,
-  item,
-  type
-}) => {
-  return React.useMemo(() => {
-    const label = labelExtractor(item);
-    return /* @__PURE__ */ React.createElement(ListItem, { onPress: () => handlePressItem(item) }, /* @__PURE__ */ React.createElement(View, { pointerEvents: "none" }, type === "multi" ? /* @__PURE__ */ React.createElement(
-      Checkbox,
-      {
-        color: "primary",
-        labelPosition: "right",
-        checked: item._checked
-      },
-      /* @__PURE__ */ React.createElement(
-        StyledTextItemSelect,
-        {
-          fontWeight: item._checked ? "bold" : "regular",
-          ellipsizeMode: "tail",
-          numberOfLines: 1
-        },
-        label
-      )
-    ) : /* @__PURE__ */ React.createElement(
-      RadioButton,
-      {
-        color: "primary",
-        labelPosition: "right",
-        checked: item._checked
-      },
-      /* @__PURE__ */ React.createElement(
-        StyledTextItemSelect,
-        {
-          fontWeight: item._checked ? "bold" : "regular",
-          ellipsizeMode: "tail",
-          numberOfLines: 1
-        },
-        label
-      )
-    )));
-  }, [item._checked]);
-};
-const Modal = Component;
-
-export { Modal };

package/dist/types/components/molecules/Select/Modal.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { IBaseModal } from '../../atoms/Modal';
-import { SelectNativeProps } from './Select';
-interface LoadingProps {
-    loading?: boolean;
-}
-export declare const Modal: <Data, Type extends "single" | "multi">({ options, keyExtractor, labelExtractor, hideSearchBar, searchBarPlaceholder, focused, type, value, onSelect, onSearch, selectModalTitle, selectModalTitleComponent, confirmButtonText, loading, close, closeOnPick, ...others }: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal) => JSX.Element;
-export {};