UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

352 lines (351 loc) 13 kB
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; }