@tecsinapse/react-native-kit 1.12.4 → 1.12.8

package/dist/components/atoms/Modal/useModalManager.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModalManager = void 0;
+
+var _react = require("react");
+
+var _uuid = require("uuid");
+
+var _ModalGroupManager = require("./ModalGroupManager");
+
+const useModalManager = modal => {
+  const [id] = (0, _react.useState)((0, _uuid.v4)());
+
+  _ModalGroupManager.modalLifecycle.sync(id, modal);
+
+  const show = (0, _react.useCallback)(() => {
+    _ModalGroupManager.modalLifecycle.show(id);
+  }, [id]);
+  const close = (0, _react.useCallback)(() => {
+    _ModalGroupManager.modalLifecycle.close(id);
+  }, [id]);
+  (0, _react.useEffect)(() => {
+    return () => _ModalGroupManager.modalLifecycle.destroy(id);
+  }, []);
+  return {
+    show,
+    close
+  };
+};
+
+exports.useModalManager = useModalManager;
+//# sourceMappingURL=useModalManager.js.map

package/dist/components/atoms/Modal/useModalManager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Modal/useModalManager.ts"],"names":["useModalManager","modal","id","modalLifecycle","sync","show","close","destroy"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAWO,MAAMA,eAAe,GAAIC,KAAD,IAA2C;AAEtE,QAAM,CAACC,EAAD,IAAO,qBAAS,eAAT,CAAb;;AACAC,oCAAeC,IAAf,CAAoBF,EAApB,EAAwBD,KAAxB;;AAEA,QAAMI,IAAI,GAAG,wBAAY,MAAM;AAC3BF,sCAAeE,IAAf,CAAoBH,EAApB;AACH,GAFY,EAEV,CAACA,EAAD,CAFU,CAAb;AAIA,QAAMI,KAAK,GAAG,wBAAY,MAAM;AAC5BH,sCAAeG,KAAf,CAAqBJ,EAArB;AACH,GAFa,EAEX,CAACA,EAAD,CAFW,CAAd;AAIA,wBAAU,MAAM;AACZ,WAAO,MAAMC,kCAAeI,OAAf,CAAuBL,EAAvB,CAAb;AACH,GAFD,EAEG,EAFH;AAIA,SAAO;AACHG,IAAAA,IADG;AAEHC,IAAAA;AAFG,GAAP;AAIH,CArBM","sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from \"react\"\nimport { v4 as uuidv4 } from 'uuid'\nimport { modalLifecycle } from \"./ModalGroupManager\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component. \n * \n * @param id \n * @param modal \n * @returns\n */\nexport const useModalManager = (modal: () => ReactElement<IBaseModal>) => {\n\n    const [id] = useState(uuidv4())\n    modalLifecycle.sync(id, modal)\n\n    const show = useCallback(() => {\n        modalLifecycle.show(id)\n    }, [id])\n\n    const close = useCallback(() => {\n        modalLifecycle.close(id)\n    }, [id])\n    \n    useEffect(() => {\n        return () => modalLifecycle.destroy(id)\n    }, [])\n\n    return {\n        show,\n        close\n    }\n}"],"file":"useModalManager.js"}

package/dist/components/atoms/Select/styled.js

@@ -56,7 +56,7 @@ const Header = (0, _native.default)(_reactNative.View)`
   padding: ${({
   theme
 }) => theme.spacing.deca};
-  height: 75px;
+  height: ${(0, _reactCore.RFValueStr)('75px')};
 `;
 exports.Header = Header;
 const CloseButton = (0, _native.default)(_reactCore.Button)`
@@ -78,7 +78,7 @@ const SearchBar = (0, _native.default)(_Input.Input)`
 `;
 exports.SearchBar = SearchBar;
 const ListItem = (0, _native.default)(_reactCore.PressableSurface)`
-  border-bottom-width: 1px;
+  border-bottom-width: ${(0, _reactCore.RFValueStr)('1px')};
   border-color: ${({
   theme
 }) => theme.color.secondary.light};

