@zhenliang/sheet 0.1.58 → 0.1.60

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

@@ -1,10 +1,15 @@
 import React, { CSSProperties } from 'react';
 interface ControlProps {
-    showBackEdit?: boolean;
     startRowVisible: boolean;
-    handelClick: () => void;
+    firstRowVisible: boolean;
+    lastRowVisible: boolean;
+    showQuickLocationBtn: boolean;
+    backToEditRow: () => void;
+    toTop: () => void;
+    toBottom: () => void;
     backEditStyle?: Partial<CSSProperties>;
-    direction: 'up' | 'down';
+    ControlContainer?: React.FC;
+    showBackEdit?: boolean;
 }
 export declare const Control: React.FC<ControlProps>;
 export {};

package/dist/core/sheet/Control.js

@@ -1,32 +1,81 @@
-import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
-import React from 'react';
+import { EditOutlined, VerticalAlignBottomOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
+import React, { useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+var itemStyle = {
+  fontSize: 18,
+  marginTop: 2
+};
 export var Control = function Control(props) {
   var showBackEdit = props.showBackEdit,
+    showQuickLocationBtn = props.showQuickLocationBtn,
     startRowVisible = props.startRowVisible,
-    handelClick = props.handelClick,
-    backEditStyle = props.backEditStyle,
-    direction = props.direction;
-  if (!showBackEdit || startRowVisible) return null;
-  var styles = backEditStyle || {
-    top: 0,
-    right: 0
-  };
-  var backIcon = direction === 'up' ? /*#__PURE__*/_jsx(ArrowUpOutlined, {
-    rev: undefined
-  }) : /*#__PURE__*/_jsx(ArrowDownOutlined, {
-    rev: undefined
-  });
-  return /*#__PURE__*/_jsxs("div", {
-    className: "back-edit",
-    onClick: handelClick,
-    style: styles,
-    children: [backIcon, /*#__PURE__*/_jsx("span", {
-      style: {
-        marginLeft: 0
-      },
-      children: "\u8FD4\u56DE\u7F16\u8F91\u884C"
-    })]
+    firstRowVisible = props.firstRowVisible,
+    lastRowVisible = props.lastRowVisible,
+    toTop = props.toTop,
+    toBottom = props.toBottom,
+    backToEditRow = props.backToEditRow,
+    _props$backEditStyle = props.backEditStyle,
+    backEditStyle = _props$backEditStyle === void 0 ? {
+      bottom: 0,
+      right: 0
+    } : _props$backEditStyle,
+    ControlContainer = props.ControlContainer;
+  var btns = useMemo(function () {
+    var tempBtns = [{
+      title: '置顶',
+      disabled: firstRowVisible,
+      event: toTop,
+      icon: /*#__PURE__*/_jsx(VerticalAlignTopOutlined, {
+        style: itemStyle
+      }),
+      isShow: showQuickLocationBtn
+    }, {
+      title: '置底',
+      disabled: lastRowVisible,
+      event: toBottom,
+      icon: /*#__PURE__*/_jsx(VerticalAlignBottomOutlined, {
+        style: itemStyle
+      }),
+      isShow: showQuickLocationBtn
+    }, {
+      title: '返回编辑行',
+      disabled: startRowVisible,
+      event: toBottom,
+      icon: /*#__PURE__*/_jsx(EditOutlined, {
+        style: itemStyle
+      }),
+      isShow: showBackEdit
+    }];
+    return tempBtns.filter(function (item) {
+      return item.isShow;
+    });
+  }, [firstRowVisible, showQuickLocationBtn, lastRowVisible, startRowVisible, showBackEdit]);
+  if (!showBackEdit && !showQuickLocationBtn) return null;
+  if (ControlContainer) {
+    return /*#__PURE__*/_jsx(ControlContainer, {});
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: "control",
+    onClick: backToEditRow,
+    style: backEditStyle,
+    children: btns.map(function (item) {
+      return /*#__PURE__*/_jsx("div", {
+        className: "control-item",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: item.title,
+          children: /*#__PURE__*/_jsx(Button, {
+            style: {
+              width: 24,
+              height: 24,
+              padding: 0
+            },
+            disabled: item.disabled,
+            onClick: item.event,
+            children: item.icon
+          })
+        })
+      }, item.title);
+    })
   });
 };

package/dist/core/sheet/index.js

@@ -61,7 +61,10 @@ var Sheet = function Sheet(props) {
     _props$boldScroll = props.boldScroll,
     boldScroll = _props$boldScroll === void 0 ? true : _props$boldScroll,
     _props$hideColBar = props.hideColBar,
-    hideColBar = _props$hideColBar === void 0 ? true : _props$hideColBar;
+    hideColBar = _props$hideColBar === void 0 ? true : _props$hideColBar,
+    _props$showQuickLocat = props.showQuickLocationBtn,
+    showQuickLocationBtn = _props$showQuickLocat === void 0 ? false : _props$showQuickLocat,
+    ControlContainer = props.ControlContainer;
   var sheetWrapperRef = useRef(null);
   var contextMenuRef = useRef(null);
   var eventBus = useEventBus();
@@ -233,9 +236,20 @@ var Sheet = function Sheet(props) {
   }, [visibleData, groupConfig, virtualStart, virtualEnd, rowClassName]);
   var memoHeight = Math.min(((_visibleData$length = visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) !== null && _visibleData$length !== void 0 ? _visibleData$length : 0) + 1, 10) * 42 + 43;
   var _useSelectVisible = useSelectVisible(sheetWrapperRef, state.start),
-    _useSelectVisible2 = _slicedToArray(_useSelectVisible, 2),
-    startRowVisible = _useSelectVisible2[0],
-    direction = _useSelectVisible2[1];
+    _useSelectVisible2 = _slicedToArray(_useSelectVisible, 1),
+    startRowVisible = _useSelectVisible2[0];
+  var _useSelectVisible3 = useSelectVisible(sheetWrapperRef, {
+      col: 0,
+      row: 0
+    }),
+    _useSelectVisible4 = _slicedToArray(_useSelectVisible3, 1),
+    firstRowVisible = _useSelectVisible4[0];
+  var _useSelectVisible5 = useSelectVisible(sheetWrapperRef, {
+      col: 0,
+      row: ((visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) || 1) - 1
+    }),
+    _useSelectVisible6 = _slicedToArray(_useSelectVisible5, 1),
+    lastRowVisible = _useSelectVisible6[0];
   var isEmptyData = isEmpty(state.data);
   var EmptyElement = useMemo(function () {
     if (isEmptyData) {
@@ -281,16 +295,27 @@ var Sheet = function Sheet(props) {
           }), EmptyElement]
         }), /*#__PURE__*/_jsxs("div", {
           className: "harvest-sheet-control",
-          children: [children, /*#__PURE__*/_jsx(Control, {
+          children: [/*#__PURE__*/_jsx(Control, {
             showBackEdit: showBackEdit,
             startRowVisible: startRowVisible,
-            handelClick: function handelClick() {
+            backToEditRow: function backToEditRow() {
               var _sheetInstance$curren;
               return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren = sheetInstance.current) === null || _sheetInstance$curren === void 0 ? void 0 : _sheetInstance$curren.zoomTo();
             },
-            direction: direction,
-            backEditStyle: backEditStyle
-          })]
+            firstRowVisible: firstRowVisible,
+            lastRowVisible: lastRowVisible,
+            backEditStyle: backEditStyle,
+            toTop: function toTop() {
+              var _sheetInstance$curren2;
+              return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren2 = sheetInstance.current) === null || _sheetInstance$curren2 === void 0 ? void 0 : _sheetInstance$curren2.zoomTo(0);
+            },
+            toBottom: function toBottom() {
+              var _sheetInstance$curren3, _visibleData$length2;
+              return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren3 = sheetInstance.current) === null || _sheetInstance$curren3 === void 0 ? void 0 : _sheetInstance$curren3.zoomTo(((_visibleData$length2 = visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) !== null && _visibleData$length2 !== void 0 ? _visibleData$length2 : 1) - 1);
+            },
+            showQuickLocationBtn: showQuickLocationBtn,
+            ControlContainer: ControlContainer
+          }), children]
         })]
       }), /*#__PURE__*/_jsx(SearchInput, {
         style: props.searchStyle,

package/dist/core/sheet/index.less

@@ -22,9 +22,7 @@
       height: 10px;
       border-bottom: 10px solid #fff;
     }
-
   }
