ztxkui 4.2.23-2 → 4.2.23-21

package/dist/components/Table/table-enhance-cell.js

@@ -56,9 +56,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useContext, useEffect, memo, useRef } from 'react';
-import { EditableContext } from './table-enhance-row';
-import { Form, Input, InputNumber, Select, message } from '../../index';
+import React, { useEffect, memo, useRef, useCallback, useMemo, useState, } from 'react';
+// import { EditableContext } from './table-enhance-row';
+import { InputNumber, Select, message } from '../../index';
+import { Input } from 'antd';
 import { ERROR_TD_CLASSNAME } from './index';
 import { getInnerIndex } from './hooks/useInnerPagination';
 import { exactRound } from 'ztxkutils/dist/tools';
@@ -85,74 +86,66 @@ function transformData(data, config) {
     }
     return newData;
 }
-var TableEnhanceCell = memo(function (_a) {
-    var title = _a.title, index = _a.index, editable = _a.editable, editableConfig = _a.editableConfig, children = _a.children, dataIndex = _a.dataIndex, record = _a.record, handleSave = _a.handleSave, onTableChange = _a.onTableChange, columns = _a.columns, currentpage = _a.currentpage, restProps = __rest(_a, ["title", "index", "editable", "editableConfig", "children", "dataIndex", "record", "handleSave", "onTableChange", "columns", "currentpage"]);
-    var form = useContext(EditableContext);
+var TableEnhanceCell = function (_a) {
+    var title = _a.title, index = _a.index, editable = _a.editable, editableConfig = _a.editableConfig, children = _a.children, dataIndex = _a.dataIndex, record = _a.record, handleSave = _a.handleSave, onTableChange = _a.onTableChange, columns = _a.columns, currentpage = _a.currentpage, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, restProps = __rest(_a, ["title", "index", "editable", "editableConfig", "children", "dataIndex", "record", "handleSave", "onTableChange", "columns", "currentpage", "onMouseEnter", "onMouseLeave"]);
     var tdRef = useRef();
+    var valueRef = useRef({});
+    var _b = useState(), val = _b[0], setVal = _b[1];
     useEffect(function () {
-        var _a;
         if (dataIndex) {
-            form === null || form === void 0 ? void 0 : form.setFieldsValue((_a = {}, _a[dataIndex] = record[dataIndex], _a));
+            // form?.setFieldsValue({ [dataIndex]: record[dataIndex] });
+            // form?.setFieldValue(dataIndex, record[dataIndex]);
+            setVal(record[dataIndex]);
+            valueRef.current[dataIndex] = record[dataIndex];
         }
-    }, [dataIndex, form, record]);
+    }, [dataIndex, record]);
     /**
      * @description 保存事件
      */
-    var save = function (info) { return __awaiter(void 0, void 0, void 0, function () {
-        var innerIndex, values, result, currentInputNumberValue, result, currentInputNumberValue, err_1;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    innerIndex = getInnerIndex(currentpage, index);
-                    _c.label = 1;
-                case 1:
-                    _c.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, (form === null || form === void 0 ? void 0 : form.validateFields())];
-                case 2:
-                    values = _c.sent();
-                    if (!handleSave) {
-                        console.error('Table props onEditableSave is not a function');
-                    }
-                    if (info && info.maxResult) {
-                        result = info.maxResult;
-                        currentInputNumberValue = values[dataIndex];
-                        if (currentInputNumberValue > (result === null || result === void 0 ? void 0 : result.number)) {
-                            message.warning((result.tableName ? "\u60A8\u4FEE\u6539" + result.tableName + "\u8868\u683C\u7684" : '表格') + " \u7B2C" + (typeof index === 'number' ? index + 1 : index) + "\u884C \u7684" + title + "\u5B57\u6BB5\uFF0C\u8F93\u5165\u7684\u6570\u503C\uFF0C\u5DF2\u8D85\u8FC7\u6700\u5927\u503C\uFF0C\u5DF2\u5E2E\u60A8\u4FEE\u6539\u4E3A\u6700\u5927\u503C!");
-                            handleSave(__assign(__assign(__assign({}, record), values), (_a = {}, _a[dataIndex] = result === null || result === void 0 ? void 0 : result.number, _a)), 
-                            // index,
-                            innerIndex, dataIndex);
-                            return [2 /*return*/];
-                        }
+    var save = useCallback(function (info) { return __awaiter(void 0, void 0, void 0, function () {
+        var innerIndex, values, result, currentInputNumberValue, result, currentInputNumberValue;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            innerIndex = getInnerIndex(currentpage, index);
+            try {
+                values = valueRef.current;
+                if (!handleSave) {
+                    console.error('Table props onEditableSave is not a function');
+                }
+                if (info && info.maxResult) {
+                    result = info.maxResult;
+                    currentInputNumberValue = values[dataIndex];
+                    if (currentInputNumberValue > (result === null || result === void 0 ? void 0 : result.number)) {
+                        message.warning((result.tableName ? "\u60A8\u4FEE\u6539" + result.tableName + "\u8868\u683C\u7684" : '表格') + " \u7B2C" + (typeof index === 'number' ? index + 1 : index) + "\u884C \u7684" + title + "\u5B57\u6BB5\uFF0C\u8F93\u5165\u7684\u6570\u503C\uFF0C\u5DF2\u8D85\u8FC7\u6700\u5927\u503C\uFF0C\u5DF2\u5E2E\u60A8\u4FEE\u6539\u4E3A\u6700\u5927\u503C!");
+                        handleSave(__assign(__assign({}, record), (_a = {}, _a[dataIndex] = result === null || result === void 0 ? void 0 : result.number, _a)), innerIndex, dataIndex, { isInner: true });
+                        return [2 /*return*/];
                     }
-                    if (info && info.minResult) {
-                        result = info.minResult;
-                        currentInputNumberValue = values[dataIndex];
-                        if (currentInputNumberValue < (result === null || result === void 0 ? void 0 : result.number)) {
-                            message.warning((result.tableName ? "\u60A8\u4FEE\u6539" + result.tableName + "\u8868\u683C\u7684" : '表格') + " \u7B2C" + (index ? index + 1 : index) + "\u884C \u7684" + title + "\u5B57\u6BB5\uFF0C\u8F93\u5165\u7684\u6570\u503C\uFF0C\u5DF2\u4F4E\u4E8E\u6700\u5C0F\u503C\uFF0C\u5DF2\u5E2E\u60A8\u4FEE\u6539\u4E3A\u6700\u5C0F\u503C!");
-                            handleSave(__assign(__assign(__assign({}, record), values), (_b = {}, _b[dataIndex] = result === null || result === void 0 ? void 0 : result.number, _b)), 
-                            // index,
-                            innerIndex, dataIndex);
-                            return [2 /*return*/];
-                        }
+                }
+                if (info && info.minResult) {
+                    result = info.minResult;
+                    currentInputNumberValue = values[dataIndex];
+                    if (currentInputNumberValue < (result === null || result === void 0 ? void 0 : result.number)) {
+                        message.warning((result.tableName ? "\u60A8\u4FEE\u6539" + result.tableName + "\u8868\u683C\u7684" : '表格') + " \u7B2C" + (index ? index + 1 : index) + "\u884C \u7684" + title + "\u5B57\u6BB5\uFF0C\u8F93\u5165\u7684\u6570\u503C\uFF0C\u5DF2\u4F4E\u4E8E\u6700\u5C0F\u503C\uFF0C\u5DF2\u5E2E\u60A8\u4FEE\u6539\u4E3A\u6700\u5C0F\u503C!");
+                        handleSave(__assign(__assign({}, record), (_b = {}, _b[dataIndex] = result === null || result === void 0 ? void 0 : result.number, _b)), innerIndex, dataIndex, { isInner: true });
+                        return [2 /*return*/];
                     }
-                    // handleSave({ ...record, ...values }, index, dataIndex);
-                    handleSave(__assign(__assign({}, record), values), innerIndex, dataIndex);
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_1 = _c.sent();
-                    console.error('Save failed:', err_1);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+                }
+                handleSave(__assign(__assign({}, record), (_c = {}, _c[dataIndex] = values[dataIndex], _c)), innerIndex, dataIndex, { isInner: true });
+            }
+            catch (err) {
+                console.error('Save failed:', err);
             }
+            return [2 /*return*/];
         });
-    }); };
-    function removeErrorClass() {
-        if (tdRef.current) {
+    }); }, [currentpage, dataIndex, handleSave, index, record, title]);
+    var removeErrorClass = useCallback(function () {
+        var _a, _b;
+        if (tdRef.current &&
+            ((_b = (_a = tdRef.current.classList).contains) === null || _b === void 0 ? void 0 : _b.call(_a, ERROR_TD_CLASSNAME))) {
             tdRef.current.classList.remove(ERROR_TD_CLASSNAME);
         }
-    }
-    function onPasteHandle(e) {
+    }, []);
+    var onPasteHandle = useCallback(function (e) {
         if (!onTableChange) {
             return;
         }
@@ -211,22 +204,29 @@ var TableEnhanceCell = memo(function (_a) {
                     return result;
                 });
                 // onTableChange && onTableChange(resultTextList, index, record);
+                setVal(resultTextList[0][dataIndex]);
+                valueRef.current[dataIndex] = resultTextList[0][dataIndex];
                 onTableChange && onTableChange(resultTextList, innerIndex, record);
             }
         }
-    }
+    }, [columns, currentpage, dataIndex, index, onTableChange, record]);
     /**
      * @description 生成编辑框
      */
