Clean up some TypeScript type issues

Putting the constructor type fixes some complaints about our widgets not being LitElements
This commit is contained in:
nathan 2022-06-10 10:25:31 -06:00
parent 531cc473e2
commit cf151afff8
5 changed files with 32 additions and 24 deletions

View File

@ -24,12 +24,14 @@ export class Et2WidgetWithSelect extends Et2widgetWithSelectMixin(SlSelect)
{ {
}; };
// @ts-ignore SlSelect styles is a single CSSResult, not an array, so TS complains
export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithSelect)) export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithSelect))
{ {
static get styles() static get styles()
{ {
return [ return [
...super.styles, // Parent (SlSelect) returns a single cssResult, not an array
super.styles,
shoelace, shoelace,
css` css`
:host { :host {
@ -100,7 +102,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
} }
} }
constructor() constructor(...args : any[])
{ {
super(); super();
this._triggerChange = this._triggerChange.bind(this); this._triggerChange = this._triggerChange.bind(this);
@ -109,8 +111,6 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
connectedCallback() connectedCallback()
{ {
super.connectedCallback(); super.connectedCallback();
//MOVE options that were set as children inside SELECT:
//this.querySelector('select').append(...this.querySelectorAll('option'));
this.getUpdateComplete().then(() => this.getUpdateComplete().then(() =>
{ {
@ -127,7 +127,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
this.removeEventListener("sl-change", this._triggerChange); this.removeEventListener("sl-change", this._triggerChange);
} }
firstUpdated(changedProperties) firstUpdated(changedProperties?)
{ {
super.firstUpdated(changedProperties); super.firstUpdated(changedProperties);
@ -288,14 +288,13 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
} }
} }
customElements.define("et2-select", Et2Select);
/** /**
* Use a single StaticOptions, since it should have no state * Use a single StaticOptions, since it should have no state
* @type {StaticOptions} * @type {StaticOptions}
*/ */
const so = new StaticOptions(); const so = new StaticOptions();
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
customElements.define("et2-select", Et2Select);
export class Et2SelectApp extends Et2Select export class Et2SelectApp extends Et2Select
{ {

View File

@ -7,10 +7,11 @@
* @author Nathan Gray * @author Nathan Gray
*/ */
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {Et2InputWidget, Et2InputWidgetInterface} from "../Et2InputWidget/Et2InputWidget";
import {dedupeMixin, html, PropertyValues, render, repeat, TemplateResult} from "@lion/core"; import {html, LitElement, PropertyValues, render, repeat, TemplateResult} from "@lion/core";
import {et2_readAttrWithDefault} from "../et2_core_xml"; import {et2_readAttrWithDefault} from "../et2_core_xml";
import {cleanSelectOptions, find_select_options, SelectOption} from "./FindSelectOptions"; import {cleanSelectOptions, find_select_options, SelectOption} from "./FindSelectOptions";
import {SearchMixinInterface} from "./SearchMixin";
/** /**
* Base class for things that do selectbox type behaviour, to avoid putting too much or copying into read-only * Base class for things that do selectbox type behaviour, to avoid putting too much or copying into read-only
@ -55,7 +56,10 @@ import {cleanSelectOptions, find_select_options, SelectOption} from "./FindSelec
* (LionField) can't find it when it looks for it before then. * (LionField) can't find it when it looks for it before then.
* *
*/ */
export const Et2widgetWithSelectMixin = dedupeMixin((superclass) => // Export the Interface for TypeScript
type Constructor<T = {}> = new (...args : any[]) => T;
export const Et2widgetWithSelectMixin = <T extends Constructor<LitElement>>(superclass : T) =>
{ {
class Et2WidgetWithSelect extends Et2InputWidget(superclass) class Et2WidgetWithSelect extends Et2InputWidget(superclass)
{ {
@ -85,9 +89,9 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
*/ */
private _xmlOptions : SelectOption[] = []; private _xmlOptions : SelectOption[] = [];
constructor() constructor(...args : any[])
{ {
super(); super(...args);
this.__select_options = <SelectOption[]>[]; this.__select_options = <SelectOption[]>[];
} }
@ -264,5 +268,6 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
} }
} }
} }
return Et2WidgetWithSelect;
}); return Et2WidgetWithSelect as unknown as Constructor<SearchMixinInterface> & Et2InputWidgetInterface & T;
}

View File

@ -189,7 +189,7 @@ export class StaticOptions
return this.number(widget); return this.number(widget);
} }
year(widget : Et2SelectWidgets, attrs) : SelectOption[] year(widget : Et2SelectWidgets, attrs?) : SelectOption[]
{ {
if(typeof attrs != 'object') if(typeof attrs != 'object')
{ {

View File

@ -8,8 +8,8 @@
*/ */
/* eslint-disable import/no-extraneous-dependencies */ /* eslint-disable import/no-extraneous-dependencies */
import {css, dedupeMixin, html, render} from '@lion/core'; import {css, dedupeMixin, html, LitElement, render} from '@lion/core';
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {Et2InputWidget, Et2InputWidgetInterface} from "../Et2InputWidget/Et2InputWidget";
import {colorsDefStyles} from "../Styles/colorsDefStyles"; import {colorsDefStyles} from "../Styles/colorsDefStyles";
/** /**
@ -20,7 +20,9 @@ import {colorsDefStyles} from "../Styles/colorsDefStyles";
* *
* Inspired by Lion date-picker. * Inspired by Lion date-picker.
*/ */
export const Et2InvokerMixin = dedupeMixin((superclass) =>
type Constructor<T = Et2InputWidgetInterface> = new (...args : any[]) => T;
export const Et2InvokerMixin = dedupeMixin(<T extends Constructor<LitElement>>(superclass : T) =>
{ {
class Et2Invoker extends Et2InputWidget(superclass) class Et2Invoker extends Et2InputWidget(superclass)
{ {
@ -96,9 +98,9 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
return /** @type {HTMLElement} */ (this.querySelector(`#${this.__invokerId}`)); return /** @type {HTMLElement} */ (this.querySelector(`#${this.__invokerId}`));
} }
constructor() constructor(...args : any[])
{ {
super(); super(...args);
/** @private */ /** @private */
this.__invokerId = this.__createUniqueIdForA11y(); this.__invokerId = this.__createUniqueIdForA11y();
// default for properties // default for properties
@ -192,5 +194,6 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
`; `;
} }
} }
return Et2Invoker;
return Et2Invoker as unknown as Constructor<Et2Invoker> & T;
}) })

View File

@ -8,7 +8,7 @@ import {et2_cloneObject, et2_csvSplit} from "../et2_core_common";
import type {IegwAppLocal} from "../../jsapi/egw_global"; import type {IegwAppLocal} from "../../jsapi/egw_global";
import {egw} from "../../jsapi/egw_global"; import {egw} from "../../jsapi/egw_global";
import {ClassWithAttributes, ClassWithInterfaces} from "../et2_core_inheritance"; import {ClassWithAttributes, ClassWithInterfaces} from "../et2_core_inheritance";
import {css, dedupeMixin, PropertyValues, unsafeCSS} from "@lion/core"; import {css, dedupeMixin, LitElement, PropertyValues, unsafeCSS} from "@lion/core";
import type {et2_container} from "../et2_core_baseWidget"; import type {et2_container} from "../et2_core_baseWidget";
import type {et2_DOMWidget} from "../et2_core_DOMWidget"; import type {et2_DOMWidget} from "../et2_core_DOMWidget";
@ -37,7 +37,8 @@ function applyMixins(derivedCtor : any, baseCtors : any[])
}); });
} }
const Et2WidgetMixin = (superClass) => type Constructor<T = {}> = new (...args : any[]) => T;
const Et2WidgetMixin = <T extends Constructor<LitElement>>(superClass : T) =>
{ {
class Et2WidgetClass extends superClass implements et2_IDOMNode class Et2WidgetClass extends superClass implements et2_IDOMNode
{ {
@ -1252,7 +1253,7 @@ const Et2WidgetMixin = (superClass) =>
// Add some more stuff in // Add some more stuff in
applyMixins(Et2WidgetClass, [ClassWithInterfaces]); applyMixins(Et2WidgetClass, [ClassWithInterfaces]);
return Et2WidgetClass; return Et2WidgetClass as unknown as Constructor<Et2WidgetClass> & T;
} }
export const Et2Widget = dedupeMixin(Et2WidgetMixin); export const Et2Widget = dedupeMixin(Et2WidgetMixin);