@flatbiz/antd/dist/form-item-text/index.d.ts

import { TAny, TPlainObject } from '@flatbiz/utils';
import { FormItemProps } from 'antd';
import { CSSProperties, ReactElement, ReactNode } from 'react';

export type TFormItemLayoutPreClassNameProps = {
	/**
	 * label宽度，Form内部所有FormItem label都生效
	 * ```
	 * 1. 可设置数值
	 * 2. 可设置`auto`自适应
	 * ```
	 */
	labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200";
	/** labelItem 竖直布局 */
	labelItemVertical?: boolean;
	/** label 对齐方式 */
	labelAlign?: "left" | "right";
	/**
	 * className 中可能会包含 preDefinedClassName.formItem.xx，优先级大于 labelWidth、labelItemVertical、labelAlign
	 */
	className?: string;
};
export type FormItemWrapperProps = Omit<FormItemProps, "hidden" | "children" | "noStyle"> & TFormItemLayoutPreClassNameProps & {
	wrapper?: (children: ReactNode) => ReactElement;
	/** 设置wrapper后，before、after失效 */
	before?: ReactNode;
	/** 设置wrapper后，before、after失效 */
	after?: ReactNode;
	/** 设置 before、after 属性的包装结构style */
	beforeAfterStyle?: CSSProperties;
	/** value 序列化处理 */
	inputNormalize?: (value?: TAny) => TAny;
	/**
	 * onChange 参数序列化处理
	 * 如果设置 normalize 属性，outputNormalize将失效
	 */
	outputNormalize?: (value?: TAny) => TAny;
	/**
	 * 隐藏 Form.Item，同时清除 Form.Item 值
	 * ```
	 * 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏
	 * 2.提交不校验rules
	 * ```
	 */
	isClear?: boolean | ((formValues: TPlainObject) => boolean);
	/**
	 * 隐藏 Form.Item，不会清除 Form.Item 值
	 * ```
	 * 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏
	 * 2.提交会校验rules
	 * ```
	 */
	hidden?: boolean | ((formValues: TPlainObject) => boolean);
	/**
	 * 栅格占位格数，最大值：24
	 * ```
	 * 1. 当前FormItemWrapper处在 EasyForm 直接子节点中有效，即FormItemWrapper在EasyForm栅格中的占位格数；
	 * 2. 父节点使用属性值，当前节点不使用属性值
	 * ```
	 */
	span?: number;
	/** 不支持函数式写法，如果需要使用dependencies获取表单值，可使用FormItemWrapperDependencies 组件  */
	children?: ReactNode;
	/**
	 * ```
	 * 1. 设置noStyle后，可能会导致 FromItemWrapper 在 EasyFrom 内部渲染网格布局时出现异常
	 * 2. 在FormItemWrapper中使用 dependencies 逻辑不需要设置 noStyle
	 * ```
	 */
	noStyle?: boolean;
};
export type FormItemTextServiceConfig = {
	onRequest: (params?: TAny) => Promise<TAny>;
	/** 接口参数，当params发生变化后，会主动发送查询请求 */
	params?: TPlainObject;
	/** 标记serviceConfig.params中无效参数，被设置的params key 不传入服务接口入参  */
	invalidParamKey?: string[];
	/** 如果没有配置 render，返回结果会直接进行dom渲染，如果非string类型会进行JSON.stringify处理 */
	onResponseAdapter?: (respData?: TAny, value?: TAny) => TAny;
	/** 必须参数key列表，与params配合使用 */
	requiredParamsKeys?: string[];
};
export type FormItemTextProps = Omit<FormItemWrapperProps, "onChange"> & {
	/** 是否换行，默认不换行，超出省略（鼠标悬浮可显示） */
	wrap?: boolean;
	/** 自定义数据显示 */
	render?: (value?: TAny) => ReactNode;
	/** 占位值，当 value 为 ''、undefined、null时显示 */
	placeholderValue?: string;
	/**
	 * 发起服务调用显示数据，例如：数据为key，通过key查询text显示
	 * ```
	 * 1. 当serviceConfig.params发生变化后，会主动发送查询请求
	 * ```
	 */
	serviceConfig?: FormItemTextServiceConfig;
};
/**
 * FormItem 文本显示，默认不换行，超出省略（鼠标悬浮可显示）
 * ```
 * 可通过配置 serviceConfig 通过接口获取数据，一般用于 Select 数据显示
 *
 * 例如：
 * 1. 基本数据渲染
 * <FormItemText name="xxx" label="xxx" />
 * 2. 对象数据渲染
 * <FormItemText
 *   name="xxx"
 *   label="xxx"
 *   render={(value) => {
 *     const target = [].find(
 *       (item) => item.value === value,
 *     );
 *     return target ? (
 *       <Tag color={target['color']}>{target.label}</Tag>
 *     ) : null;
 *   }}
 * />
 * 3. 接口数据渲染
 * <FormItemText
 *   name="xxx"
 *   label="xxx"
 *   serviceConfig={{
 *     onRequest: () => {
 *       return serviceHandle.request('/random/api9468', {}, 'post');
 *     },
 *     onResponseAdapter: (dataList: TPlainObject[], value) => {
 *       return dataList?.find((item) => item.value === value);
 *     },
 *   }}
 *   render={(dataItem) => {
 *     return dataItem ? (
 *       <Tag style={{ margin: 0 }} color={dataItem['color']}>
 *         {dataItem.label}
 *       </Tag>
 *     ) : null;
 *   }}
 * />
 * ```
 */
export declare const FormItemText: {
	(props: FormItemTextProps): import("react").JSX.Element;
	domTypeName: string;
};

export {};