package/dist/components/atoms/Select/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Select/styled.ts"],"names":["StyledModal","View","theme","miscellaneous","bodyColor","StyledSelectionText","Text","props","typography","h5","lineHeight","Dummy","StyledPressableSurface","PressableSurface","Header","spacing","deca","CloseButton","Button","SearchBarContainer","SearchBar","Input","ListItem","color","secondary","light","mili","ModalFooter","SelectIcon","Icon","centi","medium","FetchIndicator","ActivityIndicator"],"mappings":";;;;;;;AAAA;;AACA;;AAUA;;AACA;;AACA;;;;;;AAEO,MAAMA,WAAW,GAAG,qBAAOC,iBAAP,CAA+C;AAC1E;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACnE;AACA;AACA,CALO;;AAOA,MAAMC,mBAAmB,GAAG,qBAAOC,UAAP,EAChCC,KAAD;AAAA;;AAAA,SAA+D,gBAAI;AACrE,mBADoE,gBACjDA,KAAK,CAACL,KAD2C,iDACjD,aAAaM,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AACzD,MAAM,oCAAoBH,KAApB,CAA2B;AACjC,GAHE;AAAA,CADiC,CAA5B;;AAOA,MAAMI,KAAK,GAAG,qBAAOV,iBAAP,CAAa;AAClC;AACA;AACA,CAHO;;AAKA,MAAMW,sBAAsB,GAAG,qBACpCC,2BADoC,CAEb;AACzB;AACA,CAJO;;AAMA,MAAMC,MAAM,GAAG,qBAAOb,iBAAP,CAA8C;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C;AACA,CATO;;AAWA,MAAMC,WAAW,GAAG,qBAAOC,iBAAP,CAAkD;AAC7E;AACA;AACA,CAHO;;AAKA,MAAMC,kBAAkB,GAAG,qBAAOlB,iBAAP,CAA8C;AAChF,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C;AACA,CAHO;;AAKA,MAAMI,SAAS,GAAG,qBAAOC,YAAP,CAAsD;AAC/E,mBAAmB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AACrD,CAFO;;AAIA,MAAMM,QAAQ,GAAG,qBAAOT,2BAAP,CAEtB;AACF;AACA,kBAAkB,CAAC;AAAEX,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AAC7D,sBAAsB,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcW,IAAK;AACxD,wBAAwB,CAAC;AAAExB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC1D,CAPO;;AASA,MAAMW,WAAW,GAAG,qBAAO1B,iBAAP,CAAkC;AAC7D;AACA;AACA;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACnE,aAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,CANO;;AAQA,MAAMY,UAAU,GAAG,qBAAOC,eAAP,CAAkC;AAC5D,aAAa,CAAC;AAAE3B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAce,KAAM;AAChD,WAAW,CAAC;AAAE5B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBO,MAAO;AACvD,CAHO;;AAKA,MAAMC,cAAc,GAAG,qBAAOC,8BAAP,CAA0B;AACxD;AACA,CAFO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  Button,\n  ButtonProps,\n  disabledInputStyles,\n  Icon,\n  InputContainerProps,\n  PressableSurface,\n  PressableSurfaceProps,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';\nimport { Input, InputNativeProps } from '../Input';\nimport { Text } from '../Text';\n\nexport const StyledModal = styled(View)<ModalProps & Partial<StyleProps>>`\n  position: relative;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  height: 100%;\n  width: 100%;\n`;\n\nexport const StyledSelectionText = styled(Text)(\n  (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n    line-height: ${props.theme?.typography.h5.lineHeight};\n    ${disabledInputStyles(props)};\n  `\n);\n\nexport const Dummy = styled(View)`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const StyledPressableSurface = styled(\n  PressableSurface\n)<PressableSurfaceProps>`\n  width: 100%;\n`;\n\nexport const Header = styled(View)<ViewProps & Partial<StyleProps>>`\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: ${({ theme }) => theme.spacing.deca};\n  height: 75px;\n`;\n\nexport const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  position: relative;\n`;\n\nexport const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`\n  margin-bottom: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ListItem = styled(PressableSurface)<\n  PressableSurfaceProps & Partial<StyleProps>\n>`\n  border-bottom-width: 1px;\n  border-color: ${({ theme }) => theme.color.secondary.light};\n  padding-vertical: ${({ theme }) => theme.spacing.mili};\n  padding-horizontal: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ModalFooter = styled(View)<Partial<StyleProps>>`\n  width: 100%;\n  height: auto;\n  bottom: 0;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  padding: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const SelectIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n\nexport const FetchIndicator = styled(ActivityIndicator)`\n  align-self: center;\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Select/styled.ts"],"names":["StyledModal","View","theme","miscellaneous","bodyColor","StyledSelectionText","Text","props","typography","h5","lineHeight","Dummy","StyledPressableSurface","PressableSurface","Header","spacing","deca","CloseButton","Button","SearchBarContainer","SearchBar","Input","ListItem","color","secondary","light","mili","ModalFooter","SelectIcon","Icon","centi","medium","FetchIndicator","ActivityIndicator"],"mappings":";;;;;;;AAAA;;AACA;;AAWA;;AACA;;AACA;;;;;;AAEO,MAAMA,WAAW,GAAG,qBAAOC,iBAAP,CAA+C;AAC1E;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACnE;AACA;AACA,CALO;;AAOA,MAAMC,mBAAmB,GAAG,qBAAOC,UAAP,EAChCC,KAAD;AAAA;;AAAA,SAA+D,gBAAI;AACrE,mBADoE,gBACjDA,KAAK,CAACL,KAD2C,iDACjD,aAAaM,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AACzD,MAAM,oCAAoBH,KAApB,CAA2B;AACjC,GAHE;AAAA,CADiC,CAA5B;;AAOA,MAAMI,KAAK,GAAG,qBAAOV,iBAAP,CAAa;AAClC;AACA;AACA,CAHO;;AAKA,MAAMW,sBAAsB,GAAG,qBACpCC,2BADoC,CAEb;AACzB;AACA,CAJO;;AAMA,MAAMC,MAAM,GAAG,qBAAOb,iBAAP,CAA8C;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,YAAY,2BAAW,MAAX,CAAmB;AAC/B,CATO;;AAWA,MAAMC,WAAW,GAAG,qBAAOC,iBAAP,CAAkD;AAC7E;AACA;AACA,CAHO;;AAKA,MAAMC,kBAAkB,GAAG,qBAAOlB,iBAAP,CAA8C;AAChF,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C;AACA,CAHO;;AAKA,MAAMI,SAAS,GAAG,qBAAOC,YAAP,CAAsD;AAC/E,mBAAmB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AACrD,CAFO;;AAIA,MAAMM,QAAQ,GAAG,qBAAOT,2BAAP,CAEtB;AACF,yBAAyB,2BAAW,KAAX,CAAkB;AAC3C,kBAAkB,CAAC;AAAEX,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AAC7D,sBAAsB,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcW,IAAK;AACxD,wBAAwB,CAAC;AAAExB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC1D,CAPO;;AASA,MAAMW,WAAW,GAAG,qBAAO1B,iBAAP,CAAkC;AAC7D;AACA;AACA;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACnE,aAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,CANO;;AAQA,MAAMY,UAAU,GAAG,qBAAOC,eAAP,CAAkC;AAC5D,aAAa,CAAC;AAAE3B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAce,KAAM;AAChD,WAAW,CAAC;AAAE5B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBO,MAAO;AACvD,CAHO;;AAKA,MAAMC,cAAc,GAAG,qBAAOC,8BAAP,CAA0B;AACxD;AACA,CAFO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  Button,\n  ButtonProps,\n  disabledInputStyles,\n  Icon,\n  InputContainerProps,\n  PressableSurface,\n  PressableSurfaceProps,\n  RFValueStr,\n  StyleProps\n} from '@tecsinapse/react-core';\nimport { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';\nimport { Input, InputNativeProps } from '../Input';\nimport { Text } from '../Text';\n\nexport const StyledModal = styled(View)<ModalProps & Partial<StyleProps>>`\n  position: relative;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  height: 100%;\n  width: 100%;\n`;\n\nexport const StyledSelectionText = styled(Text)(\n  (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n    line-height: ${props.theme?.typography.h5.lineHeight};\n    ${disabledInputStyles(props)};\n  `\n);\n\nexport const Dummy = styled(View)`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const StyledPressableSurface = styled(\n  PressableSurface\n)<PressableSurfaceProps>`\n  width: 100%;\n`;\n\nexport const Header = styled(View)<ViewProps & Partial<StyleProps>>`\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: ${({ theme }) => theme.spacing.deca};\n  height: ${RFValueStr('75px')};\n`;\n\nexport const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  position: relative;\n`;\n\nexport const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`\n  margin-bottom: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ListItem = styled(PressableSurface)<\n  PressableSurfaceProps & Partial<StyleProps>\n>`\n  border-bottom-width: ${RFValueStr('1px')};\n  border-color: ${({ theme }) => theme.color.secondary.light};\n  padding-vertical: ${({ theme }) => theme.spacing.mili};\n  padding-horizontal: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ModalFooter = styled(View)<Partial<StyleProps>>`\n  width: 100%;\n  height: auto;\n  bottom: 0;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  padding: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const SelectIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n\nexport const FetchIndicator = styled(ActivityIndicator)`\n  align-self: center;\n`;\n"],"file":"styled.js"}

package/dist/index.d.ts

@@ -17,3 +17,4 @@ export { DateTimePicker } from './components/molecules/DateTimePicker';
 export { Avatar } from './components/atoms/Avatar';
 export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
+export { ModalGroupManager, ModalView, ModalLifecycleHandler, useModalManager, IBaseModal } from './components/atoms/Modal';

package/dist/index.js

@@ -36,7 +36,12 @@ var _exportNames = {
   DateTimePicker: true,
   Avatar: true,
   Calendar: true,
-  DateTimeSelector: true
+  DateTimeSelector: true,
+  ModalGroupManager: true,
+  ModalView: true,
+  ModalLifecycleHandler: true,
+  useModalManager: true,
+  IBaseModal: true
 };
 Object.defineProperty(exports, "Header", {
   enumerable: true,
@@ -236,6 +241,36 @@ Object.defineProperty(exports, "DateTimeSelector", {
     return _DateTimeSelector.DateTimeSelector;
   }
 });
+Object.defineProperty(exports, "ModalGroupManager", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalGroupManager;
+  }
+});
+Object.defineProperty(exports, "ModalView", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalView;
+  }
+});
+Object.defineProperty(exports, "ModalLifecycleHandler", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalLifecycleHandler;
+  }
+});
+Object.defineProperty(exports, "useModalManager", {
+  enumerable: true,
+  get: function () {
+    return _Modal.useModalManager;
+  }
+});
+Object.defineProperty(exports, "IBaseModal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.IBaseModal;
+  }
+});
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -286,4 +321,6 @@ var _Avatar = require("./components/atoms/Avatar");
 var _Calendar = require("./components/molecules/Calendar");
 
 var _DateTimeSelector = require("./components/molecules/DateTimeSelector");
