@progress/kendo-react-common
Version:
React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package
219 lines (218 loc) • 10.2 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
/**
* Represents the basic props of the KendoReact form components.
*
* For runnable examples on forms support, refer to the documentation of the respective form component:
* * [DateInput](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/forms)
* * [DatePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/forms)
* * [TimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/forms)
* * [DateTimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/forms)
* * [AutoComplete](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/forms)
* * [ComboBox](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/forms)
* * [DropDownList](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/forms)
* * [MultiSelect](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/forms)
* * [Input](https://www.telerik.com/kendo-react-ui/components/inputs/input/forms)
* * [MaskedTextBox](https://www.telerik.com/kendo-react-ui/components/inputs/maskedtextbox/forms)
* * [NumericTextBox](https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/forms)
* * [Checkbox](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/forms-support)
* * [Switch](https://www.telerik.com/kendo-react-ui/components/inputs/switch/forms-support)
*/
export interface FormComponentProps {
/**
* Controls the form error message of the component. If set to an empty string, no error will be thrown.
*
* This property is part of the [FormComponentProps](https://www.telerik.com/kendo-react-ui/components/common/api/formcomponentprops) interface.
*/
validationMessage?: string;
/**
* Specifies if `null` is a valid value for the component.
*
* This property is part of the [FormComponentProps](https://www.telerik.com/kendo-react-ui/components/common/api/formcomponentprops) interface.
*/
required?: boolean;
/**
* Specifies the `name` property of the `input` DOM element.
*
* This property is part of the [FormComponentProps](https://www.telerik.com/kendo-react-ui/components/common/api/formcomponentprops) interface.
*/
name?: string;
/**
* Overrides the validity state of the component.
* If `valid` is set, the `required` property will be ignored.
*
* This property is part of the [FormComponentProps](https://www.telerik.com/kendo-react-ui/components/common/api/formcomponentprops) interface.
*/
valid?: boolean;
/**
* If set to `false`, no visual representation of the invalid state of the component will be applied.
*
* This property is part of the [FormComponentProps](https://www.telerik.com/kendo-react-ui/components/common/api/formcomponentprops) interface.
*/
validityStyles?: boolean;
/**
* @hidden
*/
value?: any;
/**
* @hidden
*/
defaultValue?: any;
}
/**
* Represents the `validity` state of the KendoReact form components.
*
* For runnable examples on forms support, refer to the documentation of the respective form component:
* * [DateInput](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/forms)
* * [DatePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/forms)
* * [TimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/forms)
* * [DateTimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/forms)
* * [AutoComplete](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/forms)
* * [ComboBox](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/forms)
* * [DropDownList](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/forms)
* * [MultiSelect](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/forms)
* * [Input](https://www.telerik.com/kendo-react-ui/components/inputs/input/forms)
* * [MaskedTextBox](https://www.telerik.com/kendo-react-ui/components/inputs/maskedtextbox/forms)
* * [NumericTextBox](https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/forms)
* * [Checkbox](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/forms-support)
* * [Switch](https://www.telerik.com/kendo-react-ui/components/inputs/switch/forms-support)
*/
export interface FormComponentValidity {
/**
* Indicates whether the user has provided input in the user interface element that the user agent is unable to convert.
*/
readonly badInput?: boolean;
/**
* Indicates whether the element has a custom error.
*/
readonly customError: boolean;
/**
* Indicates whether the value does not match the specified pattern.
*/
readonly patternMismatch?: boolean;
/**
* Indicates whether the value is greater than the maximum specified by the max attribute.
*/
readonly rangeOverflow?: boolean;
/**
* Indicates whether the value is less than the minimum specified by the min attribute.
*/
readonly rangeUnderflow?: boolean;
/**
* Indicates whether the value does not fit the rules determined by the step attribute.
*/
readonly stepMismatch?: boolean;
/**
* Indicates whether the value exceeds the specified maxlength.
*/
readonly tooLong?: boolean;
/**
* Indicates whether the value fails to meet the specified minlength.
*/
readonly tooShort?: boolean;
/**
* Indicates whether the value is not in the correct syntax when type is email or url.
*/
readonly typeMismatch?: boolean;
/**
* Indicates whether the element meets all constraint validations and is therefore considered valid.
*/
readonly valid: boolean;
/**
* Indicates whether the element has no value but is a required field.
*/
readonly valueMissing: boolean;
}
/**
* @hidden
*/
export declare abstract class FormComponent {
abstract get value(): any;
abstract get validity(): FormComponentValidity;
abstract get name(): string | undefined;
}
/**
* Represents the base properties of the render props for the KendoReact form components.
*
* For runnable examples on forms support, refer to the documentation of the respective form component:
* * [DateInput](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/forms)
* * [DatePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/forms)
* * [TimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/forms)
* * [DateTimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/forms)
* * [AutoComplete](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/forms)
* * [ComboBox](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/forms)
* * [DropDownList](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/forms)
* * [MultiSelect](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/forms)
* * [Input](https://www.telerik.com/kendo-react-ui/components/inputs/input/forms)
* * [MaskedTextBox](https://www.telerik.com/kendo-react-ui/components/inputs/maskedtextbox/forms)
* * [NumericTextBox](https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/forms)
* * [Checkbox](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/forms-support)
* * [Switch](https://www.telerik.com/kendo-react-ui/components/inputs/switch/forms-support)
*/
export interface FieldRenderPropsBase {
/**
* A callback you have to call when the value of the rendered component is changed
* ([see example](https://www.telerik.com/kendo-react-ui/components/form/advanced-scenarios#toc-changing-the-field-value)).
* The `value` property of the event takes precedence over `target.value`.
*/
onChange: (event: {
target?: any;
value?: any;
}) => void;
/**
* A callback you have to call when the rendered component is focused.
* Responsible for setting the visited state of the Field.
*/
onFocus: () => void;
/**
* A callback you have to call when the rendered component is blurred.
* Responsible for setting the touched state of the Field.
*/
onBlur: () => void;
/**
* Represents the current value of the Field
* ([see example](https://www.telerik.com/kendo-react-ui/components/form/custom-components#toc-using-basic-properties)).
*/
value: any;
/**
* Represents the error message that is returned by the validator.
* The Field is considered valid if the `validationMessage` field is empty.
*/
validationMessage: string | null;
/**
* Indicates if the field is touched.
* The touched state is set to `true` when the `onBlur` callback is called.
*/
touched: boolean;
/**
* Indicates if the field is modified.
* The modified state is set to `true` when the `onChange` callback for the current field is called for first time.
*/
modified: boolean;
/**
* Indicates if the field is visited.
* The visited state is set to `true` when the `onFocus` callback is called.
*/
visited: boolean;
/**
* A calculated property based on whether `validationMessage` is present and the `touched` state is set to `true`.
*/
valid: boolean;
/**
* Represents the children that are passed to the Field.
*/
children: any;
/**
* The name of the field in the Form state.
*/
name: string;
/**
* @hidden
*/
[customProp: string]: any;
}