@zhenliang/sheet 0.1.88 → 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/index.js

@@ -99,7 +99,8 @@ var Sheet = function Sheet(props) {
       lastFocus: [],
       groupConfig: groupConfig,
       eventBus: eventBus,
-      fixedInfo: []
+      fixedInfo: [],
+      elementRef: sheetWrapperRef
     },
     // [ReduxThunk, ReduxLogger],
     [ReduxThunk]),

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

@@ -240,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.88",
+  "version": "0.1.89-beta.0",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",