From 8bdc14f818cfae35d4785ce5d57e0a94951735a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 10 Jan 2023 15:34:05 +0100 Subject: [PATCH] refactor property editor chang event --- .../input-user-group.element.ts | 2 +- .../input-user/input-user.element.ts | 2 +- .../input-section/input-section.element.ts | 2 +- .../workspace-property.element.ts | 41 ++++++++++++------- .../clear/property-action-clear.element.ts | 4 +- ...operty-editor-ui-content-picker.element.ts | 2 +- .../property-editor-ui-number.element.ts | 2 +- .../property-editor-ui-text-box.element.ts | 2 +- .../property-editor-ui-textarea.element.ts | 10 ++--- 9 files changed, 38 insertions(+), 29 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/auth/components/input-user-group/input-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/auth/components/input-user-group/input-user-group.element.ts index f1133821f4..7f92e52413 100644 --- a/src/Umbraco.Web.UI.Client/src/auth/components/input-user-group/input-user-group.element.ts +++ b/src/Umbraco.Web.UI.Client/src/auth/components/input-user-group/input-user-group.element.ts @@ -63,7 +63,7 @@ export class UmbInputPickerUserGroupElement extends UmbInputListBase { selectionUpdated() { this._observeUserGroups(); - this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); + this.dispatchEvent(new CustomEvent('property-value-change', { bubbles: true, composed: true })); } private _renderUserGroupList() { diff --git a/src/Umbraco.Web.UI.Client/src/auth/components/input-user/input-user.element.ts b/src/Umbraco.Web.UI.Client/src/auth/components/input-user/input-user.element.ts index dd99d8520d..16d035b2f4 100644 --- a/src/Umbraco.Web.UI.Client/src/auth/components/input-user/input-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/auth/components/input-user/input-user.element.ts @@ -63,7 +63,7 @@ export class UmbPickerUserElement extends UmbInputListBase { selectionUpdated() { this._observeUser(); - this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); + this.dispatchEvent(new CustomEvent('property-value-change', { bubbles: true, composed: true })); } private _renderUserList() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts index 8d26ad21e2..26e3295df2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts @@ -58,7 +58,7 @@ export class UmbInputPickerSectionElement extends UmbInputListBase { selectionUpdated() { this._observeSections(); // TODO: Use proper event class: - this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); + this.dispatchEvent(new CustomEvent('property-value-change', { bubbles: true, composed: true })); } renderContent() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts index a0047bf386..16cfea9da7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts @@ -136,6 +136,9 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { private propertyEditorUIObserver?: UmbObserverController; + private _valueObserver?: UmbObserverController; + private _configObserver?: UmbObserverController; + constructor() { super(); @@ -147,15 +150,13 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { this._description = description; }); - // TODO: maybe this would be called change. - this.addEventListener('change', this._onPropertyEditorChange as any as EventListener); - } private _onPropertyEditorChange = (e: CustomEvent) => { const target = e.composedPath()[0] as any; this.value = target.value;// Sets value in context. + e.stopPropagation(); }; private _observePropertyEditorUI() { @@ -174,27 +175,37 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { createExtensionElement(manifest) .then((el) => { const oldValue = this._element; + + oldValue?.removeEventListener('change', this._onPropertyEditorChange as any as EventListener); + this._element = el; - this.observe(this._propertyContext.value, (value) => { - if(this._element) { - this._element.value = value; - } - }); - this.observe(this._propertyContext.config, (config) => { - if(this._element) { - this._element.config = config; - } - }); + this._valueObserver?.destroy(); + this._configObserver?.destroy(); + + if(this._element) { + this._element.addEventListener('change', this._onPropertyEditorChange as any as EventListener); + + this._valueObserver = this.observe(this._propertyContext.value, (value) => { + if(this._element) { + this._element.value = value; + } + }); + this._configObserver = this.observe(this._propertyContext.config, (config) => { + if(this._element) { + this._element.config = config; + } + }); + } this.requestUpdate('element', oldValue); - + }) .catch(() => { // TODO: loading JS failed so we should do some nice UI. (This does only happen if extension has a js prop, otherwise we concluded that no source was needed resolved the load.) }); } - + render() { return html` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts index bfa19bce97..b5e81487e1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts @@ -7,7 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-property-action-clear') export class UmbPropertyActionClearElement extends UmbLitElement implements UmbPropertyAction { - + @property() value = ''; @@ -38,7 +38,7 @@ export class UmbPropertyActionClearElement extends UmbLitElement implements UmbP private _clearValue() { // TODO: how do we want to update the value? Testing an event based approach. We need to test an api based approach too. //this.value = '';// This is though bad as it assumes we are dealing with a string. So wouldn't work as a generalized element. - //this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); + //this.dispatchEvent(new CustomEvent('property-value-change', { bubbles: true, composed: true })); // Or you can do this: this._propertyContext?.resetValue();// This resets value to what the property wants. } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-content-picker.element.ts index e8030b3049..9ce4bfc0d5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-content-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-content-picker.element.ts @@ -90,7 +90,7 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement { private _setValue(newValue: Array) { this.value = newValue; this._observePickedDocuments(); - this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); + this.dispatchEvent(new CustomEvent('property-value-change', { bubbles: true, composed: true })); } private _renderItem(item: FolderTreeItem) { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts index 42d35c2c8e..fb1e450df1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts @@ -21,7 +21,7 @@ export class UmbPropertyEditorUINumberElement extends LitElement { private onInput(e: InputEvent) { this.value = (e.target as HTMLInputElement).value; - this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); + this.dispatchEvent(new CustomEvent('property-value-change', { bubbles: true, composed: true })); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts index 104f87accb..8845fd53e5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts @@ -21,7 +21,7 @@ export class UmbPropertyEditorUITextBoxElement extends LitElement { private onInput(e: InputEvent) { this.value = (e.target as HTMLInputElement).value; - this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); + this.dispatchEvent(new CustomEvent('property-value-change', { bubbles: true, composed: true })); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts index 36537cdb84..df1980458f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts @@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; import type { UmbWorkspacePropertyContext } from 'src/backoffice/shared/components/workspace-property/workspace-property.context'; import { UmbLitElement } from '@umbraco-cms/element'; +import { UUITextareaElement } from '@umbraco-ui/uui'; @customElement('umb-property-editor-ui-textarea') export class UmbPropertyEditorUITextareaElement extends UmbLitElement { @@ -32,16 +33,13 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement { } private onInput(e: InputEvent) { - this.value = (e.target as HTMLInputElement).value; - this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); + this.value = (e.target as UUITextareaElement).value as string; + this.dispatchEvent(new CustomEvent('property-value-change')); } render() { return html` - - ${this.config?.map((property: any) => html`
${property.alias}: ${property.value}
`)} - - `; + `; } }