x4js 1.4.2

package/lib/combobox.d.ts

@@ -0,0 +1,97 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file combobox.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+/**
+ * TODO: replace custom combo list by listview or gridview
+ */
+import { Component, CProps, ContainerEventMap } from './component';
+import { EvChange, EvSelectionChange, EventCallback } from './x4_events';
+import { Input } from './input';
+import { HLayout } from './layout';
+import { ListViewItem, PopulateItems, EvCancel } from './listview';
+import { DataStore, DataView, Record } from './datastore';
+import { HtmlString } from './tools';
+export interface ComboStoreProxyProps {
+    store: DataView | DataStore;
+    display: (rec: Record) => string | HtmlString;
+}
+export interface ComboItemRender {
+    (itm: ListViewItem): Component;
+}
+interface ComboBoxEventMap extends ContainerEventMap {
+    readonly change: EvChange;
+    readonly selectionChange?: EvSelectionChange;
+    readonly cancel?: EvCancel;
+}
+export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
+    tabIndex?: number | boolean;
+    name?: string;
+    readOnly?: boolean;
+    label?: string;
+    labelWidth?: number;
+    labelAlign?: 'left' | 'right';
+    items?: ListViewItem[];
+    populate?: PopulateItems;
+    value?: any;
+    renderer?: ComboItemRender;
+    selectionChange?: EventCallback<EvSelectionChange>;
+}
+/**
+ * @review use textedit
+ */
+export declare class ComboBox extends HLayout<ComboBoxProps, ComboBoxEventMap> {
+    private m_ui_input;
+    private m_ui_button;
+    private m_popup;
+    private m_selection;
+    private m_defer_sel;
+    constructor(props: ComboBoxProps);
+    set items(items: ListViewItem[]);
+    /** @ignore */
+    render(props: ComboBoxProps): void;
+    componentDisposed(): void;
+    /**
+     * display the popup
+     */
+    showPopup(): void;
+    /** @ignore
+      */
+    private _selectItem;
+    /**
+     *
+     */
+    private _setInput;
+    /**
+     *
+     */
+    get value(): any;
+    get valueText(): string | HtmlString;
+    /**
+     *
+     */
+    set value(id: any);
+    get input(): Input;
+    static storeProxy(props: ComboStoreProxyProps): PopulateItems;
+}
+export {};

package/lib/combobox.js

