gridjs-spreadsheet 26.6.1 → 26.7.0

package/index.js

@@ -1 +1 @@
-module.exports = require('./xspreadsheet.js');
+module.exports = require('./xspreadsheet.js');

package/package.json

@@ -1,50 +1,143 @@
-{
-  "name": "gridjs-spreadsheet",
-  "version": "26.6.1",
-  "description": "this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, and provides easy-to-use APIs based on JSON format.",
-  "types": "index.d.ts",
-  "main": "xspreadsheet.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
- "keywords": [
-  "excel",
-  "spreadsheet",
-  "web-excel",
-  "online-excel",
-  "excel-viewer",
-  "excel-editor",
-  "javascript-excel",
-  "javascript-spreadsheet",
-  "excel-component",
-  "spreadsheet-ui",
-  "react-spreadsheet",
-  "vue-excel",
-  "typescript",
-  "xlsx",
-  "xls",
-  "csv",
-  "ods",
-  "numbers",
-  "xlsm",
-  "xlsb",
-  "excel-io",
-  "redact",
-  "redaction",
-  "data-redaction",
-  "collaborative-editing",
-  "excel-api",
-  "data-table",
-  "datagrid",
-  "convert-pdf",
-  "convert-html",
-  "sheets"
-],
-  "author": "Aspose Cells Team",
-  "dependencies": {
-    "jquery": "~ 3.6.0",
-    "jquery-ui": "~ 1.13.2",
-    "jszip": "~ 3.10.1"
-  },
-  "license": "MIT"
-}
+{
+  "name": "gridjs-spreadsheet",
+  "version": "26.7.0",
+  "description": "this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, and provides easy-to-use APIs based on JSON format.",
+  "types": "index.d.ts",
+  "main": "xspreadsheet.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./xspreadsheet.js"
+    },
+    "./xspreadsheet.css": "./xspreadsheet.css",
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./angular": {
+      "types": "./angular.d.ts",
+      "default": "./angular.js"
+    },
+    "./shared": {
+      "types": "./shared.d.ts",
+      "default": "./shared.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "readme.md",
+    "preview.gif",
+    "xspreadsheet.js",
+    "xspreadsheet.css",
+    "*.svg",
+    "index.js",
+    "index.d.ts",
+    "shared.js",
+    "shared.d.ts",
+    "react.js",
+    "react.d.ts",
+    "vue.js",
+    "vue.d.ts",
+    "angular.js",
+    "angular.d.ts",
+    "example/.gitignore",
+    "example/README.md",
+    "example/HELP.md",
+    "example/Dockerfile",
+    "example/compose.yaml",
+    "example/pom.xml",
+    "example/mvnw",
+    "example/mvnw.cmd",
+    "example/src/main/java",
+    "example/src/main/resources",
+    "example/wb",
+    "example/react-gridjs/index.html",
+    "example/react-gridjs/package.json",
+    "example/react-gridjs/src",
+    "example/react-gridjs/vite.config.js",
+    "example/vue-gridjs/index.html",
+    "example/vue-gridjs/package.json",
+    "example/vue-gridjs/src",
+    "example/vue-gridjs/vite.config.js",
+    "example/angular-gridjs/.nvmrc",
+    "example/angular-gridjs/angular.json",
+    "example/angular-gridjs/package.json",
+    "example/angular-gridjs/proxy.conf.json",
+    "example/angular-gridjs/src",
+    "example/angular-gridjs/tsconfig.json",
+    "example/angular-gridjs/tsconfig.app.json",
+    "example/vanilla-gridjs/shared",
+    "example/vanilla-gridjs/npm/index.html",
+    "example/vanilla-gridjs/npm/main.js",
+    "example/vanilla-gridjs/npm/package.json",
+    "example/vanilla-gridjs/npm/vite.config.js",
+    "example/vanilla-gridjs/script/index.html",
+    "example/vanilla-gridjs/script/main.js",
+    "example/vanilla-gridjs/script/package.json",
+    "example/vanilla-gridjs/script/vite.config.js"
+  ],
+ "keywords": [
+  "excel",
+  "spreadsheet",
+  "web-excel",
+  "online-excel",
+  "excel-viewer",
+  "excel-editor",
+  "javascript-excel",
+  "javascript-spreadsheet",
+  "excel-component",
+  "spreadsheet-ui",
+  "react-spreadsheet",
+  "vue-excel",
+    "angular-spreadsheet",
+    "vue-spreadsheet",
+    "react-excel",
+    "angular-excel",
+  "typescript",
+  "xlsx",
+  "xls",
+  "csv",
+  "ods",
+  "numbers",
+  "xlsm",
+  "xlsb",
+  "excel-io",
+  "redact",
+  "redaction",
+  "data-redaction",
+  "collaborative-editing",
+  "excel-api",
+  "data-table",
+  "datagrid",
+  "convert-pdf",
+  "convert-html",
+  "sheets"
+],
+  "author": "Aspose Cells Team",
+  "dependencies": {
+    "jszip": "~3.10.1"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0",
+    "react": ">=16.8.0",
+    "@angular/core": ">=14.0.0",
+    "@angular/common": ">=14.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": { "optional": true },
+    "react": { "optional": true },
+    "@angular/core": { "optional": true },
+    "@angular/common": { "optional": true }
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}

package/react.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties } from 'react';
+import type Spreadsheet from 'gridjs-spreadsheet';
+import type { GridJsAdapter } from './shared';
+
+export interface GridJsSpreadsheetProps {
+  apiBase?: string;
+  data?: any;
+  loader?: () => Promise<any> | any;
+  mode?: 'edit' | 'read';
+  locale?: string;
+  token?: string;
+  height?: string | number;
+  showToolbar?: boolean;
+  showContextmenu?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  onReady?: (instance: Spreadsheet, adapter: GridJsAdapter) => void;
+  onChange?: (...args: any[]) => void;
+  onError?: (payload: any) => void;
+  onCellSelected?: (...args: any[]) => void;
+  onCellEdited?: (...args: any[]) => void;
+  onSheetSelected?: (...args: any[]) => void;
+  onSheetLoaded?: (...args: any[]) => void;
+}
+
+export function GridJsSpreadsheet(props: GridJsSpreadsheetProps): JSX.Element;
+export default GridJsSpreadsheet;

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;