@tecsinapse/react-native-kit 1.12.6 → 1.12.7
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 +8 -0
- 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 +50 -20
- package/dist/components/atoms/Modal/ui/BaseModalView.js.map +1 -1
- package/dist/components/atoms/Modal/ui/styled.js +2 -1
- package/dist/components/atoms/Modal/ui/styled.js.map +1 -1
- package/dist/components/atoms/Modal/ui/types.d.ts +2 -0
- package/package.json +2 -2
- package/src/components/atoms/Modal/ModalLifecycleHandler.ts +3 -1
- package/src/components/atoms/Modal/ui/BaseModalView.tsx +61 -33
- package/src/components/atoms/Modal/ui/styled.ts +2 -1
- package/src/components/atoms/Modal/ui/types.ts +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.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)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [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)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
@@ -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"}
|
|
@@ -28,16 +28,22 @@ const ModalView = ({
|
|
|
28
28
|
children,
|
|
29
29
|
visible,
|
|
30
30
|
BoxComponent = _reactCore.BoxContent,
|
|
31
|
+
frozen,
|
|
32
|
+
isLastShown,
|
|
31
33
|
close,
|
|
32
34
|
onClose
|
|
33
35
|
}) => {
|
|
34
36
|
const {
|
|
35
37
|
bottom
|
|
36
38
|
} = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
|
|
39
|
+
const [ready, setReady] = (0, _react.useState)(false);
|
|
40
|
+
const [keyboardOpened, setKeyboardOpened] = (0, _react.useState)(false);
|
|
41
|
+
const [boxHeight, setBoxHeight] = (0, _react.useState)(0);
|
|
37
42
|
const backgroundCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
38
43
|
const translationCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
39
44
|
const opacityCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
40
|
-
const
|
|
45
|
+
const offset = isLastShown && keyboardOpened ? 0 : bottom;
|
|
46
|
+
const show = (0, _react.useCallback)(() => {
|
|
41
47
|
_reactNative.Animated.sequence([_reactNative.Animated.timing(backgroundCarrier, {
|
|
42
48
|
toValue: INTERPOLATION_STEPS,
|
|
43
49
|
duration: INTERPOLATION_DURATION,
|
|
@@ -48,27 +54,27 @@ const ModalView = ({
|
|
|
48
54
|
duration: OPACITY_DURATION,
|
|
49
55
|
useNativeDriver: true
|
|
50
56
|
}), _reactNative.Animated.timing(translationCarrier, {
|
|
51
|
-
toValue:
|
|
57
|
+
toValue: 0,
|
|
52
58
|
duration: INTERPOLATION_DURATION,
|
|
53
59
|
easing: _reactNative.Easing.out(_reactNative.Easing.circle),
|
|
54
60
|
useNativeDriver: true
|
|
55
61
|
})]).start();
|
|
56
62
|
}, []);
|
|
57
|
-
const hide = (0, _react.useCallback)(
|
|
58
|
-
_reactNative.Animated.sequence([_reactNative.Animated.timing(translationCarrier, {
|
|
59
|
-
toValue:
|
|
63
|
+
const hide = (0, _react.useCallback)(to => {
|
|
64
|
+
_reactNative.Animated.sequence([_reactNative.Animated.parallel([_reactNative.Animated.timing(translationCarrier, {
|
|
65
|
+
toValue: to,
|
|
60
66
|
duration: INTERPOLATION_DURATION,
|
|
61
67
|
easing: _reactNative.Easing.out(_reactNative.Easing.circle),
|
|
62
68
|
useNativeDriver: true
|
|
63
|
-
}), _reactNative.Animated.timing(
|
|
69
|
+
}), _reactNative.Animated.timing(opacityCarrier, {
|
|
70
|
+
toValue: 0,
|
|
71
|
+
duration: INTERPOLATION_DURATION,
|
|
72
|
+
useNativeDriver: true
|
|
73
|
+
})]), _reactNative.Animated.timing(backgroundCarrier, {
|
|
64
74
|
toValue: 0,
|
|
65
75
|
duration: INTERPOLATION_DURATION,
|
|
66
76
|
easing: _reactNative.Easing.out(_reactNative.Easing.circle),
|
|
67
77
|
useNativeDriver: false
|
|
68
|
-
}), _reactNative.Animated.timing(opacityCarrier, {
|
|
69
|
-
toValue: 0,
|
|
70
|
-
duration: OPACITY_DURATION,
|
|
71
|
-
useNativeDriver: true
|
|
72
78
|
})]).start(onClose);
|
|
73
79
|
}, [onClose]);
|
|
74
80
|
const backgroundInterpolation = backgroundCarrier.interpolate({
|
|
@@ -76,21 +82,45 @@ const ModalView = ({
|
|
|
76
82
|
outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`]
|
|
77
83
|
});
|
|
78
84
|
const handleBoxLayoutChanges = (0, _react.useCallback)(lce => {
|
|
79
|
-
let
|
|
80
|
-
|
|
81
|
-
|
|
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]);
|
|
82
93
|
(0, _react.useEffect)(() => {
|
|
83
|
-
if (
|
|
84
|
-
|
|
94
|
+
if (visible && ready) requestAnimationFrame(() => show());
|
|
95
|
+
|
|
96
|
+
if (!visible && !ready) {
|
|
97
|
+
_reactNative.Keyboard.dismiss();
|
|
98
|
+
|
|
99
|
+
requestAnimationFrame(() => hide(boxHeight));
|
|
85
100
|
}
|
|
86
|
-
|
|
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
|
+
}, []);
|
|
87
114
|
return _react.default.createElement(_styled.StyledPressableBackDrop, {
|
|
88
|
-
onPress: close
|
|
115
|
+
onPress: !frozen ? close : undefined
|
|
89
116
|
}, _react.default.createElement(_styled.BackDropView, {
|
|
90
117
|
style: {
|
|
91
118
|
backgroundColor: backgroundInterpolation
|
|
92
119
|
}
|
|
93
|
-
}
|
|
120
|
+
}, _react.default.createElement(_reactNative.KeyboardAvoidingView, {
|
|
121
|
+
enabled: isLastShown,
|
|
122
|
+
behavior: "padding"
|
|
123
|
+
}, _react.default.createElement(_reactNative.Animated.View, {
|
|
94
124
|
style: {
|
|
95
125
|
opacity: opacityCarrier,
|
|
96
126
|
transform: [{
|
|
@@ -100,10 +130,10 @@ const ModalView = ({
|
|
|
100
130
|
}, _react.default.createElement(_reactNative.Pressable, null, _react.default.createElement(BoxComponent, {
|
|
101
131
|
onLayout: handleBoxLayoutChanges,
|
|
102
132
|
style: {
|
|
103
|
-
paddingBottom:
|
|
133
|
+
paddingBottom: offset
|
|
104
134
|
},
|
|
105
135
|
variant: "bottom"
|
|
106
|
-
}, _react.default.createElement(_styled.CloseBar, null), children))));
|
|
136
|
+
}, _react.default.createElement(_styled.CloseBar, null), children))))));
|
|
107
137
|
};
|
|
108
138
|
|
|
109
139
|
exports.ModalView = ModalView;
|
|
@@ -1 +1 @@
|
|
|
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","close","onClose","bottom","backgroundCarrier","Animated","Value","current","translationCarrier","opacityCarrier","
|
|
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"}
|
|
@@ -19,7 +19,8 @@ const StyledPressableBackDrop = _native.default.Pressable`
|
|
|
19
19
|
`;
|
|
20
20
|
exports.StyledPressableBackDrop = StyledPressableBackDrop;
|
|
21
21
|
const BackDropView = (0, _native.default)(_reactNative.Animated.View)`
|
|
22
|
-
|
|
22
|
+
justify-content: flex-end;
|
|
23
|
+
flex: 1;
|
|
23
24
|
`;
|
|
24
25
|
exports.BackDropView = BackDropView;
|
|
25
26
|
const CloseBar = _native.default.View`
|
|
@@ -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;;AAEA;;;;AAEO,MAAMA,uBAAuB,GAAGC,gBAAOC,SAA+B;AAC7E;AACA;AACA;AACA;AACA,CALO;;AAOA,MAAMC,YAAY,GAAG,qBAAOC,sBAASC,IAAhB,CAA2C;AACvE;AACA,
|
|
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;;AAEA;;;;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;AACA;AACA;AACA;AACA,CANO","sourcesContent":["import styled from \"@emotion/native\";\nimport { 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: 10px;\n margin: 5px auto;\n width: 42px;\n height: 5px;\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.7",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/uuid": "^8.3.3"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "a75ea285431e8b2f6db3c6f6eb396f30cae0ead9"
|
|
38
38
|
}
|
|
@@ -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 } from "react-native";
|
|
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";
|
|
@@ -10,20 +10,26 @@ const INTERPOLATION_STEPS = 10
|
|
|
10
10
|
const INTERPOLATION_DURATION = 195 //ms
|
|
11
11
|
const OPACITY_DURATION = 25 //ms
|
|
12
12
|
|
|
13
|
-
export const ModalView: FC<IBaseModal> = ({
|
|
13
|
+
export const ModalView: FC<IBaseModal> = ({
|
|
14
14
|
children,
|
|
15
15
|
visible,
|
|
16
16
|
BoxComponent = BoxContent,
|
|
17
|
+
frozen,
|
|
18
|
+
isLastShown,
|
|
17
19
|
close,
|
|
18
20
|
onClose
|
|
19
21
|
}) => {
|
|
20
22
|
|
|
21
23
|
const { bottom } = useSafeAreaInsets()
|
|
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
|
|
24
29
|
const opacityCarrier = useRef(new Animated.Value(0)).current
|
|
30
|
+
const offset = isLastShown && keyboardOpened ? 0 : bottom
|
|
25
31
|
|
|
26
|
-
const show = useCallback((
|
|
32
|
+
const show = useCallback(() => {
|
|
27
33
|
Animated.sequence([
|
|
28
34
|
Animated.timing(backgroundCarrier, {
|
|
29
35
|
toValue: INTERPOLATION_STEPS,
|
|
@@ -37,7 +43,7 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
37
43
|
useNativeDriver: true
|
|
38
44
|
}),
|
|
39
45
|
Animated.timing(translationCarrier, {
|
|
40
|
-
toValue:
|
|
46
|
+
toValue: 0,
|
|
41
47
|
duration: INTERPOLATION_DURATION,
|
|
42
48
|
easing: Easing.out(Easing.circle),
|
|
43
49
|
useNativeDriver: true
|
|
@@ -45,25 +51,27 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
45
51
|
]).start()
|
|
46
52
|
}, [])
|
|
47
53
|
|
|
48
|
-
const hide = useCallback(() => {
|
|
54
|
+
const hide = useCallback((to: number) => {
|
|
49
55
|
Animated.sequence([
|
|
50
|
-
Animated.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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
|
+
]),
|
|
56
69
|
Animated.timing(backgroundCarrier, {
|
|
57
70
|
toValue: 0,
|
|
58
71
|
duration: INTERPOLATION_DURATION,
|
|
59
72
|
easing: Easing.out(Easing.circle),
|
|
60
73
|
useNativeDriver: false
|
|
61
74
|
}),
|
|
62
|
-
Animated.timing(opacityCarrier, {
|
|
63
|
-
toValue: 0,
|
|
64
|
-
duration: OPACITY_DURATION,
|
|
65
|
-
useNativeDriver: true
|
|
66
|
-
}),
|
|
67
75
|
]).start(onClose)
|
|
68
76
|
}, [onClose])
|
|
69
77
|
|
|
@@ -73,27 +81,47 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
73
81
|
})
|
|
74
82
|
|
|
75
83
|
const handleBoxLayoutChanges = useCallback((lce: LayoutChangeEvent) => {
|
|
76
|
-
let
|
|
77
|
-
|
|
78
|
-
|
|
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])
|
|
79
92
|
|
|
80
93
|
useEffect(() => {
|
|
81
|
-
if (
|
|
82
|
-
|
|
94
|
+
if (visible && ready) requestAnimationFrame(() => show())
|
|
95
|
+
if (!visible && !ready) {
|
|
96
|
+
Keyboard.dismiss()
|
|
97
|
+
requestAnimationFrame(() => hide(boxHeight))
|
|
83
98
|
}
|
|
84
|
-
|
|
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
|
+
}, [])
|
|
85
110
|
|
|
86
111
|
return (
|
|
87
|
-
<StyledPressableBackDrop onPress={close}>
|
|
88
|
-
<BackDropView style={{ backgroundColor: backgroundInterpolation }}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
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>
|
|
97
125
|
</StyledPressableBackDrop>
|
|
98
126
|
)
|
|
99
127
|
}
|
|
@@ -10,7 +10,8 @@ export const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`
|
|
|
10
10
|
`
|
|
11
11
|
|
|
12
12
|
export const BackDropView = styled(Animated.View)<Partial<StyleProps>>`
|
|
13
|
-
|
|
13
|
+
justify-content: flex-end;
|
|
14
|
+
flex: 1;
|
|
14
15
|
`
|
|
15
16
|
|
|
16
17
|
export const CloseBar = styled.View<Partial<StyleProps>>`
|