@zhenliang/sheet 0.1.14 → 0.1.16

package/dist/core/editor/cascaderEditor/index.less

@@ -21,8 +21,8 @@
     }
   }
 
-}
+  .ant-cascader-menu {
+    font-size: 12px;
+  }
 
-.ant-cascader-menu {
-  font-size: 12px;
-}
+}

package/dist/core/editor/numberEditor/index.d.ts

@@ -2,5 +2,7 @@ import type { SheetType } from "../../../type";
 import { InputNumberProps } from 'antd';
 import 'antd/es/input-number/style/index.css';
 import './index.less';
+declare type inputProps = Partial<Pick<InputNumberProps, 'max' | 'min' | 'addonBefore' | 'addonAfter' | 'precision'>>;
 export declare const NumberEditor: SheetType.CellEditor;
-export declare const getNumberEditor: (extraProps?: Partial<Pick<InputNumberProps, 'max' | 'min' | 'addonBefore' | 'addonAfter' | 'precision'>>) => SheetType.CellEditor;
+export declare const getNumberEditor: (extraProps?: inputProps, getExtraProps?: ((props: SheetType.CellEditorProps) => inputProps) | undefined) => SheetType.CellEditor;
+export {};

package/dist/core/editor/numberEditor/index.js

@@ -34,7 +34,7 @@ export var NumberEditor = function NumberEditor(props) {
     onChange: onChange
   });
 };
-export var getNumberEditor = function getNumberEditor(extraProps) {
+export var getNumberEditor = function getNumberEditor(extraProps, getExtraProps) {
   var NumberEditor = function NumberEditor(props) {
     var value = props.value,
       onChange = props.onChange;
@@ -43,7 +43,7 @@ export var getNumberEditor = function getNumberEditor(extraProps) {
       var _inputNumberRef$curre2;
       inputNumberRef === null || inputNumberRef === void 0 ? void 0 : (_inputNumberRef$curre2 = inputNumberRef.current) === null || _inputNumberRef$curre2 === void 0 ? void 0 : _inputNumberRef$curre2.focus();
     }, []);
-    var _ref = extraProps || {},
+    var _ref = getExtraProps ? getExtraProps(props) : extraProps !== null && extraProps !== void 0 ? extraProps : {},
       precision = _ref.precision,
       inputArgs = _objectWithoutProperties(_ref, _excluded);
     var valueFormatter = useCallback(function (value) {

package/dist/core/editor/selectEditor/index.less

@@ -1,10 +1,11 @@
-.select-editor,.ant-select-selector {
+.select-editor {
   // select style
   width: 100%;
   line-height: 20px;
   height: 20px;
 
     .ant-select-selector {
+      width: 100%;
       border: none !important;
       background: transparent !important;
       box-shadow: none !important;
@@ -36,8 +37,7 @@
     box-shadow: inset 0 -100px 0 rgba(33,133,208,15%);
   }
 
+  .ant-select-item {
+    font-size: 12px !important;
+  }
 }
-
-.ant-select-item {
-  font-size: 12px !important;
-}

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

@@ -138,18 +138,22 @@ span.harvest-sheet-container, span.harvest-sheet-container:focus {
 
 .harvest-sheet-container .harvest-sheet .cell.selected-top{
   border-top-color: var(--resizer);
+  border-top-width: 1px;
 }
 
 .harvest-sheet-container .harvest-sheet .cell.selected-left{
   border-left-color: var(--resizer);
-}
+  border-left-width:1px;
+ }
 
 .harvest-sheet-container .harvest-sheet .cell.selected-bottom{
   border-bottom-color: var(--resizer);
+  border-bottom-width:1px;
 }
 
 .harvest-sheet-container .harvest-sheet .cell.selected-right{
   border-right-color: var(--resizer);
+  border-right-width:1px;
 }
 
 
@@ -168,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;
 }
 
 
@@ -284,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/table/index.js

@@ -122,10 +122,10 @@ var Table = function Table(_ref) {
             id: rowId,
             value: value,
             record: itemRow,
-            readonly: !(colInfo.readonly instanceof Function) ? colInfo.readonly : colInfo.readonly(value, itemRow, currentIndex),
+            readonly: !(colInfo.readonly instanceof Function) ? colInfo.readonly : colInfo.readonly(value, itemRow, currentIndex, col),
             align: colInfo.align,
             fixed: colInfo.fixed,
-            editable: !(colInfo.editable instanceof Function) ? colInfo.editable : colInfo.editable(value, itemRow, currentIndex),
+            editable: !(colInfo.editable instanceof Function) ? colInfo.editable : colInfo.editable(value, itemRow, currentIndex, col),
             valueViewer: colInfo.render ? colInfo.render : undefined,
             dataEditor: colInfo.editor ? colInfo.editor : undefined,
             row: currentIndex,
@@ -171,7 +171,7 @@ var Table = function Table(_ref) {
           id: rowId,
           value: value,
           record: item,
-          readonly: !(colInfo.readonly instanceof Function) ? colInfo.readonly : colInfo.readonly(value, item, row),
+          readonly: !(colInfo.readonly instanceof Function) ? colInfo.readonly : colInfo.readonly(value, item, row, col),
           align: colInfo.align,
           fixed: colInfo.fixed,
           editable: !(colInfo.editable instanceof Function) ? colInfo.editable : colInfo.editable(value, item, row),
@@ -193,6 +193,7 @@ var Table = function Table(_ref) {
   var handleChanges = useCallback(function (changes, extChange) {
     onChange && onChange(changes.map(function (item) {
       return {
+        col: item.col,
         row: item.row,
         id: item.id,
         key: columns[hasControl ? item.col - 1 : item.col].dataIndex,
@@ -200,6 +201,7 @@ var Table = function Table(_ref) {
       };
     }), extChange === null || extChange === void 0 ? void 0 : extChange.map(function (item) {
       return {
+        col: item.col,
         row: item.row,
         id: item.id,
         key: columns[hasControl ? item.col - 1 : item.col].dataIndex,

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/type/sheetTable.d.ts

@@ -5,7 +5,7 @@ export declare type refAssertion = {
     focus?: () => boolean;
 } & HTMLTableSectionElement;
 export declare type CellFixed = SheetType.CellAlign;
-export declare type RecordRowMap<T> = (value: unknown, record: Record<string, unknown>, index: number) => T;
+export declare type RecordRowMap<T> = (value: unknown, record: Record<string, unknown>, index: number, colIndex?: number) => T;
 export declare type ColumnProps = {
     /**
      * @description 对齐
@@ -38,6 +38,7 @@ export declare type ColumnProps = {
     editor?: SheetType.CellEditor;
 };
 export declare type TableChange = {
+    col?: number;
     row: number;
     id: string;
     key: string;

package/package.json

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