+
+var _Modal = require("./components/atoms/Modal");
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/atoms/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport { Error, Loading, Success, Button, ButtonNativeProps } from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport { DatePicker } from './components/molecules/DatePicker';\nexport { DateTimePicker } from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/atoms/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport { Error, Loading, Success, Button, ButtonNativeProps } from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport { DatePicker } from './components/molecules/DatePicker';\nexport { DateTimePicker } from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport { ModalGroupManager, ModalView, ModalLifecycleHandler, useModalManager, IBaseModal } from './components/atoms/Modal';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.12.4",
+  "version": "1.12.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
-    "@tecsinapse/react-core": "^1.12.4"
+    "@tecsinapse/react-core": "^1.12.5"
   },
   "repository": {
     "type": "git",
@@ -27,7 +27,12 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-native": ">=0.64.0",
-    "react-native-vector-icons": ">=8.1.0"
+    "react-native-safe-area-context": "^3.1.9",
+    "react-native-vector-icons": ">=8.1.0",
+    "uuid": "^8.3.2"
   },
-  "gitHead": "c327984ecc6007df35e763f64b512dca84dba446"
+  "devDependencies": {
+    "@types/uuid": "^8.3.3"
+  },
+  "gitHead": "ce86b8c8b3e7c09e0fd86689418b540010f1419b"
 }

