@zat-design/sisyphus-react 4.3.0-beta.10 → 4.3.0-beta.11

package/es/ProForm/components/combination/Group/utils/index.d.ts

@@ -77,37 +77,31 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
     component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
     id?: string;
     className?: string;
-    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
     hidden?: boolean;
     style?: React.CSSProperties;
+    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
     onReset?: () => void;
     prefixCls?: string;
     rootClassName?: string;
-    layout?: import("antd/es/form/Form").FormItemLayout;
-    help?: React.ReactNode;
+    status?: "" | "warning" | "error" | "success" | "validating";
     vertical?: boolean;
-    preserve?: boolean;
-    trim?: boolean;
-    normalize?: (value: any, prevValue: any, allValues: import("@rc-component/form/lib/interface").Store) => any;
-    htmlFor?: string;
-    trigger?: string;
     isView?: boolean;
-    status?: "" | "warning" | "error" | "success" | "validating";
-    getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
-    desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
-    validateTrigger?: string | false | string[];
-    clearNotShow?: boolean;
-    labelAlign?: import("antd/es/form/interface").FormLabelAlign;
     colon?: boolean;
+    htmlFor?: string;
+    labelAlign?: import("antd/es/form/interface").FormLabelAlign;
     labelCol?: import("antd").ColProps;
-    wrapperCol?: import("antd").ColProps;
     getValueFromEvent?: (...args: import("@rc-component/form/lib/interface").EventArgs) => any;
+    normalize?: (value: any, prevValue: any, allValues: import("@rc-component/form/lib/interface").Store) => any;
     shouldUpdate?: import("@rc-component/form/lib/Field").ShouldUpdate<any>;
+    trigger?: string;
+    validateTrigger?: string | false | string[];
     validateDebounce?: number;
     valuePropName?: string;
+    getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
     messageVariables?: Record<string, string>;
     initialValue?: any;
     onMetaChange?: (meta: import("@rc-component/form/lib/Field").MetaEvent) => void;
+    preserve?: boolean;
     isListField?: boolean;
     isList?: boolean;
     noStyle?: boolean;
@@ -115,6 +109,9 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
         icons: import("antd/es/form/FormItem").FeedbackIcons;
     };
     validateStatus?: "" | "warning" | "error" | "success" | "validating";
+    layout?: import("antd/es/form/Form").FormItemLayout;
+    wrapperCol?: import("antd").ColProps;
+    help?: React.ReactNode;
     fieldId?: string;
     valueType?: import("../../../render/propsType").ProFormValueType;
     switchValue?: [any, any];
@@ -124,9 +121,12 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
         index?: number;
     }) => string | React.ReactElement<any, any>;
     viewType?: import("../../../render/propsType").ViewType;
+    trim?: boolean;
     upperCase?: boolean;
     toISOString?: boolean;
     toCSTString?: boolean;
+    clearNotShow?: boolean;
+    desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
     name: any;
     dependencies: any[];
     tooltip: string | {
@@ -141,7 +141,7 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
  * 创建组件属性
  */
 export declare const createComponentProps: (column: FlexibleGroupColumnType, formItemProps: any) => {
-    componentProps: import("lodash").Omit<any, "format" | "clearNotShow" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "precision">;
+    componentProps: import("lodash").Omit<any, "format" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "clearNotShow" | "precision">;
     formItemTransform: {
         getValueProps: any;
         normalize: any;

package/es/ProTable/components/EditableCell/EditIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface EditIconProps {
+    onClick: () => void;
+}
+declare const EditIcon: React.FC<EditIconProps>;
+export default EditIcon;

package/es/ProTable/components/EditableCell/EditIcon.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ProIcon from "../../../ProIcon";
+import editSvg from "../../../assets/edit.svg";
+import styles from "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+const EditIcon = ({
+  onClick
+}) => {
+  return /*#__PURE__*/_jsx("span", {
+    className: styles['editable-cell-edit-icon'],
+    onClick: onClick,
+    children: /*#__PURE__*/_jsx(ProIcon, {
+      src: editSvg,
+      size: "20px",
+      buttonIcon: false
+    })
+  });
+};
+export default EditIcon;

package/es/ProTable/components/EditableCell/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EditableCellProps } from './propsType';
+declare const EditableCell: React.FC<EditableCellProps>;
+export default EditableCell;

