199 lines
7.6 KiB
TypeScript
199 lines
7.6 KiB
TypeScript
import type { FormInstance, FormProps } from 'antd';
|
|
import { AnyObject } from 'antd/es/_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>;
|