riec
Version:
Modern React component for inline edit of text/select values, written in Typescript
54 lines (53 loc) • 1.33 kB
TypeScript
interface InlineEditState {
states: {
view: {};
edit: {};
loading: {};
saved: {};
error: {};
};
}
declare type InlineEditEvent = {
type: 'CLICK';
value: string;
} | {
type: 'FOCUS';
value: string;
} | {
type: 'CHANGE';
value: string;
} | {
type: 'ESC';
value: string;
} | {
type: 'ENTER';
value: string;
} | {
type: 'BLUR';
value: string;
} | {
type: 'SAVED';
value: string;
};
interface InlineEditContext {
value: string;
newValue: string;
oldValue: string;
isValid: boolean;
}
interface InlineEditMachineProps {
value: string;
onChange: (value: string) => void;
isDisabled: boolean;
allowEditWhileLoading: boolean;
optimisticUpdate: boolean;
validate?: (value: string) => boolean;
saveTimeout: number;
savedDuration: number;
errorDuration: number;
}
declare const getInlineEditMachine: ({ value, isDisabled, allowEditWhileLoading, optimisticUpdate, validate, onChange, saveTimeout, savedDuration, errorDuration, }: InlineEditMachineProps) => import("xstate").StateMachine<InlineEditContext, InlineEditState, InlineEditEvent, {
value: any;
context: InlineEditContext;
}>;
export default getInlineEditMachine;