@zhenliang/sheet 0.1.60 → 0.1.62

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

@@ -19,14 +19,14 @@ 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";
@@ -246,7 +246,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];
@@ -268,6 +268,9 @@ var Sheet = function Sheet(props) {
     value: eventBus,
     children: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsxs("span", {
+        style: {
+          position: 'relative'
+        },
         children: [/*#__PURE__*/_jsxs("span", {
           ref: sheetWrapperRef,
           tabIndex: 0,
@@ -310,8 +313,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,8 @@ span.harvest-sheet-container:focus {
 }
 
 .harvest-sheet-control {
-  position: relative;
   z-index: 3;
-  bottom: 0;
   left: 0;
-  background-color: white;
 }
 
 .harvest-sheet-control .control {
@@ -306,6 +303,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.62",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -80,4 +80,4 @@
   "authors": [
     "fizz.zhou@ap.jll.com"
   ]
-}
+}