Param PanelSelect
A dropdown over a typed set of options — including object values with reference equality.
The select control is a generic value control over
a fixed set of options. The option value can be any type T, and TypeScript
infers it for you.
Try it
Usage
const algorithm = pp.select({
label: "Algorithm",
value: "scharr",
options: [
{ label: "Sobel", value: "sobel" },
{ label: "Scharr", value: "scharr" },
{ label: "Laplacian", value: "laplacian" },
],
});Here algorithm is a SelectControl<string>, so algorithm.get() is typed as
string.
Configuration
interface SelectOption<T> {
label: string;
value: T;
disabled?: boolean;
}
interface SelectConfig<T> extends BaseControlConfig {
value: T;
options: readonly SelectOption<T>[];
}
interface SelectControl<T> extends ValueControl<T, SelectConfig<T>> {}Atomic option updates
The current value and the option set are validated together, so you can replace
the options and pick a new value in one configure()
call:
algorithm.configure({
value: "sobel",
options: [
{ label: "Sobel", value: "sobel" },
{ label: "Scharr", value: "scharr" },
],
});If the new value were not present in the new options, the whole update is
rejected — the select never ends up pointing at a missing option.
Value equality
Selection matching uses Object.is. For primitive values (strings, numbers)
that just works. For object-valued options, reuse stable references so the
current selection can be identified:
const fast = { quality: "fast" };
const accurate = { quality: "accurate" };
const quality = pp.select({
label: "Quality",
value: accurate, // same reference used in options below
options: [
{ label: "Fast", value: fast },
{ label: "Accurate", value: accurate },
],
});Constructing a fresh object literal for value that is not === to any option
would leave nothing selected.