@zhenliang/sheet 0.1.88 → 0.1.89-beta.2

package/dist/core/reducers/keyboardReducer.js

@@ -4,25 +4,57 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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(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 { get, isNil } from 'lodash';
 import { getNextVisibleRow, groupConfigToGroupMap, stripRowIndex } 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,
+      elementRef = _ref.elementRef;
     var groupConfig = state.groupConfig,
       _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);
+      data = _state$data === void 0 ? [] : _state$data,
+      rowHeight = state.rowHeight,
+      cloWidthArray = state.cloWidthArray;
+    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 = 0;
+    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 = get(cloWidthArray.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 itemHeight = rowHeight.current;
+      elementRef === null || elementRef === void 0 || (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 || _elementRef$current2.scrollBy({
+        top: itemHeight * optRow
+      });
+    }
+    if (groupConfig && optRow !== 0) {
+      var _getNextVisibleRow;
+      newRow = (_getNextVisibleRow = getNextVisibleRow(newRow, maxRow, groupConfigToGroupMap(groupConfig), optRow)) !== null && _getNextVisibleRow !== void 0 ? _getNextVisibleRow : 0;
     }
     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 +62,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 +73,7 @@ export var keyboardReducer = {
       editing: undefined,
       lastEditing: lastEditing
     });
