wix-style-react
Version:
wix-style-react
95 lines • 4.25 kB
TypeScript
import * as React from 'react';
import { TooltipProps } from '../Tooltip';
import { InputSize, InputStatus, InputValue, MinValue, MaxValue } from '../Input';
export { InputValue, MinValue, MaxValue } from '../Input';
export type NumberInputProps = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook?: string;
/** Specifies a CSS class name to be appended to the component’s root element */
className?: string;
/** Assigns a unique identifier for the root element */
id?: string;
ariaControls?: string;
ariaDescribedby?: string;
ariaLabel?: string;
autoFocus?: boolean;
autoSelect?: boolean;
autocomplete?: string;
/** Defines the initial value of an input */
defaultValue?: InputValue;
/** Specifies whether input should be disabled or not */
disabled?: boolean;
/** Specify the status of a field */
status?: InputStatus;
/** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
statusMessage?: React.ReactNode;
hideStatusSuffix?: boolean;
forceFocus?: boolean;
forceHover?: boolean;
maxLength?: number;
menuArrow?: boolean;
clearButton?: boolean;
focusOnClearClick?: boolean;
/** Reference element data when a form is submitted */
name?: string;
border?: 'standard' | 'round' | 'bottomLine' | 'none';
noLeftBorderRadius?: boolean;
noRightBorderRadius?: boolean;
/** Defines a standard input onBlur callback */
onBlur?: React.FocusEventHandler<HTMLInputElement>;
onClear?: React.MouseEventHandler<HTMLInputElement>;
onCompositionChange?: (isComposing: boolean) => void;
onEnterPressed?: React.KeyboardEventHandler<HTMLInputElement>;
onEscapePressed?: React.KeyboardEventHandler<HTMLInputElement>;
/** Defines a standard input onFocus callback */
onFocus?: (e?: React.FocusEvent<HTMLInputElement>) => void;
onInputClicked?: React.MouseEventHandler<HTMLInputElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
/** Sets a placeholder message to display */
placeholder?: string;
/** Pass a component you want to show as the prefix of the input, e.g., text, icon */
prefix?: React.ReactNode;
readOnly?: boolean;
disableEditing?: boolean;
rtl?: boolean;
/** Controls the size of the input */
size?: InputSize;
suffix?: React.ReactNode;
tabIndex?: number;
textOverflow?: 'clip' | 'ellipsis';
tooltipPlacement?: TooltipProps['placement'];
type?: string;
/** Specifies the current value of the element */
value?: string | number;
withSelection?: boolean;
required?: boolean;
/** Sets a minimum value of an input. Similar to HTML5 min attribute. */
min?: MinValue;
/** Sets a maximum value of an input. Similar to html5 max attribute. */
max?: MaxValue;
/** Specifies the interval between number values */
step?: number;
customInput?: React.ReactNode | Function;
pattern?: string;
inputRef?: (input: HTMLInputElement) => void;
strict?: boolean;
/** Specifies whether stepper should be hidden */
hideStepper?: boolean;
/** Defines a standard input onChange callback */
onChange?(value: number | null, stringValue: string): void;
/** Enables internal validation and defines a message to display when user types invalid value */
invalidMessage?: string;
/** Defines a callback function which is called on cases when invalid value is typed.
* - return { stringValue: string, { validationType: 'formatError' | 'outOfBoundsError', value: string }}
* - `validationType` - type 'formatError' is set when value is in the wrong format
* - type 'outOfBoundsError' is set when min or max props are used and value does not match the bounds
* - `value` - is set to current input value
*/
onInvalid?(stringValue: string, { validationType, value, }: {
validationType?: 'outOfBoundsError' | 'formatError';
value: string;
}): void;
};
//# sourceMappingURL=NumberInput.types.d.ts.map