choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
399 lines (398 loc) • 12.4 kB
TypeScript
import React, { FormEventHandler, ReactInstance, ReactNode } from 'react';
import { Tooltip as TextTooltip } from '../core/enum';
import DataSet from '../data-set/DataSet';
import Record from '../data-set/Record';
import Field, { HighlightProps } from '../data-set/Field';
import Validator, { CustomValidator, ValidationMessages } from '../validator/Validator';
import Validity from '../validator/Validity';
import FormContext, { FormContextValue } from '../form/FormContext';
import DataSetComponent, { DataSetComponentProps } from '../data-set/DataSetComponent';
import { FieldFormat, FieldTrim, FieldType } from '../data-set/enum';
import ValidationResult from '../validator/ValidationResult';
import { ShowHelp } from './enum';
import { ValidatorBaseProps, ValidatorProps } from '../validator/rules';
import { LabelLayout, RequiredMarkAlign, ShowValidation } from '../form/enum';
import { ProcessValueOptions } from './utils';
import { TooltipProps } from '../tooltip/Tooltip';
export declare type Comparator = (v1: any, v2: any) => boolean;
export declare type RenderProps = {
value?: any;
text?: ReactNode;
record?: Record | null;
name?: string;
dataSet?: DataSet | null;
repeat?: number;
maxTagTextLength?: number;
multiLineFields?: Field[];
};
export declare type TagRendererProps = {
value?: any;
text?: any;
key?: string;
invalid?: boolean;
disabled?: boolean;
readOnly?: boolean;
className?: string;
onClose?: (e: any) => void;
};
export declare type Renderer<T extends RenderProps = RenderProps> = (props: T) => ReactNode;
export declare type HighlightRenderer = (highlightProps: HighlightProps, element: ReactNode) => ReactNode;
export declare function getFieldsById(id: any): FormField<FormFieldProps>[];
export interface FormFieldProps<V = any> extends DataSetComponentProps {
/**
* 内部属性,标记该组件是否位于table中,适用于CheckBox以及switch等组件
*/
_inTable?: boolean;
/**
* 标签名
*/
label?: string | ReactNode;
/**
* 标签布局
*/
labelLayout?: LabelLayout;
/**
* 标签宽度
*/
labelWidth?: number;
/**
* 用tooltip显示标签内容
* 可选值:`none` `always` `overflow`
* 扩展 tooltip 属性:tooltip={['always', { theme: 'light', ... }]}
*/
labelTooltip?: TextTooltip | [TextTooltip, TooltipProps];
/**
* 是否使用冒号
*/
useColon?: boolean;
/**
* 必输星号位置
*/
requiredMarkAlign?: RequiredMarkAlign;
/**
* 字段名
*/
name?: string;
/**
* <受控>当前值
*/
value?: any;
/**
* 默认值
*/
defaultValue?: any;
/**
* 是否必输
*/
required?: boolean;
/**
* 是否只读
*/
readOnly?: boolean;
/**
* 是否禁用
*/
disabled?: boolean;
/**
* 对照表单id
*/
form?: string;
formAction?: string;
formEncType?: string;
formMethod?: string;
formNoValidate?: boolean;
formTarget?: string;
/**
* 对照record在DataSet中的index
* @default dataSet.currentIndex
*/
dataIndex?: number;
/**
* 对照record
* 优先级高于dataSet和dataIndex
*/
record?: Record;
/**
* 是否是多值
* @default false
*/
multiple?: boolean;
/**
* 是否是范围值
* @default false
*/
range?: boolean | [string, string];
/**
* 校验器
*/
validator?: CustomValidator;
/**
* 不校验
*/
noValidate?: boolean;
/**
* 额外信息,常用作提示
*
* @type {ReactNode}
* @memberof FormFieldProps
*/
help?: ReactNode;
/**
* 另起新行
*/
newLine?: boolean;
/**
* 显示提示信息的方式
*
* @type {ShowHelp}
* @memberof FormFieldProps
*/
showHelp?: ShowHelp;
helpTooltipProps?: TooltipProps;
showValidation?: ShowValidation;
/**
* 渲染器
*/
renderer?: Renderer;
/**
* 校验信息渲染器
*/
validationRenderer?: (result: ValidationResult, props: ValidatorProps) => ReactNode;
/**
* 多值 Tag 渲染器
*/
tagRenderer?: (props: TagRendererProps) => ReactNode;
/**
* 多值标签超出最大数量时的占位描述
*/
maxTagPlaceholder?: ReactNode | ((omittedValues: any[]) => ReactNode);
/**
* 多值标签最大数量
*/
maxTagCount?: number;
/**
* 多值标签文案最大长度
*/
maxTagTextLength?: number;
/**
* 显示原始值
*/
pristine?: boolean;
/**
* 字符串值是否去掉首尾空格
* 可选值: both left right none
* @default: both
*/
trim?: FieldTrim;
/**
* 日期格式,如 `YYYY-MM-DD HH:mm:ss`
* 字符串格式,如 `uppcase` `lowercase` `capitalize`
*/
format?: string | FieldFormat;
/**
* 校验失败回调
*/
onInvalid?: (validationResults: ValidationResult[], validity: Validity, name?: string) => void;
/**
* 值变化前回调
*/
onBeforeChange?: (value: any, oldValue: any, form?: ReactInstance) => boolean | Promise<boolean>;
/**
* 值变化回调
*/
onChange?: (value: V, oldValue: V, form?: ReactInstance) => void;
/**
* 输入回调
*/
onInput?: FormEventHandler<any>;
/**
* 键盘回车回调
*/
onEnterDown?: FormEventHandler<any>;
/**
* 值清空回调
*/
onClear?: () => void;
/**
* 字段 td 类名传递 支持个性化隐藏字段
*/
fieldClassName?: string;
/**
* 阻止使用渲染器
*/
preventRenderer?: boolean;
/**
* 高亮
*/
highlight?: boolean | ReactNode | HighlightProps;
/**
* 高亮渲染器
*/
highlightRenderer?: HighlightRenderer;
/**
* 值变化前,拦截并返回新的值
*/
processValue?: (value: any, range?: 0 | 1) => any;
colSpan?: number;
rowSpan?: number;
}
export declare class FormField<T extends FormFieldProps = FormFieldProps> extends DataSetComponent<T, FormContextValue> {
static get contextType(): typeof FormContext;
static defaultProps: {
readOnly: boolean;
disabled: boolean;
noValidate: boolean;
trim: FieldTrim;
};
emptyValue?: any;
lock?: boolean;
tooltipShown?: boolean;
multipleValidateMessageLength: number;
floatLabelOffsetX?: number;
rangeTarget?: 0 | 1;
rangeValue?: [any, any] | undefined;
$validator?: Validator | undefined;
validationResults?: ValidationResult[] | undefined;
get name(): string | undefined;
get value(): any | undefined;
set value(value: any | undefined);
get labelLayout(): LabelLayout | undefined;
get labelTooltip(): TextTooltip | [TextTooltip, TooltipProps] | undefined;
get hasFloatLabel(): boolean;
get isControlled(): boolean;
get pristine(): boolean;
get defaultValidationMessages(): ValidationMessages;
get editable(): boolean;
get dataSet(): DataSet | undefined;
get record(): Record | undefined;
get dataIndex(): number | undefined;
get field(): Field | undefined;
get valid(): boolean;
get multiple(): boolean;
/**
* 获取字段货币属性
*/
get currency(): string;
get trim(): FieldTrim | undefined;
get format(): FieldFormat | string | undefined;
get range(): boolean | [string, string];
get readOnly(): boolean;
get highlight(): boolean | ReactNode;
get showValidation(): ShowValidation;
get showHelp(): ShowHelp;
get helpTooltipProps(): TooltipProps;
get highlightRenderer(): HighlightRenderer;
get rangeSeparator(): string;
getControlled(props: any): boolean;
defaultRenderer(renderProps: RenderProps): ReactNode;
/**
* 判断是否应该显示验证信息, 作为属性传给Tooltip
*
* @readonly
* @type {(undefined | boolean)}
* @memberof FormField
*/
isValidationMessageHidden(message?: ReactNode): boolean;
showValidationMessage(e: any, message?: ReactNode): void;
isEmpty(): boolean;
isValid(): boolean;
isReadOnly(): boolean;
isEditable(): boolean;
isEditableLike(): boolean;
getObservablePropsExcludeOutput(props: any, context: any): object | undefined;
getObservableProps(props: any, context: any): any;
getOmitPropsKeys(): string[];
getOtherPropsExcludeOutput(otherProps: any): any;
getOtherProps(): any;
getWrapperClassNamesExcludeOutput(prefixCls: any, empty: any): object | undefined;
getWrapperClassNames(...args: any[]): string;
renderWrapper(): ReactNode;
renderHelpMessage(): ReactNode;
getLabel(): any;
renderFloatLabel(): ReactNode;
componentDidMount(): void;
componentWillReceiveProps(nextProps: T, nextContext: any): void;
componentWillUnmount(): void;
addToForm(props: any, context: any): void;
removeFromForm(props: any, context: any): void;
renderValidationResult(validationResult?: ValidationResult): ReactNode;
getValidatorProp(key: string): any;
getValidatorProps(): ValidatorBaseProps;
getValidationResults(): ValidationResult[] | undefined;
getValidationMessage(validationResult: ValidationResult | undefined): ReactNode;
showTooltip(e: any): boolean;
handleMouseEnter(e: any): void;
handleMouseLeave(e: any): void;
handleFloatLabelMouseEnter(e: any): void;
handleFloatLabelMouseLeave(): void;
handleFocus(e: any): void;
handleBlur(e: any): void;
handleCompositionStart(): void;
handleChange(e: any): void;
handleKeyDown(e: any): void;
handleEnterDown(e: any): void;
syncValueOnBlur(value: any): void;
handleMutipleValueRemove(e: any, value: any, index: number): void;
getDateFormat(field?: Field | undefined): string;
getProcessValueOptions(): ProcessValueOptions;
processValue(value: any): ReactNode;
getDataSetValue(): any;
getTextNode(value?: any): ReactNode;
getTextByValue(value: any): ReactNode;
getText(value: any): ReactNode;
processText(value: ReactNode): ReactNode;
processRenderer(value?: any, repeat?: number): ReactNode;
processRangeValue(value?: any): [any, any];
getOldValue(): any;
getValue(): any;
getValues(): any[];
addValue(...values: any[]): void;
isLowerRange(_value1: any, _value2: any): boolean;
exchangeRangeValue(start: any, end: any): void;
prepareSetValue(...value: any[]): void;
removeValues(values: any[], index?: number): void;
removeValue(value: any, index?: number): void;
removeLastValue(): any;
afterRemoveValue(_value: any, _repeat: number): void;
beginRange(): void;
endRange(): void;
setRangeTarget(target?: 0 | 1): void;
compare(oldValue: any, newValue: any): boolean;
autoCreate(): Record | undefined;
setValue(value: any, noVaidate?: boolean): void;
afterSetValue(): void;
renderRangeValue(value: any, repeat?: number): ReactNode;
getValueKey(v: any): any;
isMultipleBlockDisabled(_v: any): boolean;
renderMultipleValues(readOnly?: boolean): {
tags: React.ReactNode;
multipleValidateMessageLength: number;
isOverflowMaxTagCount: boolean;
};
clear(): void;
checkValidity(): Promise<boolean>;
validate(value?: any, report?: boolean): Promise<boolean>;
isDisabled(): boolean;
reset(): void;
getFieldType(field?: Field | undefined): FieldType;
getProp(propName: string, fieldPropName?: string): any;
/**
* 显示类属性值获取(组件属性优先级高于 DataSet Field 属性优先级)
* @param propName 组件属性名
* @param fieldPropName Field 字段属性名
* @returns
*/
getDisplayProp(propName: string, fieldPropName?: string): any;
getTooltipValidationMessage(): ReactNode;
renderHighLight(): {} | null | undefined;
render(): JSX.Element | ({} | null | undefined)[];
forcePositionChanged(): void;
}
export default class ObserverFormField<T extends FormFieldProps> extends FormField<T & FormFieldProps> {
static defaultProps: {
readOnly: boolean;
disabled: boolean;
noValidate: boolean;
trim: FieldTrim;
};
}