yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor property editor chang event

Browse Source
This commit is contained in:
Niels Lyngsø
2023-01-10 15:34:05 +01:00
parent b1baa70c47
commit 8bdc14f818
9 changed files with 38 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/auth/components/input-user-group/input-user-group.element.ts
View File

@@ -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() {

2
src/Umbraco.Web.UI.Client/src/auth/components/input-user/input-user.element.ts
View File

@@ -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() {

2
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
View File

@@ -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() {

41
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
View File

@@ -136,6 +136,9 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
private propertyEditorUIObserver?: UmbObserverController<ManifestTypes>;
private _valueObserver?: UmbObserverController<unknown>;
private _configObserver?: UmbObserverController<unknown>;
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`

4
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts
View File

@@ -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.
}

2
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-content-picker.element.ts
View File

@@ -90,7 +90,7 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement {
private _setValue(newValue: Array<string>) {
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) {

2
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts
View File

@@ -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() {

2
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
View File

@@ -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() {

10
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
View File

@@ -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`
<uui-textarea .value=${this.value} @input=${this.onInput}></uui-textarea>
${this.config?.map((property: any) => html`<div>${property.alias}: ${property.value}</div>`)}
<button @click=${() => this.propertyContext?.resetValue()}>Reset</button>
<button @click=${() => this.propertyContext?.setLabel('random' + Math.random()*10)}>Label change</button>`;
<uui-textarea .value=${this.value} @input=${this.onInput}></uui-textarea>`;
}
}