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

react to prop updates

Browse Source
This commit is contained in:
Mads Rasmussen
2024-08-15 14:45:19 +02:00
parent 103917a95c
commit 4c4c6f12ba
2 changed files with 30 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts
View File

@@ -24,11 +24,14 @@ export class UmbPickerModalContext<
* @param {ModalDataType} data
* @memberof UmbPickerModalContext
*/
setData(data: ModalDataType) {
const searchProviderAlias = data.search?.providerAlias;
setData(data: ModalDataType | undefined) {
const searchProviderAlias = data?.search?.providerAlias;
if (searchProviderAlias) {
this.search.setConfig({ providerAlias: searchProviderAlias });
this.search.setSearchable(true);
} else {
this.search.setConfig({ providerAlias: undefined });
this.search.setSearchable(false);
}
}

52
src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts
View File

@@ -31,6 +31,27 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
constructor() {
super();
this.#api.selection.setSelectable(true);
this.#observePickerSelection();
this.#initCreateAction();
}
protected override async updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
super.updated(_changedProperties);
if (_changedProperties.has('data')) {
this.#api.setData(this.data);
this._selectionConfiguration.multiple = this.data?.multiple ?? false;
this.#api.selection.setMultiple(this.data?.multiple ?? false);
}
if (_changedProperties.has('value')) {
this._selectionConfiguration.selection = this.value?.selection ?? [];
this.#api.selection.setSelection(this.value.selection);
}
}
#observePickerSelection() {
this.observe(
this.#api.selection.selection,
(selection) => {
@@ -41,37 +62,14 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
);
}
override connectedCallback() {
super.connectedCallback();
// TODO: We should make a nicer way to observe the value.. [NL]
// This could be by observing when the modalCOntext gets set. [NL]
this._selectionConfiguration.selection = this.value?.selection ?? [];
this.#api.selection.setSelection(this.value?.selection ?? []);
// Same here [NL]
this._selectionConfiguration.multiple = this.data?.multiple ?? false;
this.#api.selection.setMultiple(this.data?.multiple ?? false);
this.#api.selection.setSelectable(true);
this.#initCreateAction();
}
protected override async updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
super.updated(_changedProperties);
if (_changedProperties.has('data') && this.data) {
this.#api.setData(this.data);
}
}
// Tree Selection
#onSelected(event: UmbSelectedEvent) {
#onTreeItemSelected(event: UmbSelectedEvent) {
event.stopPropagation();
this.#api.selection.select(event.unique);
this.modalContext?.dispatchEvent(new UmbSelectedEvent(event.unique));
}
#onDeselected(event: UmbDeselectedEvent) {
#onTreeItemDeselected(event: UmbDeselectedEvent) {
event.stopPropagation();
this.#api.selection.deselect(event.unique);
this.modalContext?.dispatchEvent(new UmbDeselectedEvent(event.unique));
@@ -140,8 +138,8 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
startNode: this.data?.startNode,
foldersOnly: this.data?.foldersOnly,
}}
@selected=${this.#onSelected}
@deselected=${this.#onDeselected}></umb-tree>
@selected=${this.#onTreeItemSelected}
@deselected=${this.#onTreeItemDeselected}></umb-tree>
`;
}