@zhenliang/sheet 0.1.26 → 0.1.28

package/dist/core/sheet/Cell.js

@@ -176,6 +176,6 @@ var Cell = function Cell(props) {
   });
 };
 export default /*#__PURE__*/memo(Cell, function (pre, next) {
-  var shouldUpdate = pre.col === next.col && pre.row === next.row && pre.cell.value === next.cell.value && pre.cell.dataEditor === next.cell.dataEditor && pre.cell.record === next.cell.record;
+  var shouldUpdate = pre.col === next.col && pre.row === next.row && pre.cell.value === next.cell.value && pre.cell.dataEditor === next.cell.dataEditor && pre.cell.className === next.cell.className && pre.cell.record === next.cell.record;
   return shouldUpdate;
 });

package/dist/core/sheet/Control.d.ts

@@ -0,0 +1,10 @@
+import React, { CSSProperties } from 'react';
+interface ControlProps {
+    showBackEdit?: boolean;
+    startRowVisible: boolean;
+    handelClick: () => void;
+    backEditStyle?: Partial<CSSProperties>;
+    direction: 'up' | 'down';
+}
+export declare const Control: React.FC<ControlProps>;
+export {};

package/dist/core/sheet/Control.js

@@ -0,0 +1,32 @@
+import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Control = function Control(props) {
+  var showBackEdit = props.showBackEdit,
+    startRowVisible = props.startRowVisible,
+    handelClick = props.handelClick,
+    backEditStyle = props.backEditStyle,
+    direction = props.direction;
+  if (!showBackEdit || startRowVisible) return null;
+  var styles = backEditStyle || {
+    top: 0,
+    right: 0
+  };
+  var backIcon = direction === 'up' ? /*#__PURE__*/_jsx(ArrowUpOutlined, {
+    rev: undefined
+  }) : /*#__PURE__*/_jsx(ArrowDownOutlined, {
+    rev: undefined
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: "back-edit",
+    onClick: handelClick,
+    style: styles,
+    children: [backIcon, /*#__PURE__*/_jsx("span", {
+      style: {
+        marginLeft: 0
+      },
+      children: "\u8FD4\u56DE\u7F16\u8F91\u884C"
+    })]
+  });
+};

package/dist/core/sheet/DefaultRow.js

@@ -12,13 +12,7 @@ var DefaultRow = function DefaultRow(_ref) {
     return groupConfigToGroupMap(groupConfig);
   }, [groupConfig]);
   if (groupMap.get(row) && !((_groupMap$get = groupMap.get(row)) !== null && _groupMap$get !== void 0 && _groupMap$get.isStart) && !((_groupMap$get2 = groupMap.get(row)) !== null && _groupMap$get2 !== void 0 && _groupMap$get2.isOpen)) {
-    return /*#__PURE__*/_jsx("tr", {
-      className: rowClassName,
-      style: {
-        display: 'none'
-      },
-      children: children
-    });
+    return null;
   }
   return /*#__PURE__*/_jsx("tr", {
     className: rowClassName,

package/dist/core/sheet/Menu.d.ts

@@ -0,0 +1,6 @@
+import { MenuRenderProps } from "../../type/sheet";
+import React from 'react';
+export declare const Menu: React.ForwardRefExoticComponent<MenuRenderProps & {
+    contextMenu?: React.FC<MenuRenderProps> | undefined;
+    showMenu: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/core/sheet/Menu.js

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
+  var showMenu = props.showMenu,
+    position = props.position,
+    cell = props.cell,
+    onContextMenu = props.onContextMenu,
+    ContextMenu = props.contextMenu;
+  var isMenuShow = !!ContextMenu && showMenu;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    style: {
+      display: isMenuShow ? '' : 'none'
+    },
+    children: isMenuShow && /*#__PURE__*/_jsx(ContextMenu, {
+      position: position,
+      cell: cell,
+      onContextMenu: onContextMenu
+    })
+  });
+});

package/dist/core/sheet/index.js

@@ -4,29 +4,31 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 // import ReduxLogger from 'redux-logger';
 import ReduxThunk from 'redux-thunk';
 import DefaultRow from "./DefaultRow";
 import DefaultShell from "./DefaultShell";
-import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
+import { useGroup } from "../../hooks/useGroupConfig";
 import { Empty } from 'antd';
 import { isEmpty, isNil, isNumber } from 'lodash';
 import { SheetEventContext, useEventBus, useMiddlewareReducer } from "../../hooks";
 import sheetReducer from "../reducers";
 import { classNames, getRowHeight, rowToActualRow } from "../util";
+import { Control } from "./Control";
 import { DefaultRowMapper } from "./DefaultRowMapper";
+import { Menu } from "./Menu";
 import "./index.less";
 import { useCellEvent } from "./useCellEvent";
 import { useContextMenu } from "./useContextMenu";
 import { useKeyBoardEvent } from "./useKeyBoardEvent";
 import { useMouseEvent } from "./useMouseEvent";
 import { useSelectVisible } from "./useSelectVisible";
