choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
248 lines (247 loc) • 7.74 kB
TypeScript
import React, { FormEvent, FormEventHandler, MouseEvent, ReactNode } from 'react';
import { AxiosInstance } from 'axios';
import { Form as IForm } from 'choerodon-ui/dataset/interface';
import { FormField, FormFieldProps, HighlightRenderer } from '../field/FormField';
import FormContext, { FormContextValue } from './FormContext';
import DataSetComponent, { DataSetComponentProps } from '../data-set/DataSetComponent';
import DataSet, { ValidationErrors } from '../data-set/DataSet';
import Record from '../data-set/Record';
import { FormLayout, LabelAlign, LabelLayout, RequiredMarkAlign, ResponsiveKeys, ShowValidation, SpacingType } from './enum';
import FormVirtualGroup from './FormVirtualGroup';
import { Tooltip as LabelTooltip } from '../core/enum';
import { ShowHelp } from '../field/enum';
import { TooltipProps } from '../tooltip/Tooltip';
export declare type LabelWidth = number | 'auto' | (number | 'auto')[];
export declare type LabelWidthType = LabelWidth | {
[key in ResponsiveKeys]: LabelWidth;
};
export declare type LabelAlignType = LabelAlign | {
[key in ResponsiveKeys]: LabelAlign;
};
export declare type LabelLayoutType = LabelLayout | {
[key in ResponsiveKeys]: LabelLayout;
};
export declare type ColumnsType = number | {
[key in ResponsiveKeys]: number;
};
export declare type SeparateSpacing = {
width: number;
height: number;
};
export declare type SpacingTypeMap = {
width: SpacingType;
height: SpacingType;
};
export interface FormProps extends DataSetComponentProps {
/**
* 表单提交请求地址
*/
action?: string;
/**
* 表单提交的HTTP Method
* 可选值:POST | GET
* @default POST
*/
method?: string;
/**
* 表单提交的目标
* 当表单设置了设置target且没有dataSet时作浏览器默认提交,否则作Ajax提交
*/
target?: string;
/**
* Ajax提交时的参数回调
*/
processParams?: (e: FormEvent<any>) => any;
/**
* 是否使用冒号
*/
useColon?: boolean;
/**
* 必输星号位置
*/
requiredMarkAlign?: RequiredMarkAlign;
/**
* @deprecated
* 不使用冒号的列表
*/
excludeUseColonTagList?: string[];
/**
* 内部控件的标签的宽度
*/
labelWidth?: LabelWidthType;
/**
* 标签文字对齐方式
* 可选值: 'left' | 'center' | 'right'
* @default right;
*/
labelAlign?: LabelAlignType;
/**
* 标签位置
* 可选值: 'horizontal' | 'vertical' | 'placeholder' | 'none'
*/
labelLayout?: LabelLayoutType;
/**
* 用tooltip显示标签内容
* 可选值:`none` `always` `overflow`
* 扩展 tooltip 属性:tooltip={['always', { theme: 'light', ... }]}
*/
labelTooltip?: LabelTooltip | [LabelTooltip, TooltipProps];
/**
* 表单列数
*/
columns?: ColumnsType;
/**
* 显示原始值
*/
pristine?: boolean;
/**
* 表单头,若提供则同时显示表单头和表单头下方的分隔线
*
* @type {string} 暂定为string方便写样式
* @memberof FormProps
*/
header?: string;
/**
* 只读
*/
readOnly?: boolean;
/**
* 对照record在DataSet中的index
* @default dataSet.currentIndex
*/
dataIndex?: number;
/**
* 对照record
* 优先级高于dataSet和dataIndex
*/
record?: Record;
/**
* 高亮渲染器
*/
fieldHighlightRenderer?: HighlightRenderer;
/**
* 提交回调
*/
onSubmit?: FormEventHandler<any>;
/**
* 重置回调
*/
onReset?: FormEventHandler<any>;
/**
* 提交成功回调
*/
onSuccess?: (resp: any) => void;
/**
* 提交失败回调
*/
onError?: (error: Error) => void;
/**
* 布局
*/
layout?: FormLayout;
/**
* 切分单元格间隔,当label布局为默认值horizontal时候使用padding修改单元格横向间距可能需要结合labelwidth效果会更好
*/
separateSpacing?: number | [number, number] | SeparateSpacing;
/**
* 切分单元格间隔类型
* @default SpacingType.around
*/
spacingType?: SpacingType | [SpacingType, SpacingType] | SpacingTypeMap;
axios?: AxiosInstance;
acceptCharset?: string;
encType?: string;
showValidation?: ShowValidation;
showHelp?: ShowHelp;
/**
* 校验失败自动定位
*/
autoValidationLocate?: boolean;
}
export default class Form extends DataSetComponent<FormProps, FormContextValue> implements IForm {
static displayName: string;
static ItemGroup: React.FunctionComponent<import("./ItemGroup").ItemGroupProps>;
static FormVirtualGroup: typeof FormVirtualGroup;
static Item: import("./Item").IItem;
static defaultProps: {
suffixCls: string;
columns: number;
labelWidth: number;
layout: FormLayout;
};
static get contextType(): typeof FormContext;
fields: FormField<FormFieldProps>[];
responsiveItems: any[];
isUnderForm?: boolean;
name: any;
validating: boolean;
prepareForReport: {
result?: boolean;
timeout?: number;
};
isTooltipShown?: boolean;
constructor(props: any, context: any);
get axios(): AxiosInstance;
get dataSet(): DataSet | undefined;
get record(): Record | undefined;
get dataIndex(): number | undefined;
get useColon(): boolean;
get requiredMarkAlign(): RequiredMarkAlign;
get excludeUseColonTagList(): string[];
get columns(): number;
get labelWidth(): LabelWidth;
get labelAlign(): LabelAlign;
get labelLayout(): LabelLayout;
get labelTooltip(): LabelTooltip | [LabelTooltip, TooltipProps] | undefined;
get readOnly(): boolean;
get pristine(): boolean;
get fieldHighlightRenderer(): boolean;
get showValidation(): ShowValidation;
get showHelp(): ShowHelp;
get separateSpacing(): SeparateSpacing | undefined;
get spacingType(): SpacingTypeMap;
isReadOnly(): boolean;
isDisabled(): boolean;
getObservableProps(props: any, context: any): any;
getOmitPropsKeys(): string[];
getOtherProps(): any;
getHeader(): ReactNode;
getClassName(...props: any[]): string | undefined;
componentWillMount(): void;
componentDidMount(): void;
componentDidUpdate(): void;
componentWillUnmount(): void;
handleFormFocus(): void;
componentDidMountOrUpdate(): void;
processDataSetListener(flag: boolean): void;
bubbleValidationReport(showInvalid: boolean): void;
handleDataSetReset({ record, dataSet }: {
record: any;
dataSet: any;
}): void;
handleDataSetRemove({ records, dataSet }: {
records: any;
dataSet: any;
}): void;
handleDataSetValidate(props: {
dataSet: DataSet;
valid: boolean;
errors: ValidationErrors[];
noLocate?: boolean;
}): void;
handleHelpMouseEnter(e: MouseEvent, help: ReactNode, helpTooltipProps: TooltipProps): void;
handleHelpMouseLeave(): void;
renderTooltipHelp(help: any, helpTooltipProps: any): JSX.Element | undefined;
rasterizedChildren(): JSX.Element;
getMergedProps(props?: {}): any;
render(): JSX.Element;
handleResponsive(items: any): void;
handleSubmit(e: any): Promise<void>;
handleReset(e: any): void;
reportValidity(result: boolean): void;
checkValidity(): Promise<boolean>;
getFields(): FormField<FormFieldProps>[];
getField(name: string): FormField<FormFieldProps> | undefined;
addField(field: FormField<FormFieldProps>): void;
removeField(field: any): void;
}