@lotics/ui 1.23.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -16,6 +16,8 @@
     },
     "./file_preview_types": "./src/file_preview_types.ts",
     "./file_gallery_modal": "./src/file_gallery_modal.tsx",
+    "./image_gallery": "./src/image_gallery.tsx",
+    "./file_thumbnail_grid": "./src/file_thumbnail_grid.tsx",
     "./pagination": "./src/pagination.tsx",
     "./bar_chart": "./src/bar_chart.tsx",
     "./line_chart": "./src/line_chart.tsx",

package/src/file_thumbnail_grid.tsx

@@ -0,0 +1,165 @@
+// Pure, reusable thumbnail-grid layout + a file-specific specialization.
+//
+// `ThumbnailGrid<T>` is the layout engine (three mutually-exclusive modes:
+// compact / fixed-columns / auto-columns, with `maxVisible` overflow). It is
+// item-agnostic — pass `renderItem`. `FileThumbnailGrid` is the common case:
+// a grid of `DisplayFile`s rendered with `FileThumbnail` (any file type —
+// image/video/audio/doc — via FileThumbnail's own type handling).
+//
+// The Lotics-coupled file grid (`@lotics/ui-internal/file_grid`, which mixes in
+// upload-progress thumbnails) composes `ThumbnailGrid` with its own renderItem,
+// so the layout lives in exactly one place.
+import React, { useState } from "react";
+import { View, StyleSheet, type ViewStyle } from "react-native";
+import { Text } from "./text";
+import { FileThumbnail, type DisplayFile, THUMBNAIL_SIZE } from "./file_thumbnail";
+
+export interface ThumbnailGridProps<T> {
+  items: T[];
+  keyExtractor: (item: T) => string;
+  /** Render one item. `size` is passed in compact mode (fixed px); omitted in
+   *  column modes, where the item fills its flex cell. */
+  renderItem: (item: T, size?: number) => React.ReactNode;
+  /** Fixed pixel size per item → flat horizontal wrap. Takes precedence. */
+  itemSize?: number;
+  /** Fixed column count → items fill 1/N of the row width. */
+  columns?: number;
+  /** Minimum item width for auto column count when neither itemSize nor columns
+   *  is set. Default 96. */
+  minItemWidth?: number;
+  /** Gap between items. Default 8. */
+  gap?: number;
+  /** Max items shown before a "+N" overflow indicator. */
+  maxVisible?: number;
+  /** Alignment of a partial last row. Default "start". */
+  partialRowAlign?: "start" | "end";
+  style?: ViewStyle;
+  /** Disable press/click interactions (sets pointerEvents none). */
+  disablePress?: boolean;
+  /** Rendered inside the container after the grid (e.g. a retry-all button). */
+  footer?: React.ReactNode;
+}
+
+export function ThumbnailGrid<T>(props: ThumbnailGridProps<T>) {
+  const {
+    items,
+    keyExtractor,
+    renderItem,
+    itemSize,
+    columns,
+    minItemWidth = THUMBNAIL_SIZE,
+    gap = 8,
+    maxVisible,
+    partialRowAlign = "start",
+    style,
+    disablePress,
+    footer,
+  } = props;
+
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const isCompact = itemSize !== undefined;
+  const dynamicColumns =
+    !isCompact && columns === undefined && containerWidth > 0
+      ? Math.max(1, Math.floor((containerWidth + gap) / (minItemWidth + gap)))
+      : undefined;
+  const effectiveColumns = columns ?? dynamicColumns;
+
+  const visible = maxVisible ? items.slice(0, maxVisible) : items;
+  const overflow = maxVisible ? Math.max(0, items.length - maxVisible) : 0;
+  const canRender = isCompact || columns !== undefined || containerWidth > 0;
+
+  if (items.length === 0) return null;
+
+  const renderRows = (rowItems: T[], cols: number) => {
+    const rows: T[][] = [];
+    for (let i = 0; i < rowItems.length; i += cols) rows.push(rowItems.slice(i, i + cols));
+    return rows.map((row, rowIndex) => {
+      const spacers =
+        row.length < cols
+          ? Array.from({ length: cols - row.length }, (_, i) => (
+              <View key={`spacer-${i}`} style={styles.flexItem} />
+            ))
+          : null;
+      return (
+        <View key={rowIndex} style={[styles.row, { gap }]}>
+          {partialRowAlign === "end" && spacers}
+          {row.map((item) => (
+            <View key={keyExtractor(item)} style={styles.flexItem}>
+              {renderItem(item)}
+            </View>
+          ))}
+          {partialRowAlign === "start" && spacers}
+        </View>
+      );
+    });
+  };
+
+  return (
+    <View
+      style={[isCompact && styles.compactContainer, { gap }, style]}
+      pointerEvents={disablePress ? "none" : "auto"}
+      onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+    >
+      {canRender &&
+        (isCompact
+          ? visible.map((item) => (
+              <React.Fragment key={keyExtractor(item)}>{renderItem(item, itemSize)}</React.Fragment>
+            ))
+          : effectiveColumns !== undefined
+            ? renderRows(visible, effectiveColumns)
+            : null)}
+
+      {overflow > 0 && (
+        <Text size="sm" color="muted" userSelect="none">
+          +{overflow}
+        </Text>
+      )}
+
+      {footer}
+    </View>
+  );
+}
+
+export interface FileThumbnailGridProps {
+  files: DisplayFile[];
+  itemSize?: number;
+  columns?: number;
+  minItemWidth?: number;
+  gap?: number;
+  maxVisible?: number;
+  partialRowAlign?: "start" | "end";
+  style?: ViewStyle;
+  disablePress?: boolean;
+  /** Selected file IDs — renders a selection overlay on those thumbnails. */
+  selectedIds?: ReadonlySet<string>;
+  onFilePress?: (file: DisplayFile) => void;
+  onRemove?: (id: string) => void;
+}
+
+export function FileThumbnailGrid(props: FileThumbnailGridProps) {
+  const { files, selectedIds, onFilePress, onRemove, disablePress, ...layout } = props;
+  return (
+    <ThumbnailGrid
+      {...layout}
+      items={files}
+      keyExtractor={(f) => f.id}
+      disablePress={disablePress}
+      renderItem={(file, size) => (
+        <FileThumbnail
+          file={file}
+          size={size}
+          onPress={disablePress || !onFilePress ? undefined : () => onFilePress(file)}
+          onRemove={onRemove ? () => onRemove(file.id) : undefined}
+          selected={selectedIds?.has(file.id)}
+        />
+      )}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  compactContainer: { flexDirection: "row", flexWrap: "wrap", userSelect: "none" },
+  row: { flexDirection: "row" },
+  flexItem: { flex: 1 },
+});