-import { useVirtualList } from "./useVirtualList";
+import { VirtualizeEnd, VirtualizeStart, useVirtualList } from "./useVirtualList";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Sheet = function Sheet(props) {
-  var _state$data$length, _state$data3, _scroll$y, _scroll$x;
+  var _visibleData$length, _scroll$y, _scroll$x;
   var _props$sheetInstance = props.sheetInstance,
     sheetInstance = _props$sheetInstance === void 0 ? {
       current: null
@@ -46,8 +48,6 @@ var Sheet = function Sheet(props) {
     data = props.data,
     _props$freePaste = props.freePaste,
     freePaste = _props$freePaste === void 0 ? false : _props$freePaste,
-    _props$groupConfig = props.groupConfig,
-    groupConfig = _props$groupConfig === void 0 ? undefined : _props$groupConfig,
     onCellsChanged = props.onCellsChanged,
     onContextMenu = props.onContextMenu,
     rowClassName = props.rowClassName,
@@ -58,6 +58,8 @@ var Sheet = function Sheet(props) {
   var sheetWrapperRef = useRef(null);
   var contextMenuRef = useRef(null);
   var eventBus = useEventBus();
+  var _useGroup = useGroup(),
+    groupConfig = _useGroup.config;
   var _useMiddlewareReducer = useMiddlewareReducer(sheetReducer, {
       data: data,
       mouseDown: false,
@@ -71,8 +73,8 @@ var Sheet = function Sheet(props) {
     _useMiddlewareReducer2 = _slicedToArray(_useMiddlewareReducer, 2),
     state = _useMiddlewareReducer2[0],
     dispatch = _useMiddlewareReducer2[1];
-  useEffect(function () {
-    sheetInstance.current = {
+  useImperativeHandle(sheetInstance, function () {
+    return {
       zoomTo: function zoomTo(row) {
         // 给定 row 回到行
         // 不给定 row 默认回到编辑行和列
@@ -134,7 +136,7 @@ var Sheet = function Sheet(props) {
         return history !== null && history !== void 0 && history.length ? history === null || history === void 0 ? void 0 : history[history.length - 1] : {};
       }
     };
-  }, [sheetWrapperRef.current, state.history]);
+  }, [state.history]);
   useEffect(function () {
     // 同步必要的状态
     dispatch({
@@ -164,7 +166,20 @@ var Sheet = function Sheet(props) {
       }, 1);
     }
   }, [state.editing, state.start]);
-  var _useVirtualList = useVirtualList(sheetWrapperRef, state.data, groupConfig, virtualized),
+  var visibleData = useMemo(function () {
+    var _groupConfig$groups, _state$data;
+    if (!(groupConfig !== null && groupConfig !== void 0 && (_groupConfig$groups = groupConfig.groups) !== null && _groupConfig$groups !== void 0 && _groupConfig$groups.length)) {
+      return state.data;
+    }
+    return (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.filter(function (item, index) {
+      if (!(groupConfig !== null && groupConfig !== void 0 && groupConfig.configMap.has(index))) {
+        return true;
+      }
+      var rowConfig = groupConfig.configMap.get(index);
+      return (rowConfig === null || rowConfig === void 0 ? void 0 : rowConfig.isOpen) || (rowConfig === null || rowConfig === void 0 ? void 0 : rowConfig.isStart);
+    });
+  }, [state.data, groupConfig]);
+  var _useVirtualList = useVirtualList(sheetWrapperRef, visibleData, virtualized),
     virtualStart = _useVirtualList.virtualStart,
     virtualEnd = _useVirtualList.virtualEnd,
     paddingTop = _useVirtualList.paddingTop,
@@ -178,15 +193,14 @@ var Sheet = function Sheet(props) {
     });
   }, [groupConfig]);
   var rowElements = useMemo(function () {
-    var _state$data;
-    return state === null || state === void 0 || (_state$data = state.data) === null || _state$data === void 0 || (_state$data = _state$data.slice(virtualStart, virtualEnd)) === null || _state$data === void 0 ? void 0 : _state$data.map(function (rowData) {
-      var _state$data2, _rowData;
-      var row = (state === null || state === void 0 || (_state$data2 = state.data) === null || _state$data2 === void 0 ? void 0 : _state$data2.indexOf(rowData)) || 0;
+    var _visibleData$slice;
+    return visibleData === null || visibleData === void 0 || (_visibleData$slice = visibleData.slice(virtualStart, virtualEnd)) === null || _visibleData$slice === void 0 ? void 0 : _visibleData$slice.map(function (rowData) {
+      var _rowData$, _rowData;
+      var row = ((_rowData$ = rowData[0]) === null || _rowData$ === void 0 ? void 0 : _rowData$.row) || 0;
       var rowCN = rowClassName instanceof Function ? rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(rowData === null || rowData === void 0 || (_rowData = rowData[rowData.length - 1]) === null || _rowData === void 0 ? void 0 : _rowData.record, row) : rowClassName;
       return /*#__PURE__*/_jsx(Row, {
         row: row,
         cells: rowData,
-        groupConfig: groupConfig,
         rowClassName: rowCN,
         children: /*#__PURE__*/_jsx(DefaultRowMapper, {
           rowData: rowData,
@@ -194,12 +208,25 @@ var Sheet = function Sheet(props) {
         })
       }, row);
     });
-  }, [state.data, groupConfig, virtualStart, virtualEnd, rowClassName]);
-  var memoHeight = Math.min(((_state$data$length = state === null || state === void 0 || (_state$data3 = state.data) === null || _state$data3 === void 0 ? void 0 : _state$data3.length) !== null && _state$data$length !== void 0 ? _state$data$length : 0) + 1, 10) * 42 + 43;
+  }, [visibleData, groupConfig, virtualStart, virtualEnd, rowClassName]);
+  var memoHeight = Math.min(((_visibleData$length = visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) !== null && _visibleData$length !== void 0 ? _visibleData$length : 0) + 1, 10) * 42 + 43;
   var _useSelectVisible = useSelectVisible(sheetWrapperRef, state.start),
     _useSelectVisible2 = _slicedToArray(_useSelectVisible, 2),
     startRowVisible = _useSelectVisible2[0],
     direction = _useSelectVisible2[1];
+  var isEmptyData = isEmpty(state.data);
+  var EmptyElement = useMemo(function () {
+    if (isEmptyData) {
+      return /*#__PURE__*/_jsx("div", {
+        style: {
+          marginTop: 16,
+          marginBottom: 16
+        },
+        children: emptyRenderer
+      });
+    }
+    return null;
+  }, [isEmptyData, emptyRenderer]);
   return /*#__PURE__*/_jsx(SheetEventContext.Provider, {
     value: eventBus,
     children: /*#__PURE__*/_jsxs("span", {
@@ -213,59 +240,33 @@ var Sheet = function Sheet(props) {
         },
         children: [/*#__PURE__*/_jsxs(SheetShell, {
           className: classNames('harvest-sheet', className),
-          children: [virtualized && paddingTop > 0 && /*#__PURE__*/_jsx("tr", {
-            style: {
-              height: 0,
-              paddingBottom: paddingTop,
-              display: 'block'
-            }
-          }), rowElements, virtualized && paddingBottom > 0 && /*#__PURE__*/_jsx("tr", {
-            style: {
-              height: 0,
-              paddingBottom: paddingBottom,
-              display: 'block'
-            }
+          children: [/*#__PURE__*/_jsx(VirtualizeStart, {
+            virtualized: virtualized,
+            paddingTop: paddingTop
+          }), rowElements, /*#__PURE__*/_jsx(VirtualizeEnd, {
+            virtualized: virtualized,
+            paddingBottom: paddingBottom
           })]
-        }, "sheet"), ContextMenu ? /*#__PURE__*/_jsx("div", {
+        }, "sheet"), /*#__PURE__*/_jsx(Menu, {
           ref: contextMenuRef,
-          style: {
-            display: menu.showMenu ? '' : 'none'
-          },
-          children: /*#__PURE__*/_jsx(ContextMenu, {
-            position: menu.position,
-            cell: menu.cellPosition,
-            onContextMenu: onContextMenu
-          })
-        }) : null]
-      }), isEmpty(state.data) || isNil(state.data) ? /*#__PURE__*/_jsx("div", {
-        style: {
-          marginTop: 16,
-          marginBottom: 16
-        },
-        children: emptyRenderer
-      }) : null, /*#__PURE__*/_jsxs("div", {
+          position: menu.position,
+          cell: menu.cellPosition,
+          showMenu: menu.showMenu,
+          contextMenu: ContextMenu,
+          onContextMenu: onContextMenu
+        })]
+      }), EmptyElement, /*#__PURE__*/_jsxs("div", {
         className: "harvest-sheet-control",
-        children: [children, showBackEdit && !startRowVisible ? /*#__PURE__*/_jsxs("div", {
-          className: "back-edit",
-          onClick: function onClick() {
+        children: [children, /*#__PURE__*/_jsx(Control, {
+          showBackEdit: showBackEdit,
+          startRowVisible: startRowVisible,
+          handelClick: function handelClick() {
             var _sheetInstance$curren;
             return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren = sheetInstance.current) === null || _sheetInstance$curren === void 0 ? void 0 : _sheetInstance$curren.zoomTo();
           },
-          style: !backEditStyle ? {
-            top: 0,
-            right: 0
-          } : backEditStyle,
-          children: [direction === 'up' ? /*#__PURE__*/_jsx(ArrowUpOutlined, {
-            rev: undefined
-          }) : /*#__PURE__*/_jsx(ArrowDownOutlined, {
-            rev: undefined
-          }), /*#__PURE__*/_jsx("span", {
-            style: {
-              marginLeft: 0
-            },
-            children: "\u8FD4\u56DE\u7F16\u8F91\u884C"
-          })]
-        }) : null]
+          direction: direction,
+          backEditStyle: backEditStyle
+        })]
       })]
     })
   });

package/dist/core/sheet/useVirtualList.d.ts

@@ -1,7 +1,16 @@
+/// <reference types="react" />
 import type { SheetType } from "../../type";
-export declare const useVirtualList: (elementRef: React.RefObject<SheetType.refAssertion>, data?: SheetType.Cell[][], groupConfig?: SheetType.RowGroupConfig, virtualized?: boolean) => {
+export declare const useVirtualList: (elementRef: React.RefObject<SheetType.refAssertion>, data?: SheetType.Cell[][], virtualized?: boolean) => {
     virtualStart: number;
     virtualEnd: number;
     paddingTop: number;
     paddingBottom: number;
 };
+export declare const VirtualizeStart: React.FC<{
+    virtualized: boolean;
+    paddingTop: number;
+}>;
+export declare const VirtualizeEnd: React.FC<{
+    virtualized: boolean;
+    paddingBottom: number;
+}>;

package/dist/core/sheet/useVirtualList.js

@@ -4,15 +4,17 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { isEqual, throttle } from 'lodash';
-import { useEffect, useRef, useState } from 'react';
-import { getRowHeight, rowToActualRow, rowToCountRow } from "../util";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useGroup } from "../../hooks/useGroupConfig";
+import { throttle } from 'lodash';
+import { useEffect, useState } from 'react';
+import { getRowHeight } from "../util";
+import { jsx as _jsx } from "react/jsx-runtime";
 var extra = 20;
 // 虚拟列表
 export var useVirtualList = function useVirtualList(elementRef) {
   var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var groupConfig = arguments.length > 2 ? arguments[2] : undefined;
-  var virtualized = arguments.length > 3 ? arguments[3] : undefined;
+  var virtualized = arguments.length > 2 ? arguments[2] : undefined;
   var _useState = useState({
       virtualStart: 0,
       virtualEnd: virtualized ? Math.min(data.length - 1, 2 * extra) : data.length - 1,
@@ -22,17 +24,17 @@ export var useVirtualList = function useVirtualList(elementRef) {
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
+  var _useGroup = useGroup(),
+    groupConfig = _useGroup.config;
   var virtualStart = state.virtualStart,
     virtualEnd = state.virtualEnd,
     paddingTop = state.paddingTop,
     paddingBottom = state.paddingBottom;
-  var virtualRef = useRef();
-  var groupConfigRef = useRef(groupConfig);
+  // const virtualRef = useRef<VirtualConfig | null>();
   useEffect(function () {
     var _elementRef$current;
-    groupConfigRef.current = groupConfig;
     (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.scrollBy({
-      top: 1
+      top: 0
     });
   }, [groupConfig]);
   useEffect(function () {
@@ -47,36 +49,15 @@ export var useVirtualList = function useVirtualList(elementRef) {
         clientHeight = _ref.clientHeight;
       var start = Math.floor(scrollTop / itemHeight) - extra;
       var end = Math.ceil((scrollTop + clientHeight) / itemHeight) + extra;
-      if (!groupConfigRef.current) {
-        var newConfig = {
-          virtualStart: start,
-          virtualEnd: end,
-          paddingTop: start * itemHeight,
-          paddingBottom: (data.length - end) * itemHeight
-        };
-        if (isEqual(newConfig, virtualRef.current)) {
-          return;
-        }
-        virtualRef.current = newConfig;
-        setState(newConfig);
-        return;
-      }
-      var actualStart = rowToCountRow(start, groupConfigRef.current, data.length);
-      var actualEnd = rowToCountRow(end, groupConfigRef.current, data.length);
-      var maxEnd = rowToActualRow(data.length, groupConfigRef.current, data.length);
-      var invisibleTop = rowToActualRow(actualStart, groupConfigRef.current, data.length);
-      var invisibleBottom = maxEnd > end ? maxEnd - end : 0;
-      var updateVirtualConfig = {
-        virtualStart: actualStart,
-        virtualEnd: actualEnd,
-        paddingTop: invisibleTop * itemHeight,
-        paddingBottom: invisibleBottom * itemHeight
+      var newConfig = {
+        virtualStart: start,
+        virtualEnd: end,
+        paddingTop: start * itemHeight,
+        paddingBottom: (data.length - end) * itemHeight
       };
-      if (isEqual(updateVirtualConfig, virtualRef.current)) {
-        return;
-      }
-      setState(updateVirtualConfig);
-      virtualRef.current = updateVirtualConfig;
+      // virtualRef.current = newConfig;
+      setState(newConfig);
+      return;
     }, 50);
     // data.length change 的时候用 handleScroll 重设 virtual params
     handleScroll();
@@ -100,4 +81,23 @@ export var useVirtualList = function useVirtualList(elementRef) {
     paddingTop: Math.max(0, paddingTop),
     paddingBottom: data.length - 1 <= virtualEnd ? 0 : paddingBottom
   };
+};
+export var VirtualizeStart = function VirtualizeStart(_ref2) {
+  var virtualized = _ref2.virtualized,
+    paddingTop = _ref2.paddingTop;
+  return virtualized && paddingTop > 0 ? /*#__PURE__*/_jsx("tr", {
+    style: {
+      height: 0,
+      paddingBottom: paddingTop,
+      display: 'block'
+    }
+  }) : null;
+};
+export var VirtualizeEnd = function VirtualizeEnd(_ref3) {
+  var virtualized = _ref3.virtualized,
+    paddingBottom = _ref3.paddingBottom;
+  return /*#__PURE__*/_jsx(VirtualizeStart, {
+    virtualized: virtualized,
+    paddingTop: paddingBottom
+  });
 };

package/dist/core/table/events.d.ts

@@ -7,9 +7,7 @@ export declare const SelectionEvent: FC<{
 }>;
 export declare const GroupEvent: FC<{
     hasChildren: boolean;
-    rowGroupConfig: SheetType.RowGroupConfig;
     data: SheetType.Cell[][];
     sheetInstance: SheetType.SheetInstance | null;
-    onGroupChange: (value: SheetType.RowGroupConfig) => void;
     onGridChange: (value: SheetType.Cell[][]) => void;
 }>;

package/dist/core/table/events.js

@@ -10,6 +10,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 _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; }
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useGroup } from "../../hooks/useGroupConfig";
 import { SheetEvent } from "../sheet/Event";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -31,44 +33,34 @@ export var SelectionEvent = function SelectionEvent(props) {
 };
 export var GroupEvent = function GroupEvent(props) {
   var hasChildren = props.hasChildren,
-    rowGroupConfig = props.rowGroupConfig,
-    data = props.data,
-    sheetInstance = props.sheetInstance,
-    onGroupChange = props.onGroupChange,
-    onGridChange = props.onGridChange;
+    sheetInstance = props.sheetInstance;
+  var _useGroup = useGroup(),
+    _useGroup$config = _useGroup.config,
+    rowGroupConfig = _useGroup$config === void 0 ? {} : _useGroup$config,
+    onGroupChange = _useGroup.onChange;
   if (!hasChildren) return null;
-  var _ref = rowGroupConfig || {},
-    groups = _ref.groups;
+  var groups = rowGroupConfig.groups;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(SheetEvent, {
       name: "group-open",
       handler: function handler(e) {
-        var _ref2 = e,
-          row = _ref2.row;
-        var index = groups.findIndex(function (item) {
+        var _ref = e,
+          row = _ref.row;
+        var index = groups === null || groups === void 0 ? void 0 : groups.findIndex(function (item) {
           return item.groupStart === row;
         });
         if (index >= 0) {
-          var groupOpen = _toConsumableArray(rowGroupConfig.groupOpen);
-          groupOpen[index] = !rowGroupConfig.groupOpen[index];
+          var groupOpen = _toConsumableArray(rowGroupConfig === null || rowGroupConfig === void 0 ? void 0 : rowGroupConfig.groupOpen);
+          groupOpen[index] = !(rowGroupConfig !== null && rowGroupConfig !== void 0 && rowGroupConfig.groupOpen[index]);
           onGroupChange && onGroupChange(_objectSpread(_objectSpread({}, rowGroupConfig), {}, {
             groupOpen: groupOpen
           }));
-          var newGrid = _toConsumableArray(data);
-          newGrid[row] = _toConsumableArray(newGrid[row]);
-          newGrid[row][0] = _objectSpread(_objectSpread({}, newGrid[row][0]), {}, {
-            record: {
-              open: !!groupOpen[index]
-            }
-          });
-          onGridChange && onGridChange(newGrid);
           sheetInstance === null || sheetInstance === void 0 || sheetInstance.pushToHistory({
             type: 'Custom',
             changes: [],
             extraInfo: {
               extraType: 'group',
-              groupConfig: rowGroupConfig,
-              data: data
+              groupConfig: rowGroupConfig
             }
           });
         }
@@ -85,8 +77,7 @@ export var GroupEvent = function GroupEvent(props) {
           changes: [],
           extraInfo: {
             extraType: 'group',
-            groupConfig: rowGroupConfig,
-            data: data
+            groupConfig: rowGroupConfig
           }
         });
       }

package/dist/core/table/index.js

@@ -1,9 +1,5 @@
 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); }
 var _excluded = ["sheetInstance", "columns", "dataSource", "rowKey", "rowSelection", "groupConfig", "onChange", "handleAdd", "draggable", "eventHandler"];
-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 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; }
@@ -18,22 +14,19 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Sheet, useSetState } from "../..";
+import { GroupContext } from "../../hooks/useGroupConfig";
 import { WidthContext } from "../../hooks/useWidthConfig";
 import { Button } from 'antd';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SheetEvent } from "../sheet/Event";
 import { DraggableShell } from "../shell/draggableShell";
 import { TableShell } from "../shell/tableShell";
-import { groupConfigToGroupMap } from "../util";
-import { CheckViewer } from "../viewer/checkViewer";
-import { GroupViewer } from "../viewer/groupViewer";
 import { GroupEvent, SelectionEvent } from "./events";
-import { useGroupConfig } from "./useGroupConfig";
-import { useRowSelection } from "./useRowSelection";
+import { formatGroupData, useGroupConfig } from "./useGroupConfig";
+import { formatSelectionData, useRowSelection } from "./useRowSelection";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Table = function Table(_ref) {
-  var _rowGroupConfig$group, _rowGroupConfig$group2;
   var sheetRef = _ref.sheetInstance,
     columns = _ref.columns,
     dataSource = _ref.dataSource,
@@ -72,119 +65,26 @@ var Table = function Table(_ref) {
     _useGroupConfig2 = _slicedToArray(_useGroupConfig, 2),
     rowGroupConfig = _useGroupConfig2[0],
     setGroupConfig = _useGroupConfig2[1];
-  var _ref2 = rowGroupConfig || {},
-    groups = _ref2.groups,
-    groupOpen = _ref2.groupOpen;
   useEffect(function () {
     if (!hasChildren) return;
     if (!dataSource || !columns) return;
-    var data = [];
-    var groupMap = groupConfigToGroupMap({
-      groups: groups,
-      groupOpen: groupOpen
-    });
-    var currentIndex = 0;
-    dataSource.forEach(function (item, row) {
-      var groupList = [item];
-      if (item.children) {
-        groupList = [item].concat(_toConsumableArray(item.children));
-      }
-      groupList.forEach(function (itemRow) {
-        var _columns$, _columns$2, _columns$3, _columns$4, _groupMap$get, _groupMap$get2;
-        var dataRow = [];
-        var rowId = itemRow.id || itemRow.key || String(currentIndex);
-        if (rowKey) {
-          if (rowKey instanceof Function) {
-            rowId = rowKey(itemRow, row);
-          } else {
-            rowId = itemRow[rowKey];
-          }
-        }
-        dataRow.push({
-          id: rowId,
-          row: currentIndex,
-          col: -1,
-          editable: !((columns === null || columns === void 0 ? void 0 : columns[0].editable) instanceof Function) ? columns === null || columns === void 0 || (_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.editable : columns === null || columns === void 0 || (_columns$2 = columns[0]) === null || _columns$2 === void 0 ? void 0 : _columns$2.editable('', itemRow, currentIndex),
-          readonly: !((columns === null || columns === void 0 ? void 0 : columns[0].readonly) instanceof Function) ? columns === null || columns === void 0 || (_columns$3 = columns[0]) === null || _columns$3 === void 0 ? void 0 : _columns$3.readonly : columns === null || columns === void 0 || (_columns$4 = columns[0]) === null || _columns$4 === void 0 ? void 0 : _columns$4.readonly('', itemRow, currentIndex),
-          align: 'center',
-          fixed: 'unset',
-          value: groupMap.get(currentIndex) && ((_groupMap$get = groupMap.get(currentIndex)) === null || _groupMap$get === void 0 ? void 0 : _groupMap$get.isStart),
-          record: {
-            open: groupMap.get(currentIndex) && ((_groupMap$get2 = groupMap.get(currentIndex)) === null || _groupMap$get2 === void 0 ? void 0 : _groupMap$get2.isOpen)
-          },
-          valueViewer: GroupViewer,
-          className: 'sheet-control'
-        });
-        columns.forEach(function (colInfo, col) {
-          var _colInfo$cellConfig, _colInfo$cellConfig2, _colInfo$cellConfig3;
-          var value = itemRow[colInfo.dataIndex || ''];
-          dataRow.push({
-            id: rowId,
-            value: value,
-            record: itemRow,
-            readonly: !(colInfo.readonly instanceof Function) ? colInfo.readonly : colInfo.readonly(value, itemRow, currentIndex, col),
-            align: colInfo.align,
-            fixed: colInfo.fixed,
-            editable: !(colInfo.editable instanceof Function) ? colInfo.editable : colInfo.editable(value, itemRow, currentIndex, col),
-            valueViewer: colInfo.render ? colInfo.render : undefined,
-            dataEditor: colInfo.editor ? colInfo.editor : undefined,
-            row: currentIndex,
-            className: !(((_colInfo$cellConfig = colInfo.cellConfig) === null || _colInfo$cellConfig === void 0 ? void 0 : _colInfo$cellConfig.className) instanceof Function) ? (_colInfo$cellConfig2 = colInfo.cellConfig) === null || _colInfo$cellConfig2 === void 0 ? void 0 : _colInfo$cellConfig2.className : (_colInfo$cellConfig3 = colInfo.cellConfig) === null || _colInfo$cellConfig3 === void 0 ? void 0 : _colInfo$cellConfig3.className(value, itemRow, currentIndex),
-            col: col
-          });
-        });
-        data.push(dataRow);
-        currentIndex++;
-      });
-    });
-    setData(data);
-  }, [dataSource, columns, groups, hasChildren, rowGroupConfig]);
+    setData(formatGroupData({
+      dataSource: dataSource,
+      columns: columns,
+      rowKey: rowKey
+    }));
+  }, [dataSource, columns, hasChildren, rowKey]);
   useEffect(function () {
     if (hasChildren) return;
     if (!dataSource || !columns) return;
-    setData(dataSource.map(function (item, row) {
-      var rowId = item.id || item.key || String(row);
-      if (rowKey) {
-        if (rowKey instanceof Function) {
-          rowId = rowKey(item, row);
-        } else {
-          rowId = item[rowKey];
-        }
-      }
-      var rows = [];
-      if (rowSelection) {
-        rows.push({
-          id: rowId,
-          row: row,
-          col: -1,
-          readonly: true,
-          align: 'center',
-          value: checkedRow[row],
-          valueViewer: CheckViewer,
-          className: 'sheet-control'
-        });
-      }
-      columns.forEach(function (colInfo, col) {
-        var _colInfo$cellConfig4, _colInfo$cellConfig5, _colInfo$cellConfig6;
-        var value = item[colInfo.dataIndex || ''];
-        rows.push({
-          id: rowId,
-          value: value,
-          record: item,
-          readonly: !(colInfo.readonly instanceof Function) ? colInfo.readonly : colInfo.readonly(value, item, row, col),
-          align: colInfo.align,
-          fixed: colInfo.fixed,
-          editable: !(colInfo.editable instanceof Function) ? colInfo.editable : colInfo.editable(value, item, row),
-          valueViewer: colInfo.render ? colInfo.render : undefined,
-          dataEditor: colInfo.editor ? colInfo.editor : undefined,
-          className: !(((_colInfo$cellConfig4 = colInfo.cellConfig) === null || _colInfo$cellConfig4 === void 0 ? void 0 : _colInfo$cellConfig4.className) instanceof Function) ? (_colInfo$cellConfig5 = colInfo.cellConfig) === null || _colInfo$cellConfig5 === void 0 ? void 0 : _colInfo$cellConfig5.className : (_colInfo$cellConfig6 = colInfo.cellConfig) === null || _colInfo$cellConfig6 === void 0 ? void 0 : _colInfo$cellConfig6.className(value, item, row),
-          row: row,
-          col: col
-        });
-      });
-      return rows;
+    setData(formatSelectionData({
+      dataSource: dataSource,
+      columns: columns,
+      checked: checkedRow,
+      rowKey: rowKey,
+      rowSelection: rowSelection
     }));
-  }, [dataSource, columns, checkedRow, hasChildren]);
+  }, [dataSource, columns, checkedRow, hasChildren, rowKey, rowSelection]);
   useEffect(function () {
     if (!dataSource || !columns) {
       setData([[]]);
@@ -210,17 +110,15 @@ var Table = function Table(_ref) {
     }));
   }, [columns, onChange, hasControl]);
   var handleReverse = useCallback(function (value) {
-    var _ref3 = value,
-      type = _ref3.type,
-      extraInfo = _ref3.extraInfo;
+    var _ref2 = value,
+      type = _ref2.type,
+      extraInfo = _ref2.extraInfo;
     if (type === 'Custom') {
-      var _ref4 = extraInfo,
-        _groupConfig = _ref4.groupConfig,
-        extraType = _ref4.extraType,
-        lastData = _ref4.data;
+      var _ref3 = extraInfo,
+        _groupConfig = _ref3.groupConfig,
+        extraType = _ref3.extraType;
       if (extraType === 'group') {
         setGroupConfig(_groupConfig);
-        setData(lastData);
       }
     }
   }, [data, groupConfig]);
@@ -232,9 +130,6 @@ var Table = function Table(_ref) {
     newChecked[currentRow] = !newChecked[currentRow];
     setCheckedRow(newChecked);
   }, [sheetInstance, checkedRow]);
-  var headGroupOpen = !(rowGroupConfig !== null && rowGroupConfig !== void 0 && (_rowGroupConfig$group = rowGroupConfig.groupOpen) !== null && _rowGroupConfig$group !== void 0 && _rowGroupConfig$group.length) ? !!(rowGroupConfig !== null && rowGroupConfig !== void 0 && rowGroupConfig.defaultOpen) : !(rowGroupConfig !== null && rowGroupConfig !== void 0 && (_rowGroupConfig$group2 = rowGroupConfig.groupOpen) !== null && _rowGroupConfig$group2 !== void 0 && _rowGroupConfig$group2.some(function (value) {
-    return !value;
-  }));
   var headSelection = !!rowSelection;
   var WrappedTableShell = useMemo(function () {
     if (draggable) {
@@ -244,9 +139,6 @@ var Table = function Table(_ref) {
         showGroup: hasChildren,
         showSelect: !!rowSelection,
         controlProps: {
-          group: {
-            open: headGroupOpen
-          },
           check: {
             checked: false
           }
@@ -259,55 +151,55 @@ var Table = function Table(_ref) {
       showGroup: hasChildren,
       showSelect: !!rowSelection,
       controlProps: {
-        group: {
-          open: headGroupOpen
-        },
         check: {
           checked: false
         }
       }
     });
-  }, [columns.length, draggable, headSelection, hasChildren, headGroupOpen]);
+  }, [columns.length, draggable, headSelection, hasChildren]);
   return /*#__PURE__*/_jsx(WidthContext.Provider, {
     value: {
       widths: widths,
       onChange: setWidth
     },
-    children: /*#__PURE__*/_jsxs(Sheet, _objectSpread(_objectSpread({}, args), {}, {
-      sheetInstance: sheetInstance,
-      sheetRenderer: WrappedTableShell,
-      groupConfig: rowGroupConfig,
-      data: data,
-      onCellsChanged: handleChanges,
-      children: [/*#__PURE__*/_jsx(SelectionEvent, {
-        hasChildren: hasChildren,
-        rowSelection: rowSelection,
-        onChange: handleRowSelect
-      }), /*#__PURE__*/_jsx(GroupEvent, {
-        hasChildren: hasChildren,
+    children: /*#__PURE__*/_jsx(GroupContext.Provider, {
+      value: {
+        config: rowGroupConfig,
+        onChange: setGroupConfig
+      },
+      children: /*#__PURE__*/_jsxs(Sheet, _objectSpread(_objectSpread({}, args), {}, {
+        sheetInstance: sheetInstance,
+        sheetRenderer: WrappedTableShell,
         data: data,
-        rowGroupConfig: rowGroupConfig,
-        sheetInstance: sheetInstance.current,
-        onGridChange: setData,
-        onGroupChange: setGroupConfig
-      }), /*#__PURE__*/_jsx(SheetEvent, {
-        name: "reverse",
-        handler: handleReverse
-      }, "_reverse"), Object.keys(eventHandler || {}).map(function (key) {
-        return /*#__PURE__*/_jsx(SheetEvent, {
-          name: key,
-          handler: eventHandler === null || eventHandler === void 0 ? void 0 : eventHandler[key]
-        }, key);
-      }), handleAdd ? /*#__PURE__*/_jsx(Button, {
-        type: "dashed",
-        style: {
-          width: '100%',
-          height: 32
-        },
-        onClick: handleAdd,
-        children: "+ \u6DFB\u52A0"
-      }) : null]
-    }))
+        onCellsChanged: handleChanges,
+        children: [/*#__PURE__*/_jsx(SelectionEvent, {
+          hasChildren: hasChildren,
+          rowSelection: rowSelection,
+          onChange: handleRowSelect
+        }), /*#__PURE__*/_jsx(GroupEvent, {
+          hasChildren: hasChildren,
+          data: data,
+          sheetInstance: sheetInstance.current,
+          onGridChange: setData
+        }), /*#__PURE__*/_jsx(SheetEvent, {
+          name: "reverse",
+          handler: handleReverse
+        }, "_reverse"), Object.keys(eventHandler || {}).map(function (key) {
+          return /*#__PURE__*/_jsx(SheetEvent, {
+            name: key,
+            handler: eventHandler === null || eventHandler === void 0 ? void 0 : eventHandler[key]
+          }, key);
+        }), handleAdd ? /*#__PURE__*/_jsx(Button, {
+          type: "dashed",
+          style: {
+            width: '100%',
+            height: 32
+          },
+          onClick: handleAdd,
+          children: "+ \u6DFB\u52A0"
+        }) : null]
+      }))
+    })
   });
 };
 export default Table;

package/dist/core/table/useGroupConfig.d.ts

@@ -1,2 +1,5 @@
 import type { SheetTableType, SheetType } from "../../type";
-export declare const useGroupConfig: (dataSource: Record<string, unknown>[], tableGroupConfig?: SheetTableType.TableGroupConfig, hasChildren?: boolean) => [SheetType.RowGroupConfig, (value: SheetType.RowGroupConfig) => void];
+export declare const useGroupConfig: (dataSource: Record<string, unknown>[], tableGroupConfig?: SheetTableType.TableGroupConfig, hasChildren?: boolean) => [SheetType.RowGroupConfig & {
+    configMap: SheetType.GroupMap;
+}, (value: SheetType.RowGroupConfig) => void];
+export declare const formatGroupData: (param: Pick<SheetTableType.TableProps, 'dataSource' | 'columns' | 'rowKey'>) => SheetType.Cell[][];

package/dist/core/table/useGroupConfig.js

@@ -1,3 +1,13 @@
+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 _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 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 _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); }
@@ -6,6 +16,8 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { flatten, isNil } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { groupConfigToGroupMap } from "../util";
+import { GroupViewer } from "../viewer";
 import { dataSourceToRowConfig } from "./util";
 export var useGroupConfig = function useGroupConfig(dataSource, tableGroupConfig, hasChildren) {
   var _useState = useState(),
@@ -61,5 +73,70 @@ export var useGroupConfig = function useGroupConfig(dataSource, tableGroupConfig
     setGroupConfig(value);
     groupConfigRef.current = value;
   }, [setGroupConfig]);
-  return [groupConfig, handleGroupChange];
+  var groupMap = useMemo(function () {
+    return groupConfigToGroupMap({
+      groups: groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.groups,
+      groupOpen: groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.groupOpen
+    });
+  }, [groupConfig]);
+  return [_objectSpread(_objectSpread({}, groupConfig), {}, {
+    configMap: groupMap
+  }), handleGroupChange];
+};
+export var formatGroupData = function formatGroupData(param) {
+  var dataSource = param.dataSource,
+    columns = param.columns,
+    rowKey = param.rowKey;
+  var data = [];
+  var currentIndex = 0;
+  dataSource.forEach(function (item, row) {
+    var groupList = [item];
+    if (item.children) {
+      groupList = [item].concat(_toConsumableArray(item.children));
+    }
+    groupList.forEach(function (itemRow) {
+      var _columns$, _columns$2, _columns$3, _columns$4;
+      var dataRow = [];
+      var rowId = itemRow.id || itemRow.key || String(currentIndex);
+      if (rowKey) {
+        if (rowKey instanceof Function) {
+          rowId = rowKey(itemRow, row);
+        } else {
+          rowId = itemRow[rowKey];
+        }
+      }
+      dataRow.push({
+        id: rowId,
+        row: currentIndex,
+        col: -1,
+        editable: !((columns === null || columns === void 0 ? void 0 : columns[0].editable) instanceof Function) ? columns === null || columns === void 0 || (_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.editable : columns === null || columns === void 0 || (_columns$2 = columns[0]) === null || _columns$2 === void 0 ? void 0 : _columns$2.editable('', itemRow, currentIndex),
+        readonly: !((columns === null || columns === void 0 ? void 0 : columns[0].readonly) instanceof Function) ? columns === null || columns === void 0 || (_columns$3 = columns[0]) === null || _columns$3 === void 0 ? void 0 : _columns$3.readonly : columns === null || columns === void 0 || (_columns$4 = columns[0]) === null || _columns$4 === void 0 ? void 0 : _columns$4.readonly('', itemRow, currentIndex),
+        align: 'center',
+        fixed: 'unset',
+        valueViewer: GroupViewer,
+        className: 'sheet-control'
+      });
+      columns.forEach(function (colInfo, col) {
+        var _colInfo$cellConfig, _colInfo$cellConfig2, _colInfo$cellConfig3;
+        var value = itemRow[colInfo.dataIndex || ''];
+        dataRow.push({
+          id: rowId,
+          value: value,
+          record: itemRow,
+          readonly: !(colInfo.readonly instanceof Function) ? colInfo.readonly : colInfo.readonly(value, itemRow, currentIndex, col),
+          align: colInfo.align,
+          fixed: colInfo.fixed,
+          editable: !(colInfo.editable instanceof Function) ? colInfo.editable : colInfo.editable(value, itemRow, currentIndex, col),
+          valueViewer: colInfo.render ? colInfo.render : undefined,
+          dataEditor: colInfo.editor ? colInfo.editor : undefined,
+          row: currentIndex,
+          className: !(((_colInfo$cellConfig = colInfo.cellConfig) === null || _colInfo$cellConfig === void 0 ? void 0 : _colInfo$cellConfig.className) instanceof Function) ? (_colInfo$cellConfig2 = colInfo.cellConfig) === null || _colInfo$cellConfig2 === void 0 ? void 0 : _colInfo$cellConfig2.className : (_colInfo$cellConfig3 = colInfo.cellConfig) === null || _colInfo$cellConfig3 === void 0 ? void 0 : _colInfo$cellConfig3.className(value, itemRow, currentIndex),
+          col: col
+        });
+      });
+      data.push(dataRow);
+      currentIndex++;
+    });
+  });
+  return data;
 };

package/dist/core/table/useRowSelection.d.ts

@@ -1,2 +1,14 @@
-import { SheetTableType } from "../..";
+import { SheetTableType, SheetType } from "../..";
 export declare const useRowSelection: (dataSource: Record<string, unknown>[], rowSelection?: SheetTableType.TableRowSelection, hasChildren?: boolean) => [boolean[], (value: boolean[]) => void];
+export declare const formatSelectionData: (param: Pick<SheetTableType.TableProps, "columns" | "dataSource" | "rowKey" | "rowSelection"> & {
+    checked: boolean[];
+}) => {
+    id: string;
+    row: number;
+    col: number;
+    readonly: boolean;
+    align: SheetType.CellAlign;
+    value: string;
+    valueViewer: SheetType.CellViewer;
+    className: string;
+}[][];

package/dist/core/table/useRowSelection.js

@@ -4,6 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { CheckViewer } from "../..";
 import { useEffect, useRef, useState } from 'react';
 export var useRowSelection = function useRowSelection(dataSource, rowSelection, hasChildren) {
   var _dataSource$length;
@@ -21,4 +22,53 @@ export var useRowSelection = function useRowSelection(dataSource, rowSelection,
     checkedRowRef.current = currentEmpty;
   }, [dataSource.length, hasChildren, rowSelection]);
   return [checkedRow, setCheckedRow];
+};
+export var formatSelectionData = function formatSelectionData(param) {
+  var dataSource = param.dataSource,
+    columns = param.columns,
+    checked = param.checked,
+    rowKey = param.rowKey,
+    rowSelection = param.rowSelection;
+  return dataSource.map(function (item, row) {
+    var rowId = item.id || item.key || String(row);
+    if (rowKey) {
+      if (rowKey instanceof Function) {
+        rowId = rowKey(item, row);
+      } else {
+        rowId = item[rowKey];
+      }
+    }
+    var rows = [];
+    if (rowSelection) {
+      rows.push({
+        id: rowId,
+        row: row,
+        col: -1,
+        readonly: true,
+        align: 'center',
+        value: checked[row],
+        valueViewer: CheckViewer,
+        className: 'sheet-control'
+      });
+    }
+    columns.forEach(function (colInfo, col) {
+      var _colInfo$cellConfig, _colInfo$cellConfig2, _colInfo$cellConfig3;
+      var value = item[colInfo.dataIndex || ''];
+      rows.push({
+        id: rowId,
+        value: value,
+        record: item,
+        readonly: !(colInfo.readonly instanceof Function) ? colInfo.readonly : colInfo.readonly(value, item, row, col),
+        align: colInfo.align,
+        fixed: colInfo.fixed,
+        editable: !(colInfo.editable instanceof Function) ? colInfo.editable : colInfo.editable(value, item, row),
+        valueViewer: colInfo.render ? colInfo.render : undefined,
+        dataEditor: colInfo.editor ? colInfo.editor : undefined,
+        className: !(((_colInfo$cellConfig = colInfo.cellConfig) === null || _colInfo$cellConfig === void 0 ? void 0 : _colInfo$cellConfig.className) instanceof Function) ? (_colInfo$cellConfig2 = colInfo.cellConfig) === null || _colInfo$cellConfig2 === void 0 ? void 0 : _colInfo$cellConfig2.className : (_colInfo$cellConfig3 = colInfo.cellConfig) === null || _colInfo$cellConfig3 === void 0 ? void 0 : _colInfo$cellConfig3.className(value, item, row),
+        row: row,
+        col: col
+      });
+    });
+    return rows;
+  });
 };

package/dist/core/util.d.ts

@@ -32,7 +32,7 @@ export declare function renderValue(cell: SheetType.Cell): string | number;
 export declare const optionsToValuesFromLabelOrValue: (options: SheetType.OptionsType[], val: string) => string[];
 export declare const optionsTransferToValue: (options: SheetType.OptionsType[], val: string, key?: string) => string[];
 export declare const valuesTransferToLabel: (options?: SheetType.OptionsType[], value?: string) => string | null;
-export declare const groupConfigToGroupMap: (rowGroupConfig?: SheetType.RowGroupConfig) => Map<number, SheetType.RowGroup & {
+export declare const groupConfigToGroupMap: (rowGroupConfig?: Partial<SheetType.RowGroupConfig>) => Map<number, SheetType.RowGroup & {
     isStart: boolean;
     isOpen: boolean;
 }>;

package/dist/core/util.js

@@ -308,9 +308,10 @@ export var groupConfigToGroupMap = function groupConfigToGroupMap(rowGroupConfig
     var groupStart = group.groupStart,
       groupEnd = group.groupEnd;
     for (var i = groupStart; i <= groupEnd; i++) {
+      var _rowGroupConfig$group2;
       groupMap.set(i, _objectSpread(_objectSpread({}, group), {}, {
         isStart: i === groupStart,
-        isOpen: rowGroupConfig.groupOpen[index]
+        isOpen: !!(rowGroupConfig !== null && rowGroupConfig !== void 0 && (_rowGroupConfig$group2 = rowGroupConfig.groupOpen) !== null && _rowGroupConfig$group2 !== void 0 && _rowGroupConfig$group2[index])
       }));
     }
   });

package/dist/core/viewer/groupViewer/index.js

@@ -1,24 +1,36 @@
 import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons';
 import { useSheetEvent } from "../../..";
+import { useGroup } from "../../../hooks/useGroupConfig";
 import { useCallback } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var GroupViewer = function GroupViewer(props) {
-  var value = props.value,
-    row = props.row,
+  var _config$configMap, _config$configMap2, _config$groupOpen;
+  var _props$row = props.row,
+    row = _props$row === void 0 ? 0 : _props$row,
     record = props.record;
+  var _ref = record || {},
+    isHeader = _ref.isHeader;
+  var _useGroup = useGroup(),
+    config = _useGroup.config;
   var eventBus = useSheetEvent();
+  var isStart = config === null || config === void 0 || (_config$configMap = config.configMap) === null || _config$configMap === void 0 || (_config$configMap = _config$configMap.get(row)) === null || _config$configMap === void 0 ? void 0 : _config$configMap.isStart;
+  var isOpen = config === null || config === void 0 || (_config$configMap2 = config.configMap) === null || _config$configMap2 === void 0 || (_config$configMap2 = _config$configMap2.get(row)) === null || _config$configMap2 === void 0 ? void 0 : _config$configMap2.isOpen;
+  var allOpen = !(config !== null && config !== void 0 && (_config$groupOpen = config.groupOpen) !== null && _config$groupOpen !== void 0 && _config$groupOpen.some(function (value) {
+    return !value;
+  }));
   var handleChange = useCallback(function () {
     if (!eventBus) return;
-    if (record !== null && record !== void 0 && record.isHeader) {
-      eventBus.emit('group-open-title', !(record !== null && record !== void 0 && record.open));
+    if (isHeader) {
+      eventBus.emit('group-open-title', !allOpen);
     } else {
       eventBus.emit('group-open', {
         row: row,
-        open: record === null || record === void 0 ? void 0 : record.open
+        open: !isOpen
       });
     }
-  }, [eventBus, row, record === null || record === void 0 ? void 0 : record.open]);
-  if (value) {
+  }, [eventBus, row, isOpen, allOpen]);
+  if (isStart || isHeader) {
+    var currentOpen = record !== null && record !== void 0 && record.isHeader ? allOpen : isOpen;
     return /*#__PURE__*/_jsx("span", {
       style: {
         cursor: 'pointer'
@@ -27,7 +39,7 @@ export var GroupViewer = function GroupViewer(props) {
         return e.stopPropagation();
       },
       onClick: handleChange,
-      children: !(record !== null && record !== void 0 && record.open) ? /*#__PURE__*/_jsx(PlusSquareOutlined, {
+      children: !currentOpen ? /*#__PURE__*/_jsx(PlusSquareOutlined, {
         rev: undefined
       }) : /*#__PURE__*/_jsx(MinusSquareOutlined, {
         rev: undefined

package/dist/example/sheet.js

@@ -329,7 +329,7 @@ var BasicSheet = function BasicSheet() {
     groupConfig: groupConfig,
     scroll: {
       x: '100%',
-      y: '100vh'
+      y: 'calc(100vh - 290px)'
     },
     sheetRenderer: WrappedTableShell,
     menuRenderer: MenuRender,

package/dist/hooks/index.d.ts

@@ -5,4 +5,4 @@ export type { Dispatch, FunctionAction, NormalAction, } from './useMiddlewareRed
 export { useMouse } from './useMouse';
 export { useSetState } from './useSetState';
 export { SheetEventContext, useSheetEvent } from './useSheetEvent';
-export { useWidth, WidthContext } from './useWidthConfig';
+export { WidthContext, useWidth } from './useWidthConfig';

package/dist/hooks/index.js

@@ -4,4 +4,4 @@ export { useMiddlewareReducer } from "./useMiddlewareReducer";
 export { useMouse } from "./useMouse";
 export { useSetState } from "./useSetState";
 export { SheetEventContext, useSheetEvent } from "./useSheetEvent";
-export { useWidth, WidthContext } from "./useWidthConfig";
+export { WidthContext, useWidth } from "./useWidthConfig";

package/dist/hooks/useGroupConfig.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { GroupConfigContext } from '../type/sheet';
+export declare const GroupContext: import("react").Context<GroupConfigContext>;
+export declare function useGroup(): GroupConfigContext;

package/dist/hooks/useGroupConfig.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export var GroupContext = /*#__PURE__*/createContext({});
+export function useGroup() {
+  return useContext(GroupContext);
+}

package/dist/hooks/useWidthConfig.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { WidthConfig } from '../type/sheet';
-export declare const WidthContext: import("react").Context<WidthConfig>;
-export declare function useWidth(): WidthConfig;
+import { WidthConfigContext } from '../type/sheet';
+export declare const WidthContext: import("react").Context<WidthConfigContext>;
+export declare function useWidth(): WidthConfigContext;

package/dist/type/sheet.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 /// <reference types="node" />
 import type { EventEmitter } from 'events';
+import { CSSProperties } from 'react';
 import { SheetTableType, SheetType } from '.';
 export declare enum CellAlign {
     left = "left",
@@ -10,6 +10,8 @@ export declare enum CellAlign {
 }
 export type Cell = {
     id: string;
+    row?: number;
+    col?: number;
     key?: string;
     readonly?: boolean;
     component?: CellViewer;
@@ -68,6 +70,10 @@ export type RowGroupConfig = {
     groups: RowGroup[];
     groupOpen: boolean[];
 };
+export type GroupMap = Map<number, SheetType.RowGroup & {
+    isStart: boolean;
+    isOpen: boolean;
+}>;
 export type MenuRenderProps = {
     position?: {
         top: number;
@@ -96,7 +102,7 @@ export type SheetProps = {
     freePaste?: boolean;
     virtualized?: boolean;
     showBackEdit?: boolean;
-    backEditStyle?: Partial<CSSStyleDeclaration>;
+    backEditStyle?: Partial<CSSProperties>;
     sticky?: boolean;
     groupConfig?: RowGroupConfig;
     onCellsChanged?: CellChangeHandler;
@@ -109,10 +115,16 @@ export type SheetProps = {
     rowClassName?: string | ((record: Record<string, unknown>, index: number) => string);
     children?: any[];
 };
-export type WidthConfig = {
+export type WidthConfigContext = {
     onChange?: (value: Record<number | string, number>) => void;
     widths?: Record<number | string, number>;
 };
+export type GroupConfigContext = {
+    onChange?: (value: RowGroupConfig) => void;
+    config?: RowGroupConfig & {
+        configMap: GroupMap;
+    };
+};
 export type SheetShell = Pick<SheetTableType.TableProps, 'columns'> & {
     className?: string;
     showGroup?: boolean;

package/dist/type/sheetTable.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { SheetType } from '.';
 export type refAssertion = {
     contains?: (target: EventTarget | null) => boolean;
@@ -79,7 +79,7 @@ export type TableProps = {
     draggable?: boolean;
     freePaste?: boolean;
     showBackEdit?: boolean;
-    backEditStyle?: Partial<CSSStyleDeclaration>;
+    backEditStyle?: Partial<CSSProperties>;
     rowSelection?: TableRowSelection;
     groupConfig?: TableGroupConfig;
     menuRenderer?: React.FC<SheetType.MenuRenderProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",