-    var createEditableDom = function (editableConfig) {
+    var createEditableDom = useMemo(function () {
+        // 执行优化，减少生成无意义的组件rerender次数
+        if (!editable) {
+            return null;
+        }
         if (!editableConfig) {
-            return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
-                React.createElement(Input, { autoComplete: "new-password", maxLength: 50, onPressEnter: save, onBlur: save, allowClear: true, onPaste: onPasteHandle, onChange: function (e) {
-                        removeErrorClass();
-                        if (!e.target.value) {
-                            e.target.focus();
-                        }
-                    } })));
+            return (React.createElement(Input, { autoComplete: "new-password", maxLength: 50, onPressEnter: save, onBlur: save, allowClear: true, onPaste: onPasteHandle, value: val, onChange: function (e) {
+                    setVal(e.target.value);
+                    removeErrorClass();
+                    valueRef.current[dataIndex] = e.target.value;
+                    if (!e.target.value) {
+                        e.target.focus();
+                    }
+                } }));
         }
         var type = editableConfig.type, data = editableConfig.data, keyValue = editableConfig.keyValue, maxHandle = editableConfig.maxHandle, minHandle = editableConfig.minHandle, overMaxTip = editableConfig.overMaxTip, lowMinTip = editableConfig.lowMinTip, disabledHandle = editableConfig.disabledHandle, editableProps = __rest(editableConfig, ["type", "data", "keyValue", "maxHandle", "minHandle", "overMaxTip", "lowMinTip", "disabledHandle"]);
         var selectData = data; // 下拉框使用到得数据
@@ -278,53 +278,62 @@ var TableEnhanceCell = memo(function (_a) {
         }
         // 处理各种类型
         if (type === 'select') {
-            return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
-                React.createElement(Select, __assign({ allowClear: true }, editableProps, { disabled: disabledResult, onChange: function (value, option) {
-                        removeErrorClass();
-                        save(value);
-                    } }), Array.isArray(selectData) &&
-                    selectData.map(function (item) { return (React.createElement(Select.Option, { key: item[selectKeyValue.key] + '', value: item[selectKeyValue === null || selectKeyValue === void 0 ? void 0 : selectKeyValue.key] }, item[selectKeyValue === null || selectKeyValue === void 0 ? void 0 : selectKeyValue.label])); }))));
+            return (React.createElement(Select, __assign({ allowClear: true }, editableProps, { disabled: disabledResult, value: val, onChange: function (value, option) {
+                    removeErrorClass();
+                    save(value);
+                    valueRef.current[dataIndex] = value;
+                } }), Array.isArray(selectData) &&
+                selectData.map(function (item) { return (React.createElement(Select.Option, { key: item[selectKeyValue.key] + '', value: item[selectKeyValue === null || selectKeyValue === void 0 ? void 0 : selectKeyValue.key] }, item[selectKeyValue === null || selectKeyValue === void 0 ? void 0 : selectKeyValue.label])); })));
         }
         else if (type === 'inputNumber') {
-            return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
-                React.createElement(InputNumber, __assign({ autoComplete: "new-password", maxLength: 50 }, inputNumMaxMin, editableProps, inputNumberRangeTip, { disabled: disabledResult, onPressEnter: function (e) {
-                        var _a;
-                        editableProps.onPressEnter && ((_a = editableProps.onPressEnter) === null || _a === void 0 ? void 0 : _a.call(editableProps, e));
-                        save({ maxResult: maxResult, minResult: minResult });
-                    }, onBlur: function (e) {
-                        var _a;
-                        editableProps.onBlur && ((_a = editableProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(editableProps, e));
-                        save({ maxResult: maxResult, minResult: minResult });
-                    }, onFocus: function (e) {
-                        var _a;
-                        editableProps.onFocus && ((_a = editableProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(editableProps, e));
-                    }, onPaste: onPasteHandle, onChange: function () {
-                        removeErrorClass();
-                    } }))));
+            return (React.createElement(InputNumber, __assign({ autoComplete: "new-password", maxLength: 50 }, inputNumMaxMin, editableProps, inputNumberRangeTip, { disabled: disabledResult, onPressEnter: function (e) {
+                    var _a;
+                    editableProps.onPressEnter && ((_a = editableProps.onPressEnter) === null || _a === void 0 ? void 0 : _a.call(editableProps, e));
+                    save({ maxResult: maxResult, minResult: minResult });
+                }, onBlur: function (e) {
+                    var _a;
+                    editableProps.onBlur && ((_a = editableProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(editableProps, e));
+                    save({ maxResult: maxResult, minResult: minResult });
+                }, onFocus: function (e) {
+                    var _a;
+                    editableProps.onFocus && ((_a = editableProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(editableProps, e));
+                }, onPaste: onPasteHandle, value: val, onChange: function (value) {
+                    setVal(value);
+                    valueRef.current[dataIndex] = value;
+                    removeErrorClass();
+                } })));
         }
         else if (type === 'textArea') {
-            return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
-                React.createElement(Input.TextArea, __assign({ autoComplete: "new-password", maxLength: 200, autoSize: { maxRows: 3 } }, editableProps, { disabled: disabledResult, onPressEnter: save, onBlur: save, onPaste: onPasteHandle, onChange: function (e) {
-                        removeErrorClass();
-                        if (!e.target.value) {
-                            e.target.focus();
-                        }
-                    }, allowClear: true }))));
+            return (React.createElement(Input.TextArea, __assign({ autoComplete: "new-password", maxLength: 200, autoSize: { maxRows: 3 } }, editableProps, { disabled: disabledResult, onPressEnter: save, onBlur: save, onPaste: onPasteHandle, value: val, onChange: function (e) {
+                    setVal(e.target.value);
+                    valueRef.current[dataIndex] = e.target.value;
+                    removeErrorClass();
+                    if (!e.target.value) {
+                        e.target.focus();
+                    }
+                }, allowClear: true })));
         }
         else {
-            return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
-                React.createElement(Input, __assign({ autoComplete: "new-password", maxLength: 50 }, editableProps, { disabled: disabledResult, onPressEnter: save, onBlur: save, allowClear: true, onPaste: onPasteHandle, onChange: function (e) {
-                        removeErrorClass();
-                        if (!e.target.value) {
-                            e.target.focus();
-                        }
-                    } }))));
+            return (React.createElement(Input, __assign({ autoComplete: "new-password", maxLength: 50 }, editableProps, { disabled: disabledResult, onPressEnter: save, onBlur: save, allowClear: true, onPaste: onPasteHandle, value: val, onChange: function (e) {
+                    setVal(e.target.value);
+                    valueRef.current[dataIndex] = e.target.value;
+                    removeErrorClass();
+                    if (!e.target.value) {
+                        e.target.focus();
+                    }
+                } })));
         }
