UNPKG

choerodon-ui

Version:

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

399 lines (398 loc) 12.4 kB
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; }; }