@lotics/ui 1.15.0 → 1.17.0

package/src/spreadsheet_view.tsx

@@ -0,0 +1,304 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { View, StyleSheet, Pressable } from "react-native";
+import { Text } from "./text";
+import { Button } from "./button";
+import { colors } from "./colors";
+import { isExcelMimeType } from "./mime";
+import { downloadFileFromUrl } from "./download";
+import { type PreviewLabels } from "./file_preview_types";
+import type { DisplayFile } from "./file_thumbnail";
+import type { WorkbookModel } from "@lotics/xlsx/workbook_model";
+import type { RenderConfig } from "@lotics/xlsx/canvas_renderer";
+import type { MergedCellRange } from "@lotics/xlsx/types";
+import type { LayoutConfig } from "@lotics/xlsx/canvas_layout";
+
+// All of @lotics/xlsx (parser, formula engine, canvas renderer) is dynamic-
+// imported so a consumer that never opens a spreadsheet doesn't bundle the
+// engine. Only `import type` is static here. Functions are captured on mount.
+interface XlsxApi {
+  loadWorkbookFromSnapshot: typeof import("@lotics/xlsx/workbook_model").loadWorkbookFromSnapshot;
+  recomputeIfStale: typeof import("@lotics/xlsx/formula_engine").recomputeIfStale;
+  drawSpreadsheet: typeof import("@lotics/xlsx/canvas_renderer").drawSpreadsheet;
+  LayoutEngine: typeof import("@lotics/xlsx/canvas_layout").LayoutEngine;
+  rowColToRef: typeof import("@lotics/xlsx/excel_utils").rowColToRef;
+  refToRowCol: typeof import("@lotics/xlsx/excel_utils").refToRowCol;
+  parseExcelBuffer: typeof import("@lotics/xlsx/excel_parser").parseExcelBuffer;
+  parseCsvFile: typeof import("@lotics/xlsx/csv_parser").parseCsvFile;
+}
+
+async function loadXlsx(): Promise<XlsxApi> {
+  const [model, formula, renderer, layout, utils, excel, csv] = await Promise.all([
+    import("@lotics/xlsx/workbook_model"),
+    import("@lotics/xlsx/formula_engine"),
+    import("@lotics/xlsx/canvas_renderer"),
+    import("@lotics/xlsx/canvas_layout"),
+    import("@lotics/xlsx/excel_utils"),
+    import("@lotics/xlsx/excel_parser"),
+    import("@lotics/xlsx/csv_parser"),
+  ]);
+  return {
+    loadWorkbookFromSnapshot: model.loadWorkbookFromSnapshot,
+    recomputeIfStale: formula.recomputeIfStale,
+    drawSpreadsheet: renderer.drawSpreadsheet,
+    LayoutEngine: layout.LayoutEngine,
+    rowColToRef: utils.rowColToRef,
+    refToRowCol: utils.refToRowCol,
+    parseExcelBuffer: excel.parseExcelBuffer,
+    parseCsvFile: csv.parseCsvFile,
+  };
+}
+
+async function fetchArrayBuffer(url: string, signal: AbortSignal): Promise<ArrayBuffer> {
+  const response = await fetch(url, { signal });
+  if (!response.ok) throw new Error(`Spreadsheet fetch failed (${response.status})`);
+  return response.arrayBuffer();
+}
+
+interface SpreadsheetViewProps {
+  file: DisplayFile;
+  labels: PreviewLabels;
+  onError?: (error: unknown, meta: { fileId: string; mimeType: string }) => void;
+}
+
+interface ParseState {
+  loading: boolean;
+  workbook: WorkbookModel | undefined;
+  error: string | undefined;
+}
+
+/**
+ * Read-only spreadsheet preview: parses Excel/CSV into a `WorkbookModel` and
+ * paints it with the `@lotics/xlsx` canvas renderer. Virtual-scroll — a
+ * transparent scroll layer (sized to the sheet) sits over a viewport-sized
+ * canvas that redraws on scroll. No editing, ribbon, or selection.
+ */
+export function SpreadsheetView({ file, labels, onError }: SpreadsheetViewProps) {
+  const apiRef = useRef<XlsxApi | null>(null);
+  const [state, setState] = useState<ParseState>({ loading: true, workbook: undefined, error: undefined });
+  const [sheetIndex, setSheetIndex] = useState(0);
+
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const rafRef = useRef<number | null>(null);
+  const [viewport, setViewport] = useState({ w: 0, h: 0 });
+  const [scroll, setScroll] = useState({ x: 0, y: 0 });
+
+  // Parse the file into a workbook (loads the engine on first spreadsheet open).
+  useEffect(() => {
+    const controller = new AbortController();
+    setState({ loading: true, workbook: undefined, error: undefined });
+    const run = async () => {
+      const api = apiRef.current ?? (apiRef.current = await loadXlsx());
+      const parsed = isExcelMimeType(file.mimeType)
+        ? api.parseExcelBuffer(await fetchArrayBuffer(file.url, controller.signal))
+        : await api.parseCsvFile(file.url, controller.signal);
+      if (controller.signal.aborted) return;
+      const wb = api.loadWorkbookFromSnapshot(parsed);
+      api.recomputeIfStale(wb);
+      if (controller.signal.aborted) return;
+      setSheetIndex(wb.activeSheetIndex);
+      setState({ loading: false, workbook: wb, error: undefined });
+    };
+    run().catch((err: unknown) => {
+      if (controller.signal.aborted) return;
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      const passwordProtected = err instanceof Error && err.name === "PasswordProtectedError";
+      onError?.(err, { fileId: file.id, mimeType: file.mimeType });
+      setState({
+        loading: false,
+        workbook: undefined,
+        error: passwordProtected ? labels.passwordProtected : labels.loadFailed,
+      });
+    });
+    return () => controller.abort();
+  }, [file.url, file.id, file.mimeType, labels.loadFailed, labels.passwordProtected, onError]);
+
+  // Track the viewport size.
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const update = () => setViewport({ w: el.clientWidth, h: el.clientHeight });
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [state.workbook]);
+
+  // Coalesce native scroll (which fires faster than frames) into one redraw per frame.
+  const onScroll = useCallback(() => {
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      const el = scrollRef.current;
+      if (el) setScroll({ x: el.scrollLeft, y: el.scrollTop });
+    });
+  }, []);
+  useEffect(
+    () => () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    },
+    [],
+  );
+
+  const layout = useMemo(() => {
+    const api = apiRef.current;
+    const wb = state.workbook;
+    if (!api || !wb) return null;
+    const s = wb.sheets[sheetIndex];
+    if (!s) return null;
+    const used = s.getUsedRange();
+    const config: LayoutConfig = {
+      colCount: Math.max(used.maxCol + 2, 26),
+      rowCount: Math.max(used.maxRow + 5, 50),
+      colWidths: s.colWidths,
+      rowHeights: s.rowHeights,
+      defaultColWidth: s.defaultColWidth,
+      defaultRowHeight: s.defaultRowHeight,
+      hiddenCols: s.hiddenCols,
+      hiddenRows: s.hiddenRows,
+      freeze: s.freeze,
+    };
+    return new api.LayoutEngine(config);
+  }, [state.workbook, sheetIndex]);
+
+  // Redraw the visible range whenever scroll / size / sheet changes.
+  useEffect(() => {
+    const api = apiRef.current;
+    const wb = state.workbook;
+    const canvas = canvasRef.current;
+    if (!api || !wb || !layout || !canvas || viewport.w === 0 || viewport.h === 0) return;
+    const s = wb.sheets[sheetIndex];
+    if (!s) return;
+    const dpr = window.devicePixelRatio || 1;
+    // Resize only when the viewport actually changes — assigning width/height
+    // reallocates (and clears) the backing store, so doing it per scroll frame
+    // is wasteful. On scroll the size is unchanged; drawSpreadsheet clears via
+    // its own full-viewport fillRect, so a plain redraw suffices.
+    const wPx = Math.round(viewport.w * dpr);
+    const hPx = Math.round(viewport.h * dpr);
+    if (canvas.width !== wPx) canvas.width = wPx;
+    if (canvas.height !== hPx) canvas.height = hPx;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const mergedCells: MergedCellRange[] = s.mergedCells.map((ref) => {
+      const [a, b] = ref.split(":");
+      const start = api.refToRowCol(a ?? "");
+      const end = api.refToRowCol(b ?? a ?? "");
+      return {
+        startRow: start?.row ?? 1,
+        startCol: start?.col ?? 1,
+        endRow: end?.row ?? start?.row ?? 1,
+        endCol: end?.col ?? start?.col ?? 1,
+      };
+    });
+
+    const config: RenderConfig = {
+      layout,
+      scrollX: scroll.x,
+      scrollY: scroll.y,
+      viewWidth: viewport.w,
+      viewHeight: viewport.h,
+      devicePixelRatio: dpr,
+      getCell: (row, col) => {
+        const cell = s.getCell(api.rowColToRef(row, col));
+        if (!cell) return undefined;
+        return {
+          displayValue: cell.displayValue,
+          style: wb.styles.get(cell.styleIndex),
+          richText: cell.richText,
+          isHyperlink: s.hyperlinks.has(api.rowColToRef(row, col)) || undefined,
+        };
+      },
+      mergedCells,
+      freeze: s.freeze,
+      showGridLines: s.view.showGridLines,
+      images: s.images,
+      charts: s.charts,
+      drawings: s.drawings,
+      richText: (row, col) => s.getCell(api.rowColToRef(row, col))?.richText,
+    };
+    api.drawSpreadsheet(ctx, config);
+  }, [state.workbook, sheetIndex, layout, viewport, scroll]);
+
+  if (state.loading) {
+    return (
+      <View style={styles.center}>
+        <Text size="sm" color="muted">
+          …
+        </Text>
+      </View>
+    );
+  }
+  if (state.error !== undefined || !state.workbook) {
+    return (
+      <View style={styles.center}>
+        <Text size="sm" color="muted">
+          {state.error ?? labels.loadFailed}
+        </Text>
+        <View style={{ marginTop: 12 }}>
+          <Button
+            icon="download"
+            title={labels.download}
+            color="secondary"
+            onPress={() => void downloadFileFromUrl(file.url, file.filename)}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  const sheets = state.workbook.sheets;
+  const totalWidth = layout?.totalWidth ?? 0;
+  const totalHeight = layout?.totalHeight ?? 0;
+
+  return (
+    <View style={styles.container}>
+      <div style={viewportStyle} ref={viewportRef}>
+        <canvas ref={canvasRef} style={{ ...canvasStyle, width: viewport.w, height: viewport.h }} />
+        <div ref={scrollRef} onScroll={onScroll} style={scrollLayerStyle}>
+          <div style={{ width: totalWidth, height: totalHeight }} />
+        </div>
+      </div>
+      {sheets.length > 1 ? (
+        <View style={styles.tabs}>
+          {sheets.map((s, i) => (
+            <Pressable
+              key={i}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: i === sheetIndex }}
+              onPress={() => {
+                setSheetIndex(i);
+                setScroll({ x: 0, y: 0 });
+                if (scrollRef.current) scrollRef.current.scrollTo({ left: 0, top: 0 });
+              }}
+              style={[styles.tab, i === sheetIndex ? styles.tabActive : null]}
+            >
+              <Text size="xs" color={i === sheetIndex ? "default" : "muted"} numberOfLines={1}>
+                {s.name}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  center: { flex: 1, justifyContent: "center", alignItems: "center", padding: 48 },
+  tabs: {
+    flexDirection: "row",
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    backgroundColor: colors.zinc[50],
+  },
+  tab: { paddingHorizontal: 14, paddingVertical: 8, borderRightWidth: 1, borderRightColor: colors.border },
+  tabActive: { backgroundColor: colors.background },
+});
+
+const viewportStyle: React.CSSProperties = { position: "relative", flex: 1, overflow: "hidden" };
+const canvasStyle: React.CSSProperties = { position: "absolute", top: 0, left: 0 };
+const scrollLayerStyle: React.CSSProperties = { position: "absolute", inset: 0, overflow: "auto" };

package/src/table.tsx

@@ -1,19 +1,40 @@
-import { ScrollView, View, ViewStyle, StyleSheet } from "react-native";
+import { Pressable, ScrollView, View, ViewStyle, StyleSheet } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { ReactNode } from "react";
 import { colors } from "@lotics/ui/colors";
 
+export type SortDir = "asc" | "desc";
+export interface TableSort<TRow extends Record<string, unknown>> {
+  key: keyof TRow;
+  dir: SortDir;
+}
+
 interface TableProps<TRow extends Record<string, unknown>> {
   columns: Column<TRow>[];
   rows: (TRow | null | false)[];
   rowKey?: keyof TRow;
   rowStyle?: (row: TRow) => ViewStyle | undefined;
+  /** Current sort. Pair with `onSortChange` to render sortable headers. The
+   *  parent owns the actual sorting of `rows` — this only drives the indicator. */
+  sort?: TableSort<TRow> | null;
+  /** Pressing a `sortable` header calls this with the column key (the parent
+   *  toggles asc/desc and re-sorts `rows`). */
+  onSortChange?: (key: keyof TRow) => void;
+  /** Pressing a row calls this — e.g. to open a detail drilldown. The row
+   *  becomes a Pressable with a hover/press surface. Interactive cells nested
+   *  inside (Pressables/buttons) capture their own press and don't bubble. */
+  onRowPress?: (row: TRow) => void;
 }
 
 interface Column<TRow extends Record<string, unknown>> {
   key: keyof TRow;
   label: string;
   width?: number;
+  /** Horizontal alignment of header + cell content. Default "left". */
+  align?: "left" | "right";
+  /** When true (and `onSortChange` is set), the header is pressable + shows a
+   *  sort arrow when this column is the active `sort`. */
+  sortable?: boolean;
   renderCell?: RenderCell<TRow>;
 }
 
@@ -25,48 +46,80 @@ type RenderCell<TRow extends Record<string, unknown>> = (params: {
 const stickyHeader = [0];
 
 export function Table<TRow extends Record<string, unknown>>(props: TableProps<TRow>) {
-  const { columns, rows, rowKey, rowStyle } = props;
+  const { columns, rows, rowKey, rowStyle, sort, onSortChange, onRowPress } = props;
 
   return (
     <ScrollView style={styles.container} stickyHeaderIndices={stickyHeader}>
       <View style={styles.headerRow}>
-        {columns.map((column) => (
+        {columns.map((column) => {
+          const sortable = column.sortable && !!onSortChange;
+          const active = sort?.key === column.key;
+          const cellStyle = [
+            column.width ? { width: column.width } : styles.flexColumn,
+            styles.headerCell,
+            column.align === "right" ? styles.alignEnd : null,
+          ];
+          const inner = (
+            <View style={styles.headerInner}>
+              <Text weight="medium" numberOfLines={1} userSelect="none">
+                {column.label}
+              </Text>
+              {sortable ? (
+                <Text size="xs" color="muted" userSelect="none">
+                  {active ? (sort?.dir === "asc" ? "↑" : "↓") : "↕"}
+                </Text>
+              ) : null}
+            </View>
+          );
+          return sortable ? (
+            <Pressable
+              key={column.key as string}
+              accessibilityRole="button"
+              accessibilityLabel={`Sắp xếp theo ${column.label}`}
+              onPress={() => onSortChange?.(column.key)}
+              style={cellStyle}
+            >
+              {inner}
+            </Pressable>
+          ) : (
+            <View key={column.key as string} style={cellStyle}>
+              {inner}
+            </View>
+          );
+        })}
+      </View>
+      {rows.filter(Boolean).map((r, i) => {
+        const row = r as TRow;
+        const extraStyle = rowStyle?.(row);
+        const cells = columns.map((column) => (
           <View
+            key={column.key as string}
             style={[
               column.width ? { width: column.width } : styles.flexColumn,
-              styles.headerCell,
+              styles.bodyCell,
+              column.align === "right" ? styles.alignEnd : null,
             ]}
-            key={column.key as string}
           >
-            <Text weight="medium" numberOfLines={1} userSelect="none">
-              {column.label}
-            </Text>
+            {column.renderCell ? (
+              column.renderCell({ row, column })
+            ) : (
+              <Text numberOfLines={1}>{row[column.key]?.toString()}</Text>
+            )}
           </View>
-        ))}
-      </View>
-      {rows.filter(Boolean).map((r, i) => {
-        const row = r as TRow;
-        const extraStyle = rowStyle?.(row);
-        return (
-          <View
-            key={rowKey ? String(row[rowKey]) : i}
-            style={[styles.bodyRow, extraStyle]}
+        ));
+        const key = rowKey ? String(row[rowKey]) : i;
+        return onRowPress ? (
+          <Pressable
+            key={key}
+            accessibilityRole="button"
+            onPress={() => onRowPress(row)}
+            style={({ pressed }) => [styles.bodyRow, pressed ? styles.rowPressed : null, extraStyle]}
           >
-            {columns.map((column) => (
-              <View
-                key={column.key as string}
-                style={[
-                  column.width ? { width: column.width } : styles.flexColumn,
-                  styles.bodyCell,
-                ]}
-              >
-                {column.renderCell ? (
-                  column.renderCell({ row, column })
-                ) : (
-                  <Text numberOfLines={1}>{row[column.key]?.toString()}</Text>
-                )}
-              </View>
-            ))}
+            {cells}
+          </Pressable>
+        ) : (
+          <View key={key} style={[styles.bodyRow, extraStyle]}>
+            {cells}
           </View>
         );
       })}
@@ -86,19 +139,35 @@ const styles = StyleSheet.create({
     backgroundColor: colors.zinc[50],
   },
   headerCell: {
-    height: 44,
+    minHeight: 40,
     justifyContent: "center",
-    paddingHorizontal: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
   },
-bodyRow: {
+  headerInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  bodyRow: {
     flexDirection: "row",
     borderBottomWidth: 1,
     borderBottomColor: colors.border,
+    alignItems: "stretch",
+  },
+  rowPressed: {
+    backgroundColor: colors.zinc[50],
   },
+  // No fixed height — the row sizes to its content + vertical padding, so rich
+  // cells (avatar chips, buttons, stacked badges) get room instead of squeezing.
   bodyCell: {
     minHeight: 44,
     justifyContent: "center",
-    paddingHorizontal: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
+  alignEnd: {
+    alignItems: "flex-end",
   },
   flexColumn: {
     flex: 1,