@cimpress/react-components
Version:
React components to support the MCP styleguide
52 lines • 2.23 kB
TypeScript
import React, { ComponentPropsWithoutRef } from 'react';
export type TextSize = 'default' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'small';
type SaveCancelMouseOrKeyboardEvent = React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLInputElement>;
type InlineEditBaseProps = {
label?: string;
value?: string;
/**
* Specifies the minimum width of the control. Defaults to 130px.
*/
minWidth?: number;
/**
* Provides an optional override for localized warning messages for required fields
*/
requiredWarningMessage?: string;
/**
* Determines the size of both the display text and the edit text.
*/
size?: TextSize;
/**
* If provided and onChange is not provided, will be called on each text change to validate the input.
*/
validateInput?: (text: string) => string | null;
/**
* 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;
}, e: SaveCancelMouseOrKeyboardEvent) => 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;
}, e: SaveCancelMouseOrKeyboardEvent) => void;
/**
* Optional callback to be notified when the editing state changes
*/
onEditStateChange?: (isEditing: boolean) => void;
};
type InputProps = Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value'>;
export type InlineEditProps = InlineEditBaseProps & (({
type?: 'text';
} & InputProps) | ({
type: 'text' | 'number' | 'password' | 'url' | 'search' | 'email' | 'tel';
} & InputProps) | ({
type: 'textarea';
} & Omit<ComponentPropsWithoutRef<'textarea'>, 'value'>));
export declare function InlineEdit({ id, label, name, value, placeholder, onSave, onCancel, minWidth, required, requiredWarningMessage, size, validateInput, onEditStateChange, ...props }: InlineEditProps): React.JSX.Element;
export {};
//# sourceMappingURL=InlineEdit.d.ts.map