ztxkui 4.3.13 → 4.3.14

package/dist/components/ProTable/hooks.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare function useDataSourceRef<D>(dataSource: D[]): import("react").MutableRefObject<D[]>;
+export declare function useAddAndDelRow(showAddIcon: any, showDelIcon: any, dataSourceRef: any, addDataMode: any, onChange: any, rowKey: any, refreshScuCell: any): {
+    needAddAndDel: any;
+    onAddAndDelHandle: (type: 'add' | 'del', index: number) => void;
+};
+export declare function useMoveRow(onChange: any, dataSourceRef: any, refreshScuCell: any): (dragIndex: number, hoverIndex: number) => void;
+export declare function useEditRow(onChange: any, dataSourceRef: any, { onBatchPastePre, onBatchPastePost }: {
+    onBatchPastePre: any;
+    onBatchPastePost: any;
+}): {
+    onEditableSaveHandle: (record: any, index: number | undefined, _dataIndex?: string) => void;
+    onBatchPasteHandle: (records: any, startIndex: any) => void;
+};
+export declare function useScuRfresh(): {
+    refreshScuCell: () => void;
+    getRefreshScuCell: () => boolean;
+};

package/dist/components/ProTable/hooks.js

@@ -0,0 +1,178 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+import { useRef, useEffect, useMemo, useCallback } from 'react';
+import update from 'immutability-helper';
+// 设置数据源临时Ref对象
+export function useDataSourceRef(dataSource) {
+    var dataSourceRef = useRef(dataSource);
+    useEffect(function () {
+        dataSourceRef.current = dataSource;
+    }, [dataSource]);
+    return dataSourceRef;
+}
+// 加减行相关
+export function useAddAndDelRow(showAddIcon, showDelIcon, dataSourceRef, addDataMode, onChange, rowKey, refreshScuCell) {
+    var needAddAndDel = useMemo(function () {
+        return showAddIcon || showDelIcon;
+    }, [showAddIcon, showDelIcon]);
+    // 增减行回调
+    var onAddAndDelHandle = useCallback(function (type, index) {
+        var _a, _b;
+        if (typeof addDataMode === 'function') {
+            var newDataSource_1 = addDataMode(index, dataSourceRef.current);
+            onChange && onChange(newDataSource_1);
+            return;
+        }
+        var newDataSource = __spreadArray([], dataSourceRef.current);
+        var newRecord = {};
+        if (type === 'add') {
+            if (addDataMode === 'blank') {
+                // 生成一条空白数据
+                newRecord = (_a = {},
+                    _a[rowKey] = Date.now() + "-" + index,
+                    _a.__INNER__ADD__DATA = true,
+                    _a);
+            }
+            else {
+                // 复制当前这条数据
+                var currentRecord = newDataSource[index];
+                newRecord = __assign(__assign({}, currentRecord), (_b = {}, _b[rowKey] = Date.now() + "-" + index, _b.__INNER__ADD__DATA = true, _b));
+            }
+            newDataSource.splice(index + 1, 0, newRecord);
+        }
+        else {
+            newDataSource.splice(index, 1);
+        }
+        refreshScuCell();
+        onChange && onChange(newDataSource);
+    }, [addDataMode, onChange, dataSourceRef, rowKey, refreshScuCell]);
+    return {
+        needAddAndDel: needAddAndDel,
+        onAddAndDelHandle: onAddAndDelHandle,
+    };
+}
+// 拖拽行相关
+export function useMoveRow(onChange, dataSourceRef, refreshScuCell) {
+    var onMoveRowHandle = useCallback(function (dragIndex, hoverIndex) {
+        var copyDataSource = __spreadArray([], dataSourceRef.current);
+        var dragRow = copyDataSource[dragIndex];
+        var newDataSource = update(copyDataSource, {
+            $splice: [
+                [dragIndex, 1],
+                [hoverIndex, 0, dragRow],
+            ],
+        });
+        refreshScuCell();
+        onChange && onChange(newDataSource);
+    }, [onChange, dataSourceRef, refreshScuCell]);
+    return onMoveRowHandle;
+}
+// 编辑行相关
+function objIsEqual(newObj, oldObj) {
+    var keys = Object.keys(newObj);
+    for (var i = 0; i < keys.length; i++) {
+        var key = keys[i];
+        if (oldObj[key] !== newObj[key]) {
+            return false;
+        }
+    }
+    return true;
+}
+export function useEditRow(onChange, dataSourceRef, _a) {
+    var onBatchPastePre = _a.onBatchPastePre, onBatchPastePost = _a.onBatchPastePost;
+    var onEditableSaveHandle = useCallback(function (record, index, _dataIndex) {
+        var _a;
+        if (_dataIndex === void 0) { _dataIndex = ''; }
+        if (typeof index === 'number') {
+            var newDataSource = __spreadArray([], dataSourceRef.current);
+            var oldRecord = newDataSource[index];
+            // 如果新的record里面的值 老的Record里面有 那么不需要触发onChange
+            // 这里主要是为了优化物料组件带来的多次rerender导致的一些问题
+            if (objIsEqual(record, oldRecord)) {
+                return;
+            }
+            var newRecord = _dataIndex
+                ? __assign(__assign(__assign({}, record), oldRecord), (_a = {}, _a[_dataIndex] = record[_dataIndex], _a)) : __assign(__assign({}, oldRecord), record);
+            newDataSource.splice(index, 1, newRecord);
+            onChange && onChange(newDataSource);
+        }
+    }, [dataSourceRef, onChange]);
+    var onBatchPasteHandle = useCallback(function (records, startIndex) {
+        if (!Array.isArray(records)) {
+            return;
+        }
+        // 前置处理
+        var pasteRecords = onBatchPastePre ? onBatchPastePre(records) : records;
+        // 计算结束位置
+        var endIndex = startIndex + pasteRecords.length - 1;
+        var currentRecords = Array.isArray(dataSourceRef.current)
+            ? dataSourceRef.current.slice()
+            : [];
+        if (endIndex > currentRecords.length - 1) {
+            endIndex = currentRecords.length - 1;
+        }
+        // 从开始位置开始，替换对应的值
+        var currentIndex = 0;
+        var dataSource = currentRecords.map(function (record, index) {
+            if (index >= startIndex && index <= endIndex) {
+                var obj = __assign(__assign({}, record), pasteRecords[currentIndex]);
+                currentIndex++;
+                return obj;
+            }
+            return record;
+        });
+        // 后置处理
+        var newDataSource = onBatchPastePost
+            ? onBatchPastePost(dataSource)
+            : dataSource;
+        // 触发onChange事件
+        onChange && onChange(newDataSource);
+    }, [dataSourceRef, onChange, onBatchPastePre, onBatchPastePost]);
+    return {
+        onEditableSaveHandle: onEditableSaveHandle,
+        onBatchPasteHandle: onBatchPasteHandle,
+    };
+}
+// SCU刷新逻辑
+// 这么写的原因是 如果拖拽行 增减行后，并不能触发column的scu
+// 之前的写法是，通过useState刷新。但是 setState会触发整个组件的刷新
+// 设置数据后，本身会触发setState。导致执行两次rerender。每个单元格都会执行rerender
+// 通过Ref并不会触发 setState 通过setTimeout也不会导致每一个单元格的刷新出现问题
+export function useScuRfresh() {
+    var timeOutRef = useRef(null);
+    var tableSCURefreshRef = useRef();
+    var refreshScuCell = useCallback(function () {
+        tableSCURefreshRef.current = true;
+    }, []);
+    var getRefreshScuCell = useCallback(function () {
+        if (tableSCURefreshRef.current) {
+            if (timeOutRef.current) {
+                clearTimeout(timeOutRef.current);
+                timeOutRef.current = null;
+            }
+            timeOutRef.current = setTimeout(function () {
+                tableSCURefreshRef.current = false;
+            });
+            return true;
+        }
+        return false;
+    }, []);
+    return {
+        refreshScuCell: refreshScuCell,
+        getRefreshScuCell: getRefreshScuCell,
+    };
+}