+    return newState;
   },
   escape: function escape(state) {
     return _objectSpread(_objectSpread({}, state), {}, {

package/dist/core/sheet/index.js

@@ -21,7 +21,7 @@ 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 { classNames, rowToActualRow } from "../util";
 import { Control } from "./Control";
 import { DefaultRowMapper } from "./DefaultRowMapper";
 import { Menu } from "./Menu";
@@ -87,6 +87,8 @@ var Sheet = function Sheet(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     isScrolledToEnd = _useState4[0],
     setIsScrolledToEnd = _useState4[1];
+  var rowHeight = useRef(30);
+  var cloWidthArray = useRef([]);
   var sheetWrapperRef = useRef(null);
   var contextMenuRef = useRef(null);
   var eventBus = useEventBus();
@@ -99,7 +101,9 @@ var Sheet = function Sheet(props) {
       lastFocus: [],
       groupConfig: groupConfig,
       eventBus: eventBus,
-      fixedInfo: []
+      fixedInfo: [],
+      rowHeight: rowHeight,
+      cloWidthArray: cloWidthArray
     },
     // [ReduxThunk, ReduxLogger],
     [ReduxThunk]),
@@ -120,10 +124,9 @@ var Sheet = function Sheet(props) {
           var container = sheetWrapperRef.current;
           if (!start && isNil(row)) return;
           var actual = rowToActualRow((_ref = row) !== null && _ref !== void 0 ? _ref : start === null || start === void 0 ? void 0 : start.row, groupConfig, data.length);
-          var rowHeight = getRowHeight(container);
           var firstRowCell = container.querySelector("td.cell[data-col='".concat(start === null || start === void 0 ? void 0 : start.col, "']"));
           var colPosition = firstRowCell ? firstRowCell.offsetLeft - firstRowCell.clientWidth : 0;
-          var scrollHeight = actual * rowHeight;
+          var scrollHeight = actual * rowHeight.current;
           (_sheetWrapperRef$curr = sheetWrapperRef.current) === null || _sheetWrapperRef$curr === void 0 || _sheetWrapperRef$curr.scrollTo(isNumber(row) ? 0 : colPosition, scrollHeight);
 
           // 最后一行的bug暂时用 scroll end 事件来处理
@@ -153,10 +156,9 @@ var Sheet = function Sheet(props) {
           var container = sheetWrapperRef.current;
           if (isNil(row) || isNil(col)) return;
           var actual = rowToActualRow(row, groupConfig, data.length);
-          var rowHeight = getRowHeight(container);
           var firstRowCell = container.querySelector("td.cell[data-col='".concat(col, "']"));
           var colPosition = firstRowCell ? firstRowCell.offsetLeft - firstRowCell.clientWidth : 0;
-          var scrollHeight = actual * rowHeight;
+          var scrollHeight = actual * rowHeight.current;
           if (nextLoop) {
             setTimeout(function () {
               var _sheetWrapperRef$curr4;
@@ -244,6 +246,16 @@ var Sheet = function Sheet(props) {
       }
     });
   }, [onCellsChanged, data, freePaste, groupConfig, freeze]);
+  useEffect(function () {
+    var _sheetWrapperRef$curr6, _sheetWrapperRef$curr7, _sheetWrapperRef$curr8;
+    if (!sheetWrapperRef.current) {
+      return;
+    }
+    rowHeight.current = ((_sheetWrapperRef$curr6 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr6 === void 0 || (_sheetWrapperRef$curr6 = _sheetWrapperRef$curr6.getElementsByTagName('thead')[0]) === null || _sheetWrapperRef$curr6 === void 0 ? void 0 : _sheetWrapperRef$curr6.clientHeight) || 30;
+    cloWidthArray.current = Array.from((_sheetWrapperRef$curr7 = (_sheetWrapperRef$curr8 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr8 === void 0 ? void 0 : _sheetWrapperRef$curr8.getElementsByTagName('col')) !== null && _sheetWrapperRef$curr7 !== void 0 ? _sheetWrapperRef$curr7 : []).map(function (item) {
+      return item.clientWidth;
+    });
+  }, [sheetWrapperRef.current]);
   useCellEvent(dispatch, state);
   useMouseEvent(dispatch, sheetWrapperRef);
   useKeyBoardEvent(dispatch, sheetWrapperRef);
@@ -270,9 +282,9 @@ var Sheet = function Sheet(props) {
   useEffect(function () {
     if (!state.editing && state.start) {
       setTimeout(function () {
-        var _sheetWrapperRef$curr6;
+        var _sheetWrapperRef$curr9;
         // 表格获取焦点 + 接收keyboard event
-        (_sheetWrapperRef$curr6 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr6 === void 0 || _sheetWrapperRef$curr6.focus({
+        (_sheetWrapperRef$curr9 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr9 === void 0 || _sheetWrapperRef$curr9.focus({
           preventScroll: true
         });
       }, 1);

package/dist/core/sheet/useKeyBoardEvent.js

@@ -1,25 +1,22 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(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 { 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) {
       e.preventDefault();
       dispatch({
         type: 'move',
-        payload: value
+        payload: _objectSpread(_objectSpread({}, value), {}, {
+          elementRef: elementRef
+        })
       });
-      // 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 +61,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) => number;
 export declare const getNextVisibleRow: (row: number, maxRow: number, groupMap?: Map<number, SheetType.RowGroup & {
     isStart: boolean;
     isOpen: boolean;

package/dist/core/util.js

@@ -416,17 +416,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) {
+  var 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 rowInfo = groupMap.get(row);
+  var isClose = !(rowInfo !== null && rowInfo !== void 0 && rowInfo.isOpen);
+  var isChild = !(rowInfo !== null && rowInfo !== void 0 && rowInfo.isStart);
+  // 向下 如果遇到了一个关着的 并且 是子行 直接返回他的最后一行+1
+  if (rowInfo && isClose && up > 0 && isChild) {
+    var newRow = rowInfo.groupEnd + 1;
+    if (rowInfo.groupEnd === maxRow) {
+      newRow = rowInfo.groupStart;
+    }
+    return newRow;
+  }
+  // 向上 如果遇到了一个关着的直接返回他的主行
+  if (rowInfo && isClose) {
+    return rowInfo.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,51 @@ 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'
+}, {
+  key: 9,
+  id: 9,
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+  children: [{
+    id: 91,
+    key: '9-1',
+    parentId: 9
+  }, {
+    id: 92,
+    key: '9-2',
+    parentId: 9
+  }]
 }];
 var App = function App() {
   var _useState = useState(data),
@@ -121,7 +200,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,8 @@ export type UpdateStateType = {
     };
     cellChangeHandler: (cells: CellData[], additions: CellData[] | undefined, type: ChangeType) => void;
     fixedInfo: SheetType.FixedInfo[];
+    rowHeight: any;
+    cloWidthArray: 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.2",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",