@zhenliang/sheet 0.1.22 → 0.1.24

package/dist/example/group.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const App: React.FC;
+export default App;

package/dist/example/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["group.tsx"],"names":[],"mappings":";AAqEA,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAuChB,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/example/group.js

@@ -0,0 +1,123 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { cloneDeep } from 'lodash';
+import { useCallback, useState } from 'react';
+import Table from "../core/table";
+import { jsx as _jsx } from "react/jsx-runtime";
+var columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name'
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age'
+}, {
+  title: 'Address',
+  readonly: function readonly(value, record, index) {
+    // console.log(index);
+    return index % 2 === 0;
+  },
+  dataIndex: 'address',
+  key: 'address'
+}, {
+  title: 'Action',
+  dataIndex: '',
+  key: 'x',
+  editable: false,
+  render: function render() {
+    return /*#__PURE__*/_jsx("a", {
+      children: "Delete"
+    });
+  }
+}];
+var data = [{
+  key: 1,
+  id: 1,
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+  children: [{
+    id: 11,
+    key: '1-1'
+  }, {
+    id: 12,
+    key: '1-2'
+  }]
+}, {
+  key: 2,
+  id: 2,
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+  children: [{
+    id: 21,
+    key: '2-1'
+  }, {
+    id: 22,
+    key: '2-2'
+  }]
+}, {
+  key: 3,
+  id: 3,
+  name: 'Not Expandable',
+  age: 29,
+  address: 'Jiangsu No. 1 Lake Park'
+}, {
+  key: 4,
+  id: 4,
+  name: 'Joe Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park',
+  children: [{
+    id: 41,
+    key: '4-1'
+  }, {
+    id: 42,
+    key: '4-2'
+  }]
+}];
+var App = function App() {
+  var _useState = useState(data),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var handleChange = useCallback(function (changes, extChange) {
+    // console.log(extChange);
+    var newState = cloneDeep(state);
+    changes.forEach(function (change) {
+      var row = change.row,
+        key = change.key,
+        value = change.value;
+      newState[row][key] = value;
+    });
+    setState(newState);
+  }, [state]);
+  return /*#__PURE__*/_jsx(Table, {
+    draggable: true,
+    scroll: {
+      x: '100%'
+    },
+    columns: columns,
+    showBackEdit: true,
+    backEditStyle: {
+      marginLeft: '10px',
+      bottom: '5px',
+      right: '5px'
+    }
+    // expandable={{
+    //   expandedRowRender: (record) => (
+    //     <p style={{ margin: 0 }}>{record.description}</p>
+    //   ),
+    //   rowExpandable: (record) => record.name !== 'Not Expandable',
+    // }}
+    ,
+    dataSource: data,
+    onChange: handleChange
+  });
+};
+export default App;

package/dist/example/index.less

@@ -0,0 +1,5 @@
+.excel-sheet{
+  --row-height:30px;
+  --line-height:30px;
+  --cell-inner-height: 29px;
+}

package/dist/example/selection.d.ts

@@ -0,0 +1,4 @@
+import 'antd/dist/antd.css';
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/dist/example/selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["selection.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAgC,MAAM,OAAO,CAAC;AA6CrD,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EA4BhB,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/example/selection.js

@@ -0,0 +1,86 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Table } from "./..";
+import 'antd/dist/antd.css';
+import React, { useCallback, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  render: function render(_ref) {
+    var value = _ref.value;
+    return /*#__PURE__*/_jsx("a", {
+      children: value
+    });
+  }
+}, {
+  title: 'Age',
+  dataIndex: 'age'
+}, {
+  title: 'Address',
+  dataIndex: 'address'
+}];
+var data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park'
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park'
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park'
+}, {
+  key: '4',
+  name: 'Disabled User',
+  age: 99,
+  address: 'Sidney No. 1 Lake Park'
+}];
+var App = function App() {
+  var _useState = useState(data),
+    _useState2 = _slicedToArray(_useState, 2),
+    dataSource = _useState2[0],
+    setData = _useState2[1];
+  var onChange = useCallback(function (changes) {
+    var newData = _toConsumableArray(dataSource);
+    changes.forEach(function (_ref2) {
+      var row = _ref2.row,
+        key = _ref2.key,
+        value = _ref2.value;
+      newData[row] = _objectSpread(_objectSpread({}, newData[row]), {}, _defineProperty({}, key, key === 'tags' ? value.split(',') : value));
+    });
+    setData(newData);
+  }, [dataSource]);
+  var handleRowChange = useCallback(function () {}, []);
+  return /*#__PURE__*/_jsx(Table, {
+    draggable: true,
+    columns: columns,
+    rowKey: "key",
+    dataSource: dataSource,
+    onChange: onChange,
+    rowSelection: {
+      rowSelected: [],
+      onChange: handleRowChange
+    }
+  });
+};
+export default App;

