@syncfusion/react-inputs
Version:
Syncfusion React Input package is a feature-rich collection of UI components, including Textbox, Textarea, Numeric-textbox and Form, designed to capture user input in React applications.
116 lines (115 loc) • 4.1 kB
TypeScript
import { ChangeEvent, JSX, ReactNode } from 'react';
import { LabelMode, Variant, Size } from '@syncfusion/react-base';
export { LabelMode, Variant, Size };
/**
* Constant object containing CSS class names used throughout the component.
*/
export declare const CLASS_NAMES: {
RTL: string;
DISABLE: string;
WRAPPER: string;
INPUT: string;
INPUTGROUP: string;
FLOATINPUT: string;
FLOATTEXT: string;
CLEARICON: string;
CLEARICONHIDE: string;
LABELTOP: string;
LABELBOTTOM: string;
VALIDINPUT: string;
TEXTBOX_FOCUS: string;
};
export interface IInput {
placeholder: string;
className: string;
disabled?: boolean;
readOnly?: boolean;
floatLabelType?: LabelMode;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
}
export interface validationProps {
/**
* Specifies whether the component is a required field in a form. When set to true,
* the component will be marked as required.
*
* @default -
*/
required?: boolean;
/**
* Specifies whether to override the validity state of the component. If valid is set, the required property will be ignored.
*
* @default -
*/
valid?: boolean;
/**
* Specifies the form error message of the component.
*
* @default -
*/
validationMessage?: string;
/**
* Specifies whether to apply visual representation of the invalid state of the component.
* If set to false, no visual representation of the invalid state of the component will be applied.
*
* @default true
*/
validityStyles?: boolean;
}
export interface inputBaseProps {
/**
* Specifies the visual style variant of the component.
*
* @default Variant.Standard
*/
variant?: Variant;
/**
* Specifies the size of the component. Options include 'Small', 'Medium' and 'Large'.
*
* @default Size.Medium
*/
size?: Size;
}
/**
* Interface for input arguments.
*/
export interface IInputArgs {
customTag?: string;
floatLabelType?: LabelMode;
placeholder?: string;
width?: number | string;
value?: string;
defaultValue?: string;
type?: string;
role?: string;
name?: string;
tabIndex?: number;
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
onFocus?: any;
onBlur?: any;
onKeyDown?: any;
}
export type InputArgs = IInputArgs & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof IInputArgs>;
export declare const InputBase: React.ForwardRefExoticComponent<InputArgs & React.RefAttributes<HTMLInputElement>>;
/**
* Renders the float label element.
*
* @param {LabelMode} floatLabelType - The type of float label.
* @param {boolean} isFocused - Whether the input is focused.
* @param {string} inputValue - The current input value.
* @param {string} placeholder - The placeholder text.
* @param {any} id - The reference to the input element.
* @returns {React.ReactElement | null} A React element representing the float label, or null if not applicable.
*/
export declare const renderFloatLabelElement: (floatLabelType: LabelMode, isFocused: boolean, inputValue: string | number, placeholder: string | undefined, id: string) => React.ReactElement | null;
/**
* Renders a clear button for an input field that allows the user to clear the input.
*
* @param {string} inputValue - The current value of the input field.
* @param {() => void} clearInput - The function to call when the clear button is clicked.
* @param {boolean | ReactNode} clearButton - Determines how the clear button is rendered:
* - If `true` (default): Shows the default clear icon.
* - If `false`: Doesn't render anything.
* - If a ReactNode: Renders the provided ReactNode instead of the default icon.
* @returns {JSX.Element | null} The clear button element or null if clearButton is false.
*/
export declare const renderClearButton: (inputValue: string, clearInput: (event: React.MouseEvent) => void, clearIcon?: boolean | ReactNode, componentName?: string, locale?: string) => JSX.Element | null;