package/es/ProTable/components/EditableCell/index.js

@@ -0,0 +1,87 @@
+import _isEqual from "lodash/isEqual";
+import React, { useState, useRef } from 'react';
+import { Form } from 'antd';
+import * as componentMap from "../../../ProForm/components";
+import EditIcon from "./EditIcon";
+import styles from "./index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EditableCell = ({
+  value,
+  record,
+  index,
+  dataIndex,
+  editConfig,
+  displayContent
+}) => {
+  const [editing, setEditing] = useState(false);
+  const [form] = Form.useForm();
+  const snapshotRef = useRef(value);
+  const fieldName = Array.isArray(dataIndex) ? dataIndex.join('_') : dataIndex;
+  const {
+    type = 'Input',
+    fieldProps = {},
+    rules,
+    required,
+    valueType
+  } = editConfig;
+  const {
+    onBlur: onBlurCallback,
+    ...restFieldProps
+  } = fieldProps;
+  const Component = componentMap[type] ?? componentMap.Input;
+  const handleEditIconClick = () => {
+    snapshotRef.current = value;
+    form.setFieldsValue({
+      [fieldName]: value
+    });
+    setEditing(true);
+  };
+  const handleBlur = async () => {
+    try {
+      const values = await form.validateFields();
+      const newValue = values[fieldName];
+      if (_isEqual(newValue, snapshotRef.current)) {
+        setEditing(false);
+        return;
+      }
+      if (!onBlurCallback) {
+        setEditing(false);
+        return;
+      }
+      const result = onBlurCallback(newValue, record, index);
+      if (result instanceof Promise) {
+        await result;
+      }
+      setEditing(false);
+    } catch {
+      // Validation failed - stay in edit mode
+    }
+  };
+  if (!editing) {
+    return /*#__PURE__*/_jsxs("span", {
+      className: styles['editable-cell-wrapper'],
+      children: [/*#__PURE__*/_jsx("span", {
+        children: displayContent ?? '-'
+      }), /*#__PURE__*/_jsx(EditIcon, {
+        onClick: handleEditIconClick
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(Form, {
+    form: form,
+    component: false,
+    children: /*#__PURE__*/_jsx(Form.Item, {
+      name: fieldName,
+      rules: rules,
+      required: required,
+      noStyle: true,
+      children: /*#__PURE__*/_jsx(Component, {
+        ...restFieldProps,
+        valueType: valueType,
+        autoFocus: true,
+        onBlur: handleBlur
+      })
+    })
+  });
+};
+export default EditableCell;

package/es/ProTable/components/EditableCell/index.less

@@ -0,0 +1,29 @@
+.editable-cell-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  gap: 4px;
+}
+
+.editable-cell-edit-icon {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  visibility: hidden;
+  color: rgba(0, 0, 0, 0.65);
+  flex-shrink: 0;
+
+  svg path {
+    fill: currentColor !important;
+  }
+
+  &:hover {
+    color: var(--zaui-brand, #006aff);
+  }
+}
+
+td:hover .editable-cell-edit-icon {
+  visibility: visible;
+}
+

package/es/ProTable/components/EditableCell/propsType.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { EditTableCellConfig } from '../../propsType';
+export interface EditableCellProps {
+    value: any;
+    record: any;
+    index: number;
+    dataIndex: string | string[];
+    editConfig: EditTableCellConfig;
+    displayContent: ReactNode;
+}

package/es/ProTable/components/EditableCell/propsType.js

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

package/es/ProTable/components/FormatColumn/index.js

@@ -16,6 +16,7 @@ import { Space } from 'antd';
 import { tools } from '@zat-design/utils';
 import TooltipTitle from "../TooltipTitle";
 import RenderColumn from "../RenderColumn";
+import EditableCell from "../EditableCell";
 import { getDecimalDigits, getOriginalValue } from "../../utils";
 import { isEmpty } from "../../../utils";
 import getEnumLabel from "../../../ProEnum/utils/getEnumLabel";
@@ -24,7 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const isReactElement = element => /*#__PURE__*/isValidElement(element);
 
 // 需要从 otherProps 中排除的属性（不应传递给 RenderColumn）
-const EXCLUDED_PROPS = ['key', 'render', 'children', 'onCell', 'onHeaderCell'];
+const EXCLUDED_PROPS = ['key', 'render', 'children', 'onCell', 'onHeaderCell', 'editConfig'];
 
 /**
  * 获取安全的 props（排除 key 等不应通过 spread 传递的属性）
@@ -206,7 +207,7 @@ export const formatColumn = ({
   };
 
   // 自定义 render 处理
-  if (column?.render) {
+  if (column?.render && !column.editConfig) {
     const originalRender = column.render;
     column.render = (value, record, index) => {
       const isFn = _isFunction(originalRender);
@@ -695,6 +696,29 @@ export const formatColumn = ({
       });
     };
   }
+  if (column.editConfig) {
+    const editConfig = column.editConfig;
+    const titleStr = typeof title === 'string' ? title : String(dataIndex ?? '');
+    const mergedEditConfig = {
+      ...editConfig,
+      fieldProps: {
+        placeholder: titleStr,
+        ...editConfig.fieldProps
+      }
+    };
+    const prevRender = column.render;
+    column.render = (value, record, index) => {
+      const displayContent = prevRender ? prevRender(value, record, index) : value ?? '-';
+      return /*#__PURE__*/_jsx(EditableCell, {
+        value: value,
+        record: record,
+        index: index,
+        dataIndex: dataIndex,
+        editConfig: mergedEditConfig,
+        displayContent: displayContent
+      });
+    };
+  }
 };
 
 /**

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

@@ -28,3 +28,4 @@ export { default as RenderFooter } from './RenderFooter';
  * @description 实现表格顶部的标签页切换功能，用于数据分类展示
  */
 export { default as RenderTabs } from './RenderTabs';
+export { default as EditableCell } from './EditableCell';

package/es/ProTable/components/index.js

@@ -32,4 +32,5 @@ export { default as RenderFooter } from "./RenderFooter";
  * 表格标签页组件
  * @description 实现表格顶部的标签页切换功能，用于数据分类展示
  */
-export { default as RenderTabs } from "./RenderTabs";
+export { default as RenderTabs } from "./RenderTabs";
+export { default as EditableCell } from "./EditableCell";

package/es/ProTable/propsType.d.ts

@@ -4,6 +4,20 @@ import { NamePath } from 'antd/es/form/interface';
 import { FormInstance } from 'antd/es/form/Form';
 import { ColumnType, GetRowKey, RowSelectionType } from 'antd/es/table/interface';
 import type { TabsProps } from 'antd/es/tabs';
+import type { ProFormColumnType } from '../ProForm/components/render/propsType';
+/**
+ * 单元格行内编辑时 onBlur 的回调函数类型
+ */
+export type TableOnBlurFn = (value: any, record: any, index: number) => void | Promise<void>;
+/**
+ * 单元格行内编辑配置
+ */
+export type EditTableCellConfig<Values = any> = Omit<ProFormColumnType<Values>, 'name' | 'label' | 'names' | 'fieldProps'> & {
+    fieldProps?: {
+        onBlur?: TableOnBlurFn;
+        [key: string]: any;
+    };
+};
 /**
  * 合计栏的每列配置参数
  */
@@ -216,6 +230,12 @@ export interface ProTableColumnType extends Omit<ColumnType<any>, 'dataIndex'> {
      * @default undefined
      */
     scroll?: any;
+    /**
+     * 行内编辑配置
+     * @description 配置后单元格支持点击图标进入编辑态
+     * @default undefined
+     */
+    editConfig?: EditTableCellConfig;
 }
 /**
  * 从数组创建树形结构的选项

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.3.0-beta.10",
+  "version": "4.3.0-beta.11",
   "license": "MIT",
   "files": [
     "es",