ztxkui 4.2.23-553 → 4.2.23-554

package/dist/UI/Table/EditTable.js

@@ -90,7 +90,35 @@ function useColumns(tableHandleRef) {
             dataIndex: 'test1',
             key: 'test1',
             render: function (text, record, index) {
-                return (React.createElement(Input, { value: text, onPaste: function (e) {
+                return (React.createElement(Input, { value: text, onChange: function (e) {
+                        var _a;
+                        var newRecord = {
+                            test1: e.target.value,
+                        };
+                        (_a = tableHandleRef.current) === null || _a === void 0 ? void 0 : _a.onEditableSaveHandle(newRecord, index);
+                    }, onPaste: function (e) {
+                        var _a;
+                        (_a = tableHandleRef.current) === null || _a === void 0 ? void 0 : _a.onPasteHandle(e, {
+                            index: index,
+                            dataIndex: 'test1',
+                            record: record,
+                        });
+                    } }));
+            },
+        },
+        {
+            title: i18next.t('测试列11122'),
+            width: 100,
+            dataIndex: 'test111122',
+            key: 'test111122',
+            render: function (text, record, index) {
+                return (React.createElement(Input.TextArea, { value: text, onChange: function (e) {
+                        var _a;
+                        var newRecord = {
+                            test111122: e.target.value,
+                        };
+                        (_a = tableHandleRef.current) === null || _a === void 0 ? void 0 : _a.onEditableSaveHandle(newRecord, index);
+                    }, onPaste: function (e) {
                         var _a;
                         (_a = tableHandleRef.current) === null || _a === void 0 ? void 0 : _a.onPasteHandle(e, {
                             index: index,

package/dist/components/Input/AntInputModal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { InputProps } from 'antd';
+interface InputModalProps extends Omit<InputProps, 'onChange' | 'onBlur'> {
+    onChange?: InputProps['onChange'];
+    onBlur?: InputProps['onBlur'];
+}
+declare const InputModal: React.FC<InputModalProps>;
+export default InputModal;

package/dist/components/Input/AntInputModal.js

@@ -0,0 +1,79 @@
+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;
+};
+/**
+ * 这里重构一份的原因是 因为Table组件里面的编辑列使用的是 AntInput的组件
+ * 担心会有问题，这里用Antd的Input组件来代替
+ */
+import i18next from 'ztxkutils/dist/i18next';
+import React from 'react';
+import { Modal, Button } from '../../index.build';
+import { Input } from 'antd';
+var InputModal = function (_a) {
+    var onDoubleClick = _a.onDoubleClick, onChange = _a.onChange, onBlur = _a.onBlur, props = __rest(_a, ["onDoubleClick", "onChange", "onBlur"]);
+    var isDoubleClick = React.useRef(false);
+    var _b = React.useState(false), visible = _b[0], setVisible = _b[1];
+    var _c = React.useState(''), modalValue = _c[0], setModalValue = _c[1];
+    var isModalDisabled = React.useMemo(function () {
+        return props.disabled || props.readOnly;
+    }, [props.disabled, props.readOnly]);
+    var handleDoubleClick = function (e) {
+        if (onDoubleClick) {
+            onDoubleClick(e);
+        }
+        else {
+            isDoubleClick.current = true;
+            setVisible(true);
+            setModalValue(props.value);
+        }
+    };
+    var close = function () {
+        setVisible(false);
+        isDoubleClick.current = false;
+    };
+    var handleSure = function () {
+        // 模拟结构
+        var e = {
+            target: {
+                value: modalValue,
+            },
+        };
+        onChange && onChange(e);
+        onBlur && onBlur(e);
+        close();
+    };
+    var handleClear = function () {
+        setModalValue('');
+    };
+    var handleBlur = function (e) {
+        if (isDoubleClick.current)
+            return;
+        onBlur && onBlur(e.target.value);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input, __assign({}, props, { onBlur: handleBlur, onDoubleClick: handleDoubleClick, onChange: function (e) { return onChange && onChange(e); } })),
+        React.createElement(Modal, { title: isModalDisabled ? i18next.t('内容') : i18next.t('请输入内容'), visible: visible, loading: false, destroyOnClose: true, onCancel: close, footer: isModalDisabled ? undefined : (React.createElement(React.Fragment, null,
+                React.createElement(Button, { onClick: handleClear }, i18next.t('清空内容')),
+                React.createElement(Button, { type: "primary", onClick: handleSure }, i18next.t('确认')))) },
+            React.createElement(Input.TextArea, { value: modalValue, readOnly: isModalDisabled, autoFocus: true, autoSize: { minRows: 10, maxRows: 50 }, onChange: function (e) { return setModalValue(e.target.value); } }))));
+};
+export default InputModal;

package/dist/components/Input/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useInputModal } from './useInputModal';
+export type { UseInputModalOptions, UseInputModalReturn, } from './useInputModal';

package/dist/components/Input/hooks/index.js

@@ -0,0 +1 @@
+export { default as useInputModal } from './useInputModal';

package/dist/components/Input/hooks/useInputModal.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+export interface UseInputModalOptions {
+    /** 确认时的回调 */
+    onConfirm?: (value: string, event?: {
+        target: {
+            value: string;
+        };
+    }) => void;
+    /** 取消时的回调 */
+    onCancel?: () => void;
+    /** 是否禁用（只读模式） */
+    disabled?: boolean;
+    /** Modal 标题 */
+    title?: string;
+    /** TextArea 最小行数 */
+    minRows?: number;
+    /** TextArea 最大行数 */
+    maxRows?: number;
+    /** 是否使用事件模式（antd 风格，回调参数为 { target: { value } }） */
+    eventMode?: boolean;
+}
+export interface UseInputModalReturn {
+    /** 是否显示 Modal */
+    visible: boolean;
+    /** 当前 Modal 中的值 */
+    modalValue: string;
+    /** 是否为双击触发的打开（用于防止 onBlur 重复触发） */
+    isDoubleClick: React.MutableRefObject<boolean>;
+    /** 打开 Modal */
+    open: (initialValue?: string) => void;
+    /** 关闭 Modal */
+    close: () => void;
+    /** 设置 Modal 值 */
+    setModalValue: React.Dispatch<React.SetStateAction<string>>;
+    /** 清空 Modal 值 */
+    clearValue: () => void;
+    /** 确认操作 */
+    confirm: () => void;
+    /** 处理双击事件 */
+    handleDoubleClick: (e: React.MouseEvent, currentValue?: string) => void;
+    /** 处理失焦事件（自动跳过双击触发的情况） */
+    handleBlur: (e: React.FocusEvent | any, originalHandler?: (value: string | any) => void) => void;
+    /** 渲染 Modal 组件 */
+    renderModal: () => React.ReactNode;
+}
+/**
+ * 输入弹窗 Hook
+ * @description 封装双击输入框弹出 Modal 编辑的功能
+ * @param options 配置选项
+ * @returns Modal 状态和操作方法
+ */
+declare function useInputModal(options?: UseInputModalOptions): UseInputModalReturn;
+export default useInputModal;

package/dist/components/Input/hooks/useInputModal.js

@@ -0,0 +1,105 @@
+import i18next from 'ztxkutils/dist/i18next';
+import React from 'react';
+import { Modal, Button, Input } from '../../../index.build';
+/**
+ * 输入弹窗 Hook
+ * @description 封装双击输入框弹出 Modal 编辑的功能
+ * @param options 配置选项
+ * @returns Modal 状态和操作方法
+ */
+function useInputModal(options) {
+    if (options === void 0) { options = {}; }
+    var onConfirm = options.onConfirm, onCancel = options.onCancel, _a = options.disabled, disabled = _a === void 0 ? false : _a, title = options.title, _b = options.minRows, minRows = _b === void 0 ? 10 : _b, _c = options.maxRows, maxRows = _c === void 0 ? 50 : _c, _d = options.eventMode, eventMode = _d === void 0 ? false : _d;
+    var _e = React.useState(false), visible = _e[0], setVisible = _e[1];
+    var _f = React.useState(''), modalValue = _f[0], setModalValue = _f[1];
+    var isDoubleClick = React.useRef(false);
+    var open = React.useCallback(function (initialValue) {
+        setModalValue(initialValue !== null && initialValue !== void 0 ? initialValue : '');
+        isDoubleClick.current = true;
+        setVisible(true);
+    }, []);
+    var close = React.useCallback(function () {
+        setVisible(false);
+        isDoubleClick.current = false;
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }, [onCancel]);
+    var clearValue = React.useCallback(function () {
+        setModalValue('');
+    }, []);
+    var confirm = React.useCallback(function () {
+        if (eventMode) {
+            // 事件模式：模拟 antd 的 event 对象
+            var event_1 = {
+                target: {
+                    value: modalValue,
+                },
+            };
+            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(modalValue, event_1);
+        }
+        else {
+            // 值模式：直接传递值
+            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(modalValue);
+        }
+        setVisible(false);
+    }, [modalValue, onConfirm, eventMode]);
+    /**
+     * 处理双击事件
+     * @param e 鼠标事件
+     * @param currentValue 当前输入框的值
+     * @param originalHandler 原始的双击处理函数（如果存在则调用，否则打开 Modal）
+     */
+    var handleDoubleClick = React.useCallback(function (e, currentValue) {
+        open(currentValue);
+    }, [open]);
+    /**
+     * 处理失焦事件
+     * @description 自动跳过双击触发的情况，避免 Modal 打开时触发失焦
+     * @param e 事件对象
+     * @param originalHandler 原始的失焦处理函数
+     */
+    var handleBlur = React.useCallback(function (e, originalHandler) {
+        var _a;
+        // 如果是双击触发的打开，跳过 onBlur
+        if (isDoubleClick.current)
+            return;
+        if (originalHandler) {
+            // 根据事件模式决定传递的参数格式
+            if (eventMode) {
+                originalHandler(e);
+            }
+            else {
+                originalHandler((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
+            }
+        }
+    }, [eventMode]);
+    var renderModal = React.useCallback(function () {
+        return (React.createElement(Modal, { title: title !== null && title !== void 0 ? title : (disabled ? i18next.t('内容') : i18next.t('请输入内容')), visible: visible, loading: false, destroyOnClose: true, onCancel: close, footer: disabled ? undefined : (React.createElement(React.Fragment, null,
+                React.createElement(Button, { onClick: clearValue }, i18next.t('清空内容')),
+                React.createElement(Button, { type: "primary", onClick: confirm }, i18next.t('确认')))) },
+            React.createElement(Input.TextArea, { value: modalValue, readOnly: disabled, autoFocus: true, autoSize: { minRows: minRows, maxRows: maxRows }, onChange: function (e) { return setModalValue(e.target.value); } })));
+    }, [
+        visible,
+        modalValue,
+        disabled,
+        title,
+        minRows,
+        maxRows,
+        close,
+        clearValue,
+        confirm,
+    ]);
+    return {
+        visible: visible,
+        modalValue: modalValue,
+        isDoubleClick: isDoubleClick,
+        open: open,
+        close: close,
+        setModalValue: setModalValue,
+        clearValue: clearValue,
+        confirm: confirm,
+        handleDoubleClick: handleDoubleClick,
+        handleBlur: handleBlur,
+        renderModal: renderModal,
+    };
+}
+export default useInputModal;

package/dist/components/Input/input.js

@@ -29,8 +29,12 @@ import useLastest from '../utils/useLastest';
 import InputQuill from './InputQuill';
 import InputQuillRead from './InputQuillRead';
 import InputModal from './InputModal';
+import AntInputModal from './AntInputModal';
+import { useTableContext } from '../Table/table-context';
+import { useInputModal } from './hooks';
 function Input(props) {
-    var doubleClickReadOnly = props.doubleClickReadOnly, onDoubleClick = props.onDoubleClick, onBlur = props.onBlur, isAsrInput = props.isAsrInput, asrCloseTime = props.asrCloseTime, _a = props.allowSpace, allowSpace = _a === void 0 ? false : _a, restProps = __rest(props, ["doubleClickReadOnly", "onDoubleClick", "onBlur", "isAsrInput", "asrCloseTime", "allowSpace"]);
+    var doubleClickReadOnly = props.doubleClickReadOnly, onDoubleClick = props.onDoubleClick, onBlur = props.onBlur, isAsrInput = props.isAsrInput, asrCloseTime = props.asrCloseTime, _a = props.allowSpace, allowSpace = _a === void 0 ? false : _a, isInputModal = props.isInputModal, restProps = __rest(props, ["doubleClickReadOnly", "onDoubleClick", "onBlur", "isAsrInput", "asrCloseTime", "allowSpace", "isInputModal"]);
+    var inTable = useTableContext().inTable;
     var _b = useState(!!doubleClickReadOnly), readOnly = _b[0], setReadOnly = _b[1];
     var onBlurHandle = function (e) {
         if (doubleClickReadOnly) {
@@ -41,12 +45,6 @@ function Input(props) {
         onBlur && onBlur(e);
         props.onChange && props.onChange(e);
     };
-    var onDoubleClickHandle = function (e) {
-        if (doubleClickReadOnly) {
-            setReadOnly(false);
-        }
-        onDoubleClick && onDoubleClick(e);
-    };
     // 阻止在input设置allowClear后，在input外部鼠标点击，然后移入input框中松开鼠标时候，input框会聚焦
     var onMouseUpHandle = function (e) {
         e === null || e === void 0 ? void 0 : e.stopPropagation();
@@ -60,9 +58,29 @@ function Input(props) {
         // 受控模式
         onChangeLastest.current && onChangeLastest.current(e);
     }, [onChangeLastest]);
-    return isAsrInput && !props.readOnly && !props.disabled ? (React.createElement("div", { className: "asr-input", style: { display: 'inline-block' } },
-        React.createElement(Asr, { recordTextCallback: recordTextCallback, timeout: asrCloseTime, className: "asr-input--btn" }),
-        React.createElement(AntInput, __assign({ onMouseUp: onMouseUpHandle, onBlur: onBlurHandle, onDoubleClick: onDoubleClickHandle, readOnly: readOnly }, restProps)))) : (React.createElement(AntInput, __assign({ onMouseUp: onMouseUpHandle, onBlur: onBlurHandle, onDoubleClick: onDoubleClickHandle, readOnly: readOnly }, restProps)));
+    var showInputModal = isInputModal || inTable;
+    var inputModal = useInputModal({
+        disabled: props.disabled || props.readOnly,
+        eventMode: true,
+        onConfirm: function (value, event) {
+            // 受控模式
+            onChangeLastest.current && onChangeLastest.current(event);
+        },
+    });
+    var onDoubleClickHandle = function (e) {
+        if (doubleClickReadOnly) {
+            setReadOnly(false);
+        }
+        if (showInputModal) {
+            inputModal.handleDoubleClick(e, props.value);
+        }
+        onDoubleClick && onDoubleClick(e);
+    };
+    return (React.createElement(React.Fragment, null,
+        isAsrInput && !props.readOnly && !props.disabled ? (React.createElement("div", { className: "asr-input", style: { display: 'inline-block' } },
+            React.createElement(Asr, { recordTextCallback: recordTextCallback, timeout: asrCloseTime, className: "asr-input--btn" }),
+            React.createElement(AntInput, __assign({ onMouseUp: onMouseUpHandle, onBlur: onBlurHandle, onDoubleClick: onDoubleClickHandle, readOnly: readOnly }, restProps)))) : (React.createElement(AntInput, __assign({ onMouseUp: onMouseUpHandle, onBlur: onBlurHandle, onDoubleClick: onDoubleClickHandle, readOnly: readOnly }, restProps))),
+        showInputModal && inputModal.renderModal()));
 }
 var TextArea = React.forwardRef(function (props, ref) {
     var _a = props.handleSize, handleSize = _a === void 0 ? true : _a, _b = props.autoSize, autoSize = _b === void 0 ? true : _b, className = props.className, isAsrInput = props.isAsrInput, asrCloseTime = props.asrCloseTime, resetProps = __rest(props, ["handleSize", "autoSize", "className", "isAsrInput", "asrCloseTime"]);
@@ -125,4 +143,5 @@ Input.Password = AntInput.Password;
 Input.Quill = InputQuill;
 Input.QuillRead = InputQuillRead;
 Input.Modal = InputModal;
+Input.AntInputModal = AntInputModal;
 export default Input;

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

@@ -31,6 +31,12 @@ export interface IEditableConfig {
     precisionHandle?: (record: any) => number;
     [props: string]: any;
 }
+/**
+ * 将带有千分符、货币符号、百分号的字符串转换成数字
+ * @param value 待转换的字符串，如 "14,855.00"、"$1,234.56"、"50%"
+ * @returns 转换后的数字，转换失败返回 NaN
+ */
+export declare function parseStringToNumber(value: string): number;
 /**
  * 数据转换 将粘贴过来的数据格式化处理
  */

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

@@ -65,11 +65,59 @@ import { ERROR_TD_CLASSNAME } from './index';
 import { getInnerIndex } from './hooks/useInnerPagination';
 import { exactRound } from 'ztxkutils/dist/tools';
 import { INNER_PARENT_ROW_KEY_NO, INNER_PARENT_ROW_KEY } from './constants';
+/**
+ * 将带有千分符、货币符号、百分号的字符串转换成数字
+ * @param value 待转换的字符串，如 "14,855.00"、"$1,234.56"、"50%"
+ * @returns 转换后的数字，转换失败返回 NaN
+ */
+export function parseStringToNumber(value) {
+    if (typeof value !== 'string') {
+        return NaN;
+    }
+    try {
+        // 去除首尾空格
+        var str = value.trim();
+        // 如果是空字符串，返回 NaN
+        if (!str) {
+            return NaN;
+        }
+        // 记录是否为百分比
+        var isPercent = false;
+        if (str.endsWith('%')) {
+            isPercent = true;
+            str = str.slice(0, -1).trim();
+        }
+        // 移除千分符（逗号）和货币符号
+        // 千分符的逗号只出现在数字之间，小数点前的逗号
+        str = str.replace(/,/g, '');
+        // 移除常见货币符号
+        str = str.replace(/^[￥$€£¥]+\s*/g, '');
+        // 移除可能存在的空格
+        str = str.trim();
+        // 尝试转换为数字
+        var num = parseFloat(str);
+        if (isNaN(num)) {
+            return NaN;
+        }
+        // 如果是百分比，需要除以 100
+        return isPercent ? num / 100 : num;
+    }
+    catch (error) {
+        console.error(i18next.t('数字转换失败'), error);
+        return NaN;
+    }
+}
 /**
  * 数据转换 将粘贴过来的数据格式化处理
  */
 export function transformData(data, config) {
     var newData = data;
+    // 如果newData能转换成数字，就转换成数字
+    // 如果newData不能转换成数字，不做处理
+    var parsedNumber = parseStringToNumber(newData);
+    if (!isNaN(parsedNumber)) {
+        newData = parsedNumber;
+    }
     if (!config) {
         return newData;
     }
@@ -296,7 +344,7 @@ var TableEnhanceCell = function (_a) {
             return null;
         }
         if (!editableConfig) {
-            return (React.createElement(Input, { autoComplete: "new-password", maxLength: 50, onPressEnter: save, onBlur: save, allowClear: true, onPaste: onPasteHandle, value: val, onMouseUp: function (e) {
+            return (React.createElement(ZtInput.AntInputModal, { autoComplete: "new-password", maxLength: 50, onPressEnter: save, onBlur: save, allowClear: true, onPaste: onPasteHandle, value: val, onMouseUp: function (e) {
                     e === null || e === void 0 ? void 0 : e.stopPropagation();
                 }, 
                 // draggable
@@ -306,11 +354,12 @@ var TableEnhanceCell = function (_a) {
                 //   e?.nativeEvent?.stopImmediatePropagation?.();
                 // }}
                 onChange: function (e) {
+                    var _a, _b;
                     setVal(e.target.value);
                     removeErrorClass();
                     valueRef.current[dataIndex] = e.target.value;
                     if (!e.target.value) {
-                        e.target.focus();
+                        (_b = (_a = e.target).focus) === null || _b === void 0 ? void 0 : _b.call(_a);
                     }
                 } }));
         }
@@ -453,7 +502,7 @@ var TableEnhanceCell = function (_a) {
                 } })));
         }
         else {
-            return (React.createElement(Input, __assign({ autoComplete: "new-password", maxLength: 50 }, editableProps, { disabled: disabledResult, onPressEnter: save, onBlur: save, allowClear: true, onPaste: onPasteHandle, value: val, onMouseUp: function (e) {
+            return (React.createElement(ZtInput.AntInputModal, __assign({ autoComplete: "new-password", maxLength: 50 }, editableProps, { disabled: disabledResult, onPressEnter: save, onBlur: save, allowClear: true, onPaste: onPasteHandle, value: val, onMouseUp: function (e) {
                     e === null || e === void 0 ? void 0 : e.stopPropagation();
                 }, 
                 // draggable
@@ -463,11 +512,12 @@ var TableEnhanceCell = function (_a) {
                 //   e?.nativeEvent?.stopImmediatePropagation?.();
                 // }}
                 onChange: function (e) {
+                    var _a, _b;
                     setVal(e.target.value);
                     valueRef.current[dataIndex] = e.target.value;
                     removeErrorClass();
-                    if (!e.target.value) {
-                        e.target.focus();
+                    if (!e.target.value && e.target.focus) {
+                        (_b = (_a = e.target).focus) === null || _b === void 0 ? void 0 : _b.call(_a);
                     }
                 } })));
         }

package/package.json

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