@zhenliang/sheet 0.1.87 → 0.1.89-beta.0

package/dist/core/reducers/keyboardReducer.js

@@ -5,24 +5,54 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { isNil } from 'lodash';
-import { getNextVisibleRow, groupConfigToGroupMap, stripRowIndex } from "../util";
+import { getNextVisibleRow, groupConfigToGroupMap, stripRowIndex, getRowHeight, getColWidth } from "../util";
 export var keyboardReducer = {
   move: function move(state, payload) {
-    var _state$start, _state$start2;
+    var _state$start, _state$start2, _data;
     var _ref = payload,
-      row = _ref.row,
-      col = _ref.col;
+      optRow = _ref.row,
+      optCol = _ref.col;
     var groupConfig = state.groupConfig,
+      elementRef = state.elementRef,
       _state$data = state.data,
       data = _state$data === void 0 ? [] : _state$data;
-    var newRow = (((_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.row) || 0) + row;
-    if (groupConfig) {
-      var _data;
-      newRow = getNextVisibleRow(newRow, (data === null || data === void 0 || (_data = data[data.length - 1]) === null || _data === void 0 ? void 0 : _data[0].row) || data.length, groupConfigToGroupMap(groupConfig), row < 0 ? -1 : 1);
+    var newRow = (((_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.row) || 0) + optRow;
+    var newCol = (((_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.col) || 0) + optCol;
+    // 越界判断
+    var maxRow = (data === null || data === void 0 || (_data = data[data.length - 1]) === null || _data === void 0 ? void 0 : _data[0].row) || data.length - 1;
+    var maxCol = data[0].length - 1;
+    var minCol = -1;
+    data[0].forEach(function (item) {
+      var itemCol = item.col;
+      if (itemCol < 0) {
+        minCol++;
+      }
+    });
+    if (newRow > maxRow || newRow < 0 || newCol > maxCol || newCol < minCol) {
+      return state;
+    }
+    // 跟随滚动
+    if (optCol !== 0) {
+      var _elementRef$current;
+      var colWidth = getColWidth(elementRef.current, newCol);
+      elementRef === null || elementRef === void 0 || (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.scrollBy({
+        left: colWidth * optCol
+      });
+    }
+    if (optRow !== 0) {
+      var _elementRef$current2;
+      var rowHeight = getRowHeight(elementRef.current);
+      var itemHeight = rowHeight;
+      elementRef === null || elementRef === void 0 || (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 || _elementRef$current2.scrollBy({
+        top: itemHeight * optRow
+      });
+    }
+    if (groupConfig && optRow !== 0) {
+      newRow = getNextVisibleRow(newRow, maxRow, groupConfigToGroupMap(groupConfig), optRow);
     }
     var currentPos = {
       row: newRow,
-      col: (((_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.col) || 0) + col
+      col: newCol
     };
     var lastEditing = state.lastEditing;
     if (state.editing) {
@@ -30,21 +60,10 @@ export var keyboardReducer = {
         confirm: true
       });
     }
-    if (isNil(currentPos.row)) {
-      return _objectSpread(_objectSpread({}, state), {}, {
-        start: undefined,
-        end: undefined,
-        lastSelected: {
-          start: state.start,
-          end: state.end
-        },
-        editing: undefined,
-        lastEditing: lastEditing
-      });
-    }
-    return _objectSpread(_objectSpread({}, state), {}, {
-      start: currentPos,
-      end: currentPos,
+    var isOut = isNil(currentPos.row);
+    var newState = _objectSpread(_objectSpread({}, state), {}, {
+      start: isOut ? undefined : currentPos,
+      end: isOut ? undefined : currentPos,
       lastSelected: {
         start: state.start,
         end: state.end
@@ -52,6 +71,7 @@ export var keyboardReducer = {
       editing: undefined,
       lastEditing: lastEditing
     });
+    return newState;
   },
   escape: function escape(state) {
     return _objectSpread(_objectSpread({}, state), {}, {

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

@@ -8,6 +8,8 @@ interface ControlProps {
     backToEditRow: () => void;
     toTop: () => void;
     toBottom: () => void;
+    reverse: () => void;
+    recover: () => void;
     backEditStyle?: Partial<CSSProperties>;
     ControlContainer?: React.FC<any>;
     showBackEdit?: boolean;
@@ -16,6 +18,9 @@ interface ControlProps {
         end?: CellPosition;
         selecting?: boolean;
     };
+    showRecoverBtn: boolean;
+    recoverLength: number;
+    reverseLength: number;
 }
 export declare const Control: React.FC<ControlProps>;
 export {};

package/dist/core/sheet/Control.js

@@ -1,4 +1,4 @@
-import { EditOutlined, VerticalAlignBottomOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
+import { EditOutlined, RedoOutlined, UndoOutlined, VerticalAlignBottomOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
 import React, { useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,14 +16,35 @@ export var Control = function Control(props) {
     toTop = props.toTop,
     toBottom = props.toBottom,
     backToEditRow = props.backToEditRow,
+    reverse = props.reverse,
+    recover = props.recover,
     _props$backEditStyle = props.backEditStyle,
     backEditStyle = _props$backEditStyle === void 0 ? {
       bottom: 0,
       right: 0
     } : _props$backEditStyle,
-    ControlContainer = props.ControlContainer;
+    ControlContainer = props.ControlContainer,
+    showRecoverBtn = props.showRecoverBtn,
+    recoverLength = props.recoverLength,
+    reverseLength = props.reverseLength;
   var btns = useMemo(function () {
     var tempBtns = [{
+      title: '撤销',
+      disabled: reverseLength === 0,
+      event: reverse,
+      icon: /*#__PURE__*/_jsx(UndoOutlined, {
+        style: itemStyle
+      }),
+      isShow: showRecoverBtn
+    }, {
+      title: '恢复',
+      disabled: recoverLength === 0,
+      event: recover,
+      icon: /*#__PURE__*/_jsx(RedoOutlined, {
+        style: itemStyle
+      }),
+      isShow: showRecoverBtn
+    }, {
       title: '置顶',
       disabled: firstRowVisible,
       event: toTop,
@@ -51,7 +72,7 @@ export var Control = function Control(props) {
     return tempBtns.filter(function (item) {
       return item.isShow;
     });
-  }, [firstRowVisible, showQuickLocationBtn, lastRowVisible, startRowVisible, showBackEdit]);
+  }, [firstRowVisible, showQuickLocationBtn, lastRowVisible, startRowVisible, showBackEdit, recoverLength, reverseLength, reverse, recover]);
   if (!showBackEdit && !showQuickLocationBtn) return null;
   if (ControlContainer) {
     return /*#__PURE__*/_jsx(ControlContainer, {

package/dist/core/sheet/index.js

@@ -20,6 +20,7 @@ import { Empty } from 'antd';
 import { isEmpty, isNil, isNumber } from 'lodash';
 import { SheetEventContext, useEventBus, useMiddlewareReducer } from "../../hooks";
 import sheetReducer from "../reducers";
+import { sideEffectReducer } from "../reducers/sideEffectReducer";
 import { classNames, getRowHeight, rowToActualRow } from "../util";
 import { Control } from "./Control";
 import { DefaultRowMapper } from "./DefaultRowMapper";
@@ -98,7 +99,8 @@ var Sheet = function Sheet(props) {
       lastFocus: [],
       groupConfig: groupConfig,
       eventBus: eventBus,
-      fixedInfo: []
+      fixedInfo: [],
+      elementRef: sheetWrapperRef
     },
     // [ReduxThunk, ReduxLogger],
     [ReduxThunk]),
@@ -394,6 +396,18 @@ var Sheet = function Sheet(props) {
       handleScroll();
     }
   }, []);
+  var _useMemo = useMemo(function () {
+      var history = state.history,
+        recoverHistory = state.recoverHistory;
+      var reverseLength = history ? history.length : 0;
+      var recoverLength = recoverHistory ? recoverHistory.length : 0;
+      return {
+        reverseLength: reverseLength,
+        recoverLength: recoverLength
+      };
+    }, [state]),
+    reverseLength = _useMemo.reverseLength,
+    recoverLength = _useMemo.recoverLength;
   return /*#__PURE__*/_jsx(SheetEventContext.Provider, {
     value: eventBus,
     children: /*#__PURE__*/_jsxs(_Fragment, {
@@ -432,6 +446,15 @@ var Sheet = function Sheet(props) {
         }), /*#__PURE__*/_jsxs("div", {
           className: "harvest-sheet-control",
           children: [/*#__PURE__*/_jsx(Control, {
+            showRecoverBtn: !freeze,
+            reverse: function reverse() {
+              dispatch(sideEffectReducer.reverse);
+            },
+            recover: function recover() {
+              dispatch(sideEffectReducer.recover);
+            },
+            reverseLength: reverseLength,
+            recoverLength: recoverLength,
             showBackEdit: showBackEdit,
             startRowVisible: startRowVisible,
             backToEditRow: function backToEditRow() {

package/dist/core/sheet/useKeyBoardEvent.js

@@ -1,6 +1,6 @@
 import { useKeyBoard } from "../..";
 import { sideEffectReducer } from "../reducers/sideEffectReducer";
-import { ensureFocus, getRowHeight, isSearchElement } from "../util";
+import { ensureFocus, isSearchElement } from "../util";
 export var useKeyBoardEvent = function useKeyBoardEvent(dispatch, elementRef) {
   useKeyBoard({
     move: function move(e, value) {
@@ -9,17 +9,6 @@ export var useKeyBoardEvent = function useKeyBoardEvent(dispatch, elementRef) {
         type: 'move',
         payload: value
       });
-      // todo 横向滚动的处理
-      var _ref = value,
-        row = _ref.row;
-      if (Math.abs(row) !== 0) {
-        var _elementRef$current;
-        var rowHeight = getRowHeight(elementRef.current);
-        var itemHeight = rowHeight || 30;
-        elementRef === null || elementRef === void 0 || (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.scrollBy({
-          top: itemHeight * row
-        });
-      }
     },
     selectAll: function selectAll(e) {
       e.preventDefault();
@@ -64,18 +53,18 @@ export var useKeyBoardEvent = function useKeyBoardEvent(dispatch, elementRef) {
       });
     },
     copy: function copy(e) {
-      var _elementRef$current2;
-      var isFromSearch = isSearchElement((_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.parentElement, e.target);
+      var _elementRef$current;
+      var isFromSearch = isSearchElement((_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.parentElement, e.target);
       isFromSearch ? null : dispatch(sideEffectReducer.copy);
     },
     paste: function paste(e) {
-      var _elementRef$current3;
-      var isFromSearch = isSearchElement((_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.parentElement, e.target);
+      var _elementRef$current2;
+      var isFromSearch = isSearchElement((_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.parentElement, e.target);
       isFromSearch ? null : dispatch(sideEffectReducer.paste);
     },
     cut: function cut(e) {
-      var _elementRef$current4;
-      var isFromSearch = isSearchElement((_elementRef$current4 = elementRef.current) === null || _elementRef$current4 === void 0 ? void 0 : _elementRef$current4.parentElement, e.target);
+      var _elementRef$current3;
+      var isFromSearch = isSearchElement((_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.parentElement, e.target);
       if (isFromSearch) return;
       dispatch(sideEffectReducer.copy);
       dispatch(sideEffectReducer.delete);

package/dist/core/util.d.ts

@@ -1,5 +1,4 @@
 import type { SheetType } from "../type";
-import { Cell } from '../type/sheet';
 export declare function findParentTd(el: HTMLElement): HTMLElement | null;
 export declare function extractDataRowAndCol(el: HTMLElement): {
     row: number;
@@ -44,6 +43,7 @@ export declare const changeGroupConfig: (rowGroupConfig: SheetType.RowGroupConfi
 export declare const rowToActualRow: (row: number, groupConfig?: SheetType.RowGroupConfig, max?: number) => number;
 export declare const rowToCountRow: (row: number, groupConfig: SheetType.RowGroupConfig, max: number) => number;
 export declare const getRowHeight: (container: HTMLSpanElement) => number;
+export declare const getColWidth: (container: HTMLSpanElement, col: number) => any;
 export declare const getNextVisibleRow: (row: number, maxRow: number, groupMap?: Map<number, SheetType.RowGroup & {
     isStart: boolean;
     isOpen: boolean;

package/dist/core/util.js

@@ -16,6 +16,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 import { message } from 'antd';
 import { cloneDeep, get, isNil, range } from 'lodash';
+var colElements;
 export function findParentTd(el) {
   if (!el) return null;
   if (el.tagName === 'TD') return el;
@@ -416,17 +417,35 @@ export var getRowHeight = function getRowHeight(container) {
   var h = ((_container$getElement = container.getElementsByTagName('td')[0]) === null || _container$getElement === void 0 || (_container$getElement = _container$getElement.parentNode) === null || _container$getElement === void 0 ? void 0 : _container$getElement.clientHeight) || 30;
   return h;
 };
+export var getColWidth = function getColWidth(container, col) {
+  if (isNil(colElements)) {
+    colElements = container.getElementsByTagName('col');
+  }
+  if (colElements[col]) {
+    return colElements[col].clientWidth;
+  }
+  return 0;
+};
 export var getNextVisibleRow = function getNextVisibleRow(row, maxRow, groupMap) {
   var _groupMap$get15, _groupMap$get16;
   var up = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
   if (!(groupMap !== null && groupMap !== void 0 && groupMap.size)) {
     return row;
   }
-  if (row > maxRow) {
+  if (row > maxRow || row < 0) {
     return null;
   }
-  if (groupMap.get(row) && !((_groupMap$get15 = groupMap.get(row)) !== null && _groupMap$get15 !== void 0 && _groupMap$get15.isOpen) && !((_groupMap$get16 = groupMap.get(row)) !== null && _groupMap$get16 !== void 0 && _groupMap$get16.isStart)) {
-    return getNextVisibleRow(row + up, maxRow, groupMap);
+  var isClose = !((_groupMap$get15 = groupMap.get(row)) !== null && _groupMap$get15 !== void 0 && _groupMap$get15.isOpen);
+  var isChild = !((_groupMap$get16 = groupMap.get(row)) !== null && _groupMap$get16 !== void 0 && _groupMap$get16.isStart);
+  // 向下 如果遇到了一个关着的 并且 是子行 直接返回他的最后一行+1
+  if (groupMap.get(row) && isClose && isChild && up > 0) {
+    var _groupMap$get17;
+    return ((_groupMap$get17 = groupMap.get(row)) === null || _groupMap$get17 === void 0 ? void 0 : _groupMap$get17.groupEnd) + 1;
+  }
+  // 向上 如果遇到了一个关着的直接返回他的主行
+  if (groupMap.get(row) && isClose) {
+    var _groupMap$get18;
+    return (_groupMap$get18 = groupMap.get(row)) === null || _groupMap$get18 === void 0 ? void 0 : _groupMap$get18.groupStart;
   }
   return row;
 };

package/dist/example/group.js

@@ -15,11 +15,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var columns = [{
   title: 'Name',
   dataIndex: 'name',
-  key: 'name'
+  key: 'name',
+  width: 220
 }, {
   title: 'Age',
   dataIndex: 'age',
-  key: 'age'
+  key: 'age',
+  width: 220
 }, {
   title: 'Address',
   readonly: function readonly(value, record, index) {
@@ -27,7 +29,8 @@ var columns = [{
     return index % 2 === 0;
   },
   dataIndex: 'address',
-  key: 'address'
+  key: 'address',
+  width: 220
 }, {
   title: 'Action',
   dataIndex: '',
@@ -37,7 +40,38 @@ var columns = [{
     return /*#__PURE__*/_jsx("a", {
       children: "Delete"
     });
-  }
+  },
+  width: 120
+}, {
+  title: 'Test',
+  dataIndex: 'Test',
+  key: 'Test',
+  width: 100
+}, {
+  title: 'Test1',
+  dataIndex: 'Test1',
+  key: 'Test1',
+  width: 100
+}, {
+  title: 'Test2',
+  dataIndex: 'Test2',
+  key: 'Test2',
+  width: 100
+}, {
+  title: 'Test3',
+  dataIndex: 'Test3',
+  key: 'Test3',
+  width: 100
+}, {
+  title: 'Test4',
+  dataIndex: 'Test4',
+  key: 'Test4',
+  width: 100
+}, {
+  title: 'Test5',
+  dataIndex: 'Test5',
+  key: 'Test5',
+  width: 100
 }];
 var data = [{
   key: 1,
@@ -90,6 +124,36 @@ var data = [{
     key: '4-2',
     parentId: 4
   }]
+}, {
+  key: 4,
+  id: 4,
+  name: 'Not Expandable',
+  age: 29,
+  address: 'Jiangsu No. 1 Lake Park'
+}, {
+  key: 5,
+  id: 5,
+  name: 'Not Expandable',
+  age: 29,
+  address: 'Jiangsu No. 1 Lake Park'
+}, {
+  key: 6,
+  id: 6,
+  name: 'Not Expandable',
+  age: 29,
+  address: 'Jiangsu No. 1 Lake Park'
+}, {
+  key: 7,
+  id: 7,
+  name: 'Not Expandable',
+  age: 29,
+  address: 'Jiangsu No. 1 Lake Park'
+}, {
+  key: 8,
+  id: 8,
+  name: 'Not Expandable',
+  age: 29,
+  address: 'Jiangsu No. 1 Lake Park'
 }];
 var App = function App() {
   var _useState = useState(data),
@@ -121,7 +185,8 @@ var App = function App() {
   return /*#__PURE__*/_jsx(Table, {
     draggable: true,
     scroll: {
-      x: '100%'
+      x: '100%',
+      y: 400
     },
     columns: columns,
     showBackEdit: true,

package/dist/type/sheet.d.ts

@@ -108,6 +108,7 @@ export type SheetInstance = {
     }) => void;
     popHistory: () => OperateHistory;
     dropHistory: () => OperateHistory[];
+    dropRecover: () => OperateHistory[];
     call: (caller: (...args: any) => void, ...args: any) => void;
 };
 export type SheetProps = {
@@ -141,6 +142,7 @@ export type SheetProps = {
     showQuickLocationBtn?: boolean;
     showRemark?: boolean;
     ControlContainer?: React.FC;
+    showRecoverBtn?: boolean;
 };
 export type WidthConfigContext = {
     onChange?: (value: Record<number | string, number>) => void;
@@ -238,6 +240,7 @@ export type UpdateStateType = {
     };
     cellChangeHandler: (cells: CellData[], additions: CellData[] | undefined, type: ChangeType) => void;
     fixedInfo: SheetType.FixedInfo[];
+    elementRef: any;
 } & SearchState;
 export type UpdateFocus = (start: CellPosition, end: CellPosition) => void;
 export type Options<T = any> = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.1.87",
+  "version": "0.1.89-beta.0",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -85,4 +85,5 @@
     "fizz.zhou@ap.jll.com"
   ],
   "preid": "beta"
+
 }