-    };
-    var childNode = children;
-    if (editable) {
-        childNode = createEditableDom(editableConfig);
-    }
-    return (React.createElement("td", __assign({ ref: tdRef }, restProps), childNode));
-});
-export default TableEnhanceCell;
+    }, [
+        val,
+        editable,
+        editableConfig,
+        dataIndex,
+        index,
+        onPasteHandle,
+        record,
+        removeErrorClass,
+        save,
+    ]);
+    return (React.createElement("td", __assign({ ref: tdRef }, restProps), editable ? (React.createElement("div", { className: "zt-table__enhance-cell" }, createEditableDom)) : (children)));
+};
+export default memo(TableEnhanceCell);

package/dist/components/Table/table-enhance-row.d.ts

@@ -1,13 +1,12 @@
 import React from 'react';
 import { IMoveRow as _IMoveRow } from './hooks/useDropRef';
-import { FormInstance } from 'antd/lib/form';
 export declare type IMoveRow = _IMoveRow;
 interface IProps {
     index: number;
     moverow: IMoveRow;
     className?: string;
     style?: any;
+    [prop: string]: any;
 }
-export declare const EditableContext: React.Context<FormInstance<any>>;
-declare const TableEnhanceRow: React.FC<IProps>;
-export default TableEnhanceRow;
+declare const _default: React.NamedExoticComponent<IProps>;
+export default _default;