package/dist/components/ProTable/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 业务封装可编辑表格组件
+ */
+import React from 'react';
+import { IProps } from './interface';
+declare function ProEditTable(props: IProps<any>): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ProEditTable>;
+export default _default;

package/dist/components/ProTable/index.js

@@ -0,0 +1,66 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * 业务封装可编辑表格组件
+ */
+import React, { memo, useRef, useImperativeHandle } from 'react';
+import { Table } from '../../index';
+import { useDataSourceRef, useAddAndDelRow, useScuRfresh, useMoveRow, useEditRow, } from './hooks';
+function ProEditTable(props) {
+    var rowKey = props.rowKey, dataSource = props.dataSource, columns = props.columns, onChange = props.onChange, showAddIcon = props.showAddIcon, showDelIcon = props.showDelIcon, _a = props.addDataMode, addDataMode = _a === void 0 ? 'blank' : _a, isMove = props.isMove, isEdit = props.isEdit, isPaste = props.isPaste, tableHandleRef = props.tableHandleRef, onBatchPastePre = props.onBatchPastePre, onBatchPastePost = props.onBatchPastePost, restProps = __rest(props, ["rowKey", "dataSource", "columns", "onChange", "showAddIcon", "showDelIcon", "addDataMode", "isMove", "isEdit", "isPaste", "tableHandleRef", "onBatchPastePre", "onBatchPastePost"]);
+    var tableColumns = columns.map(function (item) {
+        if (item.shouldCellUpdate) {
+            var fn_1 = item.shouldCellUpdate;
+            item.shouldCellUpdate = function (record, preRecord) {
+                if (getRefreshScuCell()) {
+                    return true;
+                }
+                return fn_1(record, preRecord);
+            };
+        }
+        return item;
+    });
+    // 保存dataSource值存为Ref
+    var dataSourceRef = useDataSourceRef(dataSource);
+    // SCU逻辑
+    var _b = useScuRfresh(), refreshScuCell = _b.refreshScuCell, getRefreshScuCell = _b.getRefreshScuCell;
+    // 增减行相关hook
+    var _c = useAddAndDelRow(showAddIcon, showDelIcon, dataSourceRef, addDataMode, onChange, rowKey, refreshScuCell), needAddAndDel = _c.needAddAndDel, onAddAndDelHandle = _c.onAddAndDelHandle;
+    // 拖拽行相关hook
+    var onMoveRowHandle = useMoveRow(onChange, dataSourceRef, refreshScuCell);
+    // 修改行相关hook
+    var _d = useEditRow(onChange, dataSourceRef, {
+        onBatchPastePre: onBatchPastePre,
+        onBatchPastePost: onBatchPastePost,
+    }), onEditableSaveHandle = _d.onEditableSaveHandle, onBatchPasteHandle = _d.onBatchPasteHandle;
+    var innerTableHandleRef = useRef();
+    useImperativeHandle(tableHandleRef, function () { return ({
+        validate: innerTableHandleRef.current.validate,
+        clearErrorClass: innerTableHandleRef.current.clearErrorClass,
+        getCurrentPage: innerTableHandleRef.current.getCurrentPage,
+        getRealyIndex: innerTableHandleRef.current.getRealyIndex,
+        onEditableSaveHandle: onEditableSaveHandle,
+    }); });
+    return (React.createElement(Table, __assign({ rowKey: rowKey, dataSource: dataSource, columns: tableColumns, hideAddIcon: !showAddIcon, hideDelIcon: !showDelIcon, onAddAndDelHandle: needAddAndDel ? onAddAndDelHandle : undefined, onMoveRow: isMove ? onMoveRowHandle : undefined, onEditableSave: isEdit ? onEditableSaveHandle : undefined, tableHandleRef: innerTableHandleRef, onTableChange: isPaste ? onBatchPasteHandle : undefined }, restProps)));
+}
+export default memo(ProEditTable);