-
 }
 
 .harvest-sheet-container {
@@ -36,7 +34,6 @@
 
 .harvest-sheet-container .header {
   z-index: 2;
-
 }
 
 span.harvest-sheet-container,
@@ -65,16 +62,15 @@ span.harvest-sheet-container:focus {
       .td {
         border-bottom: 1px solid transparent;
       }
-
     }
   }
-
 }
 
 .harvest-sheet-container .harvest-sheet .cell {
   height: 17px;
   font-size: var(--cell-font-size);
-  padding: var(--cell-padding-vertical) var(--cell-padding-horizontal) var(--cell-padding-vertical) var(--cell-padding-horizontal);
+  padding: var(--cell-padding-vertical) var(--cell-padding-horizontal)
+    var(--cell-padding-vertical) var(--cell-padding-horizontal);
   border: 1px solid var(--cell-border-color);
   background-color: var(--cell-background-color);
   cursor: cell;
@@ -83,20 +79,16 @@ span.harvest-sheet-container:focus {
   user-select: none;
   vertical-align: bottom;
   position: relative;
-
 }
 
-
 .harvest-sheet-container .harvest-sheet .cell.fixed {
   position: sticky;
   z-index: 2;
 
   &.cell-title {
     z-index: 3;
-
   }
 
-
   &::before {
     position: absolute;
     top: -1px;
@@ -104,7 +96,7 @@ span.harvest-sheet-container:focus {
     width: 100%;
     border-color: var(--cell-border-color);
     border-top: 1px solid var(--cell-border-color);
-    content: "";
+    content: '';
   }
 
   &.fixed-left::after {
@@ -114,14 +106,13 @@ span.harvest-sheet-container:focus {
     right: -1px;
     width: 30px;
     border-left: 1px solid var(--cell-border-color);
-    content: "";
+    content: '';
     pointer-events: none;
     transform: translate(100%);
-    transition: box-shadow .3s;
+    transition: box-shadow 0.3s;
     box-shadow: var(--cell-fixed-box-shadow-left);
   }
 
-
   &.fixed-right {
     transform: translateX(1px);
   }
@@ -133,13 +124,11 @@ span.harvest-sheet-container:focus {
     left: -1px;
     width: 30px;
     border-right: 1px solid var(--cell-border-color);
-    content: "";
+    content: '';
     pointer-events: none;
     transform: translate(-100%);
-    transition: box-shadow .3s;
+    transition: box-shadow 0.3s;
     box-shadow: var(--cell-fixed-box-shadow-right);
-
-
   }
 
   &.fixed-unset {
@@ -147,8 +136,6 @@ span.harvest-sheet-container:focus {
   }
 }
 
-
-
 .harvest-sheet-container .harvest-sheet .cell.selected {
   border-color: var(--cell-border-color);
   box-shadow: var(--cell-box-shadow);
@@ -180,7 +167,6 @@ span.harvest-sheet-container:focus {
   border-right-width: 1px;
 }
 
-
 .harvest-sheet-container .harvest-sheet .cell.sheet-control {
   border-right: 1px solid transparent;
   background: var(--cell-background-color);
@@ -204,7 +190,6 @@ span.harvest-sheet-container:focus {
   cursor: var(--arrow-right) 12 12, e-resize;
 }
 
-
 .harvest-sheet-container .harvest-sheet .cell-title.sheet-control {
   border-right: 1px solid var(--cell-title-background-color);
 }
@@ -215,25 +200,20 @@ span.harvest-sheet-container:focus {
 
   &:hover {
     background-color: var(--cell-title-background-color);
-
   }
 }
 
-
 .harvest-sheet-container .harvest-sheet .cell:not(.cell.read-only):hover {
   background-color: var(--cell-hover);
 }
 
-
-
-.harvest-sheet-container .harvest-sheet .cell>.text {
+.harvest-sheet-container .harvest-sheet .cell > .text {
   overflow: hidden;
   padding: 2px 5px;
   text-overflow: ellipsis;
 }
 
-
-.harvest-sheet-container .harvest-sheet .cell>input {
+.harvest-sheet-container .harvest-sheet .cell > input {
   display: block;
   width: calc(100% - 6px);
   font-size: var(--cell-font-size);
@@ -283,7 +263,7 @@ span.harvest-sheet-container:focus {
   font-size: var(--cell-font-size);
   line-height: var(--cell-inner-height);
   height: var(--cell-inner-height);
-  padding: 0
+  padding: 0;
 }
 
 .harvest-sheet-container .harvest-sheet .cell .data-editor {
@@ -292,8 +272,6 @@ span.harvest-sheet-container:focus {
   height: var(--cell-inner-height);
 }
 
-
-
 .harvest-sheet-container .harvest-menu {
   background-color: white;
   position: fixed;
@@ -308,10 +286,9 @@ span.harvest-sheet-container:focus {
     line-height: 22px;
 
     &:hover {
-      background-color: rgba(31, 35, 41, 5%)
+      background-color: rgba(31, 35, 41, 5%);
     }
   }
-
 }
 
 .harvest-sheet-control {
@@ -322,19 +299,20 @@ span.harvest-sheet-container:focus {
   background-color: white;
 }
 
-.harvest-sheet-control .back-edit {
-  padding: 5px 8px;
-  margin: 1px;
-  height: 30px;
+.harvest-sheet-control .control {
+  margin: 4px 1px 4px 0;
   display: flex;
-  width: 105px;
-  cursor: pointer;
   align-items: center;
-  justify-content: center;
-  position: absolute;
-  z-index: 4;
-  border: 1px solid #D8DFEB;
+  flex-direction: row;
+  justify-content: flex-end;
   border-radius: 2px;
+  .control-item {
+    margin-right: 4px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
 }
 
 .harvest-search-text {
@@ -349,21 +327,21 @@ span.harvest-sheet-container:focus {
 
 .harvest-search-text .search-text-suffix {
   .search-text-disabled {
-    color: #A4A9B2;
+    color: #a4a9b2;
   }
 
-  >span {
+  > span {
     margin: 0 3px;
   }
 }
 
 .harvest-search-text .ant-input-affix-wrapper-focused {
-  border-color: #0078E0;
-  box-shadow: 0px 0px 0px 2px rgba(24, 144, 255, 0.20);
+  border-color: #0078e0;
+  box-shadow: 0px 0px 0px 2px rgba(24, 144, 255, 0.2);
 }
 
 :global {
   .ant-empty-description {
-    color: #A4A9B2;
+    color: #a4a9b2;
   }
-}
+}

package/dist/example/basic.js

@@ -115,7 +115,8 @@ var App = function App() {
     draggable: true,
     columns: columns,
     dataSource: dataSource,
-    onChange: onChange
+    onChange: onChange,
+    showQuickLocationBtn: true
   });
 };
 export default App;

package/dist/type/sheet.d.ts

@@ -120,6 +120,8 @@ export type SheetProps = {
     children?: any[];
     boldScroll?: boolean;
     hideColBar?: boolean;
+    showQuickLocationBtn?: boolean;
+    ControlContainer?: React.FC;
 };
 export type WidthConfigContext = {
     onChange?: (value: Record<number | string, number>) => void;

package/dist/type/sheetTable.d.ts

@@ -91,4 +91,6 @@ export type TableProps = {
     handleBatchAdd?: (value: number) => void;
     eventHandler?: Record<'reverse' | 'btn-click' | 'cell-edit' | 'cell-switch' | string, undefined | EventHandler>;
     boldScroll?: boolean;
+    showQuickLocationBtn?: boolean;
+    ControlContainer?: React.FC;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -8,6 +8,7 @@
   "files": [
     "dist"
   ],
+  "preid": "beta",
   "scripts": {
     "build": "father build",
     "build:watch": "father dev",
@@ -79,4 +80,4 @@
   "authors": [
     "fizz.zhou@ap.jll.com"
   ]
-}
+}

package/changes.md

@@ -1,45 +0,0 @@
-### 为什么要重写
-
-#### 存在问题
-
-1、表格选择逻辑与虚拟列表的冲突
-2、表格的刷新机制： setRefresh（在多人开发的时候不便维护）
-3、回调地狱
-4、无法从 jll-portal 中剥离，有些地方与业务字段耦合
-
-#### 后果
-
-1、新增功能难度大
-2、修改容易出 bug
-3、不利于业务代码优化和重构
-
-### 重写后的表格
-
-#### 优点
-
-1、维护性
-2、扩展性
-3、新的功能
-
-#### 新的 API
-
-1、TableProps
-
-| 表头                                         | 表头                    | 表头 |
-| -------------------------------------------- | ----------------------- | ---- |
-| className                                    | container 类名 ｜ 无 ｜ |
-| ｜ sheetInstance ｜ sheet 对外暴露的一些 API | 选中行，参与回滚等 ｜   |
-
-｜ columns ｜ 表格列 ｜ 无 ，必填 ｜
-| dataSource | 数据源 ｜ 无，必填 ｜
-｜ virtualized ｜虚拟列表 ｜ false |
-| draggable | 列宽可调整 ｜ false |
-｜ rowClassName ｜ 行类名 ｜ 无 ｜
-｜ rowKey ｜ 唯一标识字段 ｜ key , id |
-| scroll | 同 antd table | {y:Math.min(400,row \* 40)} |
-| rowSelection | 选中行的配置 ｜ 尚未完全实现 ｜
-｜ groupConfig ｜ 表格分组 ｜ 表格内部自动支持，对外配置尚未完全实现 ｜
-| onChange ｜ 表格 cell change handler ｜ 无 ｜
-| eventHandler | 自定义事件 handler | Record<string,(value:unknown)=>void> |
-
-2、 ColumnProps