@draftbit/core 50.6.4-d8eff0.2 → 50.6.4-e0ee73.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "50.6.4-d8eff0.2+d8eff0f",
+  "version": "50.6.4-e0ee73.2+e0ee730",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -42,7 +42,7 @@
     "@date-io/date-fns": "^1.3.13",
     "@dotlottie/react-player": "1.6.1",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/theme": "^50.6.4-d8eff0.2+d8eff0f",
+    "@draftbit/theme": "^50.6.4-e0ee73.2+e0ee730",
     "@expo/vector-icons": "^14.0.0",
     "@gorhom/bottom-sheet": "5.0.0-alpha.7",
     "@lottiefiles/react-lottie-player": "3.5.3",
@@ -123,5 +123,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "d8eff0f36889ae8e9532c4017cd46ca5a2cec401"
+  "gitHead": "e0ee7302ce74320ee32ee93fafe04c2eb5fa2258"
 }

package/src/components/ExpoImage.js

@@ -1,31 +1,6 @@
 import React from "react";
-import { StyleSheet } from "react-native";
 import { Image, } from "expo-image";
 import Config from "./Config";
-import AspectRatio from "./AspectRatio";
-const generateDimensions = ({ aspectRatio, width, height, }) => {
-    if (aspectRatio && !width && !height) {
-        return {
-            aspectRatio,
-            width: "100%",
-        };
-    }
-    if (aspectRatio && height) {
-        return {
-            aspectRatio,
-            height,
-            width: aspectRatio * height,
-        };
-    }
-    if (aspectRatio && width) {
-        return {
-            aspectRatio,
-            width,
-            height: width / aspectRatio,
-        };
-    }
-    return { width, height };
-};
 const resizeModeToContentFit = (resizeMode) => {
     var _a;
     const mapping = {
@@ -37,28 +12,17 @@ const resizeModeToContentFit = (resizeMode) => {
     };
     return (_a = mapping[resizeMode]) !== null && _a !== void 0 ? _a : "cover";
 };
-const ExpoImage = ({ source, resizeMode = "cover", style, transition = 300, contentFit = "cover", contentPosition = "center", cachePolicy = "memory-disk", allowDownscaling = true, blurRadius, blurhash, ...props }) => {
-    let imageSource = source === null || source === undefined
-        ? Config.placeholderImageURL
-        : source;
-    const styles = StyleSheet.flatten(style || {});
-    const { aspectRatio, width, height } = generateDimensions(styles);
+const ExpoImage = ({ source, resizeMode = "cover", style, transitionDuration = 300, transitionEffect = "cross-dissolve", transitionTiming = "ease-in-out", contentFit = "cover", contentPosition = "center", cachePolicy = "memory-disk", allowDownscaling = true, blurRadius, blurhash, ...props }) => {
+    const imageSource = source !== null && source !== void 0 ? source : Config.placeholderImageURL;
     const finalContentFit = resizeMode
         ? resizeModeToContentFit(resizeMode)
         : contentFit;
-    if (aspectRatio) {
-        return (React.createElement(AspectRatio, { style: [style, { width, height, aspectRatio }] },
-            React.createElement(Image, { ...props, source: imageSource, contentFit: finalContentFit, placeholder: {
-                    blurhash,
-                }, transition: transition, contentPosition: contentPosition, cachePolicy: cachePolicy, allowDownscaling: allowDownscaling, blurRadius: blurRadius, style: [
-                    style,
-                    {
-                        height: "100%",
-                        width: "100%",
-                    },
-                ] })));
-    }
-    return (React.createElement(Image, { ...props, source: source, contentFit: finalContentFit, placeholder: {
+    const transition = {
+        timing: transitionTiming,
+        duration: transitionDuration,
+        effect: transitionEffect,
+    };
+    return (React.createElement(Image, { ...props, source: imageSource, contentFit: finalContentFit, placeholder: {
             blurhash,
         }, transition: transition, contentPosition: contentPosition, cachePolicy: cachePolicy, allowDownscaling: allowDownscaling, blurRadius: blurRadius, style: style }));
 };

package/src/components/ExpoImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoImage.js","sourceRoot":"","sources":["ExpoImage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ExpoImage.js","sourceRoot":"","sources":["ExpoImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,GAIN,MAAM,YAAY,CAAC;AACpB,OAAO,MAAM,MAAM,UAAU,CAAC;AAqB9B,MAAM,sBAAsB,GAAG,CAC7B,UAAiE,EAChD,EAAE;;IACnB,MAAM,OAAO,GAA+C;QAC1D,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,YAAY;KACZ,CAAC;IACX,OAAO,MAAA,OAAO,CAAC,UAAU,CAAC,mCAAI,OAAO,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,SAAS,GAAiC,CAAC,EAC/C,MAAM,EACN,UAAU,GAAG,OAAO,EACpB,KAAK,EACL,kBAAkB,GAAG,GAAG,EACxB,gBAAgB,GAAG,gBAAgB,EACnC,gBAAgB,GAAG,aAAa,EAChC,UAAU,GAAG,OAAO,EACpB,eAAe,GAAG,QAAQ,EAC1B,WAAW,GAAG,aAAa,EAC3B,gBAAgB,GAAG,IAAI,EACvB,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,MAAM,CAAC,mBAAmB,CAAC;IACzD,MAAM,eAAe,GAAG,UAAU;QAChC,CAAC,CAAC,sBAAsB,CAAC,UAAU,CAAC;QACpC,CAAC,CAAC,UAAU,CAAC;IAEf,MAAM,UAAU,GAAG;QACjB,MAAM,EAAE,gBAAgB;QACxB,QAAQ,EAAE,kBAAkB;QAC5B,MAAM,EAAE,gBAAgB;KACzB,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,OACA,KAAK,EACT,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,eAAe,EAC3B,WAAW,EAAE;YACX,QAAQ;SACT,EACD,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/src/components/ExpoImage.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { StyleSheet, ImageSourcePropType, DimensionValue } from "react-native";
 import {
   Image,
   ImageContentPosition,
@@ -7,29 +6,18 @@ import {
   ImageContentFit,
 } from "expo-image";
 import Config from "./Config";
-import AspectRatio from "./AspectRatio";
-
-type ImageStyleProp = {
-  width?: number;
-  height?: number;
-  aspectRatio?: number;
-};
 
 interface ExtendedImageProps extends ExpoImageProps {
-  transition?:
-    | number
-    | {
-        duration?: number;
-        effect?:
-          | "cross-dissolve"
-          | "flip-from-top"
-          | "flip-from-right"
-          | "flip-from-bottom"
-          | "flip-from-left"
-          | "curl-up"
-          | "curl-down";
-        timing?: "ease-in-out" | "ease-in" | "ease-out" | "linear";
-      };
+  transitionDuration?: number;
+  transitionEffect?:
+    | "cross-dissolve"
+    | "flip-from-top"
+    | "flip-from-right"
+    | "flip-from-bottom"
+    | "flip-from-left"
+    | "curl-up"
+    | "curl-down";
+  transitionTiming?: "ease-in-out" | "ease-in" | "ease-out" | "linear";
   contentFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
   contentPosition?: ImageContentPosition;
   cachePolicy?: "none" | "disk" | "memory" | "memory-disk";
@@ -38,41 +26,6 @@ interface ExtendedImageProps extends ExpoImageProps {
   blurhash?: string;
 }
 
-const generateDimensions = ({
-  aspectRatio,
-  width,
-  height,
-}: ImageStyleProp): {
-  aspectRatio?: number;
-  width?: DimensionValue;
-  height?: DimensionValue;
-} => {
-  if (aspectRatio && !width && !height) {
-    return {
-      aspectRatio,
-      width: "100%",
-    };
-  }
-
-  if (aspectRatio && height) {
-    return {
-      aspectRatio,
-      height,
-      width: aspectRatio * height,
-    };
-  }
-
-  if (aspectRatio && width) {
-    return {
-      aspectRatio,
-      width,
-      height: width / aspectRatio,
-    };
-  }
-
-  return { width, height };
-};
-
 const resizeModeToContentFit = (
   resizeMode: "cover" | "contain" | "stretch" | "repeat" | "center"
 ): ImageContentFit => {
@@ -90,7 +43,9 @@ const ExpoImage: React.FC<ExtendedImageProps> = ({
   source,
   resizeMode = "cover",
   style,
-  transition = 300,
+  transitionDuration = 300,
+  transitionEffect = "cross-dissolve",
+  transitionTiming = "ease-in-out",
   contentFit = "cover",
   contentPosition = "center",
   cachePolicy = "memory-disk",
@@ -99,51 +54,21 @@ const ExpoImage: React.FC<ExtendedImageProps> = ({
   blurhash,
   ...props
 }) => {
-  let imageSource =
-    source === null || source === undefined
-      ? Config.placeholderImageURL
-      : source;
-
-  const styles = StyleSheet.flatten(style || {});
-  const { aspectRatio, width, height } = generateDimensions(
-    styles as ImageStyleProp
-  );
-
+  const imageSource = source ?? Config.placeholderImageURL;
   const finalContentFit = resizeMode
     ? resizeModeToContentFit(resizeMode)
     : contentFit;
 
-  if (aspectRatio) {
-    return (
-      <AspectRatio style={[style, { width, height, aspectRatio }]}>
-        <Image
-          {...props}
-          source={imageSource as ImageSourcePropType}
-          contentFit={finalContentFit}
-          placeholder={{
-            blurhash,
-          }}
-          transition={transition}
-          contentPosition={contentPosition}
-          cachePolicy={cachePolicy}
-          allowDownscaling={allowDownscaling}
-          blurRadius={blurRadius}
-          style={[
-            style,
-            {
-              height: "100%",
-              width: "100%",
-            },
-          ]}
-        />
-      </AspectRatio>
-    );
-  }
+  const transition = {
+    timing: transitionTiming,
+    duration: transitionDuration,
+    effect: transitionEffect,
+  };
 
   return (
     <Image
       {...props}
-      source={source as ImageSourcePropType}
+      source={imageSource}
       contentFit={finalContentFit}
       placeholder={{
         blurhash,