package/dist/example/sheet.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const BasicSheet: React.FC;
+export default BasicSheet;

package/dist/example/sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["sheet.tsx"],"names":[],"mappings":"AAKA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,cAAc,CAAC;AAqDtB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAwUvB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/example/sheet.js

@@ -0,0 +1,397 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import { Sheet } from "./..";
+import { Tooltip } from 'antd';
+import { cloneDeep, isNil, random, range } from 'lodash';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { SheetEvent } from "../core/sheet/Event";
+import { DraggableShell } from "../core/shell/draggableShell";
+import { changeGroupConfig } from "../core/util";
+import { useSheetEvent } from "../hooks";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ExcelIndexCell = function ExcelIndexCell(_ref) {
+  var value = _ref.value,
+    row = _ref.row,
+    record = _ref.record;
+  var eventBus = useSheetEvent();
+  var handleClick = useCallback(function () {
+    eventBus.emit('onCellClick', {
+      row: row
+    });
+  }, []);
+  return /*#__PURE__*/_jsxs("span", {
+    className: "excel-index-cell",
+    onClick: handleClick,
+    style: {
+      cursor: 'pointer',
+      color: record === null || record === void 0 ? void 0 : record.color
+    },
+    children: [!isNil(record === null || record === void 0 ? void 0 : record.open) ? record !== null && record !== void 0 && record.open ? /*#__PURE__*/_jsx(MinusCircleOutlined, {
+      rev: undefined
+    }) : /*#__PURE__*/_jsx(Tooltip, {
+      overlay: record.groups,
+      trigger: ['hover'],
+      children: /*#__PURE__*/_jsx(PlusCircleOutlined, {
+        rev: undefined
+      })
+    }) : null, value]
+  });
+};
+var grid = range(1, 120).map(function (row, rowIndex) {
+  return range(0, 26).map(function (i) {
+    return {
+      id: String(random(0, 1, true)),
+      readonly: i === 0 ? true : false,
+      fixed: i === 0 ? 'left' : undefined,
+      value: i === 0 ? row : row > 15 || i > 10 ? '' : "".concat(row, "-").concat(i),
+      valueViewer: i === 0 ? ExcelIndexCell : undefined,
+      record: [1, 7].includes(rowIndex) ? {
+        open: true,
+        color: 'inherit',
+        groups: rowIndex === 1 ? [1, 2, 3, 4, 5] : [7, 8, 9]
+      } : undefined,
+      align: 'center'
+    };
+  });
+});
+var BasicSheet = function BasicSheet() {
+  var _useState = useState(grid),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var sheetInstance = useRef(null);
+  var _useState3 = useState({
+      groups: [{
+        groupStart: 1,
+        groupEnd: 5,
+        groupName: 'group1'
+      }, {
+        groupStart: 7,
+        groupEnd: 9,
+        groupName: 'group2'
+      }],
+      groupOpen: [true, true]
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    groupConfig = _useState4[0],
+    setGroupConfig = _useState4[1];
+  var handleNewRow = useCallback(function (index) {
+    var _sheetInstance$curren, _sheetInstance$curren2;
+    var newGrid = cloneDeep(state);
+    var newRow = cloneDeep(newGrid[0]);
+    newRow.forEach(function (item) {
+      item.value = '';
+      item.record = undefined;
+    });
+    newGrid.splice(index, 0, newRow);
+    newGrid.forEach(function (row, index) {
+      row[0].value = index + 1;
+    });
+    (_sheetInstance$curren = sheetInstance.current) === null || _sheetInstance$curren === void 0 || _sheetInstance$curren.pushToHistory({
+      type: 'NewRow',
+      changes: [],
+      rowInfo: {
+        newRow: index + 1
+      },
+      extraInfo: groupConfig
+    });
+    var newGroupConfig = changeGroupConfig(groupConfig, {
+      add: index
+    });
+    setState(newGrid);
+    setGroupConfig(newGroupConfig);
+    (_sheetInstance$curren2 = sheetInstance.current) === null || _sheetInstance$curren2 === void 0 || _sheetInstance$curren2.selectRow(index);
+  }, [state, groupConfig]);
+  var handleDeleteRow = useCallback(function (index) {
+    var _sheetInstance$curren3;
+    var newGrid = cloneDeep(state);
+    var deleteRow = newGrid.splice(index - 1, 1);
+    newGrid.forEach(function (row, index) {
+      row[0].value = index + 1;
+    });
+    var newGroupConfig = changeGroupConfig(groupConfig, {
+      remove: index
+    });
+    (_sheetInstance$curren3 = sheetInstance.current) === null || _sheetInstance$curren3 === void 0 || _sheetInstance$curren3.pushToHistory({
+      type: 'DeleteRow',
+      changes: deleteRow[0].map(function (item, col) {
+        return {
+          cell: item,
+          row: index,
+          col: col
+        };
+      }),
+      rowInfo: {
+        deleteRow: index
+      },
+      extraInfo: groupConfig
+    });
+    setGroupConfig(newGroupConfig);
+    setState(newGrid);
+  }, [state]);
+  var handleReverse = useCallback(function (value) {
+    var _ref2 = value,
+      type = _ref2.type,
+      changes = _ref2.changes,
+      rowInfo = _ref2.rowInfo,
+      extraInfo = _ref2.extraInfo;
+    var newGrid = _toConsumableArray(state);
+    if (type === 'NewRow') {
+      var _sheetInstance$curren4;
+      if (!(rowInfo !== null && rowInfo !== void 0 && rowInfo.newRow) && (rowInfo === null || rowInfo === void 0 ? void 0 : rowInfo.newRow) !== 0) return;
+      newGrid.splice(rowInfo.newRow - 1, 1);
+      newGrid.forEach(function (row, index) {
+        row[0].value = index + 1;
+      });
+      setState(newGrid);
+      setGroupConfig(extraInfo);
+      (_sheetInstance$curren4 = sheetInstance.current) === null || _sheetInstance$curren4 === void 0 || _sheetInstance$curren4.selectRow();
+    } else if (type === 'DeleteRow') {
+      if (!(rowInfo !== null && rowInfo !== void 0 && rowInfo.deleteRow) && (rowInfo === null || rowInfo === void 0 ? void 0 : rowInfo.deleteRow) !== 0) return;
+      newGrid.splice(rowInfo.deleteRow - 1, 0, changes.map(function (item) {
+        return item.cell;
+      }));
+      newGrid.forEach(function (row, index) {
+        row[0].value = index + 1;
+      });
+      setState(newGrid);
+      setGroupConfig(extraInfo);
+    } else if (type === 'Custom') {
+      var _ref3 = extraInfo,
+        _groupConfig = _ref3.groupConfig,
+        extraType = _ref3.extraType,
+        lastState = _ref3.state;
+      if (extraType === 'group') {
+        setGroupConfig(_groupConfig);
+        setState(lastState);
+      }
+    }
+  }, [state, groupConfig]);
+  var onCellsChanged = useCallback(function (changes, extChanges) {
+    var newGrid = cloneDeep(state);
+    changes.forEach(function (_ref4) {
+      var row = _ref4.row,
+        col = _ref4.col,
+        value = _ref4.value;
+      var newRow = _toConsumableArray(newGrid[row]);
+      newRow[col] = _objectSpread(_objectSpread({}, newRow[col]), {}, {
+        value: value
+      });
+      newGrid[row] = newRow;
+    });
+    extChanges === null || extChanges === void 0 || extChanges.forEach(function (item) {
+      var _ref5 = item,
+        row = _ref5.row,
+        col = _ref5.col,
+        value = _ref5.value;
+      if (!newGrid[row]) {
+        var newRow = cloneDeep(newGrid[0]);
+        newRow.forEach(function (item) {
+          item.value = '';
+          item.record = undefined;
+          item.id = String(random(0, 1, true));
+        });
+        newGrid.push(newRow);
+        newGrid.forEach(function (row, index) {
+          row[0].value = index + 1;
+        });
+        // sheetInstance.current?.pushToHistory({
+        //   type: 'NewRow' as SheetType.OperateType,
+        //   changes: [],
+        //   rowInfo: {
+        //     newRow: index + 1,
+        //   },
+        //   extraInfo: groupConfig,
+        // });
+        // const newRow = Array(newGrid[0].length).map((item, index) => ({
+        //   id: String(random(0, 1)),
+        //   row,
+        //   col: index,
+        //   value: '',
+        // }));
+        // newGrid.push(newRow);
+      }
+
+      newGrid[row][col] = _objectSpread(_objectSpread({}, newGrid[row][col]), {}, {
+        value: value
+      });
+    });
+    setState(newGrid);
+  }, [state]);
+  var WrappedTableShell = useMemo(function () {
+    return DraggableShell({
+      columns: range(26).map(function (i) {
+        if (i > 26) return {
+          title: String.fromCharCode(64 + i / 26) + String.fromCharCode(64 + i % 26),
+          width: 100,
+          align: 'center'
+        };
+        return {
+          title: i === 0 ? '' : String.fromCharCode(64 + i),
+          fixed: i === 0 ? 'left' : undefined,
+          width: i === 0 ? 50 : 80,
+          align: 'center'
+        };
+      }),
+      className: 'baseTable'
+    });
+  }, []);
+  var MenuRender = useCallback(function (props) {
+    var position = props.position,
+      handleMenu = props.onContextMenu,
+      cell = props.cell;
+    var _ref6 = position || {},
+      top = _ref6.top,
+      left = _ref6.left;
+    if (!cell) return null;
+    return /*#__PURE__*/_jsxs("div", {
+      className: "harvest-menu",
+      style: {
+        top: top,
+        left: left,
+        background: 'white'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "harvest-menu-item",
+        onClick: function onClick() {
+          return handleMenu && handleMenu({
+            type: '1',
+            row: cell.row + 1
+          });
+        },
+        style: {
+          padding: '5px 10px'
+        },
+        children: "\u5411\u4E0B\u63D2\u5165\u884C"
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "harvest-menu-item",
+        onClick: function onClick() {
+          return handleMenu && handleMenu({
+            type: '2',
+            row: cell.row + 1
+          });
+        },
+        children: ["\u5411\u4E0A\u63D2\u5165\u884C", ' ']
+      }), /*#__PURE__*/_jsx("div", {
+        className: "harvest-menu-item",
+        onClick: function onClick() {
+          return handleMenu && handleMenu({
+            type: '3',
+            row: cell.row + 1
+          });
+        },
+        children: "\u5220\u9664\u884C"
+      })]
+    });
+  }, [handleNewRow]);
+  var handleMenuClick = useCallback(function (e) {
+    var _ref7 = e,
+      type = _ref7.type,
+      row = _ref7.row;
+    // console.log('click', state.length);
+    if (type === '1') {
+      handleNewRow(row);
+    }
+    if (type === '2') {
+      handleNewRow(row - 1);
+    }
+    if (type === '3') {
+      handleDeleteRow(row);
+    }
+  }, [state, groupConfig]);
+  useEffect(function () {
+    // console.log('rendered', performance.now());
+  }, []);
+  return /*#__PURE__*/_jsxs(Sheet, {
+    sheetInstance: sheetInstance,
+    className: "excel-sheet",
+    virtualized: true,
+    freePaste: true,
+    showBackEdit: true,
+    data: state,
+    groupConfig: groupConfig,
+    scroll: {
+      x: '100%',
+      y: '100vh'
+    },
+    sheetRenderer: WrappedTableShell,
+    menuRenderer: MenuRender,
+    onCellsChanged: onCellsChanged,
+    onContextMenu: handleMenuClick,
+    children: [/*#__PURE__*/_jsx(SheetEvent, {
+      name: "onCellClick",
+      handler: function handler(e) {
+        var _ref8 = e,
+          row = _ref8.row;
+        var index = groupConfig.groups.findIndex(function (item) {
+          return item.groupStart === row;
+        });
+        if (index >= 0) {
+          var _sheetInstance$curren5;
+          // console.log('changed');
+          var groupOpen = _toConsumableArray(groupConfig.groupOpen);
+          groupOpen[index] = !groupConfig.groupOpen[index];
+          var newGrid = _toConsumableArray(state);
+          newGrid[row] = _toConsumableArray(newGrid[row]);
+          newGrid[row][0] = _objectSpread(_objectSpread({}, newGrid[row][0]), {}, {
+            record: {
+              open: !!groupOpen[index],
+              color: groupOpen[index] ? 'inherit' : 'green'
+            }
+          });
+          setGroupConfig(_objectSpread(_objectSpread({}, groupConfig), {}, {
+            groupOpen: groupOpen
+          }));
+          setState(newGrid);
+          (_sheetInstance$curren5 = sheetInstance.current) === null || _sheetInstance$curren5 === void 0 || _sheetInstance$curren5.pushToHistory({
+            type: 'Custom',
+            changes: [],
+            extraInfo: {
+              extraType: 'group',
+              groupConfig: groupConfig,
+              state: state
+            }
+          });
+        }
+      }
+    }), /*#__PURE__*/_jsx(SheetEvent, {
+      name: "reverse",
+      handler: handleReverse
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        onClick: function onClick() {
+          var _sheetInstance$curren6;
+          (_sheetInstance$curren6 = sheetInstance.current) === null || _sheetInstance$curren6 === void 0 || _sheetInstance$curren6.zoomTo(0);
+        },
+        children: "\u56DE\u5230\u9876\u90E8"
+      }), /*#__PURE__*/_jsx("div", {
+        onClick: function onClick() {
+          var _sheetInstance$curren7;
+          (_sheetInstance$curren7 = sheetInstance.current) === null || _sheetInstance$curren7 === void 0 || _sheetInstance$curren7.zoomTo();
+        },
+        children: "\u56DE\u5230\u7F16\u8F91\u884C"
+      })]
+    })]
+  });
+};
+export default BasicSheet;

package/dist/example/valuationAnalyze.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/example/valuationAnalyze.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"valuationAnalyze.d.ts","sourceRoot":"","sources":["valuationAnalyze.tsx"],"names":[],"mappings":";;AAkDA,wBA0JE"}