package/src/components/atoms/BottomNavigator/styled.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
+import { RFValueStr, StyleProps } from '@tecsinapse/react-core';
 import { PressableProps, ViewProps } from 'react-native';
 
 export const StyledView = styled.View<ViewProps & Partial<StyleProps>>`
@@ -16,7 +16,7 @@ export const TabContainer = styled.Pressable<
   flex: 1;
   margin-horizontal: ${({ theme }) => theme.spacing.mili};
   padding-top: ${({ theme }) => theme.spacing.deca};
-  border-top-width: ${({ selected }) => (selected ? '2px' : 0)};
+  border-top-width: ${({ selected }) => (selected ? RFValueStr('2px') : 0)};
   border-color: ${({ theme }) => theme.color.primary.medium};
   align-items: center;
   justify-content: flex-end;
@@ -26,7 +26,7 @@ export const TabContent = styled.View<ViewProps & Partial<StyleProps>>`
   aspect-ratio: 1;
   justify-content: center;
   align-items: center;
-  min-height: 48px;
+  min-height: ${RFValueStr('48px')};
   background-color: ${({ theme }) => theme.color.primary.xlight};
   border-radius: ${({ theme }) => theme.borderRadius['mili']};
 `;

package/src/components/atoms/Input/styled.ts

@@ -2,13 +2,14 @@ import styled from '@emotion/native';
 import {
   InputContainer,
   InputElement,
-  StyleProps,
+  RFValueStr,
+  StyleProps
 } from '@tecsinapse/react-core';
 import { Font, fontStyles } from '../Text/styled';
 import { InputNativeProps } from './Input';
 
 export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
-  min-height: 50px;
+  min-height: ${RFValueStr('50px')};
 `;
 
 const StyledNativeInputBase = styled(InputElement)<

