Export SelectProperties type.
This commit is contained in:
		
							parent
							
								
									72a3b9b9d2
								
							
						
					
					
						commit
						23d0ab147b
					
				
					 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…
	
	Add table
		
		Reference in a new issue