@web-atoms/web-controls 2.5.8 → 2.5.9

package/src/basic/DropDownInput.tsx

@@ -0,0 +1,134 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import { askSuggestionPopup, Match, MatchAnyCaseInsensitive } from "./AtomRepeater";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import { Focusable } from "../Focusable";
+
+import "./DropDownInput.global.css";
+
+export default class DropDownInput<T> extends AtomControl {
+
+public "event-selection-changed"?: (e: CustomEvent) => void;
+
+    public items: any[];
+
+    public value: any;
+
+    public label: any;
+
+    public "data-alignment"?: "bottom-right" | "bottom-left";
+
+    public disableSearch: boolean;
+
+    @BindableProperty
+    public popupSuggestions: boolean;
+
+    @BindableProperty
+    public search: string;
+
+    @BindableProperty
+    public prompt: string;
+
+    @BindableProperty
+    public suggestionPrompt: string;
+
+    @BindableProperty
+    public autofocus: boolean;
+
+    @BindableProperty
+    public itemRenderer: (item: T) => XNode;
+
+    @BindableProperty
+    public labelPath: (item: T) => string;
+
+    @BindableProperty
+    public valuePath: (item: T) => string;
+
+    @BindableProperty
+    public match: Match<any>;
+
+    @BindableProperty
+    public suggestionRenderer: (item: T) => XNode;
+
+    private isPopupOpen: boolean;
+    input: HTMLInputElement;
+    labelElement: HTMLLabelElement;
+    anchorItem: any;
+    selectedItem: any;
+
+    constructor(app, e = document.createElement("drop-down-input")) {
+        super(app, e);
+    }
+
+    protected preCreate(): void {
+        this.items = null;
+        this.value = null;
+        this.selectedItem = null;
+        this.labelPath = (x) => (x as any)?.label ?? x;
+        this.valuePath = (x) => (x as any)?.value ?? x;
+        this.itemRenderer = (x) => <div text={this.labelPath?.(x) ?? x}/>;
+        this.search = "";
+        this.label = "";
+        this.isPopupOpen = false;
+        this.disableSearch = true;
+        this.render(<div
+            event-click={() => this.input.focus()}>
+            <input
+                autofocus={Bind.oneTime(() => this.autofocus)}
+                event-focus={() => this.onFocus()}
+                value={Bind.twoWaysImmediate(() => this.search)}
+                placeholder={Bind.oneWay(() => this.label)}/>
+            <label text={Bind.oneWay((x) => this.labelPath(this.items.find((i) => this.valuePath(i) === this.value)))}/>
+            <i/>
+        </div>);
+
+        this.input = this.element.querySelector("input");
+        this.labelElement = this.element.querySelector("label");
+    }
+    onFocus(): any {
+
+        const value = this.value;
+        if (value) {
+            this.input.placeholder = this.items.find((i) => this.valuePath?.(i) === value)?.label;
+        }
+        this.input.value = "";
+        this.app.runAsync(() => this.openPopup())
+    }
+
+    async openPopup() {
+        if(this.isPopupOpen) {
+            return;
+        }
+        this.isPopupOpen = true;
+        try {
+
+            let selectedItem = this.items.find((i) => this.value === (this.valuePath?.(i) ?? i));
+            this.anchorItem = selectedItem;
+            this.selectedItem = selectedItem;
+
+            const newItem = await askSuggestionPopup(
+                this as any,
+                this.items,
+                this.itemRenderer,
+                this.match ?? MatchAnyCaseInsensitive(this.labelPath),
+                selectedItem);
+            if (newItem !== selectedItem) {
+                this.selectedItem = selectedItem;
+                this.value = this.valuePath?.(newItem) ?? newItem;
+                this.element.dispatchEvent(new CustomEvent(
+                    "selectionChanged",
+                    {
+                        bubbles: true,
+                        detail: newItem,
+                        cancelable: true
+                    }
+                ));
+            }
+            Focusable.moveNext(this.input);
+        } finally {
+            this.isPopupOpen = false;
+        } 
+    }
+
+}

package/src/basic/elements/AtomPopover.tsx

@@ -239,6 +239,7 @@ export default abstract class AtomPopover<T = any> {
     resultReject: (reason?: any) => void;
     parent: HTMLElement;
     popoverContainer: HTMLElement;
+    removed: boolean;
 
     static create(
         parent: HTMLElement | AtomControl,
@@ -372,11 +373,13 @@ export default abstract class AtomPopover<T = any> {
     abstract init(data?: any);
 
     close(r) {
+        this.removed = true;
         (this.popover as any).result = r ?? null;
         this.popover.remove();
     }
 
     async cancel() {
+        this.removed = true;
         delete (this.popover as any).result;
         this.popover.remove();
     }

package/src/tags.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+namespace JSX {
+    interface IntrinsicElements {
+        "data-list-input": any;
+    }
+}