package/src/components/atoms/Modal/ModalGroupManager.tsx

@@ -0,0 +1,28 @@
+import React, { FC, ReactElement, useState } from 'react';
+import { Modal as RNModal, ModalProps } from 'react-native';
+import { createModalLifecycleHandler } from './ModalLifecycleHandler';
+import { IBaseModal } from './ui/types';
+
+export const modalLifecycle = createModalLifecycleHandler()
+
+/**
+ * It's responsable for rendering all the modal components.
+ * 
+ * @param param0 
+ * @returns 
+ */
+export const ModalGroupManager: FC<ModalProps> = ({ children, ...others }) => {
+
+    modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]))
+    const _render = modalLifecycle.render()
+    const hasModals = _render.length > 0
+    
+    return (
+        <>
+            {children}
+            <RNModal transparent statusBarTranslucent animationType='none' visible={hasModals} {...others}>
+                {_render}
+            </RNModal>
+        </>
+    )
+}

package/src/components/atoms/Modal/ModalLifecycleHandler.ts

@@ -0,0 +1,141 @@
+import React, { Dispatch, ReactElement } from "react"
+import { IBaseModal } from "./ui/types"
+
+/**
+ * It Represents a node (usually a modal component) in the modal's lifecycle handler.
+ */
+interface ModalNode {
+    id: string
+    visible?: boolean
+    lastVisualization?: Date
+    modal: () => ReactElement<IBaseModal>
+}
+
+/**
+ * Manage all modal's lifecycle.
+ */
+export class ModalLifecycleHandler {
+    
+    nodeGroup: Map<string, ModalNode>
+    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | undefined
+
+    constructor() {
+        this.nodeGroup = new Map()
+        this.state = undefined
+    }
+
+    /**
+     * Holds the ModalGroupManager state.
+     * 
+     * @param state 
+     */
+    public attach = (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => {
+        this.state = state
+    }
+
+    /**
+     * Updates all the modal components.
+     */
+    public update = () => {
+        const nodes = Array.from(this.nodeGroup.values())
+            .filter(node => node.visible || !!node.lastVisualization)
+            .sort((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))
+            .map((node, index, filteredNodes) => {
+                let modalElement = node.modal()
+                let { props } = modalElement
+                return React.cloneElement(modalElement, {
+                    ...props,
+                    key: node.id,
+                    visible: node.visible,
+                    isLastShown: filteredNodes.length - 1 === index,
+                    close: () => this.close(node.id),
+                    onClose: () => {
+                        this.remove(node.id)
+                        props.onClose?.()
+                    }
+                })
+            })
+            
+        const [, updateState ] = this.state || []
+        updateState?.(nodes)
+    }
+
+    /**
+     * Renders all selected modals.
+     * 
+     * @returns 
+     */
+    public render = (): ReactElement<IBaseModal>[] => {
+        const [ modals ] = this.state || []
+        return modals || []
+    }
+
+    /**
+     * Tells to the lifecycle handler that a modal component needs to be handled.
+     * 
+     * @param id 
+     * @param modal 
+     * @returns 
+     */
+    public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {
+        if (this.nodeGroup.has(id)) {
+            const savedNode = this.nodeGroup.get(id)
+            savedNode && this.nodeGroup.set(id, { ...savedNode, modal })
+            return
+        }
+        this.nodeGroup.set(id, { id, modal })
+    }
+
+    /**
+     * Destroy a modal from the lifecycle handler.
+     * 
+     * @param id 
+     */
+    public destroy = (id: string) => {
+        this.nodeGroup.delete(id)
+        this.update()
+    }
+
+    /**
+     * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal 
+     * component is no longer used by the application.
+     * 
+     * @param id 
+     */
+    private remove = (id: string) => {
+        const savedNode = this.nodeGroup.get(id)
+        savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })
+        this.update()
+    }
+
+    /**
+     * Makes a modal appears.
+     * 
+     * @param id 
+     */
+    public show = (id: string) => {
+        const savedNode = this.nodeGroup.get(id)
+        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })
+        this.update()
+    }
+
+    /**
+     * Makes a modal disappears.
+     * 
+     * @param id 
+     */
+    public close = (id: string) => {
+        const savedNode = this.nodeGroup.get(id)
+        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })
+        this.update()
+    }
+}
+
+/**
+ * Creates a new ModalLifecycleHandlere instance.
+ * 
+ * @returns 
+ */
+export const createModalLifecycleHandler = () => {
+    return new ModalLifecycleHandler()
+}

