UNPKG

choerodon-ui

Version:

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

248 lines (247 loc) 7.74 kB
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; }