package/dist/components/Table/table-enhance-row.js

@@ -20,16 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import useDropRef from './hooks/useDropRef';
-import { Form } from '../../index';
-export var EditableContext = React.createContext(null);
-var TableEnhanceRow = memo(function (props) {
+var TableEnhanceRow = function (props) {
     var index = props.index, moverow = props.moverow, className = props.className, style = props.style, restProps = __rest(props, ["index", "moverow", "className", "style"]);
     var _a = useDropRef(index, moverow), ref = _a.ref, isOver = _a.isOver, dropClassName = _a.dropClassName;
-    var form = Form.useForm()[0];
-    return (React.createElement(Form, { autoComplete: "off", form: form, component: false, name: props['data-row-key'] },
-        React.createElement(EditableContext.Provider, { value: form },
-            React.createElement("tr", __assign({ ref: ref, className: "" + className + (isOver ? dropClassName : ''), style: __assign({ cursor: !moverow ? 'default' : 'move' }, style) }, restProps)))));
-});
-export default TableEnhanceRow;
+    var memoStyle = useMemo(function () { return (__assign({ cursor: !moverow ? 'default' : 'move' }, style)); }, [moverow, style]);
+    return (React.createElement("tr", __assign({ ref: ref, className: "" + className + (isOver ? dropClassName : ''), style: memoStyle }, restProps)));
+};
+export default memo(TableEnhanceRow);