package/src/components/atoms/Modal/index.ts

@@ -0,0 +1,5 @@
+export * from './ModalGroupManager'
+export * from './ModalLifecycleHandler'
+export * from './ui/BaseModalView'
+export * from './ui/types'
+export * from './useModalManager'

package/src/components/atoms/Modal/ui/BaseModalView.tsx

@@ -0,0 +1,127 @@
+import { BoxContent } from "@tecsinapse/react-core";
+import React, { FC, useCallback, useEffect, useRef, useState } from "react";
+import { Animated, Easing, Keyboard, KeyboardAvoidingView, LayoutChangeEvent, Pressable } from "react-native";
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BackDropView, CloseBar, StyledPressableBackDrop } from "./styled";
+import { IBaseModal } from "./types";
+
+const BACKDROP_ALPHA = .65
+const INTERPOLATION_STEPS = 10
+const INTERPOLATION_DURATION = 195 //ms
+const OPACITY_DURATION = 25 //ms
+
+export const ModalView: FC<IBaseModal> = ({
+    children,
+    visible,
+    BoxComponent = BoxContent,
+    frozen,
+    isLastShown,
+    close,
+    onClose
+}) => {
+    
+    const { bottom } = useSafeAreaInsets()
+    const [ ready, setReady ] = useState(false)
+    const [ keyboardOpened, setKeyboardOpened ] = useState(false)
+    const [ boxHeight, setBoxHeight ] = useState(0)
+    const backgroundCarrier = useRef(new Animated.Value(0)).current
+    const translationCarrier = useRef(new Animated.Value(0)).current
+    const opacityCarrier = useRef(new Animated.Value(0)).current
+    const offset = isLastShown && keyboardOpened ? 0 : bottom
+
+    const show = useCallback(() => {
+        Animated.sequence([
+            Animated.timing(backgroundCarrier, {
+                toValue: INTERPOLATION_STEPS,
+                duration: INTERPOLATION_DURATION,
+                easing: Easing.out(Easing.circle),
+                useNativeDriver: false
+            }),
+            Animated.timing(opacityCarrier, {
+                toValue: 1,
+                duration: OPACITY_DURATION,
+                useNativeDriver: true
+            }),
+            Animated.timing(translationCarrier, {
+                toValue: 0,
+                duration: INTERPOLATION_DURATION,
+                easing: Easing.out(Easing.circle),
+                useNativeDriver: true
+            })
+        ]).start()
+    }, [])
+
+    const hide = useCallback((to: number) => {
+        Animated.sequence([
+            Animated.parallel([
+                Animated.timing(translationCarrier, {
+                    toValue: to,
+                    duration: INTERPOLATION_DURATION,
+                    easing: Easing.out(Easing.circle),
+                    useNativeDriver: true
+                }),
+                Animated.timing(opacityCarrier, {
+                    toValue: 0,
+                    duration: INTERPOLATION_DURATION,
+                    useNativeDriver: true
+                })    
+            ]),
+            Animated.timing(backgroundCarrier, {
+                toValue: 0,
+                duration: INTERPOLATION_DURATION,
+                easing: Easing.out(Easing.circle),
+                useNativeDriver: false
+            }),
+        ]).start(onClose)
+    }, [onClose])
+
+    const backgroundInterpolation = backgroundCarrier.interpolate({
+        inputRange: [0, INTERPOLATION_STEPS],
+        outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`]
+    })
+
+    const handleBoxLayoutChanges = useCallback((lce: LayoutChangeEvent) => {
+        let boxHeightEvent = lce.nativeEvent.layout.height
+        setBoxHeight(boxHeightEvent)
+        
+        if (visible && !ready) {
+            translationCarrier.setValue(boxHeightEvent)
+            setReady(true)
+        }
+    }, [show, ready, visible, setReady])
+
+    useEffect(() => {
+        if (visible && ready) requestAnimationFrame(() => show())
+        if (!visible && !ready) {
+            Keyboard.dismiss()
+            requestAnimationFrame(() => hide(boxHeight))
+        }
+        if (!visible && ready) setReady(false)
+    }, [ready, visible])
+
+    useEffect(() => {
+        const showEvent = Keyboard.addListener('keyboardDidShow', () => setKeyboardOpened(true))
+        const hideEvent = Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(false))
+        return () => {
+            showEvent.remove()
+            hideEvent.remove()
+        }
+    }, [])
+
+    return (
+        <StyledPressableBackDrop onPress={!frozen ? close : undefined}>
+            <BackDropView style={{ backgroundColor: backgroundInterpolation }}>
+                <KeyboardAvoidingView enabled={isLastShown} behavior="padding">
+                    <Animated.View style={{ opacity: opacityCarrier, transform: [{ translateY: translationCarrier }]}}>
+                        <Pressable>
+                            <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: offset }} variant="bottom">
+                                <CloseBar/>
+                                {children}
+                            </BoxComponent>
+                        </Pressable>
+                    </Animated.View>
+                </KeyboardAvoidingView>
+            </BackDropView>
+        </StyledPressableBackDrop>
+    )
+}

package/src/components/atoms/Modal/ui/styled.ts

@@ -0,0 +1,23 @@
+import styled from "@emotion/native";
+import { RFValueStr, StyleProps } from "@tecsinapse/react-core";
+import { Animated } from "react-native";
+
+export const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`
+    flex: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+`
+
+export const BackDropView = styled(Animated.View)<Partial<StyleProps>>`
+    justify-content: flex-end;
+    flex: 1;
+`
+
+export const CloseBar = styled.View<Partial<StyleProps>>`
+    background-color: ${({ theme }) => theme.color.secondary.light};
+    border-radius: ${RFValueStr('10px')};
+    margin: ${`${RFValueStr('5px')} auto`};
+    width: ${RFValueStr('42px')};
+    height: ${RFValueStr('5px')};
+`

package/src/components/atoms/Modal/ui/types.ts

@@ -0,0 +1,12 @@
+
+/**
+ * Defines a modal interface and allows you implement your own modal component.
+ */
+export interface IBaseModal {
+    visible?: boolean
+    BoxComponent?: React.FC<any>
+    frozen?: boolean
+    isLastShown?: boolean
+    close?: () => void
+    onClose?: () => void
+}

package/src/components/atoms/Modal/useModalManager.ts

@@ -0,0 +1,35 @@
+import { ReactElement, useCallback, useEffect, useState } from "react"
+import { v4 as uuidv4 } from 'uuid'
+import { modalLifecycle } from "./ModalGroupManager"
+import { IBaseModal } from "./ui/types"
+
+/**
+ * Use this hook to tell the modal lifecycle handler that you want to add
+ * a new modal component. 
+ * 
+ * @param id 
+ * @param modal 
+ * @returns
+ */
+export const useModalManager = (modal: () => ReactElement<IBaseModal>) => {
+
+    const [id] = useState(uuidv4())
+    modalLifecycle.sync(id, modal)
+
+    const show = useCallback(() => {
+        modalLifecycle.show(id)
+    }, [id])
+
+    const close = useCallback(() => {
+        modalLifecycle.close(id)
+    }, [id])
+    
+    useEffect(() => {
+        return () => modalLifecycle.destroy(id)
+    }, [])
+
+    return {
+        show,
+        close
+    }
+}

package/src/components/atoms/Select/styled.ts

@@ -7,7 +7,8 @@ import {
   InputContainerProps,
   PressableSurface,
   PressableSurfaceProps,
-  StyleProps,
+  RFValueStr,
+  StyleProps
 } from '@tecsinapse/react-core';
 import { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';
 import { Input, InputNativeProps } from '../Input';
@@ -46,7 +47,7 @@ export const Header = styled(View)<ViewProps & Partial<StyleProps>>`
   align-items: center;
   justify-content: space-between;
   padding: ${({ theme }) => theme.spacing.deca};
-  height: 75px;
+  height: ${RFValueStr('75px')};
 `;
 
 export const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`
@@ -66,7 +67,7 @@ export const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`
 export const ListItem = styled(PressableSurface)<
   PressableSurfaceProps & Partial<StyleProps>
 >`
-  border-bottom-width: 1px;
+  border-bottom-width: ${RFValueStr('1px')};
   border-color: ${({ theme }) => theme.color.secondary.light};
   padding-vertical: ${({ theme }) => theme.spacing.mili};
   padding-horizontal: ${({ theme }) => theme.spacing.deca};

package/src/index.ts

@@ -26,3 +26,4 @@ export { DateTimePicker } from './components/molecules/DateTimePicker';
 export { Avatar } from './components/atoms/Avatar';
 export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
+export { ModalGroupManager, ModalView, ModalLifecycleHandler, useModalManager, IBaseModal } from './components/atoms/Modal';