@flatbiz/antd
Version:
57 lines (54 loc) • 1.87 kB
TypeScript
import { TAny } from '@flatbiz/utils';
import { CSSProperties, ReactElement, ReactNode } from 'react';
export interface EditableFieldProps {
className?: string;
style?: CSSProperties;
editRender: ReactElement | ((data: {
value?: TAny;
onChange?: (data?: TAny) => void;
}) => ReactElement);
viewRender?: (value?: TAny) => ReactNode;
value?: TAny;
onChange?: (data?: TAny) => void;
placeholderValue?: string;
/** edit 区域是否铺满,showEditableIcon=false 无效 */
isEditFull?: boolean;
/** 只读状态 */
readonly?: boolean;
/** 显示为编辑状态 */
showEditable?: boolean;
/** 是否显示编辑、确认、取消操作icon,默认值:true */
showEditableIcon?: boolean;
/** 点击编辑按钮,操作前,返回reject不会开启编辑效果 */
onClickEditIconPre?: (value?: TAny) => Promise<void>;
onEditCallback?: (value?: TAny) => void;
/** 点击确定按钮,操作前,返回reject不会执行确定功能 */
onClickConfirmIconPre?: (value?: TAny, preValue?: TAny) => Promise<void>;
onConfirmCallback?: (value?: TAny, preValue?: TAny) => void;
/** 组件操作Icon配置 */
iconConfig?: {
editIcon?: (options: {
onClick: () => void;
}) => ReactElement;
confirmIcon?: (options: {
onClick: () => void;
}) => ReactElement;
cancelIcon?: (options: {
onClick: () => void;
}) => ReactElement;
};
}
/**
* 可编辑字段组件
* @param props
* @returns
* ```
* 字段渲染有两种状态
* 1. 只读:如果value类型为复杂格式,必须要通过【viewRender】来进行处理操作,转成简单数据类型
* 2. 编辑:参数value的格式要求必须满足编辑组件入参value要求
* 3. 可自定义编辑Icon、确定Icon、取消Icon
* 4. 可拦截编辑操作、确定操作
* ```
*/
export declare const EditableField: (props: EditableFieldProps) => any;
export {};