@tecsinapse/react-native-kit 1.12.5 → 1.12.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +32 -0
- package/dist/components/atoms/BottomNavigator/styled.js +4 -2
- package/dist/components/atoms/BottomNavigator/styled.js.map +1 -1
- package/dist/components/atoms/Input/styled.js +1 -1
- package/dist/components/atoms/Input/styled.js.map +1 -1
- package/dist/components/atoms/Modal/ModalGroupManager.d.ts +2 -1
- package/dist/components/atoms/Modal/ModalGroupManager.js +9 -5
- package/dist/components/atoms/Modal/ModalGroupManager.js.map +1 -1
- package/dist/components/atoms/Modal/ModalLifecycleHandler.js +3 -2
- package/dist/components/atoms/Modal/ModalLifecycleHandler.js.map +1 -1
- package/dist/components/atoms/Modal/ui/BaseModalView.js +57 -20
- package/dist/components/atoms/Modal/ui/BaseModalView.js.map +1 -1
- package/dist/components/atoms/Modal/ui/styled.js +8 -5
- package/dist/components/atoms/Modal/ui/styled.js.map +1 -1
- package/dist/components/atoms/Modal/ui/types.d.ts +3 -1
- package/dist/components/atoms/Select/styled.js +2 -2
- package/dist/components/atoms/Select/styled.js.map +1 -1
- package/package.json +3 -3
- package/src/components/atoms/BottomNavigator/styled.ts +3 -3
- package/src/components/atoms/Input/styled.ts +3 -2
- package/src/components/atoms/Modal/ModalGroupManager.tsx +3 -3
- package/src/components/atoms/Modal/ModalLifecycleHandler.ts +3 -1
- package/src/components/atoms/Modal/ui/BaseModalView.tsx +69 -30
- package/src/components/atoms/Modal/ui/styled.ts +8 -7
- package/src/components/atoms/Modal/ui/types.ts +3 -1
- package/src/components/atoms/Select/styled.ts +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.12.9](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.8...@tecsinapse/react-native-kit@1.12.9) (2022-01-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [1.12.8](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.7...@tecsinapse/react-native-kit@1.12.8) (2022-01-05)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [1.12.7](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.6...@tecsinapse/react-native-kit@1.12.7) (2022-01-04)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## [1.12.6](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.5...@tecsinapse/react-native-kit@1.12.6) (2021-12-29)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
## [1.12.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.4...@tecsinapse/react-native-kit@1.12.5) (2021-12-29)
|
|
7
39
|
|
|
8
40
|
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
@@ -7,6 +7,8 @@ exports.CustomTabContent = exports.TabContent = exports.TabContainer = exports.S
|
|
|
7
7
|
|
|
8
8
|
var _native = _interopRequireDefault(require("@emotion/native"));
|
|
9
9
|
|
|
10
|
+
var _reactCore = require("@tecsinapse/react-core");
|
|
11
|
+
|
|
10
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
13
|
|
|
12
14
|
const StyledView = _native.default.View`
|
|
@@ -33,7 +35,7 @@ const TabContainer = _native.default.Pressable`
|
|
|
33
35
|
}) => theme.spacing.deca};
|
|
34
36
|
border-top-width: ${({
|
|
35
37
|
selected
|
|
36
|
-
}) => selected ? '2px' : 0};
|
|
38
|
+
}) => selected ? (0, _reactCore.RFValueStr)('2px') : 0};
|
|
37
39
|
border-color: ${({
|
|
38
40
|
theme
|
|
39
41
|
}) => theme.color.primary.medium};
|
|
@@ -45,7 +47,7 @@ const TabContent = _native.default.View`
|
|
|
45
47
|
aspect-ratio: 1;
|
|
46
48
|
justify-content: center;
|
|
47
49
|
align-items: center;
|
|
48
|
-
min-height: 48px;
|
|
50
|
+
min-height: ${(0, _reactCore.RFValueStr)('48px')};
|
|
49
51
|
background-color: ${({
|
|
50
52
|
theme
|
|
51
53
|
}) => theme.color.primary.xlight};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/BottomNavigator/styled.ts"],"names":["StyledView","styled","View","theme","spacing","deca","kilo","miscellaneous","surfaceColor","TabContainer","Pressable","mili","selected","color","primary","medium","TabContent","xlight","borderRadius","CustomTabContent"],"mappings":";;;;;;;AAAA;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/BottomNavigator/styled.ts"],"names":["StyledView","styled","View","theme","spacing","deca","kilo","miscellaneous","surfaceColor","TabContainer","Pressable","mili","selected","color","primary","medium","TabContent","xlight","borderRadius","CustomTabContent"],"mappings":";;;;;;;AAAA;;AACA;;;;AAGO,MAAMA,UAAU,GAAGC,gBAAOC,IAAsC;AACvE;AACA;AACA,wBAAwB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AAC1D,oBAAoB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcE,IAAK;AACtD,sBAAsB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACI,aAAN,CAAoBC,YAAa;AACtE,CANO;;AAQA,MAAMC,YAAY,GAAGR,gBAAOS,SAEjC;AACF;AACA,uBAAuB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACzD,iBAAiB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACnD,sBAAsB,CAAC;AAAEO,EAAAA;AAAF,CAAD,KAAmBA,QAAQ,GAAG,2BAAW,KAAX,CAAH,GAAuB,CAAG;AAC3E,kBAAkB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACU,KAAN,CAAYC,OAAZ,CAAoBC,MAAO;AAC5D;AACA;AACA,CAVO;;AAYA,MAAMC,UAAU,GAAGf,gBAAOC,IAAsC;AACvE;AACA;AACA;AACA,gBAAgB,2BAAW,MAAX,CAAmB;AACnC,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACU,KAAN,CAAYC,OAAZ,CAAoBG,MAAO;AAChE,mBAAmB,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACe,YAAN,CAAmB,MAAnB,CAA2B;AAC7D,CAPO;;AASA,MAAMC,gBAAgB,GAAGlB,gBAAOC,IAAsC,EAAtE","sourcesContent":["import styled from '@emotion/native';\nimport { RFValueStr, StyleProps } from '@tecsinapse/react-core';\nimport { PressableProps, ViewProps } from 'react-native';\n\nexport const StyledView = styled.View<ViewProps & Partial<StyleProps>>`\n flex-direction: row;\n justify-content: space-between;\n padding-horizontal: ${({ theme }) => theme.spacing.deca};\n padding-bottom: ${({ theme }) => theme.spacing.kilo};\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const TabContainer = styled.Pressable<\n { selected: boolean } & PressableProps & Partial<StyleProps>\n>`\n flex: 1;\n margin-horizontal: ${({ theme }) => theme.spacing.mili};\n padding-top: ${({ theme }) => theme.spacing.deca};\n border-top-width: ${({ selected }) => (selected ? RFValueStr('2px') : 0)};\n border-color: ${({ theme }) => theme.color.primary.medium};\n align-items: center;\n justify-content: flex-end;\n`;\n\nexport const TabContent = styled.View<ViewProps & Partial<StyleProps>>`\n aspect-ratio: 1;\n justify-content: center;\n align-items: center;\n min-height: ${RFValueStr('48px')};\n background-color: ${({ theme }) => theme.color.primary.xlight};\n border-radius: ${({ theme }) => theme.borderRadius['mili']};\n`;\n\nexport const CustomTabContent = styled.View<ViewProps & Partial<StyleProps>>``;\n"],"file":"styled.js"}
|
|
@@ -14,7 +14,7 @@ var _styled = require("../Text/styled");
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
16
16
|
const StyledInputContainer = (0, _native.default)(_reactCore.InputContainer)`
|
|
17
|
-
min-height: 50px;
|
|
17
|
+
min-height: ${(0, _reactCore.RFValueStr)('50px')};
|
|
18
18
|
`;
|
|
19
19
|
exports.StyledInputContainer = StyledInputContainer;
|
|
20
20
|
const StyledNativeInputBase = (0, _native.default)(_reactCore.InputElement)`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/Input/styled.ts"],"names":["StyledInputContainer","InputContainer","StyledNativeInputBase","InputElement","theme","typography","h5","lineHeight","StyledNativeInput","fontStyles"],"mappings":";;;;;;;AAAA;;AACA;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/Input/styled.ts"],"names":["StyledInputContainer","InputContainer","StyledNativeInputBase","InputElement","theme","typography","h5","lineHeight","StyledNativeInput","fontStyles"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;;;AAGO,MAAMA,oBAAoB,GAAG,qBAAOC,yBAAP,CAA4C;AAChF,gBAAgB,2BAAW,MAAX,CAAmB;AACnC,CAFO;;AAIP,MAAMC,qBAAqB,GAAG,qBAAOC,uBAAP,CAE5B;AACF,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,UAAN,CAAiBC,EAAjB,CAAoBC,UAAW;AAC1D;AACA;AACA,CANA;AAQO,MAAMC,iBAAiB,GAAG,qBAAON,qBAAP,EAE/BO,kBAF+B,CAA1B","sourcesContent":["import styled from '@emotion/native';\nimport {\n InputContainer,\n InputElement,\n RFValueStr,\n StyleProps\n} from '@tecsinapse/react-core';\nimport { Font, fontStyles } from '../Text/styled';\nimport { InputNativeProps } from './Input';\n\nexport const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`\n min-height: ${RFValueStr('50px')};\n`;\n\nconst StyledNativeInputBase = styled(InputElement)<\n Partial<InputNativeProps> & Partial<StyleProps>\n>`\n height: ${({ theme }) => theme.typography.h5.lineHeight};\n width: 100%;\n padding: 0;\n`;\n\nexport const StyledNativeInput = styled(StyledNativeInputBase)<\n Font & Partial<InputNativeProps> & Partial<StyleProps>\n>(fontStyles);\n"],"file":"styled.js"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
+
import { ModalProps } from 'react-native';
|
|
2
3
|
export declare const modalLifecycle: import("./ModalLifecycleHandler").ModalLifecycleHandler;
|
|
3
|
-
export declare const ModalGroupManager: FC
|
|
4
|
+
export declare const ModalGroupManager: FC<ModalProps>;
|
|
@@ -15,22 +15,26 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
17
|
|
|
18
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
19
|
+
|
|
18
20
|
const modalLifecycle = (0, _ModalLifecycleHandler.createModalLifecycleHandler)();
|
|
19
21
|
exports.modalLifecycle = modalLifecycle;
|
|
20
22
|
|
|
21
23
|
const ModalGroupManager = ({
|
|
22
|
-
children
|
|
24
|
+
children,
|
|
25
|
+
...others
|
|
23
26
|
}) => {
|
|
24
27
|
modalLifecycle.attach((0, _react.useState)([]));
|
|
25
28
|
|
|
26
29
|
const _render = modalLifecycle.render();
|
|
27
30
|
|
|
28
31
|
const hasModals = _render.length > 0;
|
|
29
|
-
return _react.default.createElement(_react.default.Fragment, null, children, _react.default.createElement(_reactNative.Modal, {
|
|
30
|
-
visible: hasModals,
|
|
32
|
+
return _react.default.createElement(_react.default.Fragment, null, children, _react.default.createElement(_reactNative.Modal, _extends({
|
|
31
33
|
transparent: true,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
+
statusBarTranslucent: true,
|
|
35
|
+
animationType: "none",
|
|
36
|
+
visible: hasModals
|
|
37
|
+
}, others), _render));
|
|
34
38
|
};
|
|
35
39
|
|
|
36
40
|
exports.ModalGroupManager = ModalGroupManager;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/Modal/ModalGroupManager.tsx"],"names":["modalLifecycle","ModalGroupManager","children","attach","_render","render","hasModals","length"],"mappings":";;;;;;;AAAA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/Modal/ModalGroupManager.tsx"],"names":["modalLifecycle","ModalGroupManager","children","others","attach","_render","render","hasModals","length"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAGO,MAAMA,cAAc,GAAG,yDAAvB;;;AAQA,MAAMC,iBAAiC,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,KAA6B;AAE1EH,EAAAA,cAAc,CAACI,MAAf,CAAsB,qBAAqC,EAArC,CAAtB;;AACA,QAAMC,OAAO,GAAGL,cAAc,CAACM,MAAf,EAAhB;;AACA,QAAMC,SAAS,GAAGF,OAAO,CAACG,MAAR,GAAiB,CAAnC;AAEA,SACI,4DACKN,QADL,EAEI,6BAAC,kBAAD;AAAS,IAAA,WAAW,MAApB;AAAqB,IAAA,oBAAoB,MAAzC;AAA0C,IAAA,aAAa,EAAC,MAAxD;AAA+D,IAAA,OAAO,EAAEK;AAAxE,KAAuFJ,MAAvF,GACKE,OADL,CAFJ,CADJ;AAQH,CAdM","sourcesContent":["import React, { FC, ReactElement, useState } from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { createModalLifecycleHandler } from './ModalLifecycleHandler';\nimport { IBaseModal } from './ui/types';\n\nexport const modalLifecycle = createModalLifecycleHandler()\n\n/**\n * It's responsable for rendering all the modal components.\n * \n * @param param0 \n * @returns \n */\nexport const ModalGroupManager: FC<ModalProps> = ({ children, ...others }) => {\n\n modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]))\n const _render = modalLifecycle.render()\n const hasModals = _render.length > 0\n \n return (\n <>\n {children}\n <RNModal transparent statusBarTranslucent animationType='none' visible={hasModals} {...others}>\n {_render}\n </RNModal>\n </>\n )\n}\n"],"file":"ModalGroupManager.js"}
|
|
@@ -22,14 +22,15 @@ class ModalLifecycleHandler {
|
|
|
22
22
|
var _nodeA$lastVisualizat, _nodeB$lastVisualizat;
|
|
23
23
|
|
|
24
24
|
return (((_nodeA$lastVisualizat = nodeA.lastVisualization) === null || _nodeA$lastVisualizat === void 0 ? void 0 : _nodeA$lastVisualizat.getTime()) || 0) - (((_nodeB$lastVisualizat = nodeB.lastVisualization) === null || _nodeB$lastVisualizat === void 0 ? void 0 : _nodeB$lastVisualizat.getTime()) || 0);
|
|
25
|
-
}).map(node => {
|
|
25
|
+
}).map((node, index, filteredNodes) => {
|
|
26
26
|
let modalElement = node.modal();
|
|
27
27
|
let {
|
|
28
28
|
props
|
|
29
29
|
} = modalElement;
|
|
30
|
-
return _react.default.cloneElement(modalElement, {
|
|
30
|
+
return _react.default.cloneElement(modalElement, { ...props,
|
|
31
31
|
key: node.id,
|
|
32
32
|
visible: node.visible,
|
|
33
|
+
isLastShown: filteredNodes.length - 1 === index,
|
|
33
34
|
close: () => this.close(node.id),
|
|
34
35
|
onClose: () => {
|
|
35
36
|
var _props$onClose;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"names":["ModalLifecycleHandler","constructor","state","nodes","Array","from","nodeGroup","values","filter","node","visible","lastVisualization","sort","nodeA","nodeB","getTime","map","modalElement","modal","props","React","cloneElement","key","id","close","onClose","remove","updateState","modals","has","savedNode","get","set","delete","update","undefined","Date","Map","createModalLifecycleHandler"],"mappings":";;;;;;;AAAA;;;;;;AAgBO,MAAMA,qBAAN,CAA4B;AAK/BC,EAAAA,WAAW,GAAG;AAAA,oCAUGC,KAAD,IAA+E;AAC3F,WAAKA,KAAL,GAAaA,KAAb;AACH,KAZa;;AAAA,oCAiBE,MAAM;AAClB,YAAMC,KAAK,GAAGC,KAAK,CAACC,IAAN,CAAW,KAAKC,SAAL,CAAeC,MAAf,EAAX,EACTC,MADS,CACFC,IAAI,IAAIA,IAAI,CAACC,OAAL,IAAgB,CAAC,CAACD,IAAI,CAACE,iBAD7B,EAETC,IAFS,CAEJ,CAACC,KAAD,EAAQC,KAAR;AAAA;;AAAA,eAAkB,CAAC,0BAAAD,KAAK,CAACF,iBAAN,gFAAyBI,OAAzB,OAAsC,CAAvC,KAA6C,0BAAAD,KAAK,CAACH,iBAAN,gFAAyBI,OAAzB,OAAsC,CAAnF,CAAlB;AAAA,OAFI,EAGTC,GAHS,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"names":["ModalLifecycleHandler","constructor","state","nodes","Array","from","nodeGroup","values","filter","node","visible","lastVisualization","sort","nodeA","nodeB","getTime","map","index","filteredNodes","modalElement","modal","props","React","cloneElement","key","id","isLastShown","length","close","onClose","remove","updateState","modals","has","savedNode","get","set","delete","update","undefined","Date","Map","createModalLifecycleHandler"],"mappings":"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","sourcesContent":["import React, { Dispatch, ReactElement } from \"react\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * It Represents a node (usually a modal component) in the modal's lifecycle handler.\n */\ninterface ModalNode {\n id: string\n visible?: boolean\n lastVisualization?: Date\n modal: () => ReactElement<IBaseModal>\n}\n\n/**\n * Manage all modal's lifecycle.\n */\nexport class ModalLifecycleHandler {\n \n nodeGroup: Map<string, ModalNode>\n state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | undefined\n\n constructor() {\n this.nodeGroup = new Map()\n this.state = undefined\n }\n\n /**\n * Holds the ModalGroupManager state.\n * \n * @param state \n */\n public attach = (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => {\n this.state = state\n }\n\n /**\n * Updates all the modal components.\n */\n public update = () => {\n const nodes = Array.from(this.nodeGroup.values())\n .filter(node => node.visible || !!node.lastVisualization)\n .sort((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))\n .map((node, index, filteredNodes) => {\n let modalElement = node.modal()\n let { props } = modalElement\n return React.cloneElement(modalElement, {\n ...props,\n key: node.id,\n visible: node.visible,\n isLastShown: filteredNodes.length - 1 === index,\n close: () => this.close(node.id),\n onClose: () => {\n this.remove(node.id)\n props.onClose?.()\n }\n })\n })\n \n const [, updateState ] = this.state || []\n updateState?.(nodes)\n }\n\n /**\n * Renders all selected modals.\n * \n * @returns \n */\n public render = (): ReactElement<IBaseModal>[] => {\n const [ modals ] = this.state || []\n return modals || []\n }\n\n /**\n * Tells to the lifecycle handler that a modal component needs to be handled.\n * \n * @param id \n * @param modal \n * @returns \n */\n public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {\n if (this.nodeGroup.has(id)) {\n const savedNode = this.nodeGroup.get(id)\n savedNode && this.nodeGroup.set(id, { ...savedNode, modal })\n return\n }\n this.nodeGroup.set(id, { id, modal })\n }\n\n /**\n * Destroy a modal from the lifecycle handler.\n * \n * @param id \n */\n public destroy = (id: string) => {\n this.nodeGroup.delete(id)\n this.update()\n }\n\n /**\n * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal \n * component is no longer used by the application.\n * \n * @param id \n */\n private remove = (id: string) => {\n const savedNode = this.nodeGroup.get(id)\n savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })\n this.update()\n }\n\n /**\n * Makes a modal appears.\n * \n * @param id \n */\n public show = (id: string) => {\n const savedNode = this.nodeGroup.get(id)\n savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })\n this.update()\n }\n\n /**\n * Makes a modal disappears.\n * \n * @param id \n */\n public close = (id: string) => {\n const savedNode = this.nodeGroup.get(id)\n savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })\n this.update()\n }\n}\n\n/**\n * Creates a new ModalLifecycleHandlere instance.\n * \n * @returns \n */\nexport const createModalLifecycleHandler = () => {\n return new ModalLifecycleHandler()\n}\n"],"file":"ModalLifecycleHandler.js"}
|
|
@@ -22,42 +22,55 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
22
22
|
const BACKDROP_ALPHA = .65;
|
|
23
23
|
const INTERPOLATION_STEPS = 10;
|
|
24
24
|
const INTERPOLATION_DURATION = 195;
|
|
25
|
+
const OPACITY_DURATION = 25;
|
|
25
26
|
|
|
26
27
|
const ModalView = ({
|
|
27
28
|
children,
|
|
28
29
|
visible,
|
|
29
30
|
BoxComponent = _reactCore.BoxContent,
|
|
31
|
+
frozen,
|
|
32
|
+
isLastShown,
|
|
30
33
|
close,
|
|
31
34
|
onClose
|
|
32
35
|
}) => {
|
|
33
36
|
const {
|
|
34
37
|
bottom
|
|
35
38
|
} = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
const [ready, setReady] = (0, _react.useState)(false);
|
|
40
|
+
const [keyboardOpened, setKeyboardOpened] = (0, _react.useState)(false);
|
|
41
|
+
const [boxHeight, setBoxHeight] = (0, _react.useState)(0);
|
|
39
42
|
const backgroundCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
40
43
|
const translationCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
41
|
-
const
|
|
44
|
+
const opacityCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
45
|
+
const offset = isLastShown && keyboardOpened ? 0 : bottom;
|
|
46
|
+
const show = (0, _react.useCallback)(() => {
|
|
42
47
|
_reactNative.Animated.sequence([_reactNative.Animated.timing(backgroundCarrier, {
|
|
43
48
|
toValue: INTERPOLATION_STEPS,
|
|
44
49
|
duration: INTERPOLATION_DURATION,
|
|
45
50
|
easing: _reactNative.Easing.out(_reactNative.Easing.circle),
|
|
46
51
|
useNativeDriver: false
|
|
52
|
+
}), _reactNative.Animated.timing(opacityCarrier, {
|
|
53
|
+
toValue: 1,
|
|
54
|
+
duration: OPACITY_DURATION,
|
|
55
|
+
useNativeDriver: true
|
|
47
56
|
}), _reactNative.Animated.timing(translationCarrier, {
|
|
48
|
-
toValue:
|
|
57
|
+
toValue: 0,
|
|
49
58
|
duration: INTERPOLATION_DURATION,
|
|
50
59
|
easing: _reactNative.Easing.out(_reactNative.Easing.circle),
|
|
51
60
|
useNativeDriver: true
|
|
52
61
|
})]).start();
|
|
53
62
|
}, []);
|
|
54
|
-
const hide = (0, _react.useCallback)(
|
|
55
|
-
_reactNative.Animated.sequence([_reactNative.Animated.timing(translationCarrier, {
|
|
56
|
-
toValue:
|
|
63
|
+
const hide = (0, _react.useCallback)(to => {
|
|
64
|
+
_reactNative.Animated.sequence([_reactNative.Animated.parallel([_reactNative.Animated.timing(translationCarrier, {
|
|
65
|
+
toValue: to,
|
|
57
66
|
duration: INTERPOLATION_DURATION,
|
|
58
67
|
easing: _reactNative.Easing.out(_reactNative.Easing.circle),
|
|
59
68
|
useNativeDriver: true
|
|
60
|
-
}), _reactNative.Animated.timing(
|
|
69
|
+
}), _reactNative.Animated.timing(opacityCarrier, {
|
|
70
|
+
toValue: 0,
|
|
71
|
+
duration: INTERPOLATION_DURATION,
|
|
72
|
+
useNativeDriver: true
|
|
73
|
+
})]), _reactNative.Animated.timing(backgroundCarrier, {
|
|
61
74
|
toValue: 0,
|
|
62
75
|
duration: INTERPOLATION_DURATION,
|
|
63
76
|
easing: _reactNative.Easing.out(_reactNative.Easing.circle),
|
|
@@ -69,23 +82,47 @@ const ModalView = ({
|
|
|
69
82
|
outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`]
|
|
70
83
|
});
|
|
71
84
|
const handleBoxLayoutChanges = (0, _react.useCallback)(lce => {
|
|
72
|
-
let
|
|
73
|
-
|
|
74
|
-
|
|
85
|
+
let boxHeightEvent = lce.nativeEvent.layout.height;
|
|
86
|
+
setBoxHeight(boxHeightEvent);
|
|
87
|
+
|
|
88
|
+
if (visible && !ready) {
|
|
89
|
+
translationCarrier.setValue(boxHeightEvent);
|
|
90
|
+
setReady(true);
|
|
91
|
+
}
|
|
92
|
+
}, [show, ready, visible, setReady]);
|
|
75
93
|
(0, _react.useEffect)(() => {
|
|
76
|
-
if (
|
|
77
|
-
|
|
94
|
+
if (visible && ready) requestAnimationFrame(() => show());
|
|
95
|
+
|
|
96
|
+
if (!visible && !ready) {
|
|
97
|
+
_reactNative.Keyboard.dismiss();
|
|
98
|
+
|
|
99
|
+
requestAnimationFrame(() => hide(boxHeight));
|
|
78
100
|
}
|
|
79
|
-
|
|
101
|
+
|
|
102
|
+
if (!visible && ready) setReady(false);
|
|
103
|
+
}, [ready, visible]);
|
|
104
|
+
(0, _react.useEffect)(() => {
|
|
105
|
+
const showEvent = _reactNative.Keyboard.addListener('keyboardDidShow', () => setKeyboardOpened(true));
|
|
106
|
+
|
|
107
|
+
const hideEvent = _reactNative.Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(false));
|
|
108
|
+
|
|
109
|
+
return () => {
|
|
110
|
+
showEvent.remove();
|
|
111
|
+
hideEvent.remove();
|
|
112
|
+
};
|
|
113
|
+
}, []);
|
|
80
114
|
return _react.default.createElement(_styled.StyledPressableBackDrop, {
|
|
81
|
-
onPress: close
|
|
115
|
+
onPress: !frozen ? close : undefined
|
|
82
116
|
}, _react.default.createElement(_styled.BackDropView, {
|
|
83
|
-
height: height,
|
|
84
117
|
style: {
|
|
85
118
|
backgroundColor: backgroundInterpolation
|
|
86
119
|
}
|
|
87
|
-
}
|
|
120
|
+
}, _react.default.createElement(_reactNative.KeyboardAvoidingView, {
|
|
121
|
+
enabled: isLastShown,
|
|
122
|
+
behavior: "padding"
|
|
123
|
+
}, _react.default.createElement(_reactNative.Animated.View, {
|
|
88
124
|
style: {
|
|
125
|
+
opacity: opacityCarrier,
|
|
89
126
|
transform: [{
|
|
90
127
|
translateY: translationCarrier
|
|
91
128
|
}]
|
|
@@ -93,10 +130,10 @@ const ModalView = ({
|
|
|
93
130
|
}, _react.default.createElement(_reactNative.Pressable, null, _react.default.createElement(BoxComponent, {
|
|
94
131
|
onLayout: handleBoxLayoutChanges,
|
|
95
132
|
style: {
|
|
96
|
-
paddingBottom:
|
|
133
|
+
paddingBottom: offset
|
|
97
134
|
},
|
|
98
135
|
variant: "bottom"
|
|
99
|
-
}, _react.default.createElement(_styled.CloseBar, null), children))));
|
|
136
|
+
}, _react.default.createElement(_styled.CloseBar, null), children))))));
|
|
100
137
|
};
|
|
101
138
|
|
|
102
139
|
exports.ModalView = ModalView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/atoms/Modal/ui/BaseModalView.tsx"],"names":["BACKDROP_ALPHA","INTERPOLATION_STEPS","INTERPOLATION_DURATION","ModalView","children","visible","BoxComponent","BoxContent","close","onClose","bottom","
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/atoms/Modal/ui/BaseModalView.tsx"],"names":["BACKDROP_ALPHA","INTERPOLATION_STEPS","INTERPOLATION_DURATION","OPACITY_DURATION","ModalView","children","visible","BoxComponent","BoxContent","frozen","isLastShown","close","onClose","bottom","ready","setReady","keyboardOpened","setKeyboardOpened","boxHeight","setBoxHeight","backgroundCarrier","Animated","Value","current","translationCarrier","opacityCarrier","offset","show","sequence","timing","toValue","duration","easing","Easing","out","circle","useNativeDriver","start","hide","to","parallel","backgroundInterpolation","interpolate","inputRange","outputRange","handleBoxLayoutChanges","lce","boxHeightEvent","nativeEvent","layout","height","setValue","requestAnimationFrame","Keyboard","dismiss","showEvent","addListener","hideEvent","remove","undefined","backgroundColor","opacity","transform","translateY","paddingBottom"],"mappings":"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","sourcesContent":["import { BoxContent } from \"@tecsinapse/react-core\";\nimport React, { FC, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Animated, Easing, Keyboard, KeyboardAvoidingView, LayoutChangeEvent, Pressable } from \"react-native\";\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { BackDropView, CloseBar, StyledPressableBackDrop } from \"./styled\";\nimport { IBaseModal } from \"./types\";\n\nconst BACKDROP_ALPHA = .65\nconst INTERPOLATION_STEPS = 10\nconst INTERPOLATION_DURATION = 195 //ms\nconst OPACITY_DURATION = 25 //ms\n\nexport const ModalView: FC<IBaseModal> = ({\n children,\n visible,\n BoxComponent = BoxContent,\n frozen,\n isLastShown,\n close,\n onClose\n}) => {\n \n const { bottom } = useSafeAreaInsets()\n const [ ready, setReady ] = useState(false)\n const [ keyboardOpened, setKeyboardOpened ] = useState(false)\n const [ boxHeight, setBoxHeight ] = useState(0)\n const backgroundCarrier = useRef(new Animated.Value(0)).current\n const translationCarrier = useRef(new Animated.Value(0)).current\n const opacityCarrier = useRef(new Animated.Value(0)).current\n const offset = isLastShown && keyboardOpened ? 0 : bottom\n\n const show = useCallback(() => {\n Animated.sequence([\n Animated.timing(backgroundCarrier, {\n toValue: INTERPOLATION_STEPS,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: false\n }),\n Animated.timing(opacityCarrier, {\n toValue: 1,\n duration: OPACITY_DURATION,\n useNativeDriver: true\n }),\n Animated.timing(translationCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: true\n })\n ]).start()\n }, [])\n\n const hide = useCallback((to: number) => {\n Animated.sequence([\n Animated.parallel([\n Animated.timing(translationCarrier, {\n toValue: to,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: true\n }),\n Animated.timing(opacityCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n useNativeDriver: true\n }) \n ]),\n Animated.timing(backgroundCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: false\n }),\n ]).start(onClose)\n }, [onClose])\n\n const backgroundInterpolation = backgroundCarrier.interpolate({\n inputRange: [0, INTERPOLATION_STEPS],\n outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`]\n })\n\n const handleBoxLayoutChanges = useCallback((lce: LayoutChangeEvent) => {\n let boxHeightEvent = lce.nativeEvent.layout.height\n setBoxHeight(boxHeightEvent)\n \n if (visible && !ready) {\n translationCarrier.setValue(boxHeightEvent)\n setReady(true)\n }\n }, [show, ready, visible, setReady])\n\n useEffect(() => {\n if (visible && ready) requestAnimationFrame(() => show())\n if (!visible && !ready) {\n Keyboard.dismiss()\n requestAnimationFrame(() => hide(boxHeight))\n }\n if (!visible && ready) setReady(false)\n }, [ready, visible])\n\n useEffect(() => {\n const showEvent = Keyboard.addListener('keyboardDidShow', () => setKeyboardOpened(true))\n const hideEvent = Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(false))\n return () => {\n showEvent.remove()\n hideEvent.remove()\n }\n }, [])\n\n return (\n <StyledPressableBackDrop onPress={!frozen ? close : undefined}>\n <BackDropView style={{ backgroundColor: backgroundInterpolation }}>\n <KeyboardAvoidingView enabled={isLastShown} behavior=\"padding\">\n <Animated.View style={{ opacity: opacityCarrier, transform: [{ translateY: translationCarrier }]}}>\n <Pressable>\n <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: offset }} variant=\"bottom\">\n <CloseBar/>\n {children}\n </BoxComponent>\n </Pressable>\n </Animated.View>\n </KeyboardAvoidingView>\n </BackDropView>\n </StyledPressableBackDrop>\n )\n}"],"file":"BaseModalView.js"}
|
|
@@ -7,6 +7,8 @@ exports.CloseBar = exports.BackDropView = exports.StyledPressableBackDrop = void
|
|
|
7
7
|
|
|
8
8
|
var _native = _interopRequireDefault(require("@emotion/native"));
|
|
9
9
|
|
|
10
|
+
var _reactCore = require("@tecsinapse/react-core");
|
|
11
|
+
|
|
10
12
|
var _reactNative = require("react-native");
|
|
11
13
|
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -19,17 +21,18 @@ const StyledPressableBackDrop = _native.default.Pressable`
|
|
|
19
21
|
`;
|
|
20
22
|
exports.StyledPressableBackDrop = StyledPressableBackDrop;
|
|
21
23
|
const BackDropView = (0, _native.default)(_reactNative.Animated.View)`
|
|
22
|
-
|
|
24
|
+
justify-content: flex-end;
|
|
25
|
+
flex: 1;
|
|
23
26
|
`;
|
|
24
27
|
exports.BackDropView = BackDropView;
|
|
25
28
|
const CloseBar = _native.default.View`
|
|
26
29
|
background-color: ${({
|
|
27
30
|
theme
|
|
28
31
|
}) => theme.color.secondary.light};
|
|
29
|
-
border-radius: 10px;
|
|
30
|
-
margin: 5px auto;
|
|
31
|
-
width: 42px;
|
|
32
|
-
height: 5px;
|
|
32
|
+
border-radius: ${(0, _reactCore.RFValueStr)('10px')};
|
|
33
|
+
margin: ${`${(0, _reactCore.RFValueStr)('5px')} auto`};
|
|
34
|
+
width: ${(0, _reactCore.RFValueStr)('42px')};
|
|
35
|
+
height: ${(0, _reactCore.RFValueStr)('5px')};
|
|
33
36
|
`;
|
|
34
37
|
exports.CloseBar = CloseBar;
|
|
35
38
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/atoms/Modal/ui/styled.ts"],"names":["StyledPressableBackDrop","styled","Pressable","BackDropView","Animated","View","CloseBar","theme","color","secondary","light"],"mappings":";;;;;;;AAAA;;
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/atoms/Modal/ui/styled.ts"],"names":["StyledPressableBackDrop","styled","Pressable","BackDropView","Animated","View","CloseBar","theme","color","secondary","light"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEO,MAAMA,uBAAuB,GAAGC,gBAAOC,SAA+B;AAC7E;AACA;AACA;AACA;AACA,CALO;;AAOA,MAAMC,YAAY,GAAG,qBAAOC,sBAASC,IAAhB,CAA2C;AACvE;AACA;AACA,CAHO;;AAKA,MAAMC,QAAQ,GAAGL,gBAAOI,IAA0B;AACzD,wBAAwB,CAAC;AAAEE,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AACnE,qBAAqB,2BAAW,MAAX,CAAmB;AACxC,cAAe,GAAE,2BAAW,KAAX,CAAkB,OAAO;AAC1C,aAAa,2BAAW,MAAX,CAAmB;AAChC,cAAc,2BAAW,KAAX,CAAkB;AAChC,CANO","sourcesContent":["import styled from \"@emotion/native\";\nimport { RFValueStr, StyleProps } from \"@tecsinapse/react-core\";\nimport { Animated } from \"react-native\";\n\nexport const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`\n flex: 1;\n position: absolute;\n width: 100%;\n height: 100%;\n`\n\nexport const BackDropView = styled(Animated.View)<Partial<StyleProps>>`\n justify-content: flex-end;\n flex: 1;\n`\n\nexport const CloseBar = styled.View<Partial<StyleProps>>`\n background-color: ${({ theme }) => theme.color.secondary.light};\n border-radius: ${RFValueStr('10px')};\n margin: ${`${RFValueStr('5px')} auto`};\n width: ${RFValueStr('42px')};\n height: ${RFValueStr('5px')};\n`"],"file":"styled.js"}
|
|
@@ -56,7 +56,7 @@ const Header = (0, _native.default)(_reactNative.View)`
|
|
|
56
56
|
padding: ${({
|
|
57
57
|
theme
|
|
58
58
|
}) => theme.spacing.deca};
|
|
59
|
-
height: 75px;
|
|
59
|
+
height: ${(0, _reactCore.RFValueStr)('75px')};
|
|
60
60
|
`;
|
|
61
61
|
exports.Header = Header;
|
|
62
62
|
const CloseButton = (0, _native.default)(_reactCore.Button)`
|
|
@@ -78,7 +78,7 @@ const SearchBar = (0, _native.default)(_Input.Input)`
|
|
|
78
78
|
`;
|
|
79
79
|
exports.SearchBar = SearchBar;
|
|
80
80
|
const ListItem = (0, _native.default)(_reactCore.PressableSurface)`
|
|
81
|
-
border-bottom-width: 1px;
|
|
81
|
+
border-bottom-width: ${(0, _reactCore.RFValueStr)('1px')};
|
|
82
82
|
border-color: ${({
|
|
83
83
|
theme
|
|
84
84
|
}) => theme.color.secondary.light};
|
|
@@ -1 +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;;
|
|
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;;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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-native-kit",
|
|
3
3
|
"description": "TecSinapse React Native components",
|
|
4
|
-
"version": "1.12.
|
|
4
|
+
"version": "1.12.9",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@emotion/native": "^11.0.0",
|
|
15
15
|
"@emotion/react": "^11.4.1",
|
|
16
|
-
"@tecsinapse/react-core": "^1.12.
|
|
16
|
+
"@tecsinapse/react-core": "^1.12.6"
|
|
17
17
|
},
|
|
18
18
|
"repository": {
|
|
19
19
|
"type": "git",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/uuid": "^8.3.3"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "5005537c38efef79cdd69a324563821e01e81f99"
|
|
38
38
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled from '@emotion/native';
|
|
2
|
-
import { StyleProps } from '@tecsinapse/react-core';
|
|
2
|
+
import { RFValueStr, StyleProps } from '@tecsinapse/react-core';
|
|
3
3
|
import { PressableProps, ViewProps } from 'react-native';
|
|
4
4
|
|
|
5
5
|
export const StyledView = styled.View<ViewProps & Partial<StyleProps>>`
|
|
@@ -16,7 +16,7 @@ export const TabContainer = styled.Pressable<
|
|
|
16
16
|
flex: 1;
|
|
17
17
|
margin-horizontal: ${({ theme }) => theme.spacing.mili};
|
|
18
18
|
padding-top: ${({ theme }) => theme.spacing.deca};
|
|
19
|
-
border-top-width: ${({ selected }) => (selected ? '2px' : 0)};
|
|
19
|
+
border-top-width: ${({ selected }) => (selected ? RFValueStr('2px') : 0)};
|
|
20
20
|
border-color: ${({ theme }) => theme.color.primary.medium};
|
|
21
21
|
align-items: center;
|
|
22
22
|
justify-content: flex-end;
|
|
@@ -26,7 +26,7 @@ export const TabContent = styled.View<ViewProps & Partial<StyleProps>>`
|
|
|
26
26
|
aspect-ratio: 1;
|
|
27
27
|
justify-content: center;
|
|
28
28
|
align-items: center;
|
|
29
|
-
min-height: 48px;
|
|
29
|
+
min-height: ${RFValueStr('48px')};
|
|
30
30
|
background-color: ${({ theme }) => theme.color.primary.xlight};
|
|
31
31
|
border-radius: ${({ theme }) => theme.borderRadius['mili']};
|
|
32
32
|
`;
|
|
@@ -2,13 +2,14 @@ import styled from '@emotion/native';
|
|
|
2
2
|
import {
|
|
3
3
|
InputContainer,
|
|
4
4
|
InputElement,
|
|
5
|
-
|
|
5
|
+
RFValueStr,
|
|
6
|
+
StyleProps
|
|
6
7
|
} from '@tecsinapse/react-core';
|
|
7
8
|
import { Font, fontStyles } from '../Text/styled';
|
|
8
9
|
import { InputNativeProps } from './Input';
|
|
9
10
|
|
|
10
11
|
export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
|
|
11
|
-
min-height: 50px;
|
|
12
|
+
min-height: ${RFValueStr('50px')};
|
|
12
13
|
`;
|
|
13
14
|
|
|
14
15
|
const StyledNativeInputBase = styled(InputElement)<
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { FC, ReactElement, useState } from 'react';
|
|
2
|
-
import { Modal as RNModal } from 'react-native';
|
|
2
|
+
import { Modal as RNModal, ModalProps } from 'react-native';
|
|
3
3
|
import { createModalLifecycleHandler } from './ModalLifecycleHandler';
|
|
4
4
|
import { IBaseModal } from './ui/types';
|
|
5
5
|
|
|
@@ -11,7 +11,7 @@ export const modalLifecycle = createModalLifecycleHandler()
|
|
|
11
11
|
* @param param0
|
|
12
12
|
* @returns
|
|
13
13
|
*/
|
|
14
|
-
export const ModalGroupManager: FC = ({ children }) => {
|
|
14
|
+
export const ModalGroupManager: FC<ModalProps> = ({ children, ...others }) => {
|
|
15
15
|
|
|
16
16
|
modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]))
|
|
17
17
|
const _render = modalLifecycle.render()
|
|
@@ -20,7 +20,7 @@ export const ModalGroupManager: FC = ({ children }) => {
|
|
|
20
20
|
return (
|
|
21
21
|
<>
|
|
22
22
|
{children}
|
|
23
|
-
<RNModal
|
|
23
|
+
<RNModal transparent statusBarTranslucent animationType='none' visible={hasModals} {...others}>
|
|
24
24
|
{_render}
|
|
25
25
|
</RNModal>
|
|
26
26
|
</>
|
|
@@ -40,12 +40,14 @@ export class ModalLifecycleHandler {
|
|
|
40
40
|
const nodes = Array.from(this.nodeGroup.values())
|
|
41
41
|
.filter(node => node.visible || !!node.lastVisualization)
|
|
42
42
|
.sort((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))
|
|
43
|
-
.map(node => {
|
|
43
|
+
.map((node, index, filteredNodes) => {
|
|
44
44
|
let modalElement = node.modal()
|
|
45
45
|
let { props } = modalElement
|
|
46
46
|
return React.cloneElement(modalElement, {
|
|
47
|
+
...props,
|
|
47
48
|
key: node.id,
|
|
48
49
|
visible: node.visible,
|
|
50
|
+
isLastShown: filteredNodes.length - 1 === index,
|
|
49
51
|
close: () => this.close(node.id),
|
|
50
52
|
onClose: () => {
|
|
51
53
|
this.remove(node.id)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BoxContent } from "@tecsinapse/react-core";
|
|
2
|
-
import React, { FC, useCallback, useEffect, useRef } from "react";
|
|
3
|
-
import { Animated, Easing, LayoutChangeEvent, Pressable
|
|
2
|
+
import React, { FC, useCallback, useEffect, useRef, useState } from "react";
|
|
3
|
+
import { Animated, Easing, Keyboard, KeyboardAvoidingView, LayoutChangeEvent, Pressable } from "react-native";
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
import { BackDropView, CloseBar, StyledPressableBackDrop } from "./styled";
|
|
6
6
|
import { IBaseModal } from "./types";
|
|
@@ -8,21 +8,28 @@ import { IBaseModal } from "./types";
|
|
|
8
8
|
const BACKDROP_ALPHA = .65
|
|
9
9
|
const INTERPOLATION_STEPS = 10
|
|
10
10
|
const INTERPOLATION_DURATION = 195 //ms
|
|
11
|
+
const OPACITY_DURATION = 25 //ms
|
|
11
12
|
|
|
12
|
-
export const ModalView: FC<IBaseModal> = ({
|
|
13
|
+
export const ModalView: FC<IBaseModal> = ({
|
|
13
14
|
children,
|
|
14
15
|
visible,
|
|
15
16
|
BoxComponent = BoxContent,
|
|
17
|
+
frozen,
|
|
18
|
+
isLastShown,
|
|
16
19
|
close,
|
|
17
20
|
onClose
|
|
18
21
|
}) => {
|
|
19
22
|
|
|
20
23
|
const { bottom } = useSafeAreaInsets()
|
|
21
|
-
const
|
|
24
|
+
const [ ready, setReady ] = useState(false)
|
|
25
|
+
const [ keyboardOpened, setKeyboardOpened ] = useState(false)
|
|
26
|
+
const [ boxHeight, setBoxHeight ] = useState(0)
|
|
22
27
|
const backgroundCarrier = useRef(new Animated.Value(0)).current
|
|
23
28
|
const translationCarrier = useRef(new Animated.Value(0)).current
|
|
29
|
+
const opacityCarrier = useRef(new Animated.Value(0)).current
|
|
30
|
+
const offset = isLastShown && keyboardOpened ? 0 : bottom
|
|
24
31
|
|
|
25
|
-
const show = useCallback((
|
|
32
|
+
const show = useCallback(() => {
|
|
26
33
|
Animated.sequence([
|
|
27
34
|
Animated.timing(backgroundCarrier, {
|
|
28
35
|
toValue: INTERPOLATION_STEPS,
|
|
@@ -30,8 +37,13 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
30
37
|
easing: Easing.out(Easing.circle),
|
|
31
38
|
useNativeDriver: false
|
|
32
39
|
}),
|
|
40
|
+
Animated.timing(opacityCarrier, {
|
|
41
|
+
toValue: 1,
|
|
42
|
+
duration: OPACITY_DURATION,
|
|
43
|
+
useNativeDriver: true
|
|
44
|
+
}),
|
|
33
45
|
Animated.timing(translationCarrier, {
|
|
34
|
-
toValue:
|
|
46
|
+
toValue: 0,
|
|
35
47
|
duration: INTERPOLATION_DURATION,
|
|
36
48
|
easing: Easing.out(Easing.circle),
|
|
37
49
|
useNativeDriver: true
|
|
@@ -39,20 +51,27 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
39
51
|
]).start()
|
|
40
52
|
}, [])
|
|
41
53
|
|
|
42
|
-
const hide = useCallback(() => {
|
|
54
|
+
const hide = useCallback((to: number) => {
|
|
43
55
|
Animated.sequence([
|
|
44
|
-
Animated.
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
56
|
+
Animated.parallel([
|
|
57
|
+
Animated.timing(translationCarrier, {
|
|
58
|
+
toValue: to,
|
|
59
|
+
duration: INTERPOLATION_DURATION,
|
|
60
|
+
easing: Easing.out(Easing.circle),
|
|
61
|
+
useNativeDriver: true
|
|
62
|
+
}),
|
|
63
|
+
Animated.timing(opacityCarrier, {
|
|
64
|
+
toValue: 0,
|
|
65
|
+
duration: INTERPOLATION_DURATION,
|
|
66
|
+
useNativeDriver: true
|
|
67
|
+
})
|
|
68
|
+
]),
|
|
50
69
|
Animated.timing(backgroundCarrier, {
|
|
51
70
|
toValue: 0,
|
|
52
71
|
duration: INTERPOLATION_DURATION,
|
|
53
72
|
easing: Easing.out(Easing.circle),
|
|
54
73
|
useNativeDriver: false
|
|
55
|
-
})
|
|
74
|
+
}),
|
|
56
75
|
]).start(onClose)
|
|
57
76
|
}, [onClose])
|
|
58
77
|
|
|
@@ -62,27 +81,47 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
62
81
|
})
|
|
63
82
|
|
|
64
83
|
const handleBoxLayoutChanges = useCallback((lce: LayoutChangeEvent) => {
|
|
65
|
-
let
|
|
66
|
-
|
|
67
|
-
|
|
84
|
+
let boxHeightEvent = lce.nativeEvent.layout.height
|
|
85
|
+
setBoxHeight(boxHeightEvent)
|
|
86
|
+
|
|
87
|
+
if (visible && !ready) {
|
|
88
|
+
translationCarrier.setValue(boxHeightEvent)
|
|
89
|
+
setReady(true)
|
|
90
|
+
}
|
|
91
|
+
}, [show, ready, visible, setReady])
|
|
68
92
|
|
|
69
93
|
useEffect(() => {
|
|
70
|
-
if (
|
|
71
|
-
|
|
94
|
+
if (visible && ready) requestAnimationFrame(() => show())
|
|
95
|
+
if (!visible && !ready) {
|
|
96
|
+
Keyboard.dismiss()
|
|
97
|
+
requestAnimationFrame(() => hide(boxHeight))
|
|
72
98
|
}
|
|
73
|
-
|
|
99
|
+
if (!visible && ready) setReady(false)
|
|
100
|
+
}, [ready, visible])
|
|
101
|
+
|
|
102
|
+
useEffect(() => {
|
|
103
|
+
const showEvent = Keyboard.addListener('keyboardDidShow', () => setKeyboardOpened(true))
|
|
104
|
+
const hideEvent = Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(false))
|
|
105
|
+
return () => {
|
|
106
|
+
showEvent.remove()
|
|
107
|
+
hideEvent.remove()
|
|
108
|
+
}
|
|
109
|
+
}, [])
|
|
74
110
|
|
|
75
111
|
return (
|
|
76
|
-
<StyledPressableBackDrop onPress={close}>
|
|
77
|
-
<BackDropView
|
|
78
|
-
<
|
|
79
|
-
<
|
|
80
|
-
<
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
112
|
+
<StyledPressableBackDrop onPress={!frozen ? close : undefined}>
|
|
113
|
+
<BackDropView style={{ backgroundColor: backgroundInterpolation }}>
|
|
114
|
+
<KeyboardAvoidingView enabled={isLastShown} behavior="padding">
|
|
115
|
+
<Animated.View style={{ opacity: opacityCarrier, transform: [{ translateY: translationCarrier }]}}>
|
|
116
|
+
<Pressable>
|
|
117
|
+
<BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: offset }} variant="bottom">
|
|
118
|
+
<CloseBar/>
|
|
119
|
+
{children}
|
|
120
|
+
</BoxComponent>
|
|
121
|
+
</Pressable>
|
|
122
|
+
</Animated.View>
|
|
123
|
+
</KeyboardAvoidingView>
|
|
124
|
+
</BackDropView>
|
|
86
125
|
</StyledPressableBackDrop>
|
|
87
126
|
)
|
|
88
127
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled from "@emotion/native";
|
|
2
|
-
import { StyleProps } from "@tecsinapse/react-core";
|
|
2
|
+
import { RFValueStr, StyleProps } from "@tecsinapse/react-core";
|
|
3
3
|
import { Animated } from "react-native";
|
|
4
4
|
|
|
5
5
|
export const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`
|
|
@@ -9,14 +9,15 @@ export const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`
|
|
|
9
9
|
height: 100%;
|
|
10
10
|
`
|
|
11
11
|
|
|
12
|
-
export const BackDropView = styled(Animated.View)<
|
|
13
|
-
|
|
12
|
+
export const BackDropView = styled(Animated.View)<Partial<StyleProps>>`
|
|
13
|
+
justify-content: flex-end;
|
|
14
|
+
flex: 1;
|
|
14
15
|
`
|
|
15
16
|
|
|
16
17
|
export const CloseBar = styled.View<Partial<StyleProps>>`
|
|
17
18
|
background-color: ${({ theme }) => theme.color.secondary.light};
|
|
18
|
-
border-radius: 10px;
|
|
19
|
-
margin: 5px auto;
|
|
20
|
-
width: 42px;
|
|
21
|
-
height: 5px;
|
|
19
|
+
border-radius: ${RFValueStr('10px')};
|
|
20
|
+
margin: ${`${RFValueStr('5px')} auto`};
|
|
21
|
+
width: ${RFValueStr('42px')};
|
|
22
|
+
height: ${RFValueStr('5px')};
|
|
22
23
|
`
|
|
@@ -7,7 +7,8 @@ import {
|
|
|
7
7
|
InputContainerProps,
|
|
8
8
|
PressableSurface,
|
|
9
9
|
PressableSurfaceProps,
|
|
10
|
-
|
|
10
|
+
RFValueStr,
|
|
11
|
+
StyleProps
|
|
11
12
|
} from '@tecsinapse/react-core';
|
|
12
13
|
import { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';
|
|
13
14
|
import { Input, InputNativeProps } from '../Input';
|
|
@@ -46,7 +47,7 @@ export const Header = styled(View)<ViewProps & Partial<StyleProps>>`
|
|
|
46
47
|
align-items: center;
|
|
47
48
|
justify-content: space-between;
|
|
48
49
|
padding: ${({ theme }) => theme.spacing.deca};
|
|
49
|
-
height: 75px;
|
|
50
|
+
height: ${RFValueStr('75px')};
|
|
50
51
|
`;
|
|
51
52
|
|
|
52
53
|
export const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`
|
|
@@ -66,7 +67,7 @@ export const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`
|
|
|
66
67
|
export const ListItem = styled(PressableSurface)<
|
|
67
68
|
PressableSurfaceProps & Partial<StyleProps>
|
|
68
69
|
>`
|
|
69
|
-
border-bottom-width: 1px;
|
|
70
|
+
border-bottom-width: ${RFValueStr('1px')};
|
|
70
71
|
border-color: ${({ theme }) => theme.color.secondary.light};
|
|
71
72
|
padding-vertical: ${({ theme }) => theme.spacing.mili};
|
|
72
73
|
padding-horizontal: ${({ theme }) => theme.spacing.deca};
|