package/dist/components/ProTable/interface.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { ColumnsType } from '../../components/Table';
+import { IProps as TableIProps } from '../../components/Table/table';
+export interface IProps<RecordType> extends Omit<TableIProps<RecordType>, 'columns' | 'onChange' | 'onEditableSave'> {
+    dataSource: any[];
+    columns: ColumnsType<any>;
+    rowKey: string;
+    onChange?: (dataSource: any[]) => void;
+    showAddIcon?: boolean;
+    showDelIcon?: boolean;
+    /**
+     * 增加数据的模式 blank add空白数据; copy add复制数据; 自定义增加
+     */
+    addDataMode?: 'blank' | 'copy' | ((index: number, dataSource: any[]) => any[]);
+    isMove?: boolean;
+    isEdit?: boolean;
+    isPaste?: boolean;
+    onBatchPastePre?: (data: any[]) => any[];
+    onBatchPastePost?: (data: any[]) => any[];
+    tableHandleRef?: React.Ref<{
+        validate: () => Promise<any>;
+        clearErrorClass: (index: number) => void;
+        getCurrentPage: () => {
+            page: number;
+            pageSize: number;
+        } | null;
+        getRealyIndex: (index: number) => number;
+        onEditableSaveHandle: (record: any, index: number | undefined, _dataIndex: string) => void;
+        [prop: string]: any;
+    }>;
+}

package/dist/components/ProTable/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as Tabs } from './components/Tabs';
 export { default as Modal } from './components/Modal';
 export { default as Pagination } from './components/Pagination';
 export { default as Table } from './components/Table';
+export { default as ProTable } from './components/ProTable';
 export { default as Sortable } from './components/Sortable';
 export { default as SortableCancel } from './components/SortableCancel';
 export { default as Container } from './components/business/Container';

package/dist/index.js

@@ -145,6 +145,7 @@ export { default as Tabs } from './components/Tabs';
 export { default as Modal } from './components/Modal';
 export { default as Pagination } from './components/Pagination';
 export { default as Table } from './components/Table';
+export { default as ProTable } from './components/ProTable';
 export { default as Sortable } from './components/Sortable';
 export { default as SortableCancel } from './components/SortableCancel';
 export { default as Container } from './components/business/Container';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ztxkui",
-  "version": "4.3.13",
+  "version": "4.3.14",
   "private": false,
   "description": "React components library",
   "author": "zt-front-end",