react-native-morph-card 0.2.8 → 0.4.0
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/README.md +6 -4
- package/android/src/main/java/com/melivalesca/morphcard/MorphCardSourceManager.kt +8 -0
- package/android/src/main/java/com/melivalesca/morphcard/MorphCardSourceView.kt +49 -3
- package/android/src/main/java/com/melivalesca/morphcard/MorphCardTargetView.kt +41 -1
- package/ios/Fabric/RNCMorphCardSourceComponentView.mm +111 -10
- package/ios/Fabric/RNCMorphCardTargetComponentView.h +1 -0
- package/ios/Fabric/RNCMorphCardTargetComponentView.mm +21 -0
- package/lib/commonjs/MorphCardSource.js +29 -2
- package/lib/commonjs/MorphCardSource.js.map +1 -1
- package/lib/commonjs/MorphCardTarget.js +31 -7
- package/lib/commonjs/MorphCardTarget.js.map +1 -1
- package/lib/commonjs/MorphChildrenRegistry.js +34 -0
- package/lib/commonjs/MorphChildrenRegistry.js.map +1 -0
- package/lib/commonjs/specs/NativeMorphCardSource.js.map +1 -1
- package/lib/module/MorphCardSource.js +29 -2
- package/lib/module/MorphCardSource.js.map +1 -1
- package/lib/module/MorphCardTarget.js +31 -7
- package/lib/module/MorphCardTarget.js.map +1 -1
- package/lib/module/MorphChildrenRegistry.js +27 -0
- package/lib/module/MorphChildrenRegistry.js.map +1 -0
- package/lib/module/specs/NativeMorphCardSource.js.map +1 -1
- package/lib/typescript/src/MorphCardSource.d.ts +8 -4
- package/lib/typescript/src/MorphCardSource.d.ts.map +1 -1
- package/lib/typescript/src/MorphCardTarget.d.ts.map +1 -1
- package/lib/typescript/src/MorphChildrenRegistry.d.ts +13 -0
- package/lib/typescript/src/MorphChildrenRegistry.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/specs/NativeMorphCardSource.d.ts +2 -0
- package/lib/typescript/src/specs/NativeMorphCardSource.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/MorphCardSource.tsx +33 -5
- package/src/MorphCardTarget.tsx +44 -9
- package/src/MorphChildrenRegistry.ts +43 -0
- package/src/index.tsx +1 -1
- package/src/specs/NativeMorphCardSource.ts +2 -0
|
@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _NativeMorphCardModule = _interopRequireDefault(require("./specs/NativeMorphCardModule"));
|
|
10
10
|
var _NativeMorphCardTarget = _interopRequireDefault(require("./specs/NativeMorphCardTarget"));
|
|
11
|
+
var _MorphChildrenRegistry = require("./MorphChildrenRegistry");
|
|
11
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
14
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
@@ -52,16 +53,32 @@ const MorphCardTarget = ({
|
|
|
52
53
|
_NativeMorphCardModule.default.setTargetConfig(sourceTag, lw, lh, borderRadius != null ? borderRadius : -1, contentOffsetY ?? 0, contentCentered ?? false);
|
|
53
54
|
_NativeMorphCardModule.default.expand(sourceTag, targetTag);
|
|
54
55
|
}, [sourceTag, borderRadius, contentOffsetY, contentCentered]);
|
|
55
|
-
const
|
|
56
|
+
const sourceEntry = (0, _MorphChildrenRegistry.getSourceEntry)(sourceTag);
|
|
57
|
+
const containerStyle = {
|
|
58
|
+
overflow: 'hidden'
|
|
59
|
+
};
|
|
60
|
+
if (sourceEntry?.backgroundColor) {
|
|
61
|
+
containerStyle.backgroundColor = sourceEntry.backgroundColor;
|
|
62
|
+
}
|
|
63
|
+
if (contentCentered) {
|
|
64
|
+
containerStyle.justifyContent = 'center';
|
|
65
|
+
containerStyle.alignItems = 'center';
|
|
66
|
+
}
|
|
67
|
+
if (contentOffsetY) {
|
|
68
|
+
containerStyle.paddingTop = contentOffsetY;
|
|
69
|
+
}
|
|
56
70
|
if (width != null) {
|
|
57
|
-
|
|
71
|
+
containerStyle.width = width;
|
|
58
72
|
} else if (sourceSize) {
|
|
59
|
-
|
|
73
|
+
containerStyle.width = sourceSize.width;
|
|
60
74
|
}
|
|
61
75
|
if (height != null) {
|
|
62
|
-
|
|
76
|
+
containerStyle.height = height;
|
|
63
77
|
} else if (sourceSize) {
|
|
64
|
-
|
|
78
|
+
containerStyle.height = sourceSize.height;
|
|
79
|
+
}
|
|
80
|
+
if (borderRadius) {
|
|
81
|
+
containerStyle.borderRadius = borderRadius;
|
|
65
82
|
}
|
|
66
83
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(NativeTargetView, {
|
|
67
84
|
ref: nativeRef,
|
|
@@ -70,8 +87,15 @@ const MorphCardTarget = ({
|
|
|
70
87
|
targetWidth: 0,
|
|
71
88
|
targetHeight: 0,
|
|
72
89
|
targetBorderRadius: borderRadius != null ? borderRadius : -1,
|
|
73
|
-
style:
|
|
74
|
-
onLayout: handleLayout
|
|
90
|
+
style: containerStyle,
|
|
91
|
+
onLayout: handleLayout,
|
|
92
|
+
children: sourceEntry && !sourceEntry.scaleMode && (sourceEntry.backgroundColor && sourceEntry.layoutWidth ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
93
|
+
style: {
|
|
94
|
+
width: sourceEntry.layoutWidth,
|
|
95
|
+
height: sourceEntry.layoutHeight
|
|
96
|
+
},
|
|
97
|
+
children: sourceEntry.children
|
|
98
|
+
}) : sourceEntry.children)
|
|
75
99
|
});
|
|
76
100
|
};
|
|
77
101
|
exports.MorphCardTarget = MorphCardTarget;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_NativeMorphCardModule","_interopRequireDefault","_NativeMorphCardTarget","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NativeTargetView","NativeTargetViewSpec","View","MorphCardTarget","sourceTag","collapseDuration","width","height","borderRadius","contentOffsetY","contentCentered","nativeRef","useRef","expandedRef","sourceSize","setSourceSize","useState","useEffect","cancelled","NativeMorphCardModule","getSourceSize","then","size","catch","handleLayout","useCallback","current","lw","lh","nativeEvent","layout","targetTag","findNodeHandle","setTargetConfig","expand","
|
|
1
|
+
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_NativeMorphCardModule","_interopRequireDefault","_NativeMorphCardTarget","_MorphChildrenRegistry","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NativeTargetView","NativeTargetViewSpec","View","MorphCardTarget","sourceTag","collapseDuration","width","height","borderRadius","contentOffsetY","contentCentered","nativeRef","useRef","expandedRef","sourceSize","setSourceSize","useState","useEffect","cancelled","NativeMorphCardModule","getSourceSize","then","size","catch","handleLayout","useCallback","current","lw","lh","nativeEvent","layout","targetTag","findNodeHandle","setTargetConfig","expand","sourceEntry","getSourceEntry","containerStyle","overflow","backgroundColor","justifyContent","alignItems","paddingTop","jsx","ref","targetWidth","targetHeight","targetBorderRadius","style","onLayout","children","scaleMode","layoutWidth","layoutHeight","exports"],"sourceRoot":"../../src","sources":["MorphCardTarget.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.clearSourceEntry = clearSourceEntry;
|
|
7
|
+
exports.getSourceEntry = getSourceEntry;
|
|
8
|
+
exports.setSourceEntry = setSourceEntry;
|
|
9
|
+
exports.setSourceLayout = setSourceLayout;
|
|
10
|
+
const registry = new Map();
|
|
11
|
+
function setSourceEntry(tag, children, backgroundColor, scaleMode) {
|
|
12
|
+
const existing = registry.get(tag);
|
|
13
|
+
registry.set(tag, {
|
|
14
|
+
children,
|
|
15
|
+
backgroundColor,
|
|
16
|
+
scaleMode,
|
|
17
|
+
layoutWidth: existing?.layoutWidth,
|
|
18
|
+
layoutHeight: existing?.layoutHeight
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
function setSourceLayout(tag, width, height) {
|
|
22
|
+
const existing = registry.get(tag);
|
|
23
|
+
if (existing) {
|
|
24
|
+
existing.layoutWidth = width;
|
|
25
|
+
existing.layoutHeight = height;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
function getSourceEntry(tag) {
|
|
29
|
+
return registry.get(tag);
|
|
30
|
+
}
|
|
31
|
+
function clearSourceEntry(tag) {
|
|
32
|
+
registry.delete(tag);
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=MorphChildrenRegistry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["registry","Map","setSourceEntry","tag","children","backgroundColor","scaleMode","existing","get","set","layoutWidth","layoutHeight","setSourceLayout","width","height","getSourceEntry","clearSourceEntry","delete"],"sourceRoot":"../../src","sources":["MorphChildrenRegistry.ts"],"mappings":";;;;;;;;;AAUA,MAAMA,QAAQ,GAAG,IAAIC,GAAG,CAAsB,CAAC;AAExC,SAASC,cAAcA,CAC5BC,GAAW,EACXC,QAAmB,EACnBC,eAAwB,EACxBC,SAAkB,EAClB;EACA,MAAMC,QAAQ,GAAGP,QAAQ,CAACQ,GAAG,CAACL,GAAG,CAAC;EAClCH,QAAQ,CAACS,GAAG,CAACN,GAAG,EAAE;IAChBC,QAAQ;IACRC,eAAe;IACfC,SAAS;IACTI,WAAW,EAAEH,QAAQ,EAAEG,WAAW;IAClCC,YAAY,EAAEJ,QAAQ,EAAEI;EAC1B,CAAC,CAAC;AACJ;AAEO,SAASC,eAAeA,CAACT,GAAW,EAAEU,KAAa,EAAEC,MAAc,EAAE;EAC1E,MAAMP,QAAQ,GAAGP,QAAQ,CAACQ,GAAG,CAACL,GAAG,CAAC;EAClC,IAAII,QAAQ,EAAE;IACZA,QAAQ,CAACG,WAAW,GAAGG,KAAK;IAC5BN,QAAQ,CAACI,YAAY,GAAGG,MAAM;EAChC;AACF;AAEO,SAASC,cAAcA,CAACZ,GAAW,EAA2B;EACnE,OAAOH,QAAQ,CAACQ,GAAG,CAACL,GAAG,CAAC;AAC1B;AAEO,SAASa,gBAAgBA,CAACb,GAAW,EAAE;EAC5CH,QAAQ,CAACiB,MAAM,CAACd,GAAG,CAAC;AACtB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_codegenNativeComponent","_interopRequireDefault","require","e","__esModule","default","_default","exports","codegenNativeComponent"],"sourceRoot":"../../../src","sources":["specs/NativeMorphCardSource.ts"],"mappings":";;;;;;AAMA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6F,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,
|
|
1
|
+
{"version":3,"names":["_codegenNativeComponent","_interopRequireDefault","require","e","__esModule","default","_default","exports","codegenNativeComponent"],"sourceRoot":"../../../src","sources":["specs/NativeMorphCardSource.ts"],"mappings":";;;;;;AAMA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6F,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAc9E,IAAAG,+BAAsB,EACnC,oBACF,CAAC","ignoreList":[]}
|
|
@@ -4,6 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { Pressable, View, findNodeHandle } from 'react-native';
|
|
5
5
|
import NativeMorphCardModule from './specs/NativeMorphCardModule';
|
|
6
6
|
import NativeSourceViewSpec from './specs/NativeMorphCardSource';
|
|
7
|
+
import { setSourceEntry, setSourceLayout, clearSourceEntry } from './MorphChildrenRegistry';
|
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
9
|
const NativeSourceView = NativeSourceViewSpec ?? View;
|
|
9
10
|
export const MorphCardSource = ({
|
|
@@ -14,12 +15,25 @@ export const MorphCardSource = ({
|
|
|
14
15
|
height,
|
|
15
16
|
borderRadius,
|
|
16
17
|
backgroundColor,
|
|
17
|
-
|
|
18
|
+
resizeMode,
|
|
19
|
+
rotations,
|
|
20
|
+
rotationEndAngle,
|
|
18
21
|
onPress,
|
|
19
22
|
ref
|
|
20
23
|
}) => {
|
|
21
24
|
const nativeRef = React.useRef(null);
|
|
22
25
|
React.useImperativeHandle(ref, () => nativeRef.current);
|
|
26
|
+
|
|
27
|
+
// Store children in shared registry so MorphCardTarget can clone them
|
|
28
|
+
React.useEffect(() => {
|
|
29
|
+
const tag = findNodeHandle(nativeRef.current);
|
|
30
|
+
if (tag != null) {
|
|
31
|
+
setSourceEntry(tag, children, backgroundColor, resizeMode);
|
|
32
|
+
}
|
|
33
|
+
return () => {
|
|
34
|
+
if (tag != null) clearSourceEntry(tag);
|
|
35
|
+
};
|
|
36
|
+
}, [children, backgroundColor, resizeMode]);
|
|
23
37
|
const style = {};
|
|
24
38
|
if (width != null) style.width = width;
|
|
25
39
|
if (height != null) style.height = height;
|
|
@@ -28,6 +42,16 @@ export const MorphCardSource = ({
|
|
|
28
42
|
style.overflow = 'hidden';
|
|
29
43
|
}
|
|
30
44
|
if (backgroundColor != null) style.backgroundColor = backgroundColor;
|
|
45
|
+
const handleLayout = React.useCallback(e => {
|
|
46
|
+
const tag = findNodeHandle(nativeRef.current);
|
|
47
|
+
if (tag != null) {
|
|
48
|
+
const {
|
|
49
|
+
width: lw,
|
|
50
|
+
height: lh
|
|
51
|
+
} = e.nativeEvent.layout;
|
|
52
|
+
setSourceLayout(tag, lw, lh);
|
|
53
|
+
}
|
|
54
|
+
}, []);
|
|
31
55
|
const handlePress = React.useCallback(() => {
|
|
32
56
|
if (!onPress) return;
|
|
33
57
|
const tag = findNodeHandle(nativeRef.current);
|
|
@@ -43,9 +67,12 @@ export const MorphCardSource = ({
|
|
|
43
67
|
ref: nativeRef,
|
|
44
68
|
duration: duration,
|
|
45
69
|
expandDuration: expandDuration,
|
|
46
|
-
scaleMode:
|
|
70
|
+
scaleMode: resizeMode === 'contain' ? 'aspectFit' : resizeMode === 'stretch' ? 'stretch' : 'aspectFill',
|
|
47
71
|
cardBorderRadius: borderRadius,
|
|
72
|
+
rotations: rotations,
|
|
73
|
+
rotationEndAngle: rotationEndAngle,
|
|
48
74
|
style: style,
|
|
75
|
+
onLayout: handleLayout,
|
|
49
76
|
children: children
|
|
50
77
|
});
|
|
51
78
|
if (onPress) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Pressable","View","findNodeHandle","NativeMorphCardModule","NativeSourceViewSpec","jsx","_jsx","NativeSourceView","MorphCardSource","children","duration","expandDuration","width","height","borderRadius","backgroundColor","
|
|
1
|
+
{"version":3,"names":["React","Pressable","View","findNodeHandle","NativeMorphCardModule","NativeSourceViewSpec","setSourceEntry","setSourceLayout","clearSourceEntry","jsx","_jsx","NativeSourceView","MorphCardSource","children","duration","expandDuration","width","height","borderRadius","backgroundColor","resizeMode","rotations","rotationEndAngle","onPress","ref","nativeRef","useRef","useImperativeHandle","current","useEffect","tag","style","overflow","handleLayout","useCallback","e","lw","lh","nativeEvent","layout","handlePress","prepareExpand","requestAnimationFrame","content","scaleMode","cardBorderRadius","onLayout","getViewTag","viewRef","morphExpand","sourceRef","targetRef","sourceTag","targetTag","expand","morphCollapse","collapse"],"sourceRoot":"../../src","sources":["MorphCardSource.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,6 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { View, findNodeHandle } from 'react-native';
|
|
5
5
|
import NativeMorphCardModule from './specs/NativeMorphCardModule';
|
|
6
6
|
import NativeTargetViewSpec from './specs/NativeMorphCardTarget';
|
|
7
|
+
import { getSourceEntry } from './MorphChildrenRegistry';
|
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
9
|
const NativeTargetView = NativeTargetViewSpec ?? View;
|
|
9
10
|
export const MorphCardTarget = ({
|
|
@@ -46,16 +47,32 @@ export const MorphCardTarget = ({
|
|
|
46
47
|
NativeMorphCardModule.setTargetConfig(sourceTag, lw, lh, borderRadius != null ? borderRadius : -1, contentOffsetY ?? 0, contentCentered ?? false);
|
|
47
48
|
NativeMorphCardModule.expand(sourceTag, targetTag);
|
|
48
49
|
}, [sourceTag, borderRadius, contentOffsetY, contentCentered]);
|
|
49
|
-
const
|
|
50
|
+
const sourceEntry = getSourceEntry(sourceTag);
|
|
51
|
+
const containerStyle = {
|
|
52
|
+
overflow: 'hidden'
|
|
53
|
+
};
|
|
54
|
+
if (sourceEntry?.backgroundColor) {
|
|
55
|
+
containerStyle.backgroundColor = sourceEntry.backgroundColor;
|
|
56
|
+
}
|
|
57
|
+
if (contentCentered) {
|
|
58
|
+
containerStyle.justifyContent = 'center';
|
|
59
|
+
containerStyle.alignItems = 'center';
|
|
60
|
+
}
|
|
61
|
+
if (contentOffsetY) {
|
|
62
|
+
containerStyle.paddingTop = contentOffsetY;
|
|
63
|
+
}
|
|
50
64
|
if (width != null) {
|
|
51
|
-
|
|
65
|
+
containerStyle.width = width;
|
|
52
66
|
} else if (sourceSize) {
|
|
53
|
-
|
|
67
|
+
containerStyle.width = sourceSize.width;
|
|
54
68
|
}
|
|
55
69
|
if (height != null) {
|
|
56
|
-
|
|
70
|
+
containerStyle.height = height;
|
|
57
71
|
} else if (sourceSize) {
|
|
58
|
-
|
|
72
|
+
containerStyle.height = sourceSize.height;
|
|
73
|
+
}
|
|
74
|
+
if (borderRadius) {
|
|
75
|
+
containerStyle.borderRadius = borderRadius;
|
|
59
76
|
}
|
|
60
77
|
return /*#__PURE__*/_jsx(NativeTargetView, {
|
|
61
78
|
ref: nativeRef,
|
|
@@ -64,8 +81,15 @@ export const MorphCardTarget = ({
|
|
|
64
81
|
targetWidth: 0,
|
|
65
82
|
targetHeight: 0,
|
|
66
83
|
targetBorderRadius: borderRadius != null ? borderRadius : -1,
|
|
67
|
-
style:
|
|
68
|
-
onLayout: handleLayout
|
|
84
|
+
style: containerStyle,
|
|
85
|
+
onLayout: handleLayout,
|
|
86
|
+
children: sourceEntry && !sourceEntry.scaleMode && (sourceEntry.backgroundColor && sourceEntry.layoutWidth ? /*#__PURE__*/_jsx(View, {
|
|
87
|
+
style: {
|
|
88
|
+
width: sourceEntry.layoutWidth,
|
|
89
|
+
height: sourceEntry.layoutHeight
|
|
90
|
+
},
|
|
91
|
+
children: sourceEntry.children
|
|
92
|
+
}) : sourceEntry.children)
|
|
69
93
|
});
|
|
70
94
|
};
|
|
71
95
|
//# sourceMappingURL=MorphCardTarget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","findNodeHandle","NativeMorphCardModule","NativeTargetViewSpec","jsx","_jsx","NativeTargetView","MorphCardTarget","sourceTag","collapseDuration","width","height","borderRadius","contentOffsetY","contentCentered","nativeRef","useRef","expandedRef","sourceSize","setSourceSize","useState","useEffect","cancelled","getSourceSize","then","size","catch","handleLayout","useCallback","e","current","lw","lh","nativeEvent","layout","targetTag","setTargetConfig","expand","
|
|
1
|
+
{"version":3,"names":["React","View","findNodeHandle","NativeMorphCardModule","NativeTargetViewSpec","getSourceEntry","jsx","_jsx","NativeTargetView","MorphCardTarget","sourceTag","collapseDuration","width","height","borderRadius","contentOffsetY","contentCentered","nativeRef","useRef","expandedRef","sourceSize","setSourceSize","useState","useEffect","cancelled","getSourceSize","then","size","catch","handleLayout","useCallback","e","current","lw","lh","nativeEvent","layout","targetTag","setTargetConfig","expand","sourceEntry","containerStyle","overflow","backgroundColor","justifyContent","alignItems","paddingTop","ref","targetWidth","targetHeight","targetBorderRadius","style","onLayout","children","scaleMode","layoutWidth","layoutHeight"],"sourceRoot":"../../src","sources":["MorphCardTarget.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
const registry = new Map();
|
|
4
|
+
export function setSourceEntry(tag, children, backgroundColor, scaleMode) {
|
|
5
|
+
const existing = registry.get(tag);
|
|
6
|
+
registry.set(tag, {
|
|
7
|
+
children,
|
|
8
|
+
backgroundColor,
|
|
9
|
+
scaleMode,
|
|
10
|
+
layoutWidth: existing?.layoutWidth,
|
|
11
|
+
layoutHeight: existing?.layoutHeight
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
export function setSourceLayout(tag, width, height) {
|
|
15
|
+
const existing = registry.get(tag);
|
|
16
|
+
if (existing) {
|
|
17
|
+
existing.layoutWidth = width;
|
|
18
|
+
existing.layoutHeight = height;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
export function getSourceEntry(tag) {
|
|
22
|
+
return registry.get(tag);
|
|
23
|
+
}
|
|
24
|
+
export function clearSourceEntry(tag) {
|
|
25
|
+
registry.delete(tag);
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=MorphChildrenRegistry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["registry","Map","setSourceEntry","tag","children","backgroundColor","scaleMode","existing","get","set","layoutWidth","layoutHeight","setSourceLayout","width","height","getSourceEntry","clearSourceEntry","delete"],"sourceRoot":"../../src","sources":["MorphChildrenRegistry.ts"],"mappings":";;AAUA,MAAMA,QAAQ,GAAG,IAAIC,GAAG,CAAsB,CAAC;AAE/C,OAAO,SAASC,cAAcA,CAC5BC,GAAW,EACXC,QAAmB,EACnBC,eAAwB,EACxBC,SAAkB,EAClB;EACA,MAAMC,QAAQ,GAAGP,QAAQ,CAACQ,GAAG,CAACL,GAAG,CAAC;EAClCH,QAAQ,CAACS,GAAG,CAACN,GAAG,EAAE;IAChBC,QAAQ;IACRC,eAAe;IACfC,SAAS;IACTI,WAAW,EAAEH,QAAQ,EAAEG,WAAW;IAClCC,YAAY,EAAEJ,QAAQ,EAAEI;EAC1B,CAAC,CAAC;AACJ;AAEA,OAAO,SAASC,eAAeA,CAACT,GAAW,EAAEU,KAAa,EAAEC,MAAc,EAAE;EAC1E,MAAMP,QAAQ,GAAGP,QAAQ,CAACQ,GAAG,CAACL,GAAG,CAAC;EAClC,IAAII,QAAQ,EAAE;IACZA,QAAQ,CAACG,WAAW,GAAGG,KAAK;IAC5BN,QAAQ,CAACI,YAAY,GAAGG,MAAM;EAChC;AACF;AAEA,OAAO,SAASC,cAAcA,CAACZ,GAAW,EAA2B;EACnE,OAAOH,QAAQ,CAACQ,GAAG,CAACL,GAAG,CAAC;AAC1B;AAEA,OAAO,SAASa,gBAAgBA,CAACb,GAAW,EAAE;EAC5CH,QAAQ,CAACiB,MAAM,CAACd,GAAG,CAAC;AACtB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["codegenNativeComponent"],"sourceRoot":"../../../src","sources":["specs/NativeMorphCardSource.ts"],"mappings":";;AAMA,OAAOA,sBAAsB,MAAM,yDAAyD;
|
|
1
|
+
{"version":3,"names":["codegenNativeComponent"],"sourceRoot":"../../../src","sources":["specs/NativeMorphCardSource.ts"],"mappings":";;AAMA,OAAOA,sBAAsB,MAAM,yDAAyD;AAc5F,eAAeA,sBAAsB,CACnC,oBACF,CAAC","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type DimensionValue } from 'react-native';
|
|
3
|
-
export type
|
|
3
|
+
export type ResizeMode = 'cover' | 'contain' | 'stretch';
|
|
4
4
|
export interface MorphCardSourceProps {
|
|
5
5
|
ref?: React.Ref<any>;
|
|
6
6
|
duration?: number;
|
|
@@ -9,12 +9,16 @@ export interface MorphCardSourceProps {
|
|
|
9
9
|
height?: DimensionValue;
|
|
10
10
|
borderRadius?: number;
|
|
11
11
|
backgroundColor?: string;
|
|
12
|
-
/** How the snapshot scales in no-wrapper mode (no backgroundColor). Default: '
|
|
13
|
-
|
|
12
|
+
/** How the snapshot scales in no-wrapper mode (no backgroundColor). Default: 'cover' */
|
|
13
|
+
resizeMode?: ResizeMode;
|
|
14
|
+
/** Number of full 360° rotations during expand animation. Default: 0 */
|
|
15
|
+
rotations?: number;
|
|
16
|
+
/** Final rotation angle in degrees after expand. Default: 0 */
|
|
17
|
+
rotationEndAngle?: number;
|
|
14
18
|
onPress?: (sourceTag: number) => void;
|
|
15
19
|
children: React.ReactNode;
|
|
16
20
|
}
|
|
17
|
-
export declare const MorphCardSource: ({ children, duration, expandDuration, width, height, borderRadius, backgroundColor,
|
|
21
|
+
export declare const MorphCardSource: ({ children, duration, expandDuration, width, height, borderRadius, backgroundColor, resizeMode, rotations, rotationEndAngle, onPress, ref, }: MorphCardSourceProps) => React.JSX.Element;
|
|
18
22
|
/**
|
|
19
23
|
* Get the native view tag from a ref. Useful for passing sourceTag
|
|
20
24
|
* to the detail screen via navigation params.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MorphCardSource.d.ts","sourceRoot":"","sources":["../../../src/MorphCardSource.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"MorphCardSource.d.ts","sourceRoot":"","sources":["../../../src/MorphCardSource.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,cAAc,EAIpB,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wFAAwF;IACxF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,GAAI,8IAa7B,oBAAoB,sBAuDtB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI,CAEvE;AAED;;;;;GAKG;AACH,wBAAsB,WAAW,CAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,EAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAC9B,OAAO,CAAC,OAAO,CAAC,CAKlB;AAED;;;;GAIG;AACH,wBAAsB,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEvE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MorphCardTarget.d.ts","sourceRoot":"","sources":["../../../src/MorphCardTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"MorphCardTarget.d.ts","sourceRoot":"","sources":["../../../src/MorphCardTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,oBAAoB;IACnC,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oFAAoF;IACpF,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gGAAgG;IAChG,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,GAAI,gGAQ7B,oBAAoB,sBA0GtB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface SourceEntry {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
backgroundColor?: string;
|
|
5
|
+
scaleMode?: string;
|
|
6
|
+
layoutWidth?: number;
|
|
7
|
+
layoutHeight?: number;
|
|
8
|
+
}
|
|
9
|
+
export declare function setSourceEntry(tag: number, children: ReactNode, backgroundColor?: string, scaleMode?: string): void;
|
|
10
|
+
export declare function setSourceLayout(tag: number, width: number, height: number): void;
|
|
11
|
+
export declare function getSourceEntry(tag: number): SourceEntry | undefined;
|
|
12
|
+
export declare function clearSourceEntry(tag: number): void;
|
|
13
|
+
//# sourceMappingURL=MorphChildrenRegistry.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MorphChildrenRegistry.d.ts","sourceRoot":"","sources":["../../../src/MorphChildrenRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,SAAS,EACnB,eAAe,CAAC,EAAE,MAAM,EACxB,SAAS,CAAC,EAAE,MAAM,QAUnB;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAMzE;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAEnE;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,QAE3C"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { MorphCardSource, morphExpand, morphCollapse, getViewTag, } from './MorphCardSource';
|
|
2
|
-
export type { MorphCardSourceProps,
|
|
2
|
+
export type { MorphCardSourceProps, ResizeMode } from './MorphCardSource';
|
|
3
3
|
export { MorphCardTarget } from './MorphCardTarget';
|
|
4
4
|
export type { MorphCardTargetProps } from './MorphCardTarget';
|
|
5
5
|
export { useMorphTarget } from './useMorphTarget';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,WAAW,EACX,aAAa,EACb,UAAU,GACX,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,WAAW,EACX,aAAa,EACb,UAAU,GACX,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -8,6 +8,8 @@ export interface NativeMorphCardSourceProps extends ViewProps {
|
|
|
8
8
|
expandDuration?: Double;
|
|
9
9
|
scaleMode?: WithDefault<'aspectFill' | 'aspectFit' | 'stretch', 'aspectFill'>;
|
|
10
10
|
cardBorderRadius?: Double;
|
|
11
|
+
rotations?: Double;
|
|
12
|
+
rotationEndAngle?: Double;
|
|
11
13
|
}
|
|
12
14
|
declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeMorphCardSourceProps>;
|
|
13
15
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeMorphCardSource.d.ts","sourceRoot":"","sources":["../../../../src/specs/NativeMorphCardSource.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,kBAAkB,EAClB,MAAM,EACN,WAAW,EACZ,MAAM,2CAA2C,CAAC;AAGnD,MAAM,WAAW,0BAA2B,SAAQ,SAAS;IAC3D,YAAY,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,WAAW,CAAC,YAAY,GAAG,WAAW,GAAG,SAAS,EAAE,YAAY,CAAC,CAAC;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;;AAED,wBAEE"}
|
|
1
|
+
{"version":3,"file":"NativeMorphCardSource.d.ts","sourceRoot":"","sources":["../../../../src/specs/NativeMorphCardSource.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,kBAAkB,EAClB,MAAM,EACN,WAAW,EACZ,MAAM,2CAA2C,CAAC;AAGnD,MAAM,WAAW,0BAA2B,SAAQ,SAAS;IAC3D,YAAY,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,WAAW,CAAC,YAAY,GAAG,WAAW,GAAG,SAAS,EAAE,YAAY,CAAC,CAAC;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;;AAED,wBAEE"}
|
package/package.json
CHANGED
package/src/MorphCardSource.tsx
CHANGED
|
@@ -3,15 +3,17 @@ import {
|
|
|
3
3
|
Pressable,
|
|
4
4
|
type ViewStyle,
|
|
5
5
|
type DimensionValue,
|
|
6
|
+
type LayoutChangeEvent,
|
|
6
7
|
View,
|
|
7
8
|
findNodeHandle,
|
|
8
9
|
} from 'react-native';
|
|
9
10
|
import NativeMorphCardModule from './specs/NativeMorphCardModule';
|
|
10
11
|
import NativeSourceViewSpec from './specs/NativeMorphCardSource';
|
|
12
|
+
import { setSourceEntry, setSourceLayout, clearSourceEntry } from './MorphChildrenRegistry';
|
|
11
13
|
|
|
12
14
|
const NativeSourceView = NativeSourceViewSpec ?? View;
|
|
13
15
|
|
|
14
|
-
export type
|
|
16
|
+
export type ResizeMode = 'cover' | 'contain' | 'stretch';
|
|
15
17
|
|
|
16
18
|
export interface MorphCardSourceProps {
|
|
17
19
|
ref?: React.Ref<any>;
|
|
@@ -21,8 +23,12 @@ export interface MorphCardSourceProps {
|
|
|
21
23
|
height?: DimensionValue;
|
|
22
24
|
borderRadius?: number;
|
|
23
25
|
backgroundColor?: string;
|
|
24
|
-
/** How the snapshot scales in no-wrapper mode (no backgroundColor). Default: '
|
|
25
|
-
|
|
26
|
+
/** How the snapshot scales in no-wrapper mode (no backgroundColor). Default: 'cover' */
|
|
27
|
+
resizeMode?: ResizeMode;
|
|
28
|
+
/** Number of full 360° rotations during expand animation. Default: 0 */
|
|
29
|
+
rotations?: number;
|
|
30
|
+
/** Final rotation angle in degrees after expand. Default: 0 */
|
|
31
|
+
rotationEndAngle?: number;
|
|
26
32
|
onPress?: (sourceTag: number) => void;
|
|
27
33
|
children: React.ReactNode;
|
|
28
34
|
}
|
|
@@ -35,13 +41,26 @@ export const MorphCardSource = ({
|
|
|
35
41
|
height,
|
|
36
42
|
borderRadius,
|
|
37
43
|
backgroundColor,
|
|
38
|
-
|
|
44
|
+
resizeMode,
|
|
45
|
+
rotations,
|
|
46
|
+
rotationEndAngle,
|
|
39
47
|
onPress,
|
|
40
48
|
ref,
|
|
41
49
|
}: MorphCardSourceProps) => {
|
|
42
50
|
const nativeRef = React.useRef<any>(null);
|
|
43
51
|
React.useImperativeHandle(ref, () => nativeRef.current);
|
|
44
52
|
|
|
53
|
+
// Store children in shared registry so MorphCardTarget can clone them
|
|
54
|
+
React.useEffect(() => {
|
|
55
|
+
const tag = findNodeHandle(nativeRef.current);
|
|
56
|
+
if (tag != null) {
|
|
57
|
+
setSourceEntry(tag, children, backgroundColor, resizeMode);
|
|
58
|
+
}
|
|
59
|
+
return () => {
|
|
60
|
+
if (tag != null) clearSourceEntry(tag);
|
|
61
|
+
};
|
|
62
|
+
}, [children, backgroundColor, resizeMode]);
|
|
63
|
+
|
|
45
64
|
const style: ViewStyle = {};
|
|
46
65
|
if (width != null) style.width = width as ViewStyle['width'];
|
|
47
66
|
if (height != null) style.height = height as ViewStyle['height'];
|
|
@@ -50,6 +69,15 @@ export const MorphCardSource = ({
|
|
|
50
69
|
style.overflow = 'hidden';
|
|
51
70
|
}
|
|
52
71
|
if (backgroundColor != null) style.backgroundColor = backgroundColor;
|
|
72
|
+
|
|
73
|
+
const handleLayout = React.useCallback((e: LayoutChangeEvent) => {
|
|
74
|
+
const tag = findNodeHandle(nativeRef.current);
|
|
75
|
+
if (tag != null) {
|
|
76
|
+
const { width: lw, height: lh } = e.nativeEvent.layout;
|
|
77
|
+
setSourceLayout(tag, lw, lh);
|
|
78
|
+
}
|
|
79
|
+
}, []);
|
|
80
|
+
|
|
53
81
|
const handlePress = React.useCallback(() => {
|
|
54
82
|
if (!onPress) return;
|
|
55
83
|
const tag = findNodeHandle(nativeRef.current);
|
|
@@ -63,7 +91,7 @@ export const MorphCardSource = ({
|
|
|
63
91
|
}, [onPress]);
|
|
64
92
|
|
|
65
93
|
const content = (
|
|
66
|
-
<NativeSourceView ref={nativeRef} duration={duration} expandDuration={expandDuration} scaleMode={
|
|
94
|
+
<NativeSourceView ref={nativeRef} duration={duration} expandDuration={expandDuration} scaleMode={resizeMode === 'contain' ? 'aspectFit' : resizeMode === 'stretch' ? 'stretch' : 'aspectFill'} cardBorderRadius={borderRadius} rotations={rotations} rotationEndAngle={rotationEndAngle} style={style} onLayout={handleLayout}>
|
|
67
95
|
{children}
|
|
68
96
|
</NativeSourceView>
|
|
69
97
|
);
|
package/src/MorphCardTarget.tsx
CHANGED
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
} from 'react-native';
|
|
9
9
|
import NativeMorphCardModule from './specs/NativeMorphCardModule';
|
|
10
10
|
import NativeTargetViewSpec from './specs/NativeMorphCardTarget';
|
|
11
|
+
import { getSourceEntry } from './MorphChildrenRegistry';
|
|
11
12
|
|
|
12
13
|
const NativeTargetView = NativeTargetViewSpec ?? View;
|
|
13
14
|
|
|
@@ -77,23 +78,42 @@ export const MorphCardTarget = ({
|
|
|
77
78
|
lh,
|
|
78
79
|
borderRadius != null ? borderRadius : -1,
|
|
79
80
|
contentOffsetY ?? 0,
|
|
80
|
-
contentCentered ?? false
|
|
81
|
+
contentCentered ?? false,
|
|
81
82
|
);
|
|
82
83
|
NativeMorphCardModule.expand(sourceTag, targetTag);
|
|
83
84
|
},
|
|
84
|
-
[sourceTag, borderRadius, contentOffsetY, contentCentered]
|
|
85
|
+
[sourceTag, borderRadius, contentOffsetY, contentCentered],
|
|
85
86
|
);
|
|
86
87
|
|
|
87
|
-
const
|
|
88
|
+
const sourceEntry = getSourceEntry(sourceTag);
|
|
89
|
+
|
|
90
|
+
const containerStyle: ViewStyle = {
|
|
91
|
+
overflow: 'hidden',
|
|
92
|
+
};
|
|
93
|
+
if (sourceEntry?.backgroundColor) {
|
|
94
|
+
containerStyle.backgroundColor = sourceEntry.backgroundColor;
|
|
95
|
+
}
|
|
96
|
+
if (contentCentered) {
|
|
97
|
+
containerStyle.justifyContent = 'center';
|
|
98
|
+
containerStyle.alignItems = 'center';
|
|
99
|
+
}
|
|
100
|
+
if (contentOffsetY) {
|
|
101
|
+
containerStyle.paddingTop = contentOffsetY;
|
|
102
|
+
}
|
|
103
|
+
|
|
88
104
|
if (width != null) {
|
|
89
|
-
|
|
105
|
+
containerStyle.width = width;
|
|
90
106
|
} else if (sourceSize) {
|
|
91
|
-
|
|
107
|
+
containerStyle.width = sourceSize.width;
|
|
92
108
|
}
|
|
93
109
|
if (height != null) {
|
|
94
|
-
|
|
110
|
+
containerStyle.height = height;
|
|
95
111
|
} else if (sourceSize) {
|
|
96
|
-
|
|
112
|
+
containerStyle.height = sourceSize.height;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
if (borderRadius) {
|
|
116
|
+
containerStyle.borderRadius = borderRadius;
|
|
97
117
|
}
|
|
98
118
|
|
|
99
119
|
return (
|
|
@@ -104,8 +124,23 @@ export const MorphCardTarget = ({
|
|
|
104
124
|
targetWidth={0}
|
|
105
125
|
targetHeight={0}
|
|
106
126
|
targetBorderRadius={borderRadius != null ? borderRadius : -1}
|
|
107
|
-
style={
|
|
127
|
+
style={containerStyle}
|
|
108
128
|
onLayout={handleLayout}
|
|
109
|
-
|
|
129
|
+
>
|
|
130
|
+
{sourceEntry &&
|
|
131
|
+
!sourceEntry.scaleMode &&
|
|
132
|
+
(sourceEntry.backgroundColor && sourceEntry.layoutWidth ? (
|
|
133
|
+
<View
|
|
134
|
+
style={{
|
|
135
|
+
width: sourceEntry.layoutWidth,
|
|
136
|
+
height: sourceEntry.layoutHeight,
|
|
137
|
+
}}
|
|
138
|
+
>
|
|
139
|
+
{sourceEntry.children}
|
|
140
|
+
</View>
|
|
141
|
+
) : (
|
|
142
|
+
sourceEntry.children
|
|
143
|
+
))}
|
|
144
|
+
</NativeTargetView>
|
|
110
145
|
);
|
|
111
146
|
};
|