mithril-materialized
Version:
A materialize library for mithril.
47 lines (46 loc) • 2.21 kB
TypeScript
import { Component } from 'mithril';
import { SelectAttrs } from './select';
import { InputOption } from './option';
export interface SearchSelectI18n {
/** Text shown when no options match the search */
noOptionsFound?: string;
/** Prefix for adding new option */
addNewPrefix?: string;
/** Message template for truncated results. Use {shown} and {total} placeholders */
showingXofY?: string;
/** Message shown when max selections reached. Use {max} placeholder */
maxSelectionsReached?: string;
}
export interface SearchSelectAttrs<T extends string | number> extends SelectAttrs<T> {
/** Callback when user creates a new option: should return new ID */
oncreateNewOption?: (term: string) => InputOption<T> | Promise<InputOption<T>>;
/** 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 '400px', use 'none' to disable it */
maxHeight?: string;
/** Internationalization options */
i18n?: SearchSelectI18n;
/** Maximum number of options to display. When set, limits displayed options to improve performance with large datasets */
maxDisplayedOptions?: number;
/** Maximum number of options that can be selected. When max=1, checkboxes are hidden and behaves like single select */
maxSelectedOptions?: number;
/** Sort selected items: 'asc' (alphabetically A-Z), 'desc' (Z-A), 'none' (insertion order), or custom sort function */
sortSelected?: 'asc' | 'desc' | 'none' | ((a: InputOption<T>, b: InputOption<T>) => number);
}
interface SearchSelectState<T extends string | number> {
id: string;
isOpen: boolean;
searchTerm: string;
inputRef: HTMLElement | null;
dropdownRef: HTMLElement | null;
focusedIndex: number;
internalSelectedIds: T[];
createdOptions: InputOption<T>[];
}
/**
* Mithril Factory Component for Multi-Select Dropdown with search
*/
export declare const SearchSelect: <T extends string | number>() => Component<SearchSelectAttrs<T>, SearchSelectState<T>>;
export {};