@zhenliang/sheet 0.1.15 → 0.1.16

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";
@@ -186,7 +186,10 @@ 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", {
@@ -199,7 +202,7 @@ var Sheet = function Sheet(props) {
       },
       children: [/*#__PURE__*/_jsxs(SheetShell, {
         className: classNames('harvest-sheet', className),
-        children: [virtualized && /*#__PURE__*/_jsx("tr", {
+        children: [virtualized && paddingTop > 0 && /*#__PURE__*/_jsx("tr", {
           style: {
             height: 0,
             paddingBottom: paddingTop,
@@ -224,20 +227,22 @@ var Sheet = function Sheet(props) {
         })
       }) : 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;
 }
 
 
@@ -288,4 +289,15 @@ span.harvest-sheet-container, span.harvest-sheet-container:focus {
   bottom: 0;
   left: 0;
   background-color: white;
+}
+
+.harvest-sheet-container .harvest-sheet-control .back-edit{
+  padding: 5px 8px;
+  display: flex;
+  width: 105px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 4,
 }

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,39 @@ 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;
+      }
 
       // todo 加入分组之后的 虚拟列表计算
-      var actualStart = groupConfigRef.current ? rowToActualRow(start, groupConfigRef.current) : start;
-      var actualEnd = groupConfigRef.current ? rowToActualRow(end, groupConfigRef.current) : end;
+      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;
+      console.log('visiable-count', start, end, maxEnd);
+      console.log('visible-toactual-count', actualStart, actualEnd);
+      console.log('invisible', invisibleTop, invisibleBottom);
 
       // const minStart = start - (actualStart - start)
-      var maxEnd = end - (actualEnd - end);
+      // const maxEnd =  end - (actualEnd - end);
+
       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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SheetType } from "../../../type";
 import './index.less';
 export declare const DraggableShell: ({ columns, className, showGroup, showSelect, controlProps, controlWidth, }: SheetType.SheetShell) => import("react").FC<{

package/dist/core/shell/tableShell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SheetType } from "../../type";
 import './draggableShell/index.less';
 export declare const TableShell: ({ columns, className, showGroup, showSelect, controlProps, controlWidth, }: SheetType.SheetShell) => import("react").FC<{

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/package.json

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