@acusti/css-value-input
Version:
React component that renders a text input that can take and update a CSS value of a particular type with a default unit
44 lines (43 loc) • 1.91 kB
TypeScript
import { CSSValueType } from '../../css-values/src';
import { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode, Ref } from 'react';
export type Props = {
/**
* Boolean indicating if the user can submit an empty value (i.e. clear
* the value). Defaults to true.
*/
allowEmpty?: boolean;
className?: string;
cssValueType?: CSSValueType;
disabled?: boolean;
/**
* Function that receives a value and converts it to its numerical equivalent
* (i.e. '12px' → 12). Defaults to parseFloat().
*/
getValueAsNumber?: (value: number | string) => number;
icon?: ReactNode;
label?: string;
max?: number;
min?: number;
name?: string;
onBlur?: (event: FocusEvent<HTMLInputElement>) => unknown;
onChange?: (event: ChangeEvent<HTMLInputElement>) => unknown;
onFocus?: (event: FocusEvent<HTMLInputElement>) => unknown;
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => unknown;
onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => unknown;
/**
* Custom event handler triggered when the user presses enter/return
* or blurs the input after making a change. Hitting esc will restore
* the previous submitted value or original value.
*/
onSubmitValue: (value: string) => unknown;
placeholder?: string;
ref?: Ref<HTMLInputElement>;
step?: number;
tabIndex?: number;
title?: string;
unit?: string;
/** Regex or validator function to validate non-numeric values */
validator?: ((value: string) => boolean) | RegExp;
value?: string;
};
export default function CSSValueInput({ allowEmpty, className, cssValueType, disabled, getValueAsNumber, icon, label, max, min, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onSubmitValue, placeholder, ref, step, tabIndex, title, unit, validator, value: valueFromProps, }: Props): import("react/jsx-runtime").JSX.Element;