@draftbit/core 47.8.2 → 47.8.3-28183.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.8.2",
+  "version": "47.8.3-028183.2+0281830",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "47.6.0",
+    "@draftbit/types": "^47.8.3-028183.2+0281830",
     "@expo/vector-icons": "^13.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
@@ -102,5 +102,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "e143732a0723c8dea555c646d5ee88b5dcae7b7b"
+  "gitHead": "02818304a5b734c6094441abb059ea3b806e9a70"
 }

package/src/components/Layout/ZStack.js

@@ -1,6 +1,17 @@
 import React from "react";
 import { View } from "react-native";
-const ZStack = ({ reversed, children, ...rest }) => {
+import { useDeepCompareEffect } from "../../utilities";
+const ZStack = ({ reversed, children, style, ...rest }) => {
+    const [childSizes, setChildSizes] = React.useState(new Map());
+    const [maxChildWidth, setMaxChildWidth] = React.useState();
+    const [maxChildHeight, setMaxChildHeight] = React.useState();
+    const onChildLayout = React.useCallback((index, width, height) => {
+        const size = {
+            width: roundTo3DecimalPoints(width),
+            height: roundTo3DecimalPoints(height),
+        };
+        setChildSizes(new Map(childSizes.set(index, size)));
+    }, [childSizes, setChildSizes]);
     const absoluteChildren = React.useMemo(() => {
         let childrenArray = React.Children.toArray(children);
         if (reversed) {
@@ -10,11 +21,46 @@ const ZStack = ({ reversed, children, ...rest }) => {
             const props = child.props || {};
             return React.cloneElement(child, {
                 ...props,
+                onLayout: (event) => {
+                    var _a;
+                    const layout = event.nativeEvent.layout;
+                    const fullWidth = layout.x + layout.width;
+                    const fullHeight = layout.y + layout.height;
+                    onChildLayout(index, fullWidth, fullHeight);
+                    (_a = props.onLayout) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                },
+                key: index,
                 style: { position: "absolute", zIndex: index + 1, ...props.style },
             }, props.children);
         });
-    }, [children, reversed]);
-    return React.createElement(View, { ...rest }, absoluteChildren);
+    }, [children, reversed, onChildLayout]);
+    React.useEffect(() => {
+        setChildSizes(new Map());
+    }, [absoluteChildren.length]);
+    const childSizeValues = Array.from(childSizes.values());
+    useDeepCompareEffect(() => {
+        let maxWidth = 0;
+        let maxHeight = 0;
+        childSizeValues.forEach(({ width, height }) => {
+            if (width > maxWidth) {
+                maxWidth = width;
+            }
+            if (height > maxHeight) {
+                maxHeight = height;
+            }
+        });
+        setMaxChildWidth(maxWidth);
+        setMaxChildHeight(maxHeight);
+    }, [childSizeValues, setMaxChildWidth, setMaxChildHeight]);
+    return (React.createElement(View, { style: [
+            maxChildWidth && maxChildHeight
+                ? { width: maxChildWidth, height: maxChildHeight }
+                : {},
+            style,
+        ], ...rest }, absoluteChildren));
 };
+function roundTo3DecimalPoints(value) {
+    return Math.round(value * 1000) / 1000;
+}
 export default ZStack;
 //# sourceMappingURL=ZStack.js.map

package/src/components/Layout/ZStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZStack.js","sourceRoot":"","sources":["ZStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAM/C,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACxE,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CACxC,QAAQ,CACe,CAAC;QAE1B,IAAI,QAAQ,EAAE;YACZ,aAAa,GAAG,aAAa,CAAC,OAAO,EAAE,CAAC;SACzC;QAED,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACxC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;YAChC,OAAO,KAAK,CAAC,YAAY,CACvB,KAAK,EACL;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE;aACnE,EACD,KAAK,CAAC,QAAQ,CACf,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,OAAO,oBAAC,IAAI,OAAK,IAAI,IAAG,gBAAgB,CAAQ,CAAC;AACnD,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"ZStack.js","sourceRoot":"","sources":["ZStack.tsx"],"names":[],"mappings":"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"}

package/src/components/Layout/ZStack.tsx

@@ -1,11 +1,39 @@
 import React from "react";
-import { View, ViewProps } from "react-native";
+import { View, ViewProps, LayoutChangeEvent } from "react-native";
+import { useDeepCompareEffect } from "../../utilities";
 
 interface ZStackProps extends ViewProps {
   reversed?: boolean;
 }
 
-const ZStack: React.FC<ZStackProps> = ({ reversed, children, ...rest }) => {
+interface ChildSize {
+  width: number;
+  height: number;
+}
+
+const ZStack: React.FC<ZStackProps> = ({
+  reversed,
+  children,
+  style,
+  ...rest
+}) => {
+  const [childSizes, setChildSizes] = React.useState<Map<number, ChildSize>>(
+    new Map()
+  );
+  const [maxChildWidth, setMaxChildWidth] = React.useState<number>();
+  const [maxChildHeight, setMaxChildHeight] = React.useState<number>();
+
+  const onChildLayout = React.useCallback(
+    (index: number, width: number, height: number) => {
+      const size: ChildSize = {
+        width: roundTo3DecimalPoints(width), // rounded to prevent infinte useEffect loop caused by floating point precision issues
+        height: roundTo3DecimalPoints(height),
+      };
+      setChildSizes(new Map(childSizes.set(index, size)));
+    },
+    [childSizes, setChildSizes]
+  );
+
   const absoluteChildren = React.useMemo(() => {
     let childrenArray = React.Children.toArray(
       children
@@ -21,14 +49,63 @@ const ZStack: React.FC<ZStackProps> = ({ reversed, children, ...rest }) => {
         child,
         {
           ...props,
+          onLayout: (event: LayoutChangeEvent) => {
+            const layout = event.nativeEvent.layout;
+
+            const fullWidth = layout.x + layout.width;
+            const fullHeight = layout.y + layout.height;
+            onChildLayout(index, fullWidth, fullHeight);
+
+            props.onLayout?.(event);
+          },
+          key: index,
           style: { position: "absolute", zIndex: index + 1, ...props.style },
         },
         props.children
       );
     });
-  }, [children, reversed]);
+  }, [children, reversed, onChildLayout]);
+
+  React.useEffect(() => {
+    setChildSizes(new Map());
+  }, [absoluteChildren.length]);
+
+  const childSizeValues = Array.from(childSizes.values());
+
+  useDeepCompareEffect(() => {
+    let maxWidth = 0;
+    let maxHeight = 0;
+
+    childSizeValues.forEach(({ width, height }) => {
+      if (width > maxWidth) {
+        maxWidth = width;
+      }
+      if (height > maxHeight) {
+        maxHeight = height;
+      }
+    });
 
-  return <View {...rest}>{absoluteChildren}</View>;
+    setMaxChildWidth(maxWidth);
+    setMaxChildHeight(maxHeight);
+  }, [childSizeValues, setMaxChildWidth, setMaxChildHeight]);
+
+  return (
+    <View
+      style={[
+        maxChildWidth && maxChildHeight
+          ? { width: maxChildWidth, height: maxChildHeight }
+          : {},
+        style,
+      ]}
+      {...rest}
+    >
+      {absoluteChildren}
+    </View>
+  );
 };
 
+function roundTo3DecimalPoints(value: number) {
+  return Math.round(value * 1000) / 1000;
+}
+
 export default ZStack;