@tecsinapse/react-native-kit 1.12.5 → 1.12.6
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/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/ui/BaseModalView.js +12 -5
- package/dist/components/atoms/Modal/ui/BaseModalView.js.map +1 -1
- package/dist/components/atoms/Modal/ui/styled.js.map +1 -1
- package/dist/components/atoms/Modal/ui/types.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/atoms/Modal/ModalGroupManager.tsx +3 -3
- package/src/components/atoms/Modal/ui/BaseModalView.tsx +24 -13
- package/src/components/atoms/Modal/ui/styled.ts +1 -1
- package/src/components/atoms/Modal/ui/types.ts +1 -1
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.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
|
+
|
|
8
|
+
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [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
15
|
|
|
8
16
|
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
@@ -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,6 +22,7 @@ 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,
|
|
@@ -33,17 +34,19 @@ const ModalView = ({
|
|
|
33
34
|
const {
|
|
34
35
|
bottom
|
|
35
36
|
} = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
|
|
36
|
-
const {
|
|
37
|
-
height
|
|
38
|
-
} = (0, _reactNative.useWindowDimensions)();
|
|
39
37
|
const backgroundCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
40
38
|
const translationCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
39
|
+
const opacityCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
41
40
|
const show = (0, _react.useCallback)(to => {
|
|
42
41
|
_reactNative.Animated.sequence([_reactNative.Animated.timing(backgroundCarrier, {
|
|
43
42
|
toValue: INTERPOLATION_STEPS,
|
|
44
43
|
duration: INTERPOLATION_DURATION,
|
|
45
44
|
easing: _reactNative.Easing.out(_reactNative.Easing.circle),
|
|
46
45
|
useNativeDriver: false
|
|
46
|
+
}), _reactNative.Animated.timing(opacityCarrier, {
|
|
47
|
+
toValue: 1,
|
|
48
|
+
duration: OPACITY_DURATION,
|
|
49
|
+
useNativeDriver: true
|
|
47
50
|
}), _reactNative.Animated.timing(translationCarrier, {
|
|
48
51
|
toValue: to,
|
|
49
52
|
duration: INTERPOLATION_DURATION,
|
|
@@ -62,6 +65,10 @@ const ModalView = ({
|
|
|
62
65
|
duration: INTERPOLATION_DURATION,
|
|
63
66
|
easing: _reactNative.Easing.out(_reactNative.Easing.circle),
|
|
64
67
|
useNativeDriver: false
|
|
68
|
+
}), _reactNative.Animated.timing(opacityCarrier, {
|
|
69
|
+
toValue: 0,
|
|
70
|
+
duration: OPACITY_DURATION,
|
|
71
|
+
useNativeDriver: true
|
|
65
72
|
})]).start(onClose);
|
|
66
73
|
}, [onClose]);
|
|
67
74
|
const backgroundInterpolation = backgroundCarrier.interpolate({
|
|
@@ -70,7 +77,7 @@ const ModalView = ({
|
|
|
70
77
|
});
|
|
71
78
|
const handleBoxLayoutChanges = (0, _react.useCallback)(lce => {
|
|
72
79
|
let boxHeight = lce.nativeEvent.layout.height;
|
|
73
|
-
boxHeight > 0 && show(-
|
|
80
|
+
boxHeight > 0 && requestAnimationFrame(() => show(-boxHeight));
|
|
74
81
|
}, [show]);
|
|
75
82
|
(0, _react.useEffect)(() => {
|
|
76
83
|
if (!visible) {
|
|
@@ -80,12 +87,12 @@ const ModalView = ({
|
|
|
80
87
|
return _react.default.createElement(_styled.StyledPressableBackDrop, {
|
|
81
88
|
onPress: close
|
|
82
89
|
}, _react.default.createElement(_styled.BackDropView, {
|
|
83
|
-
height: height,
|
|
84
90
|
style: {
|
|
85
91
|
backgroundColor: backgroundInterpolation
|
|
86
92
|
}
|
|
87
93
|
}), _react.default.createElement(_reactNative.Animated.View, {
|
|
88
94
|
style: {
|
|
95
|
+
opacity: opacityCarrier,
|
|
89
96
|
transform: [{
|
|
90
97
|
translateY: translationCarrier
|
|
91
98
|
}]
|
|
@@ -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","close","onClose","bottom","backgroundCarrier","Animated","Value","current","translationCarrier","opacityCarrier","show","to","sequence","timing","toValue","duration","easing","Easing","out","circle","useNativeDriver","start","hide","backgroundInterpolation","interpolate","inputRange","outputRange","handleBoxLayoutChanges","lce","boxHeight","nativeEvent","layout","height","requestAnimationFrame","backgroundColor","opacity","transform","translateY","paddingBottom"],"mappings":"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","sourcesContent":["import { BoxContent } from \"@tecsinapse/react-core\";\nimport React, { FC, useCallback, useEffect, useRef } from \"react\";\nimport { Animated, Easing, 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 close,\n onClose\n}) => {\n \n const { bottom } = useSafeAreaInsets()\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\n const show = useCallback((to: number) => {\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: to,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: true\n })\n ]).start()\n }, [])\n\n const hide = useCallback(() => {\n Animated.sequence([\n Animated.timing(translationCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: true\n }),\n Animated.timing(backgroundCarrier, {\n toValue: 0,\n duration: INTERPOLATION_DURATION,\n easing: Easing.out(Easing.circle),\n useNativeDriver: false\n }),\n Animated.timing(opacityCarrier, {\n toValue: 0,\n duration: OPACITY_DURATION,\n useNativeDriver: true\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 boxHeight = lce.nativeEvent.layout.height\n boxHeight > 0 && requestAnimationFrame(() => show(-boxHeight))\n }, [show])\n\n useEffect(() => {\n if (!visible) {\n hide()\n }\n }, [visible])\n\n return (\n <StyledPressableBackDrop onPress={close}>\n <BackDropView style={{ backgroundColor: backgroundInterpolation }}/>\n <Animated.View style={{ opacity: opacityCarrier, transform: [{ translateY: translationCarrier }]}}>\n <Pressable>\n <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: bottom }} variant=\"bottom\">\n <CloseBar/>\n {children}\n </BoxComponent>\n </Pressable>\n </Animated.View>\n </StyledPressableBackDrop>\n )\n}"],"file":"BaseModalView.js"}
|
|
@@ -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,
|
|
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,CAFO;;AAIA,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 height: 100%;\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.6",
|
|
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": "fb35cbf99e1f305a8588f9b9dbb5cfbec1f204e1"
|
|
38
38
|
}
|
|
@@ -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
|
</>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BoxContent } from "@tecsinapse/react-core";
|
|
2
2
|
import React, { FC, useCallback, useEffect, useRef } from "react";
|
|
3
|
-
import { Animated, Easing, LayoutChangeEvent, Pressable
|
|
3
|
+
import { Animated, Easing, 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,6 +8,7 @@ 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
13
|
export const ModalView: FC<IBaseModal> = ({
|
|
13
14
|
children,
|
|
@@ -18,9 +19,9 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
18
19
|
}) => {
|
|
19
20
|
|
|
20
21
|
const { bottom } = useSafeAreaInsets()
|
|
21
|
-
const { height } = useWindowDimensions()
|
|
22
22
|
const backgroundCarrier = useRef(new Animated.Value(0)).current
|
|
23
23
|
const translationCarrier = useRef(new Animated.Value(0)).current
|
|
24
|
+
const opacityCarrier = useRef(new Animated.Value(0)).current
|
|
24
25
|
|
|
25
26
|
const show = useCallback((to: number) => {
|
|
26
27
|
Animated.sequence([
|
|
@@ -30,6 +31,11 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
30
31
|
easing: Easing.out(Easing.circle),
|
|
31
32
|
useNativeDriver: false
|
|
32
33
|
}),
|
|
34
|
+
Animated.timing(opacityCarrier, {
|
|
35
|
+
toValue: 1,
|
|
36
|
+
duration: OPACITY_DURATION,
|
|
37
|
+
useNativeDriver: true
|
|
38
|
+
}),
|
|
33
39
|
Animated.timing(translationCarrier, {
|
|
34
40
|
toValue: to,
|
|
35
41
|
duration: INTERPOLATION_DURATION,
|
|
@@ -52,7 +58,12 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
52
58
|
duration: INTERPOLATION_DURATION,
|
|
53
59
|
easing: Easing.out(Easing.circle),
|
|
54
60
|
useNativeDriver: false
|
|
55
|
-
})
|
|
61
|
+
}),
|
|
62
|
+
Animated.timing(opacityCarrier, {
|
|
63
|
+
toValue: 0,
|
|
64
|
+
duration: OPACITY_DURATION,
|
|
65
|
+
useNativeDriver: true
|
|
66
|
+
}),
|
|
56
67
|
]).start(onClose)
|
|
57
68
|
}, [onClose])
|
|
58
69
|
|
|
@@ -63,7 +74,7 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
63
74
|
|
|
64
75
|
const handleBoxLayoutChanges = useCallback((lce: LayoutChangeEvent) => {
|
|
65
76
|
let boxHeight = lce.nativeEvent.layout.height
|
|
66
|
-
boxHeight > 0 && show(-
|
|
77
|
+
boxHeight > 0 && requestAnimationFrame(() => show(-boxHeight))
|
|
67
78
|
}, [show])
|
|
68
79
|
|
|
69
80
|
useEffect(() => {
|
|
@@ -74,15 +85,15 @@ export const ModalView: FC<IBaseModal> = ({
|
|
|
74
85
|
|
|
75
86
|
return (
|
|
76
87
|
<StyledPressableBackDrop onPress={close}>
|
|
77
|
-
<BackDropView
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
88
|
+
<BackDropView style={{ backgroundColor: backgroundInterpolation }}/>
|
|
89
|
+
<Animated.View style={{ opacity: opacityCarrier, transform: [{ translateY: translationCarrier }]}}>
|
|
90
|
+
<Pressable>
|
|
91
|
+
<BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: bottom }} variant="bottom">
|
|
92
|
+
<CloseBar/>
|
|
93
|
+
{children}
|
|
94
|
+
</BoxComponent>
|
|
95
|
+
</Pressable>
|
|
96
|
+
</Animated.View>
|
|
86
97
|
</StyledPressableBackDrop>
|
|
87
98
|
)
|
|
88
99
|
}
|
|
@@ -9,7 +9,7 @@ export const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`
|
|
|
9
9
|
height: 100%;
|
|
10
10
|
`
|
|
11
11
|
|
|
12
|
-
export const BackDropView = styled(Animated.View)<
|
|
12
|
+
export const BackDropView = styled(Animated.View)<Partial<StyleProps>>`
|
|
13
13
|
height: 100%;
|
|
14
14
|
`
|
|
15
15
|
|