UNPKG

@cimpress/react-components

Version:
57 lines 2.28 kB
import React, { InputHTMLAttributes } from 'react'; import { PublicComponentProps } from '../types'; type InputBaseProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>; export type TextSize = 'default' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'small'; export interface InlineEditProps extends InputBaseProps, PublicComponentProps { /** * ID prop for the input field. */ id?: string; /** * Floating label for an input field. Use either this or placeholder but not both. */ label?: string; /** * Determines the size of both the display text and the edit text. */ size?: TextSize; /** * Determines the HTML5 input type of the input. One of text, number, password, url, search, email, or tel. * You can also provide textarea to get a textarea instead of an input element. */ type?: 'text' | 'number' | 'password' | 'url' | 'search' | 'email' | 'tel' | 'textarea'; disabled?: boolean; /** * Provides an optional override for localized warning messages for required fields */ requiredWarningMessage?: string; /** * Callback that fires on a successful save of the value in the input. Provides the input's value and name. */ onSave?: (inputTarget: { value?: string; name?: string; }, event: MouseEvent | KeyboardEvent) => void; /** * If provided this callback fires when the user cancels the changes. Will provide the most recent changes, when the cancel happened. */ onCancel?: (inputTarget: { value?: string; name?: string; }, event: MouseEvent | KeyboardEvent) => void; /** * If provided and onChange is not provided, will be called on each text change to validate the input. */ validateInput?: (text: string) => string | null; /** * Specifies the minimum width of the control. Defaults to 130px. */ minWidth?: number | null; /** * Optional callback to be notified when the editing state changes */ onEditStateChange?: (isEditing: boolean) => void; } export declare const InlineEdit: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLInputElement>>; export {}; //# sourceMappingURL=InlineEdit.d.ts.map