@multiplatform.one/components 6.7.0 → 7.0.0

package/src/images/Image/ImageFrame.tsx

@@ -0,0 +1,288 @@
+import type { ReactNode } from "react";
+import { ImageIcon } from "@phosphor-icons/react";
+import {
+  MIN_PRESS_TARGET,
+  pressTargetHitSlop,
+  pressTargetStyle,
+  stackRadiusProps,
+  useGroupPosition,
+  useResolvedKnobs,
+  type GroupOrientation,
+  type GroupPosition,
+} from "@multiplatform.one/theme";
+import { Image as TamaguiImage, View, isWeb } from "tamagui";
+import { componentColors } from "../../componentColors";
+import { Skeleton } from "../../Skeleton";
+import { isThumbnailSize, thumbnailPx as resolveThumbnailPx } from "./shared";
+import type { ImagePlaceholder, ImageProps } from "./types";
+
+export type ImageStatus = "loading" | "loaded" | "error";
+
+export type ImageFrameProps = {
+  children?: ReactNode;
+  alt: string;
+  fill?: boolean;
+  framed?: boolean;
+  compact?: boolean;
+  groupPosition?: GroupPosition;
+  groupOrientation?: GroupOrientation;
+  thumbnailPx?: number;
+  size?: ImageProps["size"];
+  width?: unknown;
+  height?: unknown;
+  aspectRatio?: unknown;
+  borderRadius?: unknown;
+  objectFit?: string;
+  objectPosition?: string;
+  // Accept the RN/Tamagui `onPress` shape ((event) => void | null | undefined);
+  // the frame only ever calls it with zero args, so a bottom-arg type fits.
+  onPress?: ((...args: never[]) => void) | null;
+  disabled?: boolean;
+  hasSource: boolean;
+  status: ImageStatus;
+  placeholder?: ImagePlaceholder;
+  placeholderSrc?: string;
+  fallback?: ReactNode;
+  [key: string]: unknown;
+};
+
+function glyphSize(px: number): number {
+  return Math.max(14, Math.min(28, Math.round(px * 0.42)));
+}
+
+function DefaultFallback({ px }: { px: number }) {
+  return (
+    <View
+      data-image-fallback=""
+      width="100%"
+      height="100%"
+      minHeight={px}
+      alignItems="center"
+      justifyContent="center"
+      backgroundColor="$color3"
+    >
+      <ImageIcon size={glyphSize(px)} color={componentColors.text.muted} />
+    </View>
+  );
+}
+
+export function ImageFrame({
+  children,
+  alt,
+  fill = false,
+  framed = false,
+  compact = false,
+  groupPosition,
+  groupOrientation = "horizontal",
+  thumbnailPx: thumbnailPxProp,
+  size,
+  width,
+  height,
+  aspectRatio,
+  borderRadius: borderRadiusProp,
+  objectFit,
+  objectPosition: _objectPosition,
+  onPress,
+  disabled = false,
+  hasSource,
+  status,
+  placeholder = "empty",
+  placeholderSrc,
+  fallback,
+  ...props
+}: ImageFrameProps) {
+  const { knobProps, control, disabledState } = useResolvedKnobs({
+    component: "Image",
+    compact,
+  });
+  const ctxPosition = useGroupPosition();
+  const position = groupPosition ?? ctxPosition;
+  const nestedPx = knobProps.nestedControl.px;
+  const thumbnailPx =
+    thumbnailPxProp ??
+    (size != null && (isThumbnailSize(size) || typeof size === "number")
+      ? resolveThumbnailPx(size, nestedPx, compact)
+      : undefined);
+  const hasPress = Boolean(onPress);
+  const interactive = hasPress && !disabled;
+  const visualPx =
+    thumbnailPx ??
+    (typeof width === "number" && typeof height === "number" ? Math.min(width, height) : undefined);
+  const needsHitSlop = hasPress && visualPx != null && visualPx < MIN_PRESS_TARGET;
+  const minTarget = hasPress && visualPx == null ? pressTargetStyle() : undefined;
+
+  const radiusToken = knobProps.borderRadius.borderRadius;
+  const radiusValue = (borderRadiusProp as string | number | undefined) ?? radiusToken;
+  const radiusFragment = position
+    ? stackRadiusProps(position, radiusValue, groupOrientation)
+    : {
+        borderRadius: radiusValue,
+        className: knobProps.borderRadius.className,
+      };
+
+  const heightOnly =
+    typeof height !== "undefined" &&
+    typeof width === "undefined" &&
+    typeof aspectRatio === "undefined" &&
+    thumbnailPx == null &&
+    !fill;
+
+  const square = thumbnailPx != null;
+  const frameWidth = square ? thumbnailPx : width;
+  const frameHeight = square ? thumbnailPx : height;
+  const frameAspect = square ? 1 : aspectRatio;
+  const fallbackPx = visualPx ?? nestedPx;
+
+  const showPlaceholder =
+    status === "loading" && placeholder != null && placeholder !== "empty" && hasSource;
+  const showFallback = status === "error" || !hasSource;
+
+  const handleKeyDown = (e: { key?: string; preventDefault?: () => void }) => {
+    if (!interactive) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      onPress?.();
+    }
+  };
+
+  const pressA11y = hasPress
+    ? isWeb
+      ? {
+          role: "button" as const,
+          tabIndex: disabled ? -1 : 0,
+          "aria-label": alt || undefined,
+          "aria-disabled": disabled || undefined,
+          onKeyDown: handleKeyDown,
+        }
+      : {
+          accessibilityRole: "button" as const,
+          accessibilityLabel: alt || undefined,
+          accessibilityState: { disabled },
+        }
+    : isWeb
+      ? null
+      : { accessible: false };
+
+  const painted = (
+    <View
+      data-image-frame=""
+      data-nested-px={thumbnailPx === nestedPx ? nestedPx : undefined}
+      data-group-position={position}
+      overflow="hidden"
+      position={fill ? "absolute" : "relative"}
+      {...(fill ? { top: 0, left: 0, right: 0, bottom: 0, width: "100%", height: "100%" } : null)}
+      {...(!fill && frameWidth != null ? { width: frameWidth as never } : null)}
+      {...(!fill && frameHeight != null ? { height: frameHeight as never } : null)}
+      {...(!fill && frameAspect != null ? { aspectRatio: frameAspect as never } : null)}
+      {...(heightOnly ? { width: "auto", alignSelf: "flex-start" } : null)}
+      {...radiusFragment}
+      {...(framed
+        ? {
+            backgroundColor: knobProps.surface.backgroundColor,
+            borderColor: knobProps.surface.borderColor,
+            borderWidth: knobProps.surface.borderWidth,
+          }
+        : null)}
+      {...(hasPress
+        ? {
+            cursor: disabled ? "not-allowed" : "pointer",
+            outlineWidth: 0,
+            hoverStyle: interactive
+              ? framed
+                ? control.hoverKnobProps
+                : { opacity: 0.92 }
+              : undefined,
+            pressStyle: interactive
+              ? framed
+                ? control.pressKnobProps
+                : { opacity: 0.85 }
+              : undefined,
+            focusVisibleStyle: interactive ? control.focusVisibleKnobProps : undefined,
+            // onPress rides in loose (zero-or-event) so callers can forward the
+            // RN/Tamagui handler; re-emit it to the View as an event handler.
+            onPress: interactive
+              ? (onPress as ((...args: unknown[]) => void) | undefined)
+              : undefined,
+            ...(!isWeb && needsHitSlop
+              ? { hitSlop: pressTargetHitSlop(visualPx ?? nestedPx) }
+              : null),
+            ...minTarget,
+            ...pressA11y,
+          }
+        : pressA11y)}
+      {...(disabled && hasPress ? disabledState.chromeKnobProps : null)}
+      {...props}
+    >
+      {showFallback ? (
+        (fallback ?? <DefaultFallback px={fallbackPx} />)
+      ) : (
+        <>
+          {children}
+          {showPlaceholder ? (
+            <View position="absolute" top={0} left={0} right={0} bottom={0} pointerEvents="none">
+              {placeholder === "blur" && placeholderSrc ? (
+                <TamaguiImage
+                  src={placeholderSrc}
+                  alt=""
+                  width="100%"
+                  height="100%"
+                  objectFit={(objectFit as never) ?? "cover"}
+                  {...(isWeb ? { style: { filter: "blur(12px)" } } : { blurRadius: 12 })}
+                />
+              ) : placeholder === "blur" || placeholder === "skeleton" ? (
+                <Skeleton width="100%" height="100%" variant="rounded" />
+              ) : (
+                placeholder
+              )}
+            </View>
+          ) : null}
+        </>
+      )}
+    </View>
+  );
+
+  if (isWeb && needsHitSlop) {
+    return (
+      <View
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor="transparent"
+        {...pressTargetStyle()}
+      >
+        {painted}
+      </View>
+    );
+  }
+
+  return painted;
+}
+
+export function mediaFillProps(opts: {
+  fill: boolean;
+  thumbnail: boolean;
+  width?: unknown;
+  height?: unknown;
+  aspectRatio?: unknown;
+  objectFit?: string;
+  objectPosition?: string;
+}): Record<string, unknown> {
+  const constrained =
+    opts.fill ||
+    opts.thumbnail ||
+    (opts.width != null && opts.height != null) ||
+    (opts.width != null && opts.aspectRatio != null) ||
+    (opts.height != null && opts.aspectRatio != null);
+  const heightOnly =
+    opts.height != null &&
+    opts.width == null &&
+    opts.aspectRatio == null &&
+    !opts.fill &&
+    !opts.thumbnail;
+  return {
+    width: constrained ? "100%" : heightOnly ? "auto" : opts.width != null ? "100%" : undefined,
+    height: constrained ? "100%" : heightOnly ? "100%" : undefined,
+    objectFit: opts.objectFit,
+    ...(opts.objectPosition ? { objectPosition: opts.objectPosition } : null),
+    display: "block",
+  };
+}

