@zeptonow/input-typeahead
Version:
An input typeahead component for react applications, convert any input into a typeahead with a dropdown of suggestions.
51 lines (47 loc) • 1.96 kB
TypeScript
import React$1 from 'react';
type ZeptoTypeAheadOption = {
label: string;
description?: string;
value?: string;
children?: ZeptoTypeAheadOption[];
};
type ZeptoTypeAheadPosition = "top" | "bottom" | "cursor";
type ZeptoTypeAheadActivateMode = "single" | "multiple";
type ZeptoTypeAheadHeaderProps = {
onClose: () => void;
onBack: () => void;
currentLevel?: ZeptoTypeAheadOption;
nestedPath: ZeptoTypeAheadOption[];
};
type ZeptoTypeAheadWidgetState = {
isActive: boolean;
currentSearch: string;
selectedOption?: ZeptoTypeAheadOption;
};
type ZeptoTypeAhead = {
options: ZeptoTypeAheadOption[];
triggerChar?: string;
position?: ZeptoTypeAheadPosition;
activateMode?: ZeptoTypeAheadActivateMode;
maxVisibleOptions?: number;
animation?: boolean;
typeAheadContainerStyles?: React.CSSProperties;
typeAheadOptionStyles?: React.CSSProperties;
typeAheadActiveOptionStyle?: React.CSSProperties;
typeAheadOptionValueStyles?: React.CSSProperties;
onSelect?: (option: ZeptoTypeAheadOption) => void;
searchCallback?: (option: ZeptoTypeAheadOption, searchQuery: string) => boolean;
renderOption?: ({ option, isActive, }: {
option: ZeptoTypeAheadOption;
isActive: boolean;
onClick: () => void;
}) => React.ReactNode;
renderHeader?: (props: ZeptoTypeAheadHeaderProps) => React.ReactNode;
onWidgetStateChange?: (state: ZeptoTypeAheadWidgetState) => void;
};
interface TypeaheadProps extends Omit<ZeptoTypeAhead, "onWidgetStateChange"> {
inputRef: React$1.RefObject<HTMLInputElement | HTMLTextAreaElement>;
onWidgetStateChange?: (state: ZeptoTypeAheadWidgetState) => void;
}
declare const Typeahead: React$1.FC<TypeaheadProps>;
export { type ZeptoTypeAhead, type ZeptoTypeAheadActivateMode, type ZeptoTypeAheadHeaderProps, type ZeptoTypeAheadOption, type ZeptoTypeAheadPosition, type ZeptoTypeAheadWidgetState, Typeahead as default };