package/src/image_gallery.tsx

@@ -0,0 +1,123 @@
+// Ecommerce-style image gallery: a large main image plus a thumbnail grid.
+// Click a thumbnail to swap the main image; click the main image to zoom it
+// full-screen via FileGalleryModal. Source-agnostic — takes DisplayFile[], so
+// any caller (record photos, uploads, chat attachments) can use it.
+//
+// Width is measured with onLayout (like FileThumbnailGrid) and the columns are
+// sized from it, so the gallery adapts to the available space instead of
+// relying on percentage/flex-basis resolution (which collapses inside an
+// auto-width parent).
+import { useState } from "react";
+import { View, Image, Pressable } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { ActivityIndicator } from "./activity_indicator";
+import { FileThumbnail, type DisplayFile } from "./file_thumbnail";
+import { FileGalleryModal } from "./file_gallery_modal";
+
+const GAP = 12;
+
+export interface ImageGalleryProps {
+  images: DisplayFile[];
+  loading?: boolean;
+  /** Shown when there are no images and not loading. Pass a translated string. */
+  emptyText?: string;
+  /** Optional max width. Omit to fill the container. */
+  maxWidth?: number;
+  /** Hint shown in the full-screen zoom modal. Pass a translated string. */
+  captionHint?: string;
+  /** "bottom" stacks thumbnails under the main image; "right" puts the main
+   *  image (~60% of the width) and the thumbnail grid side by side. */
+  thumbnailPosition?: "bottom" | "right";
+  /** Aspect ratio (width / height) of the main image box. Default 4/3. A
+   *  smaller value (e.g. 1) makes a taller, larger preview. */
+  mainAspectRatio?: number;
+  /** Main image's fraction of the width in "right" mode (0–1). Default 0.6. */
+  mainFraction?: number;
+}
+
+export function ImageGallery({
+  images,
+  loading = false,
+  emptyText = "No images.",
+  maxWidth,
+  captionHint = "ESC to close · ←/→ to navigate",
+  thumbnailPosition = "bottom",
+  mainAspectRatio = 4 / 3,
+  mainFraction = 0.6,
+}: ImageGalleryProps) {
+  const [selected, setSelected] = useState(0);
+  const [zoomIdx, setZoomIdx] = useState<number | null>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  if (loading) return <ActivityIndicator />;
+  if (images.length === 0) return <Text size="sm" color="muted">{emptyText}</Text>;
+
+  const idx = Math.min(selected, images.length - 1);
+  const main = images[idx];
+  const right = thumbnailPosition === "right";
+  const width = maxWidth ? Math.min(containerWidth, maxWidth) : containerWidth;
+
+  const mainImage = (
+    <Pressable
+      onPress={() => setZoomIdx(idx)}
+      accessibilityRole="button"
+      accessibilityLabel="Zoom image"
+      style={{
+        width: "100%",
+        aspectRatio: mainAspectRatio,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.zinc["100"],
+        overflow: "hidden",
+        cursor: "pointer",
+      }}
+    >
+      <Image source={{ uri: main.url }} resizeMode="contain" style={{ width: "100%", height: "100%" }} />
+    </Pressable>
+  );
+
+  const thumbnails = images.length > 1 ? (
+    <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 6 }}>
+      {images.map((img, i) => (
+        // Border radius = FileThumbnail's own radius (8) + the 2px border, so
+        // the active highlight is concentric with the thumbnail's corners.
+        <View
+          key={img.id}
+          style={{
+            borderRadius: 10,
+            borderWidth: 2,
+            borderColor: i === idx ? colors.zinc["900"] : colors.zinc["200"],
+          }}
+        >
+          <FileThumbnail file={img} size={56} onPress={() => setSelected(i)} />
+        </View>
+      ))}
+    </View>
+  ) : null;
+
+  return (
+    <View onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>
+      {width > 0 &&
+        (right && thumbnails ? (
+          <View style={{ flexDirection: "row", gap: GAP }}>
+            <View style={{ width: (width - GAP) * mainFraction }}>{mainImage}</View>
+            <View style={{ width: (width - GAP) * (1 - mainFraction) }}>{thumbnails}</View>
+          </View>
+        ) : (
+          <View style={{ gap: 8, width }}>
+            {mainImage}
+            {thumbnails}
+          </View>
+        ))}
+
+      <FileGalleryModal
+        files={images}
+        activeIndex={zoomIdx}
+        onIndexChange={setZoomIdx}
+        captionHint={captionHint}
+      />
+    </View>
+  );
+}