package/src/images/Image/index.native.tsx

@@ -1,24 +1,47 @@
 import type { UnionableNumber, UnionableString, Variable } from "@tamagui/core";
-import { useCallback, useMemo } from "react";
-import type { ImageURISource } from "react-native";
-import { View, type ViewProps } from "tamagui";
-import { useStyle } from "tamagui";
-import { Image as TamaguiImage } from "tamagui";
-import { useAssets } from "../../hooks/useAssets";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Image as TamaguiImage, type ViewProps, useStyle } from "tamagui";
 import { SvgUri } from "../SvgUri";
+import { ImageFrame, mediaFillProps, type ImageStatus } from "./ImageFrame";
+import {
+  isSvgUri,
+  isThumbnailSize,
+  objectFitToResizeMode,
+  svgPreserveAspectRatio,
+  useResolvedImageSource,
+} from "./shared";
 import type { ImageProps } from "./types";
 
 export type { ImageProps } from "./types";
 
+function getDimensionFromStyle(
+  styleDimension: string | number | UnionableNumber | UnionableString | Variable<any> | undefined,
+): number | undefined {
+  if (typeof styleDimension === "number") {
+    return Math.max(0, styleDimension);
+  }
+  if (typeof styleDimension === "string" && styleDimension.endsWith("px")) {
+    return Math.max(0, Number.parseInt(styleDimension, 10));
+  }
+  if (styleDimension && typeof styleDimension === "object") {
+    const { val } = styleDimension;
+    if (typeof val === "number") return Math.max(0, val);
+    if (typeof val === "string" && val.endsWith("px")) {
+      return Math.max(0, Number.parseInt(val, 10));
+    }
+  }
+}
+
 export function Image({
-  alt,
+  alt = "",
   blurRadius,
   capInsets,
-  crossOrigin,
+  crossOrigin: _crossOrigin,
   defaultSource,
   fadeDuration,
   loadingIndicatorSource,
-  objectFit,
+  objectFit: objectFitProp,
+  objectPosition,
   onError,
   onLoad,
   onLoadEnd,
@@ -26,167 +49,177 @@ export function Image({
   onPartialLoad,
   onProgress,
   progressiveRenderingEnabled,
-  referrerPolicy,
+  referrerPolicy: _referrerPolicy,
   resizeMethod,
   source: sourceProp,
   src,
   srcSet,
   svg,
   tintColor,
+  fill = false,
+  sizes: _sizes,
+  loading: _loading,
+  priority: _priority,
+  placeholder = "empty",
+  placeholderSrc,
+  fallback,
+  framed,
+  size,
+  compact = false,
+  groupPosition,
+  groupOrientation,
+  decoding: _decoding,
+  onPress,
+  disabled,
+  width,
+  height,
+  aspectRatio: aspectRatioProp,
+  borderRadius,
   ...props
 }: ImageProps) {
-  const source = sourceProp || src;
-  const [asset] = useAssets(typeof source === "number" ? [source] : []);
-  const style = useStyle(props);
+  const { source, imageUriSource, resolvedSrc } = useResolvedImageSource(sourceProp, src);
+  const hasSource = Boolean(imageUriSource) || Boolean(resolvedSrc) || typeof source === "number";
+  const thumbnail = size != null && (isThumbnailSize(size) || typeof size === "number");
+  const isFramed = framed ?? thumbnail;
+  const objectFit = objectFitProp ?? (fill || thumbnail ? "cover" : undefined);
+  const style = useStyle({ width, height, aspectRatio: aspectRatioProp, ...props } as ViewProps);
 
-  const imageUriSource = useMemo(() => {
-    if (typeof source === "string") {
-      return { uri: source } satisfies ImageURISource;
-    }
-    if (typeof source === "number") return asset;
-    return (
-      (source as { default?: ImageURISource | ImageURISource[] })?.default ||
-      (source as ImageURISource | ImageURISource[])
-    );
-  }, [asset, source]);
+  const [status, setStatus] = useState<ImageStatus>(() => (hasSource ? "loading" : "error"));
+  useEffect(() => {
+    setStatus(hasSource ? "loading" : "error");
+  }, [hasSource, resolvedSrc]);
 
-  const resolvedSrc = useMemo(() => {
-    if (typeof source === "string") return source;
-    if (!imageUriSource || Array.isArray(imageUriSource)) return undefined;
-    return imageUriSource.uri;
-  }, [source, imageUriSource]);
+  const handleLoad = useCallback(
+    (event?: Parameters<NonNullable<ImageProps["onLoad"]>>[0]) => {
+      setStatus("loaded");
+      onLoad?.(event);
+    },
+    [onLoad],
+  );
+  const handleError = useCallback(
+    (error: Parameters<NonNullable<ImageProps["onError"]>>[0]) => {
+      setStatus("error");
+      onError?.(error);
+    },
+    [onError],
+  );
 
-  const isSvg = useMemo(() => {
-    if (!resolvedSrc) return false;
-    return svg || /\.svg([?#]|$)/.test(resolvedSrc) || resolvedSrc.startsWith("data:image/svg+xml");
-  }, [resolvedSrc, svg]);
+  const isSvg = useMemo(() => isSvgUri(resolvedSrc, svg), [resolvedSrc, svg]);
 
   const aspectRatio = useMemo(() => {
-    let aspectRatio: number | undefined;
+    if (typeof aspectRatioProp === "number") return aspectRatioProp;
+    let ratio: number | undefined;
     if (typeof style.aspectRatio === "string") {
       const separator = style.aspectRatio.includes("/") ? "/" : ":";
-      const [width, height] = style.aspectRatio.split(separator);
-      aspectRatio = Number.parseFloat(width || "0") / Number.parseFloat(height || "0");
+      const [w, h] = style.aspectRatio.split(separator);
+      ratio = Number.parseFloat(w || "0") / Number.parseFloat(h || "0");
     } else if (style.aspectRatio) {
-      aspectRatio = style.aspectRatio;
+      ratio = style.aspectRatio;
     } else if (typeof imageUriSource === "object" && !Array.isArray(imageUriSource)) {
-      const { width, height } = imageUriSource;
-      if (typeof width === "number" && typeof height === "number" && height > 0) {
-        aspectRatio = width / height;
+      const { width: sw, height: sh } = imageUriSource;
+      if (typeof sw === "number" && typeof sh === "number" && sh > 0) {
+        ratio = sw / sh;
       }
     }
-    return Number.isFinite(aspectRatio) ? aspectRatio : undefined;
-  }, [style.aspectRatio, imageUriSource]);
-
-  const getDimensionFromStyle = useCallback(
-    (
-      styleDimension:
-        | string
-        | number
-        | UnionableNumber
-        | UnionableString
-        | Variable<any>
-        | undefined,
-    ): number | undefined => {
-      if (typeof styleDimension === "number") {
-        return Math.max(0, styleDimension);
-      }
-      if (typeof styleDimension === "string" && styleDimension.endsWith("px")) {
-        return Math.max(0, Number.parseInt(styleDimension, 10));
-      }
-      if (styleDimension && typeof styleDimension === "object") {
-        const { val } = styleDimension;
-        if (typeof val === "number") return Math.max(0, val);
-        if (typeof val === "string" && val.endsWith("px")) {
-          return Math.max(0, Number.parseInt(val, 10));
-        }
-      }
-    },
-    [],
-  );
+    return Number.isFinite(ratio) ? ratio : undefined;
+  }, [aspectRatioProp, style.aspectRatio, imageUriSource]);
 
   const calculatedHeight = useMemo(() => {
-    const height = getDimensionFromStyle(style.height as any);
-    const width = getDimensionFromStyle(style.width as any);
-    if (typeof height !== "undefined") return height;
-    if (typeof width === "number" && aspectRatio) {
-      return Math.round(width / aspectRatio);
-    }
-  }, [getDimensionFromStyle, style.height, style.width, aspectRatio]);
+    const h =
+      getDimensionFromStyle(style.height as never) ?? getDimensionFromStyle(height as never);
+    const w = getDimensionFromStyle(style.width as never) ?? getDimensionFromStyle(width as never);
+    if (typeof h !== "undefined") return h;
+    if (typeof w === "number" && aspectRatio) return Math.round(w / aspectRatio);
+  }, [style.height, style.width, height, width, aspectRatio]);
 
   const calculatedWidth = useMemo(() => {
-    const width = getDimensionFromStyle(style.width as any);
-    const height = getDimensionFromStyle(style.height as any);
-    if (typeof width !== "undefined") return width;
-    if (typeof height === "number" && aspectRatio) {
-      return Math.round(height * aspectRatio);
-    }
-  }, [getDimensionFromStyle, style.height, style.width, aspectRatio]);
-
-  const fill = useMemo(() => {
-    const width = getDimensionFromStyle(style.width as any);
-    const height = getDimensionFromStyle(style.height as any);
-    return typeof width === "undefined" || typeof height === "undefined";
-  }, [getDimensionFromStyle, style.width, style.height]);
-
-  const preserveAspectRatio = useMemo(() => {
-    if (!objectFit) return undefined;
-    switch (objectFit) {
-      case "contain":
-        return "xMidYMid meet";
-      case "cover":
-        return "xMidYMid slice";
-      case "fill":
-        return "none";
-      case "none":
-        return "none";
-    }
-  }, [objectFit]);
-
-  if (!imageUriSource && !fill) return null;
+    const w = getDimensionFromStyle(style.width as never) ?? getDimensionFromStyle(width as never);
+    const h =
+      getDimensionFromStyle(style.height as never) ?? getDimensionFromStyle(height as never);
+    if (typeof w !== "undefined") return w;
+    if (typeof h === "number" && aspectRatio) return Math.round(h * aspectRatio);
+  }, [style.height, style.width, height, width, aspectRatio]);
 
