@gcsa/console-react 0.1.0

package/src/utils/gcsaTableColumns.ts

@@ -0,0 +1,97 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { GcsaTableColumn } from '@gcsa/console-core';
+
+export type GcsaTableCellSlotProps<T> = {
+  row: T;
+  value: unknown;
+  index: number;
+  column: string;
+};
+
+export type GcsaTableHeaderSlotProps = {
+  column: string;
+  title: string;
+};
+
+export function isGcsaTableColumn<T>(
+  column: GcsaTableColumn<T> | ColumnDef<T, unknown>
+): column is GcsaTableColumn<T> {
+  return (
+    typeof column === 'object' &&
+    column !== null &&
+    'id' in column &&
+    typeof (column as GcsaTableColumn<T>).header === 'string' &&
+    // A converted TanStack definition also has id/header. Its `meta` field is
+    // the stable discriminator that prevents wrapping an adapter cell twice.
+    !('meta' in column) &&
+    !('accessorFn' in column)
+  );
+}
+
+export function gcsaColumnSlotKey(
+  column: GcsaTableColumn<unknown> | ColumnDef<unknown, unknown>
+): string {
+  if (isGcsaTableColumn(column)) {
+    return column.slot ?? column.id;
+  }
+  const meta = column.meta as { slotKey?: string } | undefined;
+  const accessorKey = 'accessorKey' in column ? column.accessorKey : undefined;
+  return meta?.slotKey ?? column.id ?? String(accessorKey ?? '');
+}
+
+export function gcsaTableColumnsToDefs<T extends Record<string, unknown>>(
+  columns: GcsaTableColumn<T>[]
+): ColumnDef<T, unknown>[] {
+  return columns.map(col => {
+    const slotKey = col.slot ?? col.id;
+    const isGroup = Boolean(col.columns?.length);
+    const accessorKey = col.accessorKey ?? col.id;
+
+    return {
+      id: col.id,
+      ...(!isGroup ? { accessorKey } : {}),
+      header: col.header,
+      ...(!isGroup ? { enableSorting: col.sortable ?? false } : {}),
+      ...(!isGroup && col.sortCompare ? { sortingFn: (rowA: { original: T }, rowB: { original: T }) => col.sortCompare!(rowA.original, rowB.original) } : {}),
+      ...(col.columns?.length ? { columns: gcsaTableColumnsToDefs(col.columns) } : {}),
+      meta: {
+        width: col.width,
+        minWidth: col.minWidth,
+        showOverflowTooltip: col.showOverflowTooltip,
+        align: col.align,
+        fixed: col.fixed,
+        hidden: col.hidden,
+        filter: col.filter,
+        slotKey
+      },
+      cell: !isGroup && (col.cell || col.formatter)
+        ? ({ getValue, row }) => col.cell
+          ? col.cell(row.original)
+          : col.formatter!(getValue(), row.original, row.index)
+        : undefined
+    };
+  });
+}
+
+export function resolveGcsaTableColumns<T extends Record<string, unknown>>(
+  columns: Array<GcsaTableColumn<T> | ColumnDef<T, unknown>>
+): ColumnDef<T, unknown>[] {
+  if (!columns.length) return [];
+  if (isGcsaTableColumn(columns[0])) {
+    return gcsaTableColumnsToDefs(columns as GcsaTableColumn<T>[]);
+  }
+  return columns as ColumnDef<T, unknown>[];
+}
+
+export function gcsaTableCellSlotName(slotKey: string) {
+  return `cell-${slotKey}`;
+}
+
+export function gcsaTableHeaderSlotName(slotKey: string) {
+  return `header-${slotKey}`;
+}
+
+export function formatGcsaTableCellValue(value: unknown) {
+  if (value == null) return '';
+  return String(value);
+}

package/src/utils/preserveDrawerScroll.ts

@@ -0,0 +1,20 @@
+import { GCSA_PRESERVE_SCROLL_EVENT } from '../hooks/usePreventHiddenInputScroll';
+
+/** 通知最近的 Drawer body 恢复滚动（Select 开关、AutoComplete 面板切换后调用）。 */
+export function preserveDrawerScrollFrom(node: HTMLElement | null | undefined) {
+  const drawerBody = node?.closest('.gcsa-drawer__body');
+  if (!(drawerBody instanceof HTMLElement)) return;
+  const panel = drawerBody.closest('.gcsa-drawer__panel');
+  if (panel instanceof HTMLElement && panel.scrollTop !== 0) {
+    panel.scrollTop = 0;
+  }
+  drawerBody.dispatchEvent(new Event(GCSA_PRESERVE_SCROLL_EVENT));
+  requestAnimationFrame(() => {
+    drawerBody.dispatchEvent(new Event(GCSA_PRESERVE_SCROLL_EVENT));
+    requestAnimationFrame(() => drawerBody.dispatchEvent(new Event(GCSA_PRESERVE_SCROLL_EVENT)));
+  });
+  window.setTimeout(() => drawerBody.dispatchEvent(new Event(GCSA_PRESERVE_SCROLL_EVENT)), 0);
+  window.setTimeout(() => drawerBody.dispatchEvent(new Event(GCSA_PRESERVE_SCROLL_EVENT)), 48);
+  window.setTimeout(() => drawerBody.dispatchEvent(new Event(GCSA_PRESERVE_SCROLL_EVENT)), 120);
+  window.setTimeout(() => drawerBody.dispatchEvent(new Event(GCSA_PRESERVE_SCROLL_EVENT)), 240);
+}

package/src/utils/zodValidators.ts

@@ -0,0 +1,45 @@
+import type { ZodObject, ZodTypeAny } from 'zod';
+import {
+  GCSA_DEFAULT_LOCALE,
+  getGcsaLocaleMessages,
+  type GcsaConsoleLocale
+} from '@gcsa/console-core';
+
+type ZodShape = Record<string, ZodTypeAny>;
+
+export function zodFieldValidator(
+  schema: ZodObject<ZodShape>,
+  fieldName: string,
+  locale?: GcsaConsoleLocale
+) {
+  const fallback = getGcsaLocaleMessages(locale ?? GCSA_DEFAULT_LOCALE).validationFailed;
+  return ({ value }: { value: unknown }) => {
+    const fieldSchema = schema.shape[fieldName];
+    if (!fieldSchema) return undefined;
+    const result = fieldSchema.safeParse(value);
+    if (result.success) return undefined;
+    return result.error.issues[0]?.message ?? fallback;
+  };
+}
+
+export function zodFormValidator(schema: ZodObject<ZodShape>, locale?: GcsaConsoleLocale) {
+  const fallback = getGcsaLocaleMessages(locale ?? GCSA_DEFAULT_LOCALE).formValidationFailed;
+  return ({ value }: { value: Record<string, unknown> }) => {
+    const result = schema.safeParse(value);
+    if (result.success) return undefined;
+    return result.error.issues[0]?.message ?? fallback;
+  };
+}
+
+export function zodFieldValidators(
+  schema: ZodObject<ZodShape>,
+  fieldName: string,
+  locale?: GcsaConsoleLocale
+) {
+  const validate = zodFieldValidator(schema, fieldName, locale);
+  return {
+    onBlur: validate,
+    onChange: validate,
+    onSubmit: validate
+  };
+}

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}