@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/media/ImageGallery.jsx

@@ -0,0 +1,580 @@
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { FlatList, Image, Modal, Pressable, Text, View, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconExternalLink, IconX } from "@tabler/icons-react-native";
+import { typeStyle } from "../controlStyles";
+import { IconButton } from "../IconButton";
+import { withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { imageAspect, imageGridTiles, imageViewerPage, MEDIA } from "./imageGrid";
+/**
+ * The web `ImageGalleryPreview`: one image at its own shape (as wide as the
+ * column, at most 384 high), or up to a 2 x 2 grid of 4:3 tiles with "+N" on
+ * the fourth. A tap opens `ImageViewer` at that image. Images only; draw
+ * videos apart.
+ */
+export function ImageGallery(t0) {
+  const $ = _c(12);
+  const {
+    images,
+    onOpenImage,
+    testID
+  } = t0;
+  const [viewerIndex, setViewerIndex] = useState(null);
+  const first = images[0];
+  if (!first) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== first || $[1] !== images) {
+    t1 = images.length === 1 ? <SingleImage image={first} onOpen={() => setViewerIndex(0)} /> : <ImageGrid images={images} onOpen={setViewerIndex} />;
+    $[0] = first;
+    $[1] = images;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => setViewerIndex(null);
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== images || $[5] !== onOpenImage || $[6] !== viewerIndex) {
+    t3 = <ImageViewer images={images} index={viewerIndex} onIndexChange={setViewerIndex} onClose={t2} onOpenImage={onOpenImage} />;
+    $[4] = images;
+    $[5] = onOpenImage;
+    $[6] = viewerIndex;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== t1 || $[9] !== t3 || $[10] !== testID) {
+    t4 = <View testID={testID} className="w-full">{t1}{t3}</View>;
+    $[8] = t1;
+    $[9] = t3;
+    $[10] = testID;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
+}
+
+/** The hairline-ringed, rounded frame of a gallery image or grid. */
+function useMediaFrame() {
+  const $ = _c(3);
+  const scheme = useScheme();
+  const t0 = MEDIA.outline[scheme];
+  const t1 = tokens.color.surfaceSecondary[scheme];
+  let t2;
+  if ($[0] !== t0 || $[1] !== t1) {
+    t2 = {
+      borderRadius: MEDIA.radius,
+      borderWidth: 1,
+      borderColor: t0,
+      overflow: "hidden",
+      backgroundColor: t1
+    };
+    $[0] = t0;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+/**
+ * A lone image, sized from the column and the image's own shape and capped
+ * at 384 high, so a tall capture keeps its shape instead of being cropped.
+ * Until both are known it holds a full-width 4:3 box.
+ */
+function SingleImage(t0) {
+  const $ = _c(18);
+  const {
+    image,
+    onOpen
+  } = t0;
+  const frame = useMediaFrame();
+  const [columnWidth, setColumnWidth] = useState(0);
+  const [loadedSize, setLoadedSize] = useState(null);
+  const aspect = imageAspect(loadedSize);
+  const width = columnWidth > 0 ? Math.min(columnWidth, MEDIA.singleMaxHeight * aspect) : undefined;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = event => setColumnWidth(event.nativeEvent.layout.width);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const t2 = image.alt ?? "Image";
+  let t3;
+  if ($[1] !== aspect || $[2] !== width) {
+    t3 = width === undefined ? {
+      width: "100%",
+      aspectRatio: aspect
+    } : {
+      width,
+      height: width / aspect
+    };
+    $[1] = aspect;
+    $[2] = width;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== frame || $[5] !== t3) {
+    t4 = [frame, t3];
+    $[4] = frame;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== image.url) {
+    t5 = {
+      uri: image.url
+    };
+    $[7] = image.url;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  let t7;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      width: "100%",
+      height: "100%"
+    };
+    t7 = event_0 => setLoadedSize(event_0.nativeEvent.source);
+    $[9] = t6;
+    $[10] = t7;
+  } else {
+    t6 = $[9];
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== t5) {
+    t8 = <Image source={t5} resizeMode="cover" style={t6} onLoad={t7} />;
+    $[11] = t5;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== onOpen || $[14] !== t2 || $[15] !== t4 || $[16] !== t8) {
+    t9 = <View className="w-full" onLayout={t1}><Pressable accessibilityRole="imagebutton" accessibilityLabel={t2} accessibilityHint="Opens full screen" onPress={onOpen} className="active:opacity-90" style={t4}>{t8}</Pressable></View>;
+    $[13] = onOpen;
+    $[14] = t2;
+    $[15] = t4;
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  return t9;
+}
+
+/**
+ * Two columns of 4:3 tiles, filled as the web grid's rows are: tiles 0 and 2
+ * on the left, 1 and 3 on the right. With three, the first fills the left
+ * column, as tall as the two on the right.
+ */
+function ImageGrid(t0) {
+  const $ = _c(27);
+  const {
+    images,
+    onOpen
+  } = t0;
+  const frame = useMediaFrame();
+  let T0;
+  let T1;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== frame || $[1] !== images || $[2] !== onOpen) {
+    const tiles = imageGridTiles(images.length);
+    const spans = tiles[0]?.spansColumn === true;
+    const left = spans ? tiles.slice(0, 1) : tiles.filter(_temp);
+    const right = spans ? tiles.slice(1) : tiles.filter(_temp2);
+    let t5;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+      t5 = {
+        width: "100%",
+        aspectRatio: MEDIA.tileAspect
+      };
+      $[9] = t5;
+    } else {
+      t5 = $[9];
+    }
+    const tileStyle = t5;
+    let t6;
+    if ($[10] !== images || $[11] !== onOpen) {
+      t6 = tile_1 => {
+        const image = images[tile_1.index];
+        if (!image) {
+          return null;
+        }
+        const name = image.alt ?? `Image ${tile_1.index + 1}`;
+        return <Pressable key={tile_1.index} accessibilityRole="imagebutton" accessibilityLabel={tile_1.overflow > 0 ? `${name}, ${tile_1.overflow} more` : name} accessibilityHint="Opens full screen" onPress={() => onOpen(tile_1.index)} className="active:opacity-90" style={tile_1.spansColumn ? {
+          width: "100%",
+          flex: 1
+        } : tileStyle}><Image source={{
+            uri: image.url
+          }} resizeMode="cover" style={{
+            width: "100%",
+            height: "100%"
+          }} />{tile_1.overflow > 0 ? <View className="absolute inset-0 items-center justify-center" style={{
+            backgroundColor: withAlpha(tokens.color.black, 0.6)
+          }}><Text className="font-instrument-sans-semibold text-xl" style={[{
+              color: tokens.color.white
+            }, typeStyle("semibold")]}>{`+${tile_1.overflow}`}</Text></View> : null}</Pressable>;
+      };
+      $[10] = images;
+      $[11] = onOpen;
+      $[12] = t6;
+    } else {
+      t6 = $[12];
+    }
+    const cell = t6;
+    T1 = View;
+    let t7;
+    if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = {
+        flexDirection: "row",
+        gap: MEDIA.gap
+      };
+      $[13] = t7;
+    } else {
+      t7 = $[13];
+    }
+    if ($[14] !== frame) {
+      t3 = [frame, t7];
+      $[14] = frame;
+      $[15] = t3;
+    } else {
+      t3 = $[15];
+    }
+    let t8;
+    if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+      t8 = {
+        flex: 1,
+        gap: MEDIA.gap
+      };
+      $[16] = t8;
+    } else {
+      t8 = $[16];
+    }
+    t4 = <View style={t8}>{left.map(cell)}</View>;
+    T0 = View;
+    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = {
+        flex: 1,
+        gap: MEDIA.gap
+      };
+      $[17] = t1;
+    } else {
+      t1 = $[17];
+    }
+    t2 = right.map(cell);
+    $[0] = frame;
+    $[1] = images;
+    $[2] = onOpen;
+    $[3] = T0;
+    $[4] = T1;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    T0 = $[3];
+    T1 = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    t4 = $[8];
+  }
+  let t5;
+  if ($[18] !== T0 || $[19] !== t1 || $[20] !== t2) {
+    t5 = <T0 style={t1}>{t2}</T0>;
+    $[18] = T0;
+    $[19] = t1;
+    $[20] = t2;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  let t6;
+  if ($[22] !== T1 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5) {
+    t6 = <T1 style={t3}>{t4}{t5}</T1>;
+    $[22] = T1;
+    $[23] = t3;
+    $[24] = t4;
+    $[25] = t5;
+    $[26] = t6;
+  } else {
+    t6 = $[26];
+  }
+  return t6;
+}
+function _temp2(tile_0) {
+  return tile_0.index % 2 === 1;
+}
+function _temp(tile) {
+  return tile.index % 2 === 0;
+}
+/**
+ * The web `ImageLightbox` on a phone: the images full screen on black, one
+ * page each, swiped sideways (TalkBack and VoiceOver step with the adjustable
+ * actions). Close (X, or Android back) and "Open in browser" sit at the top,
+ * "2 / 5" at the bottom when there is more than one. No pinch zoom. It fades
+ * in, or appears at once with Reduce Motion.
+ */
+export function ImageViewer(t0) {
+  const $ = _c(10);
+  const {
+    images,
+    index,
+    onIndexChange,
+    onClose,
+    onOpenImage
+  } = t0;
+  const reduceMotion = useReduceMotion();
+  if (index === null) {
+    return null;
+  }
+  const t1 = reduceMotion ? "none" : "fade";
+  let t2;
+  if ($[0] !== images || $[1] !== index || $[2] !== onClose || $[3] !== onIndexChange || $[4] !== onOpenImage) {
+    t2 = <ViewerPages images={images} index={index} onIndexChange={onIndexChange} onClose={onClose} onOpenImage={onOpenImage} />;
+    $[0] = images;
+    $[1] = index;
+    $[2] = onClose;
+    $[3] = onIndexChange;
+    $[4] = onOpenImage;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== onClose || $[7] !== t1 || $[8] !== t2) {
+    t3 = <Modal visible={true} transparent={true} statusBarTranslucent={true} animationType={t1} onRequestClose={onClose}>{t2}</Modal>;
+    $[6] = onClose;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}
+function ViewerPages(t0) {
+  const $ = _c(48);
+  const {
+    images,
+    index,
+    onIndexChange,
+    onClose,
+    onOpenImage
+  } = t0;
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const count = images.length;
+  const current = images[index];
+  const white = tokens.color.white;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      backgroundColor: withAlpha(tokens.color.black, 0.92)
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== width) {
+    t2 = (_, item) => ({
+      length: width,
+      offset: width * item,
+      index: item
+    });
+    $[1] = width;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== count || $[4] !== onIndexChange || $[5] !== width) {
+    t3 = event => onIndexChange(imageViewerPage(event.nativeEvent.contentOffset.x, width, count));
+    $[3] = count;
+    $[4] = onIndexChange;
+    $[5] = width;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== height || $[8] !== width) {
+    t4 = t5 => {
+      const {
+        item: item_1
+      } = t5;
+      return <View style={{
+        width,
+        height
+      }} className="items-center justify-center"><Image source={{
+          uri: item_1.url
+        }} resizeMode="contain" style={{
+          width: "100%",
+          height: "100%"
+        }} accessibilityLabel={item_1.alt ?? "Image"} /></View>;
+    };
+    $[7] = height;
+    $[8] = width;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const t5 = current?.alt ?? "Image";
+  let t6;
+  if ($[10] !== count || $[11] !== index) {
+    t6 = count > 1 ? {
+      text: `${index + 1} of ${count}`
+    } : undefined;
+    $[10] = count;
+    $[11] = index;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== count) {
+    t7 = count > 1 ? [{
+      name: "increment"
+    }, {
+      name: "decrement"
+    }] : undefined;
+    $[13] = count;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== count || $[16] !== index || $[17] !== onIndexChange) {
+    t8 = event_0 => {
+      const next = event_0.nativeEvent.actionName === "increment" ? index + 1 : index - 1;
+      if (next >= 0 && next < count) {
+        onIndexChange(next);
+      }
+    };
+    $[15] = count;
+    $[16] = index;
+    $[17] = onIndexChange;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== images || $[20] !== index || $[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7 || $[27] !== t8) {
+    t9 = <FlatList data={images} horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={false} initialScrollIndex={index} getItemLayout={t2} keyExtractor={_temp3} onMomentumScrollEnd={t3} renderItem={t4} accessibilityRole="adjustable" accessibilityLabel={t5} accessibilityValue={t6} accessibilityActions={t7} onAccessibilityAction={t8} />;
+    $[19] = images;
+    $[20] = index;
+    $[21] = t2;
+    $[22] = t3;
+    $[23] = t4;
+    $[24] = t5;
+    $[25] = t6;
+    $[26] = t7;
+    $[27] = t8;
+    $[28] = t9;
+  } else {
+    t9 = $[28];
+  }
+  const t10 = insets.top + 8;
+  let t11;
+  if ($[29] !== t10) {
+    t11 = {
+      top: t10
+    };
+    $[29] = t10;
+    $[30] = t11;
+  } else {
+    t11 = $[30];
+  }
+  let t12;
+  if ($[31] !== current || $[32] !== onOpenImage) {
+    t12 = onOpenImage && current ? <Pressable accessibilityRole="link" onPress={() => onOpenImage(current.url)} className="min-h-11 flex-row items-center gap-1.5 rounded-full px-3 active:opacity-70" style={{
+      backgroundColor: withAlpha(tokens.color.black, 0.6)
+    }}><IconExternalLink size={16} color={white} /><Text className="font-instrument-sans text-sm" style={{
+        color: white
+      }}>Open in browser</Text></Pressable> : <View />;
+    $[31] = current;
+    $[32] = onOpenImage;
+    $[33] = t12;
+  } else {
+    t12 = $[33];
+  }
+  let t13;
+  if ($[34] !== onClose) {
+    t13 = <IconButton icon={IconX} label="Close" variant="overlay" size="lg" onPress={onClose} />;
+    $[34] = onClose;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  let t14;
+  if ($[36] !== t11 || $[37] !== t12 || $[38] !== t13) {
+    t14 = <View className="absolute left-0 right-0 flex-row items-center justify-between px-3" style={t11}>{t12}{t13}</View>;
+    $[36] = t11;
+    $[37] = t12;
+    $[38] = t13;
+    $[39] = t14;
+  } else {
+    t14 = $[39];
+  }
+  let t15;
+  if ($[40] !== count || $[41] !== index || $[42] !== insets.bottom) {
+    t15 = count > 1 ? <View className="absolute left-0 right-0 items-center" style={{
+      bottom: insets.bottom + 16
+    }} pointerEvents="none"><View className="rounded-full px-3 py-1" style={{
+        backgroundColor: withAlpha(tokens.color.black, 0.6)
+      }}><Text className="font-instrument-sans text-sm" style={{
+          color: white,
+          fontVariant: ["tabular-nums"]
+        }}>{`${index + 1} / ${count}`}</Text></View></View> : null;
+    $[40] = count;
+    $[41] = index;
+    $[42] = insets.bottom;
+    $[43] = t15;
+  } else {
+    t15 = $[43];
+  }
+  let t16;
+  if ($[44] !== t14 || $[45] !== t15 || $[46] !== t9) {
+    t16 = <View className="flex-1" style={t1}>{t9}{t14}{t15}</View>;
+    $[44] = t14;
+    $[45] = t15;
+    $[46] = t9;
+    $[47] = t16;
+  } else {
+    t16 = $[47];
+  }
+  return t16;
+}
+function _temp3(image, item_0) {
+  return `${item_0}:${image.url}`;
+}