@draftbit/core 48.5.3-75516c.2 → 48.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "48.5.3-75516c.2+75516c5",
+  "version": "48.5.3",
   "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": "^48.5.3-75516c.2+75516c5",
+    "@draftbit/types": "48.3.0",
     "@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": "75516c54592806dc2d163a47263d9cd23995f23b"
+  "gitHead": "8d7f3c8dc6dd4e5b654b80a90073c439eb538835"
 }

package/src/components/Layout/ZStack.js

@@ -1,6 +1,27 @@
 import React from "react";
 import { View } from "react-native";
-const ZStack = ({ reversed, children, ...rest }) => {
+const ZStack = ({ reversed, children, style, ...rest }) => {
+    const childSizes = React.useRef(new Map());
+    const [maxChildWidth, setMaxChildWidth] = React.useState();
+    const [maxChildHeight, setMaxChildHeight] = React.useState();
+    const onChildLayout = React.useCallback((index, width, height) => {
+        childSizes.current.set(index, {
+            width,
+            height,
+        });
+        let maxWidth = 0;
+        let maxHeight = 0;
+        for (const { width, height } of childSizes.current.values()) {
+            if (width > maxWidth) {
+                maxWidth = width;
+            }
+            if (height > maxHeight) {
+                maxHeight = height;
+            }
+        }
+        setMaxChildWidth(maxWidth);
+        setMaxChildHeight(maxHeight);
+    }, [setMaxChildWidth, setMaxChildHeight]);
     const absoluteChildren = React.useMemo(() => {
         let childrenArray = React.Children.toArray(children);
         if (reversed) {
@@ -10,11 +31,28 @@ 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(() => {
+        childSizes.current.clear();
+    }, [absoluteChildren.length]);
+    return (React.createElement(View, { style: [
+            maxChildWidth && maxChildHeight
+                ? { width: maxChildWidth, height: maxChildHeight }
+                : {},
+            style,
+        ], ...rest }, absoluteChildren));
 };
 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,50 @@
 import React from "react";
-import { View, ViewProps } from "react-native";
+import { View, ViewProps, LayoutChangeEvent } from "react-native";
 
 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 = React.useRef(new Map<number, ChildSize>());
+  const [maxChildWidth, setMaxChildWidth] = React.useState<number>();
+  const [maxChildHeight, setMaxChildHeight] = React.useState<number>();
+
+  const onChildLayout = React.useCallback(
+    (index: number, width: number, height: number) => {
+      childSizes.current.set(index, {
+        width,
+        height,
+      });
+
+      let maxWidth = 0;
+      let maxHeight = 0;
+
+      for (const { width, height } of childSizes.current.values()) {
+        if (width > maxWidth) {
+          maxWidth = width;
+        }
+        if (height > maxHeight) {
+          maxHeight = height;
+        }
+      }
+
+      setMaxChildWidth(maxWidth);
+      setMaxChildHeight(maxHeight);
+    },
+    [setMaxChildWidth, setMaxChildHeight]
+  );
+
   const absoluteChildren = React.useMemo(() => {
     let childrenArray = React.Children.toArray(
       children
@@ -21,14 +60,40 @@ 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(() => {
+    childSizes.current.clear();
+  }, [absoluteChildren.length]);
 
-  return <View {...rest}>{absoluteChildren}</View>;
+  return (
+    <View
+      style={[
+        maxChildWidth && maxChildHeight
+          ? { width: maxChildWidth, height: maxChildHeight }
+          : {},
+        style,
+      ]}
+      {...rest}
+    >
+      {absoluteChildren}
+    </View>
+  );
 };
 
 export default ZStack;

package/src/components/YoutubePlayer/YoutubePlayer.native.js

@@ -4,7 +4,7 @@ import { extractStyles } from "../../utilities";
 const YoutubePlayer = ({ videoId, playlist, autoplay = false, style, }) => {
     const { viewStyles } = extractStyles(style);
     const defaultVideoId = "nwMUpDESXrI";
-    return (React.createElement(YoutubePlayerIFrame, { width: viewStyles.width, height: viewStyles.height, play: autoplay, videoId: !videoId && !playlist ? defaultVideoId : videoId, playList: playlist, webViewStyle: viewStyles }));
+    return (React.createElement(YoutubePlayerIFrame, { width: viewStyles.width, height: viewStyles.height, play: autoplay, videoId: !videoId && !playlist ? defaultVideoId : videoId, playList: playlist, webViewStyle: viewStyles, webViewProps: { androidLayerType: "software" } }));
 };
 export default YoutubePlayer;
 //# sourceMappingURL=YoutubePlayer.native.js.map

package/src/components/YoutubePlayer/YoutubePlayer.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"YoutubePlayer.native.js","sourceRoot":"","sources":["YoutubePlayer.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,mBAAmB,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,MAAM,aAAa,GAAiC,CAAC,EACnD,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GACN,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,cAAc,GAAG,aAAa,CAAC;IAErC,OAAO,CACL,oBAAC,mBAAmB,IAClB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,EACzD,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,UAAU,GACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"YoutubePlayer.native.js","sourceRoot":"","sources":["YoutubePlayer.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,mBAAmB,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,MAAM,aAAa,GAAiC,CAAC,EACnD,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GACN,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,cAAc,GAAG,aAAa,CAAC;IAErC,OAAO,CACL,oBAAC,mBAAmB,IAClB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,EACzD,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAC9C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/src/components/YoutubePlayer/YoutubePlayer.native.tsx

@@ -20,6 +20,7 @@ const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
       videoId={!videoId && !playlist ? defaultVideoId : videoId}
       playList={playlist}
       webViewStyle={viewStyles}
+      webViewProps={{ androidLayerType: "software" }} //Addresses a webview bug causing crashes on android: https://stackoverflow.com/a/71642894/8805150
     />
   );
 };