-  if (isSvg && !Array.isArray(imageUriSource) && imageUriSource?.uri) {
-    return (
-      <View {...(props as ViewProps)}>
-        <SvgUri
-          accessibilityLabel={alt}
-          height={fill ? undefined : calculatedHeight}
-          onError={onError}
-          onLoad={onLoad}
-          preserveAspectRatio={preserveAspectRatio}
-          uri={imageUriSource.uri}
-          width={fill ? undefined : calculatedWidth}
-        />
-      </View>
-    );
+  if (!hasSource && !isFramed && fallback == null && !fill && size == null) {
+    return null;
   }
 
+  const mediaProps = mediaFillProps({
+    fill,
+    thumbnail,
+    width,
+    height,
+    aspectRatio: aspectRatioProp ?? aspectRatio,
+    objectFit,
+    objectPosition,
+  });
+
   return (
-    <View {...(props as ViewProps)}>
-      <TamaguiImage
-        alt={alt}
-        blurRadius={blurRadius}
-        capInsets={capInsets}
-        crossOrigin={crossOrigin}
-        defaultSource={defaultSource}
-        fadeDuration={fadeDuration}
-        height={fill ? undefined : calculatedHeight}
-        loadingIndicatorSource={loadingIndicatorSource}
-        objectFit={objectFit}
-        onError={onError as any}
-        onLoad={onLoad as any}
-        onLoadEnd={onLoadEnd}
-        onLoadStart={onLoadStart}
-        onPartialLoad={onPartialLoad}
-        onProgress={onProgress}
-        progressiveRenderingEnabled={progressiveRenderingEnabled}
-        referrerPolicy={referrerPolicy}
-        resizeMethod={resizeMethod}
-        source={imageUriSource}
-        srcSet={srcSet}
-        tintColor={tintColor}
-        width={fill ? undefined : calculatedWidth}
-      />
-    </View>
+    <ImageFrame
+      alt={alt}
+      fill={fill}
+      framed={isFramed}
+      compact={compact}
+      groupPosition={groupPosition}
+      groupOrientation={groupOrientation}
+      size={size}
+      width={width}
+      height={height}
+      aspectRatio={aspectRatioProp ?? aspectRatio}
+      borderRadius={borderRadius}
+      objectFit={objectFit}
+      objectPosition={objectPosition}
+      onPress={onPress}
+      disabled={disabled}
+      hasSource={hasSource}
+      status={status}
+      placeholder={placeholder}
+      placeholderSrc={placeholderSrc}
+      fallback={fallback}
+      {...props}
+    >
+      {hasSource && status !== "error" ? (
+        isSvg && !Array.isArray(imageUriSource) && imageUriSource?.uri ? (
+          <SvgUri
+            accessibilityLabel={alt}
+            height={fill || thumbnail ? undefined : calculatedHeight}
+            onError={handleError}
+            onLoad={handleLoad}
+            preserveAspectRatio={svgPreserveAspectRatio(objectFit)}
+            uri={imageUriSource.uri}
+            width={fill || thumbnail ? undefined : calculatedWidth}
+          />
+        ) : (
+          <TamaguiImage
+            alt={alt}
+            blurRadius={blurRadius}
+            capInsets={capInsets}
+            defaultSource={defaultSource}
+            fadeDuration={fadeDuration}
+            loadingIndicatorSource={loadingIndicatorSource}
+            objectFit={objectFit}
+            onError={handleError as never}
+            onLoad={handleLoad as never}
+            onLoadEnd={onLoadEnd}
+            onLoadStart={onLoadStart}
+            onPartialLoad={onPartialLoad}
+            onProgress={onProgress}
+            progressiveRenderingEnabled={progressiveRenderingEnabled}
+            resizeMethod={resizeMethod}
+            resizeMode={objectFitToResizeMode(objectFit)}
+            source={imageUriSource}
+            srcSet={srcSet}
+            tintColor={tintColor}
+            {...mediaProps}
+            {...(fill || thumbnail
+              ? null
+              : {
+                  width: calculatedWidth,
+                  height: calculatedHeight,
+                })}
+          />
+        )
+      ) : null}
+    </ImageFrame>
   );
 }