@zhenliang/sheet 0.1.60 → 0.1.61

package/changes.md

@@ -0,0 +1,45 @@
+### 为什么要重写
+
+#### 存在问题
+
+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

package/dist/core/sheet/Control.js

@@ -41,7 +41,7 @@ export var Control = function Control(props) {
     }, {
       title: '返回编辑行',
       disabled: startRowVisible,
-      event: toBottom,
+      event: backToEditRow,
       icon: /*#__PURE__*/_jsx(EditOutlined, {
         style: itemStyle
       }),
@@ -57,7 +57,6 @@ export var Control = function Control(props) {
   }
   return /*#__PURE__*/_jsx("div", {
     className: "control",
-    onClick: backToEditRow,
     style: backEditStyle,
     children: btns.map(function (item) {
       return /*#__PURE__*/_jsx("div", {

package/dist/core/sheet/index.js

@@ -4,7 +4,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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 // import ReduxLogger from 'redux-logger';
 import ReduxThunk from 'redux-thunk';
 import DefaultRow from "./DefaultRow";
@@ -19,19 +19,19 @@ import { Control } from "./Control";
 import { DefaultRowMapper } from "./DefaultRowMapper";
 import { Menu } from "./Menu";
 import "./index.less";
+import { SearchInput } from "./searchInput";
 import { useCellEvent } from "./useCellEvent";
 import { useContextMenu } from "./useContextMenu";
 import { useKeyBoardEvent } from "./useKeyBoardEvent";
 import { useMouseEvent } from "./useMouseEvent";
+import { useSearchInput } from "./useSearchInput";
 import { useSelectVisible } from "./useSelectVisible";
 import { VirtualizeEnd, VirtualizeStart, useVirtualList } from "./useVirtualList";
-import { SearchInput } from "./searchInput";
-import { useSearchInput } from "./useSearchInput";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var Sheet = function Sheet(props) {
-  var _visibleData$length, _scroll$y, _scroll$x;
+  var _visibleData$length, _scroll$y, _scroll$x, _sheetWrapperRef$curr5;
   var _props$sheetInstance = props.sheetInstance,
     sheetInstance = _props$sheetInstance === void 0 ? {
       current: null
@@ -64,7 +64,12 @@ var Sheet = function Sheet(props) {
     hideColBar = _props$hideColBar === void 0 ? true : _props$hideColBar,
     _props$showQuickLocat = props.showQuickLocationBtn,
     showQuickLocationBtn = _props$showQuickLocat === void 0 ? false : _props$showQuickLocat,
-    ControlContainer = props.ControlContainer;
+    ControlContainer = props.ControlContainer,
+    handleAdd = props.handleAdd;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    mouseOnTable = _useState2[0],
+    setMouseOnTable = _useState2[1];
   var sheetWrapperRef = useRef(null);
   var contextMenuRef = useRef(null);
   var eventBus = useEventBus();
@@ -246,7 +251,7 @@ var Sheet = function Sheet(props) {
     firstRowVisible = _useSelectVisible4[0];
   var _useSelectVisible5 = useSelectVisible(sheetWrapperRef, {
       col: 0,
-      row: ((visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) || 1) - 1
+      row: ((data === null || data === void 0 ? void 0 : data.length) || 1) - 1
     }),
     _useSelectVisible6 = _slicedToArray(_useSelectVisible5, 1),
     lastRowVisible = _useSelectVisible6[0];
@@ -264,10 +269,27 @@ var Sheet = function Sheet(props) {
     return null;
   }, [isEmptyData, emptyRenderer]);
   var hasHorizontalScrollbar = sheetWrapperRef.current && sheetWrapperRef.current.scrollWidth > sheetWrapperRef.current.clientWidth;
+  // 解决滚动条出现
+  var offSetBottom = useMemo(function () {
+    var height = 0;
+    if (handleAdd) {
+      height += 32;
+    }
+    if (showBackEdit || showQuickLocationBtn) {
+      height += 24;
+    }
+    if (height > 0 && hasHorizontalScrollbar && boldScroll && mouseOnTable) {
+      height -= 30;
+    }
+    return height;
+  }, [handleAdd, showBackEdit, showQuickLocationBtn, hasHorizontalScrollbar, boldScroll, mouseOnTable]);
   return /*#__PURE__*/_jsx(SheetEventContext.Provider, {
     value: eventBus,
     children: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsxs("span", {
+        style: {
+          position: 'relative'
+        },
         children: [/*#__PURE__*/_jsxs("span", {
           ref: sheetWrapperRef,
           tabIndex: 0,
@@ -276,6 +298,12 @@ var Sheet = function Sheet(props) {
             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%'
           },
+          onMouseOver: function onMouseOver() {
+            return setMouseOnTable(true);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return setMouseOnTable(false);
+          },
           children: [/*#__PURE__*/_jsxs(SheetShell, {
             className: classNames('harvest-sheet', className),
             children: [/*#__PURE__*/_jsx(VirtualizeStart, {
@@ -293,8 +321,16 @@ var Sheet = function Sheet(props) {
             contextMenu: ContextMenu,
             onContextMenu: onContextMenu
           }), EmptyElement]
+        }), /*#__PURE__*/_jsx("div", {
+          style: {
+            height: offSetBottom
+          }
         }), /*#__PURE__*/_jsxs("div", {
           className: "harvest-sheet-control",
+          style: {
+            top: (_sheetWrapperRef$curr5 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr5 === void 0 ? void 0 : _sheetWrapperRef$curr5.clientHeight,
+            width: '100%'
+          },
           children: [/*#__PURE__*/_jsx(Control, {
             showBackEdit: showBackEdit,
             startRowVisible: startRowVisible,
@@ -310,8 +346,8 @@ var Sheet = function Sheet(props) {
               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);
+              var _sheetInstance$curren3, _data$length;
+              return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren3 = sheetInstance.current) === null || _sheetInstance$curren3 === void 0 ? void 0 : _sheetInstance$curren3.zoomTo(((_data$length = data === null || data === void 0 ? void 0 : data.length) !== null && _data$length !== void 0 ? _data$length : 1) - 1);
             },
             showQuickLocationBtn: showQuickLocationBtn,
             ControlContainer: ControlContainer

package/dist/core/sheet/index.less

@@ -292,11 +292,9 @@ span.harvest-sheet-container:focus {
 }
 
 .harvest-sheet-control {
-  position: relative;
+  position: absolute;
   z-index: 3;
-  bottom: 0;
   left: 0;
-  background-color: white;
 }
 
 .harvest-sheet-control .control {
@@ -306,6 +304,7 @@ span.harvest-sheet-container:focus {
   flex-direction: row;
   justify-content: flex-end;
   border-radius: 2px;
+  height: 24px;
   .control-item {
     margin-right: 4px;
     &:last-child {

package/dist/core/table/addButton.js

@@ -66,9 +66,10 @@ export var AddButton = function AddButton(props) {
     type: "dashed",
     style: {
       width: '100%',
-      height: 32
+      height: 32,
+      backgroundColor: '#fff'
     },
-    onClick: function onClick(e) {
+    onClick: function onClick() {
       handleAdd && handleAdd();
     },
     children: ["+ \u6DFB\u52A0", _handleBatchAdd && /*#__PURE__*/_jsx(Popover, {

package/dist/core/table/index.js

@@ -187,6 +187,7 @@ var Table = function Table(_ref) {
           sheetRenderer: WrappedTableShell,
           data: data,
           onCellsChanged: handleChanges,
+          handleAdd: handleAdd,
           children: [/*#__PURE__*/_jsx(SelectionEvent, {
             hasChildren: hasChildren,
             rowSelection: rowSelection,

package/dist/example/antComponent.js

@@ -277,6 +277,7 @@ var App = function App() {
     },
     onChange: handleChange,
     handleAdd: handleAdd,
+    showQuickLocationBtn: true,
     handleBatchAdd: handleAdd,
     eventHandler: {
       reverse: function reverse(value) {

package/dist/example/basic.js

@@ -31,20 +31,24 @@ var columns = [{
     return /*#__PURE__*/_jsx("a", {
       children: value
     });
-  }
+  },
+  width: 100
 }, {
   title: 'Age',
   dataIndex: 'age',
-  key: 'age'
+  key: 'age',
+  width: 100
 }, {
   title: 'Address',
   editable: false,
   dataIndex: 'address',
-  key: 'address'
+  key: 'address',
+  width: 100
 }, {
   title: 'Tags',
   key: 'tags',
   dataIndex: 'tags',
+  width: 100,
   render: function render(_ref2) {
     var tags = _ref2.record.tags;
     return /*#__PURE__*/_jsx(_Fragment, {

package/dist/type/sheet.d.ts

@@ -112,6 +112,7 @@ export type SheetProps = {
     onCellsChanged?: CellChangeHandler;
     menuRenderer?: React.FC<MenuRenderProps>;
     onContextMenu?: (event: any) => void;
+    handleAdd?: () => void;
     scroll?: {
         x?: number | string;
         y?: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.1.60",
+  "version": "0.1.61",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -80,4 +80,4 @@
   "authors": [
     "fizz.zhou@ap.jll.com"
   ]
-}
+}