aldehyde 0.2.255 → 0.2.258

package/src/aldehyde/table/resizable-table.tsx

@@ -0,0 +1,96 @@
+import React, {useEffect, useState} from 'react';
+import {Table} from "antd";
+import { Resizable } from 'react-resizable';
+import "./index.css";
+const ResizableTitle = props => {
+    const { onResize, width, ...restProps } = props;
+    // useEffect(() => {
+    //     // 使用选择器，获取所有拖动按钮的 Dom 对象
+    //     document.querySelectorAll('.react-resizable-handle').forEach((elem) => {
+    //         if (elem['onclick']) {
+    //             return;
+    //         }
+    //         elem['onclick'] = (event) => {
+    //             // 阻止冒泡
+    //             event.stopPropagation();
+    //             return false;
+    //         };
+    //     });
+    // }, []);
+
+    // 没有原始宽度的列，不支持伸缩；会出现从自适应宽度一下子跳到拖动位置；也可以自行增加参数，如 disableResize
+    if (!width) {
+        return <th {...restProps} />;
+    }
+
+    return (
+        <Resizable draggableOpts={{ enableUserSelectHack: false }}
+            width={width}
+                   minConstraints={[40, 0]}
+            height={0}    // 不需要调整高度，设为 0
+            onResize={onResize}
+            handle={
+                <span className="react-resizable-handle" onClick={(e) => { e.stopPropagation() }} />
+            }
+        >
+            <th {...restProps} />
+        </Resizable>
+    );
+};
+
+
+
+const ResizableTable = props => {
+
+    const {columns:columns_,components:components_,...other}=props
+    // const [columns, setColumns] = useState(columns_.map((col) => {
+    //         col['onHeaderCell']=(col) => ({
+    //             ...col['onHeaderCell'],
+    //             width: col.width,
+    //             onResize: handleResize(col.dataIndex),
+    //         })
+    //         return col;
+    // }
+    // ));
+
+     const [columns, setColumns] = useState([]);
+    // 每一列增加 width, onResize 作为 ResizableTitle 的 props
+
+    useEffect(() => {
+       columns_.forEach((col) => (
+           col['onHeaderCell']=(col) => ({
+               width: col.width,
+               onResize: handleResize(col.dataIndex),
+           })
+           )
+        );
+        setColumns(columns_);
+    }, [columns_]);
+
+    // 拖动时更新表格列
+   let handleResize = dataIndex => (e, { size }) => {
+        setColumns((columns) => (
+            columns.map((column) => {
+                if (column.dataIndex === dataIndex) {
+                    return {
+                        ...column,
+                        width: size.width,
+                    };
+                } else {
+                    return column;
+                }
+            })
+        ))
+    };
+
+    const components={...components_,
+        header: {
+            cell: ResizableTitle
+        }
+    }
+
+    return <Table components={components}  columns={columns}  {...other}   />;
+}
+
+export default ResizableTable;
+

package/src/aldehyde/tmpl/interface.tsx

@@ -1,6 +1,6 @@
 import { MenuProps } from "antd/lib/menu";
 import { FormInstance } from "antd";
-import React, {HTMLAttributeAnchorTarget, ReactDOM, RefObject} from "react";
+import  {HTMLAttributeAnchorTarget, RefObject} from "react";
 import { ButtonShape, ButtonType } from "antd/lib/button";
 
 export type ViewOrEdit = "view" | "edit";
@@ -656,7 +656,7 @@ export interface DtmplBaseProps extends TmplBaseProps {
   rightBarPositionRight?: number;
   serialNumber?: number;
   goDtmpl?: (code?: string) => void;
-  maxColsOnRow?: 1 | 2;
+  maxColsOnRow?: number;
   addTmplId?: string;
 }