gridjs-spreadsheet 26.6.2 → 26.7.1

package/react.js

@@ -0,0 +1,111 @@
+import React, { useEffect, useRef } from 'react';
+import { createGridJsAdapter } from './shared.js';
+
+function clonePlain(value) {
+  if (typeof structuredClone === 'function') {
+    return structuredClone(value);
+  }
+  return JSON.parse(JSON.stringify(value));
+}
+
+function importGridJs() {
+  return import('gridjs-spreadsheet');
+}
+
+export function GridJsSpreadsheet({
+  apiBase = '',
+  data,
+  loader,
+  mode = 'edit',
+  locale = 'en',
+  token,
+  height = 'calc(100vh - 96px)',
+  showToolbar = true,
+  showContextmenu = true,
+  className = 'gridjs-react-host',
+  style,
+  onReady,
+  onChange,
+  onError,
+  onCellSelected,
+  onCellEdited,
+  onSheetSelected,
+  onSheetLoaded,
+}) {
+  const hostRef = useRef(null);
+  const adapterRef = useRef(null);
+  const dataKey = data?.uniqueid || data?.filename || 'loader';
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function mount() {
+      if (!hostRef.current || (!data && !loader)) return;
+      adapterRef.current?.destroy();
+      hostRef.current.innerHTML = '';
+
+      const adapter = await createGridJsAdapter({
+        container: hostRef.current,
+        apiBase,
+        data: data ? clonePlain(data) : undefined,
+        loader,
+        mode,
+        locale,
+        token,
+        showToolbar,
+        showContextmenu,
+        callbacks: {
+          ready: onReady,
+          change: onChange,
+          error: onError,
+          cellSelected: onCellSelected,
+          cellEdited: onCellEdited,
+          sheetSelected: onSheetSelected,
+          sheetLoaded: onSheetLoaded,
+        },
+        dependencies: {
+          importJSZip: () => import('jszip'),
+          importGridJs,
+        },
+      });
+
+      if (cancelled) {
+        adapter.destroy();
+      } else {
+        adapterRef.current = adapter;
+      }
+    }
+
+    mount().catch((error) => {
+      if (!cancelled && onError) {
+        onError({ type: 'mountError', error });
+      }
+    });
+
+    return () => {
+      cancelled = true;
+      adapterRef.current?.destroy();
+      adapterRef.current = null;
+      if (hostRef.current) hostRef.current.innerHTML = '';
+    };
+  }, [apiBase, dataKey, loader, mode, locale, token, showToolbar, showContextmenu]);
+
+  useEffect(() => {
+    if (adapterRef.current && token) {
+      adapterRef.current.refreshToken(token);
+    }
+  }, [token]);
+
+  return React.createElement('div', {
+    ref: hostRef,
+    className,
+    style: {
+      width: '100%',
+      background: '#ffffff',
+      ...style,
+      height,
+    },
+  });
+}
+
+export default GridJsSpreadsheet;