@zhenliang/sheet 0.1.15 → 0.1.17

package/dist/core/sheet/index.js

@@ -15,7 +15,7 @@ import { useEffect, useMemo, useRef } from 'react';
 import ReduxThunk from 'redux-thunk';
 import DefaultRow from "./DefaultRow";
 import DefaultShell from "./DefaultShell";
-import { Button } from 'antd';
+import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
 import { isNil, isNumber } from 'lodash';
 import { SheetEventContext, useEventBus, useMiddlewareReducer } from "../../hooks";
 import sheetReducer from "../reducers";
@@ -82,14 +82,25 @@ var Sheet = function Sheet(props) {
           var _ref, _sheetWrapperRef$curr;
           var _getState = getState(),
             start = _getState.start,
-            groupConfig = _getState.groupConfig;
+            groupConfig = _getState.groupConfig,
+            data = _getState.data;
           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);
           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;
-          (_sheetWrapperRef$curr = sheetWrapperRef.current) === null || _sheetWrapperRef$curr === void 0 ? void 0 : _sheetWrapperRef$curr.scrollTo(isNumber(row) ? 0 : colPosition, rowHeight * actual);
+          var scrollHeight = (actual - 1) * rowHeight;
+          (_sheetWrapperRef$curr = sheetWrapperRef.current) === null || _sheetWrapperRef$curr === void 0 ? void 0 : _sheetWrapperRef$curr.scrollTo(isNumber(row) ? 0 : colPosition, scrollHeight);
+
+          // to do 最后一行的有bug
+          if (isNil(row) && start.row === data.length - 1) {
+            setTimeout(function () {
+              var _sheetWrapperRef$curr2, _sheetWrapperRef$curr3, _sheetWrapperRef$curr4;
+              console.log(scrollHeight, (_sheetWrapperRef$curr2 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr2 === void 0 ? void 0 : _sheetWrapperRef$curr2.scrollHeight);
+              (_sheetWrapperRef$curr3 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr3 === void 0 ? void 0 : _sheetWrapperRef$curr3.scrollTo(isNumber(row) ? 0 : colPosition, ((_sheetWrapperRef$curr4 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr4 === void 0 ? void 0 : _sheetWrapperRef$curr4.scrollHeight) || scrollHeight);
+            }, 500);
+          }
         });
       },
       pushToHistory: function pushToHistory(config) {
@@ -146,9 +157,9 @@ var Sheet = function Sheet(props) {
   useEffect(function () {
     if (!state.editing && state.start) {
       setTimeout(function () {
-        var _sheetWrapperRef$curr2;
+        var _sheetWrapperRef$curr5;
         // 表格获取焦点 + 接收keyboard event
-        (_sheetWrapperRef$curr2 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr2 === void 0 ? void 0 : _sheetWrapperRef$curr2.focus({
+        (_sheetWrapperRef$curr5 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr5 === void 0 ? void 0 : _sheetWrapperRef$curr5.focus({
           preventScroll: true
         });
       }, 1);
@@ -186,58 +197,65 @@ var Sheet = function Sheet(props) {
     });
   }, [state.data, groupConfig, virtualStart, virtualEnd, rowClassName]);
   var memoHeight = Math.min(((_state$data$length = state === null || state === void 0 ? 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;
-  var startRowVisible = useSelectVisible(sheetWrapperRef, state.start);
+  var _useSelectVisible = useSelectVisible(sheetWrapperRef, state.start),
+    _useSelectVisible2 = _slicedToArray(_useSelectVisible, 2),
+    startRowVisible = _useSelectVisible2[0],
+    direction = _useSelectVisible2[1];
   return /*#__PURE__*/_jsx(SheetEventContext.Provider, {
     value: eventBus,
     children: /*#__PURE__*/_jsxs("span", {
-      ref: sheetWrapperRef,
-      tabIndex: 0,
-      className: classNames('harvest harvest-sheet-container', className),
-      style: {
-        maxHeight: (_scroll$y = scroll === null || scroll === void 0 ? void 0 : scroll.y) !== null && _scroll$y !== void 0 ? _scroll$y : memoHeight,
-        width: (_scroll$x = scroll === null || scroll === void 0 ? void 0 : scroll.x) !== null && _scroll$x !== void 0 ? _scroll$x : '100%'
-      },
-      children: [/*#__PURE__*/_jsxs(SheetShell, {
-        className: classNames('harvest-sheet', className),
-        children: [virtualized && /*#__PURE__*/_jsx("tr", {
-          style: {
-            height: 0,
-            paddingBottom: paddingTop,
-            display: 'block'
-          }
-        }), rowElements, virtualized && paddingBottom > 0 && /*#__PURE__*/_jsx("tr", {
-          style: {
-            height: 0,
-            paddingBottom: paddingBottom,
-            display: 'block'
-          }
-        })]
-      }, "sheet"), ContextMenu ? /*#__PURE__*/_jsx("div", {
-        ref: contextMenuRef,
+      children: [/*#__PURE__*/_jsxs("span", {
+        ref: sheetWrapperRef,
+        tabIndex: 0,
+        className: classNames('harvest harvest-sheet-container', className),
         style: {
-          display: menu.showMenu ? '' : 'none'
+          maxHeight: (_scroll$y = scroll === null || scroll === void 0 ? void 0 : scroll.y) !== null && _scroll$y !== void 0 ? _scroll$y : memoHeight,
+          width: (_scroll$x = scroll === null || scroll === void 0 ? void 0 : scroll.x) !== null && _scroll$x !== void 0 ? _scroll$x : '100%'
         },
-        children: /*#__PURE__*/_jsx(ContextMenu, {
-          position: menu.position,
-          cell: menu.cellPosition,
-          onContextMenu: onContextMenu
-        })
-      }) : null, /*#__PURE__*/_jsxs("div", {
+        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'
+            }
+          })]
+        }, "sheet"), ContextMenu ? /*#__PURE__*/_jsx("div", {
+          ref: contextMenuRef,
+          style: {
+            display: menu.showMenu ? '' : 'none'
+          },
+          children: /*#__PURE__*/_jsx(ContextMenu, {
+            position: menu.position,
+            cell: menu.cellPosition,
+            onContextMenu: onContextMenu
+          })
+        }) : null]
+      }), /*#__PURE__*/_jsxs("div", {
         className: "harvest-sheet-control",
-        children: [children, showBackEdit && !startRowVisible ? /*#__PURE__*/_jsx(Button, {
-          type: "dashed",
+        children: [children, showBackEdit && !startRowVisible ? /*#__PURE__*/_jsxs("div", {
+          className: "back-edit",
           onClick: function onClick() {
             var _sheetInstance$curren;
             return sheetInstance === null || sheetInstance === void 0 ? void 0 : (_sheetInstance$curren = sheetInstance.current) === null || _sheetInstance$curren === void 0 ? void 0 : _sheetInstance$curren.zoomTo();
           },
-          style: _objectSpread({
-            position: 'absolute',
-            zIndex: 4
-          }, !backEditStyle ? {
+          style: _objectSpread({}, !backEditStyle ? {
             top: 0,
             right: 0
           } : backEditStyle),
-          children: "\u56DE\u5230\u7F16\u8F91\u884C"
+          children: [direction === 'up' ? /*#__PURE__*/_jsx(ArrowUpOutlined, {}) : /*#__PURE__*/_jsx(ArrowDownOutlined, {}), /*#__PURE__*/_jsx("span", {
+            style: {
+              marginLeft: 0
+            },
+            children: "\u8FD4\u56DE\u7F16\u8F91\u884C"
+          })]
         }) : null]
       })]
     })

package/dist/core/sheet/index.less

@@ -172,6 +172,7 @@ span.harvest-sheet-container, span.harvest-sheet-container:focus {
   background: var(--cell-read-only-background-color);
   color: var(--read-color);
   text-align: center;
+  cursor: not-allowed;
 }
 
 
@@ -282,10 +283,25 @@ span.harvest-sheet-container, span.harvest-sheet-container:focus {
 
 }
 
-.harvest-sheet-container .harvest-sheet-control{
-  position: sticky;
+.harvest-sheet-control{
+  position: relative;
   z-index: 3;
   bottom: 0;
   left: 0;
   background-color: white;
+}
+
+.harvest-sheet-control .back-edit{
+  padding: 5px 8px;
+  margin: 1px;
+  height: 30px;
+  display: flex;
+  width: 105px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 4;
+  border:1px solid #D8DFEB;
+  border-radius:2px;
 }

package/dist/core/sheet/useMouseEvent.js

@@ -267,8 +267,8 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
     });
   }, []);
   var loseFocus = useCallback(function (e) {
-    var _elementRef$current10;
-    if (!((_elementRef$current10 = elementRef.current) !== null && _elementRef$current10 !== void 0 && _elementRef$current10.contains(e.target))) {
+    var _elementRef$current10, _elementRef$current11;
+    if (!((_elementRef$current10 = elementRef.current) !== null && _elementRef$current10 !== void 0 && (_elementRef$current11 = _elementRef$current10.parentElement) !== null && _elementRef$current11 !== void 0 && _elementRef$current11.contains(e.target))) {
       dispatch({
         type: 'loseFocus'
       });

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

@@ -1,2 +1,2 @@
 import { SheetType } from "../../type";
-export declare const useSelectVisible: (sheetWrapper: React.RefObject<SheetType.refAssertion>, start?: SheetType.CellPosition) => boolean;
+export declare const useSelectVisible: (sheetWrapper: React.RefObject<SheetType.refAssertion>, start?: SheetType.CellPosition) => [boolean, 'up' | 'down'];

package/dist/core/sheet/useSelectVisible.js

@@ -11,6 +11,10 @@ export var useSelectVisible = function useSelectVisible(sheetWrapper, start) {
     _useState2 = _slicedToArray(_useState, 2),
     startVisible = _useState2[0],
     setStartVisible = _useState2[1];
+  var _useState3 = useState('up'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    backDirection = _useState4[0],
+    setBackDirection = _useState4[1];
   useEffect(function () {
     var _sheetWrapper$current3;
     var handleScroll = throttle(function () {
@@ -32,6 +36,7 @@ export var useSelectVisible = function useSelectVisible(sheetWrapper, start) {
         setStartVisible(true);
       } else {
         setStartVisible(false);
+        setBackDirection(top < cellTop ? 'down' : 'up');
       }
     }, 100);
     handleScroll();
@@ -42,7 +47,7 @@ export var useSelectVisible = function useSelectVisible(sheetWrapper, start) {
     };
   }, [sheetWrapper.current, start]);
   if (!start) {
-    return true;
+    return [true, 'up'];
   }
-  return startVisible;
+  return [startVisible, backDirection];
 };

package/dist/core/sheet/useVirtualList.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { isEqual, throttle } from 'lodash';
 import { useEffect, useRef, useState } from 'react';
-import { getRowHeight, rowToActualRow } from "../util";
+import { getRowHeight, rowToActualRow, rowToCountRow } from "../util";
 var extra = 20;
 // 虚拟列表
 export var useVirtualList = function useVirtualList(elementRef) {
@@ -43,18 +43,30 @@ export var useVirtualList = function useVirtualList(elementRef) {
         clientHeight = _ref.clientHeight;
       var start = Math.floor(scrollTop / itemHeight) - extra;
       var end = Math.ceil((scrollTop + clientHeight) / itemHeight) + extra;
-
-      // todo 加入分组之后的 虚拟列表计算
-      var actualStart = groupConfigRef.current ? rowToActualRow(start, groupConfigRef.current) : start;
-      var actualEnd = groupConfigRef.current ? rowToActualRow(end, groupConfigRef.current) : end;
-
-      // const minStart = start - (actualStart - start)
-      var maxEnd = end - (actualEnd - end);
+      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);
+      var invisibleTop = rowToActualRow(actualStart, groupConfigRef.current);
+      var invisibleBottom = maxEnd > end ? maxEnd - end : 0;
       var updateVirtualConfig = {
         virtualStart: actualStart,
-        virtualEnd: maxEnd,
-        paddingTop: actualStart * itemHeight,
-        paddingBottom: (data.length - maxEnd) * itemHeight
+        virtualEnd: actualEnd,
+        paddingTop: invisibleTop * itemHeight,
+        paddingBottom: invisibleBottom * itemHeight
       };
       if (isEqual(updateVirtualConfig, virtualRef.current)) {
         return;

package/dist/core/shell/draggableShell/index.js

@@ -8,7 +8,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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useEffect, useMemo, useRef } from 'react';
+import { createElement, useEffect, useMemo, useRef } from 'react';
 import { useSetState, useWidth } from "../../../hooks";
 import { classNames } from "../../util";
 import { CheckViewer } from "../../viewer/checkViewer";
@@ -99,7 +99,7 @@ export var DraggableShell = function DraggableShell(_ref) {
           },
           children: /*#__PURE__*/_jsx("span", {
             className: "value-viewer",
-            children: item.title
+            children: typeof item.title === 'function' ? /*#__PURE__*/createElement(item.title) : item.title
           })
         }, (_item$dataIndex = item.dataIndex) !== null && _item$dataIndex !== void 0 ? _item$dataIndex : index));
       });

package/dist/core/util.d.ts

@@ -41,7 +41,8 @@ export declare const changeGroupConfig: (rowGroupConfig: SheetType.RowGroupConfi
     add?: number | undefined;
     remove?: number | undefined;
 }) => SheetType.RowGroupConfig;
-export declare const rowToActualRow: (row: number, groupConfig?: SheetType.RowGroupConfig) => number;
+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 getNextVisibleRow: (row: number, maxRow: number, groupMap?: Map<number, SheetType.RowGroup & {
     isStart: boolean;

package/dist/core/util.js

@@ -387,8 +387,23 @@ export var changeGroupConfig = function changeGroupConfig(rowGroupConfig, change
   });
 };
 export var rowToActualRow = function rowToActualRow(row, groupConfig) {
+  var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
   var groupMap = groupConfigToGroupMap(groupConfig);
-  if (!groupMap.size) return row;
+  if (!groupMap.size || row < 0) return row;
+  var openCount = 0;
+  for (var i = 0; i < max; i++) {
+    var _groupMap$get9, _groupMap$get10;
+    if (groupMap.has(i) && !((_groupMap$get9 = groupMap.get(i)) !== null && _groupMap$get9 !== void 0 && _groupMap$get9.isOpen) && !((_groupMap$get10 = groupMap.get(i)) !== null && _groupMap$get10 !== void 0 && _groupMap$get10.isStart)) {
+      continue;
+    } else {
+      openCount++;
+      if (i >= row) {
+        break;
+      }
+    }
+  }
+  return openCount;
+  // 减法的做法 有bug
   groupMap.forEach(function (item, index) {
     if (index <= row && !(item !== null && item !== void 0 && item.isOpen) && !(item !== null && item !== void 0 && item.isStart)) {
       row--;
@@ -396,13 +411,47 @@ export var rowToActualRow = function rowToActualRow(row, groupConfig) {
   });
   return row;
 };
+export var rowToCountRow = function rowToCountRow(row, groupConfig, max) {
+  var groupMap = groupConfigToGroupMap(groupConfig);
+  if (!groupMap.size || row < 0) return row;
+
+  // 加法的做法
+  var maxCount = 0;
+  var maxIndex = max;
+  for (var i = 0; i < max; i++) {
+    var _groupMap$get11, _groupMap$get12;
+    if (groupMap.has(i) && !((_groupMap$get11 = groupMap.get(i)) !== null && _groupMap$get11 !== void 0 && _groupMap$get11.isOpen) && !((_groupMap$get12 = groupMap.get(i)) !== null && _groupMap$get12 !== void 0 && _groupMap$get12.isStart)) {
+      continue;
+    } else {
+      maxCount++;
+    }
+  }
+  if (row >= maxCount) {
+    return maxIndex;
+  }
+  maxIndex = 0;
+  var openCount = 0;
+  for (var _i2 = 0; _i2 < max; _i2++) {
+    var _groupMap$get13, _groupMap$get14;
+    if (groupMap.has(_i2) && !((_groupMap$get13 = groupMap.get(_i2)) !== null && _groupMap$get13 !== void 0 && _groupMap$get13.isOpen) && !((_groupMap$get14 = groupMap.get(_i2)) !== null && _groupMap$get14 !== void 0 && _groupMap$get14.isStart)) {
+      continue;
+    } else {
+      openCount++;
+      if (openCount >= row) {
+        maxIndex = _i2;
+        break;
+      }
+    }
+  }
+  return maxIndex;
+};
 export var getRowHeight = function getRowHeight(container) {
   var _container$getElement, _container$getElement2;
   var h = ((_container$getElement = container.getElementsByTagName('td')[0]) === null || _container$getElement === void 0 ? void 0 : (_container$getElement2 = _container$getElement.parentNode) === null || _container$getElement2 === void 0 ? void 0 : _container$getElement2.clientHeight) || 30;
   return h;
 };
 export var getNextVisibleRow = function getNextVisibleRow(row, maxRow, groupMap) {
-  var _groupMap$get9, _groupMap$get10;
+  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;
@@ -410,7 +459,7 @@ export var getNextVisibleRow = function getNextVisibleRow(row, maxRow, groupMap)
   if (row > maxRow) {
     return null;
   }
-  if (groupMap.get(row) && !((_groupMap$get9 = groupMap.get(row)) !== null && _groupMap$get9 !== void 0 && _groupMap$get9.isOpen) && !((_groupMap$get10 = groupMap.get(row)) !== null && _groupMap$get10 !== void 0 && _groupMap$get10.isStart)) {
+  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);
   }
   return row;

package/dist/hooks/useEventBus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import EventEmitter from 'events';
 declare const useEventBus: () => EventEmitter;
 export { useEventBus };

package/dist/type/sheetTable.d.ts

@@ -23,7 +23,7 @@ export declare type ColumnProps = {
      */
     width?: string | number;
     dataIndex?: string;
-    title: string | ReactNode | ReactNode[];
+    title: string | ReactNode | ReactNode[] | React.FC;
     titleConfig?: {
         colSpan?: number;
         className?: string;

package/package.json

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