/** * When you make a form, you provide a list of [[FormFields]]. Each FormField contains the ingredients to make a single widget in the form. * The actual definitions of the widgets are derived from [[BaseWidgetSpec]]. * * A FormField contains the type of data, the key to store the user input into [[CustomDataWithForms]], and some additional configuration. * @module FormFields */ /** * imports. */ import { StringWidget, NumberWidget, BooleanWidget, DateWidget, RadioGroupWidget, CheckboxGroupWidget, TimeWidget } from './widgets'; import { MakePropertyRequired } from '../internal'; /** * Data type of a fields. e.g. string, number */ export declare const FieldType: { readonly string: "string"; readonly number: "number"; readonly boolean: "boolean"; readonly date: "date"; readonly checkboxGroup: "checkboxGroup"; readonly radioGroup: "radioGroup"; readonly time: "time"; }; /** * An abstract validation entry. */ export interface ValidationEntry { /** * Message displayed to the user when input is invalid. */ invalidMessage?: string; /** * Validation argument to test against. */ arg?: T; } /** * The base type for form fields. */ export interface BaseField { /** * Field data type. */ type: T; /** * The property key that this field value will appear in the returned {@link NotificationFormSubmittedEvent.form|form} object. */ key: string; /** * Default value for field, and where it will be written to */ value?: D; /** * Validation rules used to validate user input. */ validation?: Record; /** * Input label. */ label?: string; /** * Helper text. */ helperText?: string; } /** * String field within a form. */ export interface StringField extends BaseField<'string', string> { validation?: Partial<{ /** * Minimum number of characters. */ min: ValidationEntry; /** * Maximum number of characters. */ max: ValidationEntry; /** * Length of the input string. */ length: ValidationEntry; /** * The field is required to be filled in by the user. */ required: ValidationEntry; /** * Provide a regex string that will be tested against the input value. */ match: ValidationEntry; }>; /** * What input widget is used. * @default StringWidgets {@link StringWidgets} */ widget: W; } /** * Number field within a form. */ export interface NumberField extends BaseField<'number', number> { validation?: Partial<{ /** * Minimum number of characters. */ min: ValidationEntry; /** * Maximum number of characters. */ max: ValidationEntry; /** * Number must be less than this. */ lessThan: ValidationEntry; /** * Number must be more than this. */ moreThan: ValidationEntry; /** * Number must be positive. */ positive: ValidationEntry; /** * Number must be negative. */ negative: ValidationEntry; /** * The field is required to be filled in by the user. */ required: ValidationEntry; }>; widget: W; } export interface BooleanField extends BaseField<'boolean', boolean> { widget: W; } export type DateFieldValue = { date?: number; month?: number; year?: number; }; export interface DateField extends BaseField<'date', DateFieldValue> { widget: W; } export type TimeFieldValue = { hour?: number; minute?: number; }; export interface TimeField extends BaseField<'time', TimeFieldValue> { widget: W; } export interface RadioGroupField extends BaseField<'radioGroup', string> { widget: W; } export interface CheckboxGroupField extends BaseField<'checkboxGroup', Array> { widget: W; } /** * A field in a form. */ export type FormField = StringField | NumberField | BooleanField | DateField | RadioGroupField | CheckboxGroupField | TimeField; /** * A field in a form. * * The difference with [[FormField]] is that the label property is required. */ export type FormFieldWithRequiredLabel = MakePropertyRequired; /** * A field in a form. Either [[FormField]] or [[FormFieldWithRequiredLabel]] */ export type AnyFormField = FormField | FormFieldWithRequiredLabel; /** * An ordered array of fields representing a form. * When the form is displayed to the user the fields will appear in the same order they are in the array. */ export type NotificationFormData = ReadonlyArray; /** * An ordered array of fields representing a form. * When the form is displayed to the user the fields will appear in the same order they are in the array. * * The difference with [[NotificationFormData]] is that the label property is required for each field. */ export type NotificationFormDataWithRequiredLabel = ReadonlyArray;