@ant-design/pro-components 2.8.10 → 3.0.0-beta.2

package/es/utils/useEditableArray/index.d.ts

@@ -0,0 +1,198 @@
+import type { FormInstance, FormProps } from 'antd';
+import { AnyObject } from 'antd/lib/_util/type';
+import type { NamePath } from 'antd/lib/form/interface';
+import type { GetRowKey } from 'antd/lib/table/interface';
+import React from 'react';
+export type RowEditableType = 'single' | 'multiple';
+export type RecordKey = React.Key | React.Key[];
+export declare const recordKeyToString: (rowKey: RecordKey) => React.Key;
+export type AddLineOptions = {
+    position?: 'top' | 'bottom';
+    recordKey?: RecordKey;
+    newRecordType?: 'dataSource' | 'cache';
+    /** 要增加到哪个节点下，一般用于多重嵌套表格 */
+    parentKey?: RecordKey;
+};
+export type NewLineConfig<T> = {
+    defaultValue?: T;
+    options: AddLineOptions;
+};
+export type ActionRenderFunction<T> = (row: T, config: ActionRenderConfig<T, NewLineConfig<T>>, defaultDoms: {
+    save: React.ReactNode;
+    delete: React.ReactNode;
+    cancel: React.ReactNode;
+}) => React.ReactNode[];
+export type RowEditableConfig<DataType> = {
+    /** @name 控制可编辑表格的 From的设置 */
+    formProps?: Omit<FormProps<DataType> & {
+        formRef?: React.Ref<FormInstance | undefined>;
+        onInit?: (values: DataType, form: FormInstance) => void;
+    }, 'onFinish'>;
+    /** @name 控制可编辑表格的 form */
+    form?: FormInstance;
+    /**
+     * @type single | multiple
+     * @name 编辑的类型，支持单选和多选
+     */
+    type?: RowEditableType;
+    /** @name 正在编辑的列 */
+    editableKeys?: React.Key[];
+    /** 正在编辑的列修改的时候 */
+    onChange?: (editableKeys: React.Key[], editableRows: DataType[] | DataType) => void;
+    /** 正在编辑的列修改的时候 */
+    onValuesChange?: (record: DataType, dataSource: DataType[]) => void;
+    /** @name 自定义编辑的操作 */
+    actionRender?: ActionRenderFunction<DataType>;
+    /** 行保存的时候 */
+    onSave?: (
+    /** 行 id，一般是唯一id */
+    key: RecordKey, 
+    /** 当前修改的行的值，只有 form 在内的会被设置 */
+    record: DataType & {
+        index?: number;
+    }, 
+    /** 原始值，可以用于判断是否修改 */
+    originRow: DataType & {
+        index?: number;
+    }, 
+    /** 新建一行的配置，一般无用 */
+    newLineConfig?: NewLineConfig<DataType>) => Promise<any | void>;
+    /** 行取消的时候 */
+    onCancel?: (
+    /** 行 id，一般是唯一id */
+    key: RecordKey, 
+    /** 当前修改的行的值，只有 form 在内的会被设置 */
+    record: DataType & {
+        index?: number;
+    }, 
+    /** 原始值，可以用于判断是否修改 */
+    originRow: DataType & {
+        index?: number;
+    }, 
+    /** 新建一行的配置，一般无用 */
+    newLineConfig?: NewLineConfig<DataType>) => Promise<any | void>;
+    /** 行删除的时候 */
+    onDelete?: (key: RecordKey, row: DataType & {
+        index?: number;
+    }) => Promise<any | void>;
+    /** 删除行时的确认消息 */
+    deletePopconfirmMessage?: React.ReactNode;
+    /** 只能编辑一行的的提示 */
+    onlyOneLineEditorAlertMessage?: React.ReactNode;
+    /** 同时只能新增一行的提示 */
+    onlyAddOneLineAlertMessage?: React.ReactNode;
+    /** Table 上设置的name，用于拼接name来获取数据 */
+    tableName?: NamePath;
+    /** 保存一行的文字 */
+    saveText?: React.ReactNode;
+    /** 取消编辑一行的文字 */
+    cancelText?: React.ReactNode;
+    /** 删除一行的文字 */
+    deleteText?: React.ReactNode;
+    /**
+     * 解决分页带来的 FormItem namePath 使用错误的 index 作为路径
+     * @link https://github.com/ant-design/pro-components/issues/7790
+     */
+    getRealIndex?: (record: DataType) => number;
+};
+export type ActionTypeText<T> = {
+    deleteText?: React.ReactNode;
+    cancelText?: React.ReactNode;
+    saveText?: React.ReactNode;
+    editorType?: 'Array' | 'Map';
+    addEditRecord?: (row: T, options?: AddLineOptions) => boolean;
+};
+export type ActionRenderConfig<T, LineConfig = NewLineConfig<T>> = {
+    editableKeys?: RowEditableConfig<T>['editableKeys'];
+    recordKey: RecordKey;
+    preEditRowRef: React.MutableRefObject<T | null>;
+    index?: number;
+    cancelEditable: (key: RecordKey) => void;
+    onSave: RowEditableConfig<T>['onSave'];
+    onCancel: RowEditableConfig<T>['onCancel'];
+    onDelete?: RowEditableConfig<T>['onDelete'];
+    deletePopconfirmMessage: RowEditableConfig<T>['deletePopconfirmMessage'];
+    setEditableRowKeys: (value: React.Key[]) => void;
+    newLineConfig?: LineConfig;
+    tableName?: NamePath;
+    children?: React.ReactNode;
+} & ActionTypeText<T>;
+/**
+ * 使用map 来删除数据，性能一般 但是准确率比较高
+ *
+ * @param keyProps
+ * @param action
+ */
+export declare function editableRowByKey<RecordType>(keyProps: {
+    data: RecordType[];
+    childrenColumnName: string;
+    getRowKey: GetRowKey<RecordType>;
+    key: RecordKey;
+    row: RecordType;
+}, action: 'update' | 'top' | 'delete'): RecordType[];
+/**
+ * 保存按钮的dom
+ *
+ * @param ActionRenderConfig
+ */
+export declare function SaveEditableAction<T>({ recordKey, onSave, row, children, newLineConfig, editorType, tableName, }: ActionRenderConfig<T> & {
+    row: any;
+    children: any;
+}, ref: React.Ref<SaveEditableActionRef<T>>): import("react/jsx-runtime").JSX.Element;
+export type SaveEditableActionRef<T = any> = {
+    /**
+     * 直接触发保存动作
+     *
+     * @throws 如果校验失败，会抛出异常
+     *  */
+    save: () => ReturnType<NonNullable<RowEditableConfig<T>['onSave']>> | Promise<void>;
+};
+/**
+ * 删除按钮 dom
+ *
+ * @param ActionRenderConfig
+ */
+export declare const DeleteEditableAction: React.FC<ActionRenderConfig<any> & {
+    row: any;
+}>;
+export declare function defaultActionRender<T>(row: T, config: ActionRenderConfig<T, NewLineConfig<T>>): {
+    save: import("react/jsx-runtime").JSX.Element;
+    saveRef: React.RefObject<SaveEditableActionRef<T>>;
+    delete: import("react/jsx-runtime").JSX.Element | undefined;
+    cancel: import("react/jsx-runtime").JSX.Element;
+};
+/**
+ * 一个方便的hooks 用于维护编辑的状态
+ *
+ * @param props
+ */
+export declare function useEditableArray<RecordType extends AnyObject>(props: RowEditableConfig<RecordType> & {
+    getRowKey: GetRowKey<RecordType>;
+    dataSource: RecordType[];
+    onValuesChange?: (record: RecordType, dataSource: RecordType[]) => void;
+    childrenColumnName: string | undefined;
+    setDataSource: (dataSource: RecordType[]) => void;
+}): {
+    editableKeys: React.Key[] | undefined;
+    setEditableRowKeys: (updater: React.Key[] | ((origin: React.Key[] | undefined) => React.Key[] | undefined) | undefined, ignoreDestroy?: boolean | undefined) => void;
+    isEditable: (row: RecordType & {
+        index: number;
+    }) => {
+        recordKey: string;
+        isEditable: any;
+        preIsEditable: any;
+    };
+    actionRender: (row: RecordType & {
+        index: number;
+    }) => React.ReactNode[] | (import("react/jsx-runtime").JSX.Element | undefined)[];
+    startEditable: (recordKey: React.Key, record?: RecordType | undefined) => boolean;
+    cancelEditable: (recordKey: RecordKey, needReTry?: boolean | undefined) => Promise<true | undefined>;
+    addEditRecord: (row: RecordType, options?: AddLineOptions | undefined) => boolean;
+    saveEditable: (recordKey: RecordKey, needReTry?: boolean | undefined) => Promise<boolean>;
+    newLineRecord: NewLineConfig<RecordType> | undefined;
+    preEditableKeys: React.Key[] | undefined;
+    onValuesChange: (value: RecordType, values: RecordType) => void;
+    getRealIndex: ((record: RecordType) => number) | undefined;
+};
+export type UseEditableType = typeof useEditableArray;
+export type UseEditableUtilType = ReturnType<UseEditableType>;