From 8a2b717c51b3ae9aab64be0468d58ab76b9d08d7 Mon Sep 17 00:00:00 2001 From: nathan Date: Fri, 27 Aug 2021 11:21:40 -0600 Subject: [PATCH] Fix some type issues to make everything play more nicely together (Not complaining about things from parent classes being missing, mostly) --- api/js/etemplate/Et2Button/Et2Button.ts | 2 +- api/js/etemplate/Et2Date/Et2Date.ts | 3 +- .../Et2InputWidget/Et2InputWidget.ts | 44 ++++++++++++++++--- api/js/etemplate/Et2Textarea/Et2Textarea.ts | 1 + api/js/etemplate/Et2Textbox/Et2Textbox.ts | 1 + api/js/etemplate/Et2Widget/Et2Widget.ts | 26 +++++------ 6 files changed, 55 insertions(+), 22 deletions(-) diff --git a/api/js/etemplate/Et2Button/Et2Button.ts b/api/js/etemplate/Et2Button/Et2Button.ts index d072322658..5f56824f57 100644 --- a/api/js/etemplate/Et2Button/Et2Button.ts +++ b/api/js/etemplate/Et2Button/Et2Button.ts @@ -13,7 +13,6 @@ import {css, html} from "@lion/core"; import {LionButton} from "@lion/button"; import {SlotMixin} from "@lion/core"; import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; -import {Et2Widget} from "../Et2Widget/Et2Widget"; export class Et2Button extends Et2InputWidget(SlotMixin(LionButton)) { @@ -179,4 +178,5 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton)) } } +// @ts-ignore TypeScript is not recognizing that Et2Button is a LitElement customElements.define("et2-button", Et2Button); diff --git a/api/js/etemplate/Et2Date/Et2Date.ts b/api/js/etemplate/Et2Date/Et2Date.ts index b57f60fe84..fa346f9e87 100644 --- a/api/js/etemplate/Et2Date/Et2Date.ts +++ b/api/js/etemplate/Et2Date/Et2Date.ts @@ -159,7 +159,7 @@ export class Et2Date extends Et2InputWidget(LionInputDatepicker) serializer(modelValue : Date) { // isValidDate() is hidden inside LionInputDate, and not exported - //if(!isValidDate(modelValue)) + // @ts-ignore Can't call isNan(Date), but we're just checking if(!(modelValue instanceof Date) || isNaN(modelValue)) { return ''; @@ -183,4 +183,5 @@ export class Et2Date extends Et2InputWidget(LionInputDatepicker) } } +// @ts-ignore TypeScript is not recognizing that Et2Date is a LitElement customElements.define("et2-date", Et2Date); diff --git a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts index 5f25b4d839..c6221dfc91 100644 --- a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts +++ b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts @@ -6,19 +6,47 @@ import {dedupeMixin} from "@lion/core"; * This mixin will allow any LitElement to become an Et2InputWidget * * Usage: - * export class Et2Button extends Et2InputWidget(Et2Widget(LitWidget)) {...} + * export class Et2Button extends Et2InputWidget(LitWidget)) {...} */ +/** + * Need to define the interface first, to get around TypeScript issues with protected/public + * This must match the public API for Et2InputWidgetClass + * @see https://lit.dev/docs/composition/mixins/#typing-the-subclass + */ +export declare class Et2InputWidgetInterface +{ + readOnly : boolean; + protected value : string | number | Object; -const Et2InputWidgetClass = superclass => - class extends Et2Widget(superclass) implements et2_IInput, et2_IInputNode + public set_value(any) : void; + + public get_value() : any; + + public getValue() : any; + + public isDirty() : boolean; + + public resetDirty() : void; + + public isValid(messages : string[]) : boolean; +} + +const Et2InputWidgetMixin = (superclass) => +{ + class Et2InputWidgetClass extends Et2Widget(superclass) implements et2_IInput, et2_IInputNode { - - label : string = ''; protected value : string | number | Object; protected _oldValue : string | number | Object; /** WebComponent **/ + static get styles() + { + return [ + ...super.styles + ]; + } + static get properties() { return { @@ -111,6 +139,8 @@ const Et2InputWidgetClass = superclass => // From LionInput return this._inputNode; } - }; + } -export const Et2InputWidget = dedupeMixin(Et2InputWidgetClass); \ No newline at end of file + return Et2InputWidgetClass; +} +export const Et2InputWidget = dedupeMixin(Et2InputWidgetMixin); \ No newline at end of file diff --git a/api/js/etemplate/Et2Textarea/Et2Textarea.ts b/api/js/etemplate/Et2Textarea/Et2Textarea.ts index e401a2d548..f8e6edba37 100644 --- a/api/js/etemplate/Et2Textarea/Et2Textarea.ts +++ b/api/js/etemplate/Et2Textarea/Et2Textarea.ts @@ -79,4 +79,5 @@ export class Et2Textarea extends Et2InputWidget(LionTextarea) } } +// @ts-ignore TypeScript is not recognizing that Et2Textarea is a LitElement customElements.define("et2-textarea", Et2Textarea); diff --git a/api/js/etemplate/Et2Textbox/Et2Textbox.ts b/api/js/etemplate/Et2Textbox/Et2Textbox.ts index 66b734c26d..058a088998 100644 --- a/api/js/etemplate/Et2Textbox/Et2Textbox.ts +++ b/api/js/etemplate/Et2Textbox/Et2Textbox.ts @@ -45,4 +45,5 @@ export class Et2Textbox extends Et2InputWidget(LionInput) } } +// @ts-ignore TypeScript is not recognizing that Et2Textbox is a LitElement customElements.define("et2-textbox", Et2Textbox); diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts index e8e1ec97df..a56fbbc482 100644 --- a/api/js/etemplate/Et2Widget/Et2Widget.ts +++ b/api/js/etemplate/Et2Widget/Et2Widget.ts @@ -7,7 +7,7 @@ import {et2_cloneObject, et2_csvSplit} from "../et2_core_common"; // @ts-ignore import type {IegwAppLocal} from "../../jsapi/egw_global"; import {ClassWithAttributes, ClassWithInterfaces} from "../et2_core_inheritance"; -import {LitElement} from "@lion/core"; +import {dedupeMixin} from "@lion/core"; import type {et2_container} from "../et2_core_baseWidget"; /** @@ -35,8 +35,7 @@ function applyMixins(derivedCtor : any, baseCtors : any[]) }); } -type Constructor = new (...args : any[]) => T; -export const Et2Widget = >(superClass : T) => +const Et2WidgetMixin = (superClass) => { class Et2WidgetClass extends superClass implements et2_IDOMNode { @@ -55,9 +54,9 @@ export const Et2Widget = >(superClass : T) => /** * Properties - default values, and actually creating them as fields */ - private label : string = ""; + private _label : string = ""; private statustext : string = ""; - private disabled : Boolean = false; + protected disabled : Boolean = false; /** WebComponent **/ @@ -107,7 +106,7 @@ export const Et2Widget = >(superClass : T) => { super.connectedCallback(); - this.set_label(this.label); + this.set_label(this._label); if(this.statustext) { @@ -132,7 +131,7 @@ export const Et2Widget = >(superClass : T) => */ set_label(value : string) { - let oldValue = this.label; + let oldValue = this._label; // Remove old let oldLabels = this.getElementsByClassName("et2_label"); @@ -141,12 +140,12 @@ export const Et2Widget = >(superClass : T) => this.removeChild(oldLabels[0]); } - this.label = value; + this._label = value; if(value) { let label = document.createElement("span"); label.classList.add("et2_label"); - label.textContent = this.label; + label.textContent = this._label; // We should have a slot in the template for the label //label.slot="label"; this.appendChild(label); @@ -791,21 +790,22 @@ export const Et2Widget = >(superClass : T) => } }; - // Add some more stuff in applyMixins(Et2WidgetClass, [ClassWithInterfaces]); - return Et2WidgetClass as unknown as Constructor & T; + return Et2WidgetClass; } +export const Et2Widget = dedupeMixin(Et2WidgetMixin); /** * Load a Web Component * @param _nodeName * @param _template_node */ -export function loadWebComponent(_nodeName : string, _template_node, parent : Et2WidgetClass | et2_widget) : HTMLElement +export function loadWebComponent(_nodeName : string, _template_node, parent : Et2Widget | et2_widget) : HTMLElement { - let widget = document.createElement(_nodeName); + // @ts-ignore + let widget = document.createElement(_nodeName); widget.textContent = _template_node.textContent; const widget_class = window.customElements.get(_nodeName);