package/dist/components/Table/table-resizable-title.d.ts

@@ -3,9 +3,8 @@
  * @description
  */
 import React from 'react';
-import type { ResizeCallbackData } from 'react-resizable';
-declare const TableResizableTitle: (props: React.HTMLAttributes<any> & {
-    onResize: (e: React.SyntheticEvent<Element>, data: any) => void;
+declare const _default: React.MemoExoticComponent<(props: React.HTMLAttributes<any> & {
+    onResize: (e: React.SyntheticEvent<Element, Event>, data: any) => void;
     width: number;
-}) => JSX.Element;
-export default TableResizableTitle;
+}) => JSX.Element>;
+export default _default;

package/dist/components/Table/table-resizable-title.js

@@ -24,16 +24,41 @@ var __rest = (this && this.__rest) || function (s, e) {
  * @author 陈亚雄
  * @description
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { Resizable } from 'react-resizable';
+import classnames from 'classnames';
 var TableResizableTitle = function (props) {
-    var onResize = props.onResize, width = props.width, restProps = __rest(props, ["onResize", "width"]);
+    var onResize = props.onResize, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, restProps = __rest(props, ["onResize", "width", "onMouseEnter", "onMouseLeave"]);
+    // 添加偏移量
+    var _a = useState(0), offset = _a[0], setOffset = _a[1];
     if (!width) {
         return React.createElement("th", __assign({}, restProps));
     }
-    return (React.createElement(Resizable, { width: width, height: 0, handle: React.createElement("span", { className: "react-resizable-handle", onClick: function (e) {
+    return (React.createElement(Resizable, { width: Number(width) + Number(offset), height: 0, handle: React.createElement("span", { 
+            // 有偏移量显示竖线
+            // className="react-resizable-handle"
+            className: classnames(['react-resizable-handle', offset && 'active']), 
+            // 拖拽层偏移
+            style: { transform: "translateX(" + offset + "px)" }, onClick: function (e) {
                 e.stopPropagation();
-            } }), onResize: onResize, draggableOpts: { enableUserSelectHack: false } },
-        React.createElement("th", __assign({}, restProps))));
+                e.preventDefault();
+            } }), onResize: function (e, _a) {
+            var size = _a.size;
+            // 这里只更新偏移量，数据列表其实并没有伸缩
+            setOffset(size.width - width);
+        }, onResizeStop: function (e, data) {
+            // 拖拽结束以后偏移量归零
+            setOffset(0);
+            // 这里是props传进来的事件，在外部是列数据中的onHeaderCell方法提供的事件，请自行研究官方提供的案例
+            onResize(e, data);
+        }, draggableOpts: { enableUserSelectHack: false } },
+        React.createElement("th", __assign({}, restProps, { style: __assign({ overflow: 'visible' }, restProps.style) }),
+            React.createElement("div", { style: {
+                    width: '100%',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                    // 此处样式是在th中增加div块，为了解决拖拉时偏移虚线在右侧不出现问题
+                } }, restProps.children))));
 };
-export default TableResizableTitle;
+export default React.memo(TableResizableTitle);

package/dist/components/Table/table.d.ts

@@ -14,6 +14,8 @@ export interface IProps<RecordType> extends Omit<TableProps<RecordType>, 'column
     hideDelIcon?: boolean;
     /**删除icon提示文字 */
     delIconText?: string;
+    /** 是否隐藏图标 */
+    hiddenColumnDynamicIcon?: boolean;
     /**是否显示动态表头配置 */
     showColumnDynamic?: boolean;
     /**动态表头配置，是否缓存，动态列配置如果要缓存得话，必须得使用一个全局唯一得key来标识 */