@@ -0,0 +1,246 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file combobox.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+/**
+ * TODO: replace custom combo list by listview or gridview
+ */
+import { Component } from './component';
+import { EvChange, EvSelectionChange } from './x4_events';
+import { Input } from './input';
+import { Label } from './label';
+import { Button } from './button';
+import { HLayout } from './layout';
+import { PopupListView } from './listview';
+import { DataStore } from './datastore';
+import { isFunction } from './tools';
+/**
+ * @review use textedit
+ */
+export class ComboBox extends HLayout {
+    m_ui_input;
+    m_ui_button;
+    m_popup;
+    m_selection;
+    m_defer_sel;
+    constructor(props) {
+        super(props);
+        this.setDomEvent('keypress', () => this.showPopup());
+        this.setDomEvent('click', () => this.showPopup());
+        this.mapPropEvents(props, 'selectionChange');
+    }
+    set items(items) {
+        this.m_props.items = items;
+        if (this.m_popup) {
+            this.m_popup.items = items;
+        }
+    }
+    /** @ignore */
+    render(props) {
+        if (!props.renderer) {
+            this.m_ui_input = new Input({
+                flex: 1,
+                readOnly: true,
+                tabIndex: 0,
+                name: props.name,
+                value_hook: {
+                    get: () => { return this.value; },
+                    set: (v) => { this.value = v; }
+                }
+            });
+        }
+        else {
+            this.m_ui_input = new Component({
+                flex: 1,
+                cls: '@fake-input @hlayout',
+                tabIndex: 1
+            });
+        }
+        let width = undefined, flex = undefined;
+        let labelWidth = props.labelWidth ?? 0;
+        if (labelWidth > 0) {
+            width = labelWidth;
+        }
+        else if (labelWidth < 0) {
+            flex = -labelWidth;
+        }
+        this.setContent([
+            // todo: why 'label1' class name
+            new Label({
+                cls: 'label1' + (props.label ? '' : ' @hidden'),
+                text: props.label,
+                width,
+                flex,
+                align: props.labelAlign
+            }),
+            new HLayout({
+                flex: 1,
+                content: [
+                    this.m_ui_input,
+                    this.m_ui_button = new Button({
+                        cls: 'gadget',
+                        icon: 'cls(far fa-angle-down)',
+                        tabIndex: false,
+                        click: () => this.showPopup(),
+                        dom_events: {
+                            focus: () => { this.dom.focus(); },
+                        }
+                    })
+                ]
+            }),
+        ]);
+        if (props.value !== undefined) {
+            this.value = props.value;
+        }
+    }
+    componentDisposed() {
+        if (this.m_popup) {
+            this.m_popup.close();
+        }
+        super.componentDisposed();
+    }
+    /**
+     * display the popup
+     */
+    showPopup() {
+        let props = this.m_props;
+        if (props.readOnly) {
+            return;
+        }
+        // need creation ?
+        if (!this.m_popup) {
+            let cstyle = this.getComputedStyle();
+            let fontFamily = cstyle.value('fontFamily');
+            let fontSize = cstyle.value('fontSize');
+            // prepare the combo listview
+            this.m_popup = new PopupListView({
+                cls: '@combo-popup',
+                items: props.items,
+                populate: props.populate,
+                renderItem: this.m_props.renderer,
+                selectionChange: (e) => this._selectItem(e),
+                cancel: (e) => this.signal('cancel', e),
+                style: {
+                    fontFamily,
+                    fontSize
+                }
+            });
+        }
+        let r1 = this.m_ui_button.getBoundingRect(), r2 = this.m_ui_input.getBoundingRect();
+        this.m_popup.setStyle({
+            minWidth: r1.right - r2.left,
+        });
+        this.m_popup.displayAt(r2.left, r2.bottom);
+        if (this.value !== undefined) {
+            this.m_popup.selection = this.value;
+        }
+    }
+    /** @ignore
+      */
+    _selectItem(ev) {
+        let item = ev.selection;
+        if (!item) {
+            return;
+        }
+        this._setInput(item, true);
+        this.m_selection = {
+            id: item.id,
+            text: item.text
+        };
+        this.emit('selectionChange', EvSelectionChange(item));
+        this.emit('change', EvChange(item.id));
+        this.m_ui_input.focus();
+        this.m_popup.hide();
+    }
+    /**
+     *
+     */
+    _setInput(item, fireEv = false) {
+        if (item) {
+            if (this.m_ui_input) {
+                if (this.m_ui_input instanceof Input) {
+                    this.m_ui_input.value = item.text;
+                    // fires a change event
+                    if (fireEv) {
+                        this.m_ui_input.dom.dispatchEvent(new Event('input'));
+                    }
+                }
+                else {
+                    this.m_ui_input.setContent(this.m_props.renderer(item));
+                }
+            }
+            else {
+                this.m_props.value = item.id;
+            }
+        }
+    }
+    /**
+     *
+     */
+    get value() {
+        return this.m_selection ? this.m_selection.id : undefined;
+    }
+    get valueText() {
+        return this.m_selection ? this.m_selection.text : undefined;
+    }
+    /**
+     *
+     */
+    set value(id) {
+        let items = this.m_props.items;
+        if (isFunction(items)) {
+            items = items();
+        }
+        items.some((v) => {
+            if (v.id === id) {
+                this._setInput(v);
+                this.m_selection = v;
+                return true;
+            }
+        });
+    }
+    get input() {
+        return this.m_ui_input instanceof Input ? this.m_ui_input : null;
+    }
+    static storeProxy(props) {
+        let view = props.store instanceof DataStore ? props.store.createView() : props.store;
+        return () => {
+            let result = new Array(props.store.count);
+            props.store.forEach((rec, index) => {
+                result[index] = {
+                    id: rec.getID(),
+                    text: props.display(rec)
+                };
+            });
+            return result;
+        };
+    }
+}
+/*
+ export type CBComboBoxRenderer = ( rec: Record ) => string;
+export interface ComboBoxStore {
+    store: DataStore;
+    display: string | CBComboBoxRenderer;		// if string, the field name to display
+}
+
+*/