choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
352 lines (351 loc) • 13 kB
TypeScript
import React, { FormEvent, FormEventHandler, ReactNode, MouseEvent } from 'react';
import PropTypes from 'prop-types';
import { AxiosInstance } from 'axios';
import { Form as IForm } from 'choerodon-ui/dataset/interface';
import { FormField, FormFieldProps, HighlightRenderer } from '../field/FormField';
import { 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, ResponsiveKeys, ShowValidation } from './enum';
import FormVirtualGroup from './FormVirtualGroup';
import { Tooltip as LabelTooltip } from '../core/enum';
import { ShowHelp } from '../field/enum';
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 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;
/**
* @deprecated
* 不使用冒号的列表
*/
excludeUseColonTagList?: string[];
/**
* 内部控件的标签的宽度
*/
labelWidth?: LabelWidthType;
/**
* 标签文字对齐方式
* 可选值: 'left' | 'center' | 'right'
* @default right;
*/
labelAlign?: LabelAlignType;
/**
* 标签位置
* 可选值: 'horizontal' | 'vertical' | 'placeholder' | 'none'
*/
labelLayout?: LabelLayoutType;
/**
* 用tooltip显示标签内容
* 可选值:`none` `always` `overflow`
*/
labelTooltip?: LabelTooltip;
/**
* 表单列数
*/
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?: SeparateSpacing;
axios?: AxiosInstance;
acceptCharset?: string;
encType?: string;
showValidation?: ShowValidation;
showHelp?: ShowHelp;
}
export default class Form extends DataSetComponent<FormProps, FormContextValue> implements IForm {
static displayName: string;
static FormVirtualGroup: typeof FormVirtualGroup;
static Item: import("./Item").IItem;
static propTypes: {
id: PropTypes.Requireable<string>;
size: PropTypes.Requireable<import("../core/enum").Size>;
suffixCls: PropTypes.Requireable<string>;
prefixCls: PropTypes.Requireable<string>;
title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
disabled: PropTypes.Requireable<boolean>;
hidden: PropTypes.Requireable<boolean>;
autoFocus: PropTypes.Requireable<boolean>;
accessKey: PropTypes.Requireable<string | boolean>;
dir: PropTypes.Requireable<string>;
contentEditable: PropTypes.Requireable<string | boolean>;
draggable: PropTypes.Requireable<string | boolean>;
style: PropTypes.Requireable<object>;
className: PropTypes.Requireable<string>;
tabIndex: PropTypes.Requireable<number>;
lang: PropTypes.Requireable<string>;
spellCheck: PropTypes.Requireable<boolean>;
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
onClick: PropTypes.Requireable<(...args: any[]) => any>;
onDoubleClick: PropTypes.Requireable<(...args: any[]) => any>;
onMouseUp: PropTypes.Requireable<(...args: any[]) => any>;
onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
onMouseMove: PropTypes.Requireable<(...args: any[]) => any>;
onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
onContextMenu: PropTypes.Requireable<(...args: any[]) => any>;
onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
onKeyUp: PropTypes.Requireable<(...args: any[]) => any>;
onKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
dataSet: PropTypes.Requireable<object>;
/**
* 表单提交请求地址
*/
action: PropTypes.Requireable<string>;
/**
* 表单提交的HTTP Method
* 可选值:POST | GET
* @default POST
*/
method: PropTypes.Requireable<string>;
/**
* 表单提交的目标
* 当表单设置了设置target且没有dataSet时作浏览器默认提交,否则作Ajax提交
*/
target: PropTypes.Requireable<string>;
/**
* Ajax提交时的参数回调
*/
processParams: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 只读
*/
readOnly: PropTypes.Requireable<boolean>;
/**
* 内部控件的标签的宽度
*/
labelWidth: PropTypes.Requireable<string | number | (string | number | null | undefined)[] | PropTypes.InferProps<{
[ResponsiveKeys.xs]: PropTypes.Requireable<string | number | (string | number | null | undefined)[]>;
[ResponsiveKeys.sm]: PropTypes.Requireable<string | number | (string | number | null | undefined)[]>;
[ResponsiveKeys.md]: PropTypes.Requireable<string | number | (string | number | null | undefined)[]>;
[ResponsiveKeys.lg]: PropTypes.Requireable<string | number | (string | number | null | undefined)[]>;
[ResponsiveKeys.xl]: PropTypes.Requireable<string | number | (string | number | null | undefined)[]>;
[ResponsiveKeys.xxl]: PropTypes.Requireable<string | number | (string | number | null | undefined)[]>;
}>>;
useColon: PropTypes.Requireable<boolean>;
excludeUseColonTagList: PropTypes.Requireable<any[]>;
/**
* 标签文字对齐方式
* 可选值: 'left' | 'center' | 'right'
*/
labelAlign: PropTypes.Requireable<LabelAlign | PropTypes.InferProps<{
[ResponsiveKeys.xs]: PropTypes.Requireable<LabelAlign>;
[ResponsiveKeys.sm]: PropTypes.Requireable<LabelAlign>;
[ResponsiveKeys.md]: PropTypes.Requireable<LabelAlign>;
[ResponsiveKeys.lg]: PropTypes.Requireable<LabelAlign>;
[ResponsiveKeys.xl]: PropTypes.Requireable<LabelAlign>;
[ResponsiveKeys.xxl]: PropTypes.Requireable<LabelAlign>;
}>>;
/**
* 标签位置
* 可选值: 'horizontal' | 'vertical' | 'placeholder' | 'float' | 'none'
*/
labelLayout: PropTypes.Requireable<LabelLayout | PropTypes.InferProps<{
[ResponsiveKeys.xs]: PropTypes.Requireable<LabelLayout>;
[ResponsiveKeys.sm]: PropTypes.Requireable<LabelLayout>;
[ResponsiveKeys.md]: PropTypes.Requireable<LabelLayout>;
[ResponsiveKeys.lg]: PropTypes.Requireable<LabelLayout>;
[ResponsiveKeys.xl]: PropTypes.Requireable<LabelLayout>;
[ResponsiveKeys.xxl]: PropTypes.Requireable<LabelLayout>;
}>>;
/**
* 表单列数
*/
columns: PropTypes.Requireable<number | PropTypes.InferProps<{
[ResponsiveKeys.xs]: PropTypes.Requireable<number>;
[ResponsiveKeys.sm]: PropTypes.Requireable<number>;
[ResponsiveKeys.md]: PropTypes.Requireable<number>;
[ResponsiveKeys.lg]: PropTypes.Requireable<number>;
[ResponsiveKeys.xl]: PropTypes.Requireable<number>;
[ResponsiveKeys.xxl]: PropTypes.Requireable<number>;
}>>;
pristine: PropTypes.Requireable<boolean>;
/**
* 表单头
*/
header: PropTypes.Requireable<string>;
/**
* 高亮渲染器
*/
fieldHighlightRenderer: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 提交回调
*/
onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 重置回调
*/
onReset: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 提交成功回调
*/
onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 提交失败回调
*/
onError: PropTypes.Requireable<(...args: any[]) => any>;
separateSpacing: PropTypes.Requireable<object>;
/**
* 校验信息提示方式
*/
showValidation: PropTypes.Requireable<string>;
showHelp: PropTypes.Requireable<string>;
};
static defaultProps: {
suffixCls: string;
columns: number;
labelWidth: number;
layout: FormLayout;
};
static get contextType(): React.Context<FormContextValue>;
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 excludeUseColonTagList(): string[];
get columns(): number;
get labelWidth(): LabelWidth;
get labelAlign(): LabelAlign;
get labelLayout(): LabelLayout;
get labelTooltip(): LabelTooltip | undefined;
get readOnly(): boolean;
get pristine(): boolean;
get fieldHighlightRenderer(): boolean;
get showValidation(): ShowValidation;
get showHelp(): ShowHelp;
get separateSpacing(): SeparateSpacing | undefined;
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;
componentDidMountOrUpdate(): void;
processDataSetListener(flag: boolean): void;
handleDataSetValidate({ valid, errors: validationErrors, noLocate }: {
valid: boolean;
errors: ValidationErrors[];
noLocate?: boolean;
}): void;
handleHelpMouseEnter(e: MouseEvent, help: string): void;
handleHelpMouseLeave(): void;
renderTooltipHelp(help: any): JSX.Element | undefined;
rasterizedChildren(): JSX.Element;
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;
}