@zhenliang/sheet 0.0.1

package/dist/example/ellipsis.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Table from "../core/table";
+import { jsx as _jsx } from "react/jsx-runtime";
+var columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  render: function render(_ref) {
+    var value = _ref.value;
+    return /*#__PURE__*/_jsx("a", {
+      children: value
+    });
+  },
+  width: 150
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+  width: 80
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+  key: 'address 1'
+}, {
+  title: 'Long Column',
+  dataIndex: 'address',
+  key: 'address 2'
+}, {
+  title: 'Long Column Long Column',
+  dataIndex: 'address',
+  key: 'address 3'
+}, {
+  title: 'Long Column',
+  dataIndex: 'address',
+  key: 'address 4'
+}];
+var data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
+  tags: ['nice', 'developer']
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+  tags: ['loser']
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
+  tags: ['cool', 'teacher']
+}];
+var App = function App() {
+  return /*#__PURE__*/_jsx(Table, {
+    columns: columns,
+    dataSource: data,
+    onChange: function onChange() {}
+  });
+};
+export default App;

package/dist/example/fixed.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import Table from "../core/table";
+import { jsx as _jsx } from "react/jsx-runtime";
+var columns = [{
+  title: 'Full Name',
+  width: 100,
+  dataIndex: 'name',
+  key: 'name',
+  fixed: 'left'
+}, {
+  title: 'Age',
+  width: 100,
+  dataIndex: 'age',
+  key: 'age'
+  // fixed: 'left',
+}, {
+  title: 'Column 1',
+  width: 200,
+  dataIndex: 'address',
+  key: '1'
+}, {
+  title: 'Column 2',
+  width: 200,
+  dataIndex: 'address',
+  key: '2'
+}, {
+  title: 'Column 3',
+  width: 200,
+  dataIndex: 'address',
+  key: '3'
+}, {
+  title: 'Column 4',
+  width: 200,
+  dataIndex: 'address',
+  key: '4'
+}, {
+  title: 'Column 5',
+  width: 200,
+  dataIndex: 'address',
+  key: '5'
+}, {
+  title: 'Column 6',
+  width: 200,
+  dataIndex: 'address',
+  key: '6'
+}, {
+  title: 'Column 7',
+  width: 200,
+  dataIndex: 'address',
+  key: '7'
+}, {
+  title: 'Column 8',
+  width: 200,
+  dataIndex: 'address',
+  key: '8'
+}, {
+  title: 'Action',
+  key: 'operation',
+  fixed: 'right',
+  width: 100,
+  render: function render() {
+    return /*#__PURE__*/_jsx("a", {
+      children: "action"
+    });
+  }
+}];
+var data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York Park'
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 40,
+  address: 'London Park'
+}];
+var App = function App() {
+  return /*#__PURE__*/_jsx(Table, {
+    columns: columns,
+    dataSource: data,
+    scroll: {
+      x: '100%'
+    },
+    onChange: function onChange() {}
+  });
+};
+export default App;

package/dist/example/group.js

@@ -0,0 +1,84 @@
+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,
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+  children: [{
+    key: '1-1'
+  }, {
+    key: '1-2'
+  }]
+}, {
+  key: 2,
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+  children: [{
+    key: '2-1'
+  }, {
+    key: '2-2'
+  }]
+}, {
+  key: 3,
+  name: 'Not Expandable',
+  age: 29,
+  address: 'Jiangsu No. 1 Lake Park'
+}, {
+  key: 4,
+  name: 'Joe Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park',
+  children: [{
+    key: '4-1'
+  }, {
+    key: '4-2'
+  }]
+}];
+var App = function App() {
+  return /*#__PURE__*/_jsx(Table, {
+    draggable: true,
+    scroll: {
+      x: '100%'
+    },
+    columns: columns
+    // expandable={{
+    //   expandedRowRender: (record) => (
+    //     <p style={{ margin: 0 }}>{record.description}</p>
+    //   ),
+    //   rowExpandable: (record) => record.name !== 'Not Expandable',
+    // }}
+    ,
+    dataSource: data,
+    onChange: function onChange() {}
+  });
+};
+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.js

@@ -0,0 +1,85 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import Table from "../core/table";
+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, {
+    columns: columns,
+    rowKey: "key",
+    dataSource: dataSource,
+    onChange: onChange,
+    rowSelection: {
+      rowSelected: [],
+      onChange: handleRowChange
+    }
+  });
+};
+export default App;

package/dist/example/sheet.js

@@ -0,0 +1,356 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+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, {}) : /*#__PURE__*/_jsx(Tooltip, {
+      overlay: record.groups,
+      trigger: ['hover'],
+      children: /*#__PURE__*/_jsx(PlusCircleOutlined, {})
+    }) : null, value]
+  });
+};
+var grid = range(1, 120).map(function (row, rowIndex) {
+  return range(0, 26).map(function (i) {
+    return {
+      id: String(random(0, 1)),
+      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 ? 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 ? 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 ? 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 ? 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 = function onCellsChanged(changes) {
+    var newGrid = _toConsumableArray(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;
+    });
+    setState(newGrid);
+  };
+  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 _ref5 = position || {},
+      top = _ref5.top,
+      left = _ref5.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 _ref6 = e,
+      type = _ref6.type,
+      row = _ref6.row;
+    console.log('click', state.length);
+    if (type === '1') {
+      handleNewRow(row);
+    }
+    if (type === '2') {
+      handleNewRow(row - 1);
+    }
+    if (type === '3') {
+      handleDeleteRow(row);
+    }
+  }, [state, groupConfig]);
+  console.log('render', performance.now());
+  useEffect(function () {
+    console.log('rendered', performance.now());
+  }, []);
+  console.log(state.length);
+  return /*#__PURE__*/_jsxs(Sheet, {
+    sheetInstance: sheetInstance,
+    className: "excel-sheet",
+    virtualized: 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 _ref7 = e,
+          row = _ref7.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 ? 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 ? 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 ? void 0 : _sheetInstance$curren7.zoomTo();
+        },
+        children: "\u56DE\u5230\u7F16\u8F91\u884C"
+      })]
+    })]
+  });
+};
+export default BasicSheet;

package/dist/hooks/index.js

@@ -0,0 +1,6 @@
+export { useEventBus } from "./useEventBus";
+export { useKeyBoard } from "./useKeyboard";
+export { useMiddlewareReducer } from "./useMiddlewareReducer";
+export { useMouse } from "./useMouse";
+export { useSetState } from "./useSetState";
+export { SheetEventContext, useSheetEvent } from "./useSheetEvent";