Export SelectProperties type.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/tag/woodpecker Pipeline was successful

This commit is contained in:
Madeorsk 2024-09-24 19:54:18 +02:00
parent 72a3b9b9d2
commit 23d0ab147b
Signed by: Madeorsk
GPG key ID: 677E51CA765BB79F

View file

@ -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("");