mithril-materialized
Version:
A materialize library for mithril.
42 lines (41 loc) • 1.59 kB
TypeScript
import { Attributes, Component } from 'mithril';
export interface Option<T extends string | number> {
id: T;
label?: string;
disabled?: boolean;
}
export interface SearchSelectAttrs<T extends string | number> extends Attributes {
/** Options to display in the select */
options?: Option<T>[];
/** Initial value */
initialValue?: T[];
/** Callback when user selects or deselects an option */
onchange?: (selectedOptions: T[]) => void | Promise<void>;
/** Callback when user creates a new option: should return new ID */
oncreateNewOption?: (term: string) => Option<T> | Promise<Option<T>>;
/** Label for the search select, no default */
label?: string;
/** Placeholder text for the search input, no default */
placeholder?: string;
/** Placeholder text for the search input, default 'Search options...' */
searchPlaceholder?: string;
/** When no options are left, displays this text, default 'No options found' */
noOptionsFound?: string;
/** Max height of the dropdown menu, default '25rem' */
maxHeight?: string;
}
interface SearchSelectState<T extends string | number> {
isOpen: boolean;
selectedOptions: Option<T>[];
searchTerm: string;
options: Option<T>[];
inputRef: HTMLElement | null;
dropdownRef: HTMLElement | null;
focusedIndex: number;
onchange: any;
}
/**
* Mithril Factory Component for Multi-Select Dropdown with search
*/
export declare const SearchSelect: <T extends string | number>() => Component<SearchSelectAttrs<T>, SearchSelectState<T>>;
export {};