Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-05 07:18:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

You can now press the up and down arrows while a Select is focused (but the menu is not open) to change the selected item.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2020-01-05 18:59:02 +01:00
parent 05d5ce6e29
commit 3836612972
1 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/core/gui/Select.ts
View File

@ -6,6 +6,7 @@ import { Button } from "./Button";
import { WritableProperty } from "../observable/property/WritableProperty"; import { WritableProperty } from "../observable/property/WritableProperty";
import { WidgetProperty } from "../observable/property/WidgetProperty"; import { WidgetProperty } from "../observable/property/WidgetProperty";
import { Menu } from "./Menu"; import { Menu } from "./Menu";
import { property } from "../observable";
export type SelectOptions<T> = LabelledControlOptions & { export type SelectOptions<T> = LabelledControlOptions & {
readonly items: readonly T[] | Property<readonly T[]>; readonly items: readonly T[] | Property<readonly T[]>;
@ -20,6 +21,7 @@ export class Select<T> extends LabelledControl {
readonly selected: WritableProperty<T | undefined>; readonly selected: WritableProperty<T | undefined>;
private readonly items: Property<readonly T[]>;
private readonly to_label: (element: T) => string; private readonly to_label: (element: T) => string;
private readonly button: Button; private readonly button: Button;
private readonly menu: Menu<T>; private readonly menu: Menu<T>;
@ -31,6 +33,7 @@ export class Select<T> extends LabelledControl {
this.preferred_label_position = "left"; this.preferred_label_position = "left";
this.items = is_property(options.items) ? options.items : property(options.items);
this.to_label = options.to_label ?? String; this.to_label = options.to_label ?? String;
this.button = this.disposable( this.button = this.disposable(
new Button({ new Button({
@ -40,7 +43,7 @@ export class Select<T> extends LabelledControl {
); );
this.menu = this.disposable( this.menu = this.disposable(
new Menu<T>({ new Menu<T>({
items: options.items, items: this.items,
to_label: this.to_label, to_label: this.to_label,
related_element: this.element, related_element: this.element,
}), }),
@ -81,7 +84,7 @@ export class Select<T> extends LabelledControl {
} }
protected set_selected(selected?: T): void { protected set_selected(selected?: T): void {
this.button.text.val = selected != undefined ? this.to_label(selected) : " "; this.button.text.val = selected !== undefined ? this.to_label(selected) : " ";
this.menu.selected.val = selected; this.menu.selected.val = selected;
} }
@ -102,12 +105,37 @@ export class Select<T> extends LabelledControl {
}; };
private button_keydown = ({ value: evt }: { value: KeyboardEvent }): void => { private button_keydown = ({ value: evt }: { value: KeyboardEvent }): void => {
if (evt.key === "Enter" || evt.key === " ") { switch (evt.key) {
evt.preventDefault(); case "Enter":
this.just_opened = !this.menu.visible.val; case " ":
this.menu.visible.val = true; evt.preventDefault();
this.menu.focus(); this.just_opened = !this.menu.visible.val;
this.menu.hover_next(); this.menu.visible.val = true;
this.menu.focus();
this.menu.hover_next();
break;
case "ArrowUp":
{
if (this._selected.val === undefined) break;
const index = this.items.val.indexOf(this._selected.val) - 1;
if (index < 0) break;
this._selected.set_val(this.items.val[index], { silent: false });
}
break;
case "ArrowDown":
{
if (this._selected.val === undefined) break;
const index = this.items.val.indexOf(this._selected.val) + 1;
if (index >= this.items.val.length) break;
this._selected.set_val(this.items.val[index], { silent: false });
}
break;
} }
}; };
} }