Export SelectProperties type.
This commit is contained in:
parent
9edbc97d61
commit
f196f98317
1 changed files with 63 additions and 58 deletions
|
@ -4,6 +4,68 @@ import {OptionsSuggestions, useSuggestionsNavigation} from "./OptionsSuggestions
|
|||
import {classes, Modify, normalizeString} from "../../Utils";
|
||||
import {CaretDown, Check, X} from "@phosphor-icons/react";
|
||||
|
||||
/**
|
||||
* Generic select component properties.
|
||||
*/
|
||||
export type SelectProperties<OptionKey extends keyof any, Option> = React.PropsWithChildren<Modify<React.InputHTMLAttributes<HTMLInputElement>, {
|
||||
/**
|
||||
* The currently selected option(s).
|
||||
*/
|
||||
value: OptionKey|OptionKey[];
|
||||
|
||||
/**
|
||||
* Called when new options are selected.
|
||||
* @param newValue
|
||||
*/
|
||||
onChange: (newValue: OptionKey|OptionKey[]) => void;
|
||||
|
||||
/**
|
||||
* Options list or a way to get it from a given search.
|
||||
*/
|
||||
options: Record<OptionKey, Option>;
|
||||
|
||||
/**
|
||||
* Render an option.
|
||||
* @param option The option to render.
|
||||
*/
|
||||
renderOption?: (option: Option) => React.ReactNode;
|
||||
|
||||
/**
|
||||
* Option match function. Return true if the given option matches the given search query.
|
||||
* @param search The search query.
|
||||
* @param option The option that should match the search query.
|
||||
*/
|
||||
match?: (search: string, option: Option) => boolean;
|
||||
|
||||
/**
|
||||
* Max count of options to allow to select.
|
||||
* 1 by default when multiple is false, infinity when multiple is true.
|
||||
*/
|
||||
selectibleMaxCount?: number;
|
||||
|
||||
/**
|
||||
* True to allow to select an infinite count of options.
|
||||
* false by default.
|
||||
*/
|
||||
multiple?: boolean;
|
||||
|
||||
/**
|
||||
* When true, the select loses focus when a new option is selected (by clicking or pressing Enter).
|
||||
* false by default.
|
||||
*/
|
||||
blurOnSelect?: boolean;
|
||||
|
||||
/**
|
||||
* When true, the select loses focus when the max count of selectible options have been reached (by clicking or pressing Enter).
|
||||
* true by default.
|
||||
*/
|
||||
blurWhenMaxCountSelected?: boolean;
|
||||
|
||||
// Already set properties.
|
||||
type?: never;
|
||||
role?: never;
|
||||
}>>;
|
||||
|
||||
/**
|
||||
* Generic select component.
|
||||
*/
|
||||
|
@ -20,64 +82,7 @@ export function Select<OptionKey extends keyof any, Option>(
|
|||
type, role,
|
||||
children,
|
||||
...props
|
||||
}: React.PropsWithChildren<Modify<React.InputHTMLAttributes<HTMLInputElement>, {
|
||||
/**
|
||||
* The currently selected option(s).
|
||||
*/
|
||||
value: OptionKey|OptionKey[];
|
||||
|
||||
/**
|
||||
* Called when new options are selected.
|
||||
* @param newValue
|
||||
*/
|
||||
onChange: (newValue: OptionKey|OptionKey[]) => void;
|
||||
|
||||
/**
|
||||
* Options list or a way to get it from a given search.
|
||||
*/
|
||||
options: Record<OptionKey, Option>;
|
||||
|
||||
/**
|
||||
* Render an option.
|
||||
* @param option The option to render.
|
||||
*/
|
||||
renderOption?: (option: Option) => React.ReactNode;
|
||||
|
||||
/**
|
||||
* Option match function. Return true if the given option matches the given search query.
|
||||
* @param search The search query.
|
||||
* @param option The option that should match the search query.
|
||||
*/
|
||||
match?: (search: string, option: Option) => boolean;
|
||||
|
||||
/**
|
||||
* Max count of options to allow to select.
|
||||
* 1 by default when multiple is false, infinity when multiple is true.
|
||||
*/
|
||||
selectibleMaxCount?: number;
|
||||
|
||||
/**
|
||||
* True to allow to select an infinite count of options.
|
||||
* false by default.
|
||||
*/
|
||||
multiple?: boolean;
|
||||
|
||||
/**
|
||||
* When true, the select loses focus when a new option is selected (by clicking or pressing Enter).
|
||||
* false by default.
|
||||
*/
|
||||
blurOnSelect?: boolean;
|
||||
|
||||
/**
|
||||
* When true, the select loses focus when the max count of selectible options have been reached (by clicking or pressing Enter).
|
||||
* true by default.
|
||||
*/
|
||||
blurWhenMaxCountSelected?: boolean;
|
||||
|
||||
// Already set properties.
|
||||
type?: never;
|
||||
role?: never;
|
||||
}>>): React.ReactElement
|
||||
}: SelectProperties<OptionKey, Option>): React.ReactElement
|
||||
{
|
||||
const [search, setSearch] = React.useState("");
|
||||
|
||||
|
|
Loading…
Reference in a new issue