@draftbit/core 48.5.3-2f0211.2 → 48.5.3-63926a.2
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/lib/commonjs/components/Layout/ZStack.js +1 -1
- package/lib/typescript/src/components/Layout/ZStack.js +19 -27
- package/lib/typescript/src/components/Layout/ZStack.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/components/Layout/ZStack.js +19 -27
- package/src/components/Layout/ZStack.js.map +1 -1
- package/src/components/Layout/ZStack.tsx +22 -34
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "48.5.3-
|
|
3
|
+
"version": "48.5.3-63926a.2+63926ae",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"types": "lib/typescript/src/index.d.ts",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "^48.5.3-
|
|
44
|
+
"@draftbit/types": "^48.5.3-63926a.2+63926ae",
|
|
45
45
|
"@expo/vector-icons": "^13.0.0",
|
|
46
46
|
"@material-ui/core": "^4.11.0",
|
|
47
47
|
"@material-ui/pickers": "^3.2.10",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
],
|
|
103
103
|
"testEnvironment": "node"
|
|
104
104
|
},
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "63926ae61f6fcdcde011feb624f40cd0e0394fea"
|
|
106
106
|
}
|
|
@@ -1,17 +1,27 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { View } from "react-native";
|
|
3
|
-
import { useDeepCompareEffect } from "../../utilities";
|
|
4
3
|
const ZStack = ({ reversed, children, style, ...rest }) => {
|
|
5
|
-
const
|
|
4
|
+
const childSizes = React.useRef(new Map());
|
|
6
5
|
const [maxChildWidth, setMaxChildWidth] = React.useState();
|
|
7
6
|
const [maxChildHeight, setMaxChildHeight] = React.useState();
|
|
8
7
|
const onChildLayout = React.useCallback((index, width, height) => {
|
|
9
|
-
|
|
10
|
-
width
|
|
11
|
-
height
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
childSizes.current.set(index, {
|
|
9
|
+
width,
|
|
10
|
+
height,
|
|
11
|
+
});
|
|
12
|
+
let maxWidth = 0;
|
|
13
|
+
let maxHeight = 0;
|
|
14
|
+
for (const { width, height } of childSizes.current.values()) {
|
|
15
|
+
if (width > maxWidth) {
|
|
16
|
+
maxWidth = width;
|
|
17
|
+
}
|
|
18
|
+
if (height > maxHeight) {
|
|
19
|
+
maxHeight = height;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
setMaxChildWidth(maxWidth);
|
|
23
|
+
setMaxChildHeight(maxHeight);
|
|
24
|
+
}, [setMaxChildWidth, setMaxChildHeight]);
|
|
15
25
|
const absoluteChildren = React.useMemo(() => {
|
|
16
26
|
let childrenArray = React.Children.toArray(children);
|
|
17
27
|
if (reversed) {
|
|
@@ -35,23 +45,8 @@ const ZStack = ({ reversed, children, style, ...rest }) => {
|
|
|
35
45
|
});
|
|
36
46
|
}, [children, reversed, onChildLayout]);
|
|
37
47
|
React.useEffect(() => {
|
|
38
|
-
|
|
48
|
+
childSizes.current.clear();
|
|
39
49
|
}, [absoluteChildren.length]);
|
|
40
|
-
const childSizeValues = Array.from(childSizes.values());
|
|
41
|
-
useDeepCompareEffect(() => {
|
|
42
|
-
let maxWidth = 0;
|
|
43
|
-
let maxHeight = 0;
|
|
44
|
-
childSizeValues.forEach(({ width, height }) => {
|
|
45
|
-
if (width > maxWidth) {
|
|
46
|
-
maxWidth = width;
|
|
47
|
-
}
|
|
48
|
-
if (height > maxHeight) {
|
|
49
|
-
maxHeight = height;
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
setMaxChildWidth(maxWidth);
|
|
53
|
-
setMaxChildHeight(maxHeight);
|
|
54
|
-
}, [childSizeValues, setMaxChildWidth, setMaxChildHeight]);
|
|
55
50
|
return (React.createElement(View, { style: [
|
|
56
51
|
maxChildWidth && maxChildHeight
|
|
57
52
|
? { width: maxChildWidth, height: maxChildHeight }
|
|
@@ -59,8 +54,5 @@ const ZStack = ({ reversed, children, style, ...rest }) => {
|
|
|
59
54
|
style,
|
|
60
55
|
], ...rest }, absoluteChildren));
|
|
61
56
|
};
|
|
62
|
-
function roundTo3DecimalPoints(value) {
|
|
63
|
-
return Math.round(value * 1000) / 1000;
|
|
64
|
-
}
|
|
65
57
|
export default ZStack;
|
|
66
58
|
//# sourceMappingURL=ZStack.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ZStack.js","sourceRoot":"","sources":["ZStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAgC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ZStack.js","sourceRoot":"","sources":["ZStack.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { View, ViewProps, LayoutChangeEvent } from "react-native";
|
|
3
|
-
import { useDeepCompareEffect } from "../../utilities";
|
|
4
3
|
|
|
5
4
|
interface ZStackProps extends ViewProps {
|
|
6
5
|
reversed?: boolean;
|
|
@@ -17,21 +16,33 @@ const ZStack: React.FC<ZStackProps> = ({
|
|
|
17
16
|
style,
|
|
18
17
|
...rest
|
|
19
18
|
}) => {
|
|
20
|
-
const
|
|
21
|
-
new Map()
|
|
22
|
-
);
|
|
19
|
+
const childSizes = React.useRef(new Map<number, ChildSize>());
|
|
23
20
|
const [maxChildWidth, setMaxChildWidth] = React.useState<number>();
|
|
24
21
|
const [maxChildHeight, setMaxChildHeight] = React.useState<number>();
|
|
25
22
|
|
|
26
23
|
const onChildLayout = React.useCallback(
|
|
27
24
|
(index: number, width: number, height: number) => {
|
|
28
|
-
|
|
29
|
-
width
|
|
30
|
-
height
|
|
31
|
-
};
|
|
32
|
-
|
|
25
|
+
childSizes.current.set(index, {
|
|
26
|
+
width,
|
|
27
|
+
height,
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
let maxWidth = 0;
|
|
31
|
+
let maxHeight = 0;
|
|
32
|
+
|
|
33
|
+
for (const { width, height } of childSizes.current.values()) {
|
|
34
|
+
if (width > maxWidth) {
|
|
35
|
+
maxWidth = width;
|
|
36
|
+
}
|
|
37
|
+
if (height > maxHeight) {
|
|
38
|
+
maxHeight = height;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
setMaxChildWidth(maxWidth);
|
|
43
|
+
setMaxChildHeight(maxHeight);
|
|
33
44
|
},
|
|
34
|
-
[
|
|
45
|
+
[setMaxChildWidth, setMaxChildHeight]
|
|
35
46
|
);
|
|
36
47
|
|
|
37
48
|
const absoluteChildren = React.useMemo(() => {
|
|
@@ -67,28 +78,9 @@ const ZStack: React.FC<ZStackProps> = ({
|
|
|
67
78
|
}, [children, reversed, onChildLayout]);
|
|
68
79
|
|
|
69
80
|
React.useEffect(() => {
|
|
70
|
-
|
|
81
|
+
childSizes.current.clear();
|
|
71
82
|
}, [absoluteChildren.length]);
|
|
72
83
|
|
|
73
|
-
const childSizeValues = Array.from(childSizes.values());
|
|
74
|
-
|
|
75
|
-
useDeepCompareEffect(() => {
|
|
76
|
-
let maxWidth = 0;
|
|
77
|
-
let maxHeight = 0;
|
|
78
|
-
|
|
79
|
-
childSizeValues.forEach(({ width, height }) => {
|
|
80
|
-
if (width > maxWidth) {
|
|
81
|
-
maxWidth = width;
|
|
82
|
-
}
|
|
83
|
-
if (height > maxHeight) {
|
|
84
|
-
maxHeight = height;
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
setMaxChildWidth(maxWidth);
|
|
89
|
-
setMaxChildHeight(maxHeight);
|
|
90
|
-
}, [childSizeValues, setMaxChildWidth, setMaxChildHeight]);
|
|
91
|
-
|
|
92
84
|
return (
|
|
93
85
|
<View
|
|
94
86
|
style={[
|
|
@@ -104,8 +96,4 @@ const ZStack: React.FC<ZStackProps> = ({
|
|
|
104
96
|
);
|
|
105
97
|
};
|
|
106
98
|
|
|
107
|
-
function roundTo3DecimalPoints(value: number) {
|
|
108
|
-
return Math.round(value * 1000) / 1000;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
99
|
export default ZStack;
|