From b42cc63376f2dac48c29d486f3a6d613c242782a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 6 Jan 2023 15:14:55 +0100 Subject: [PATCH] remove tree-navigator element --- .../tree/navigator/tree-navigator.element.ts | 71 ------------------- .../tree/navigator/tree-navigator.stories.ts | 13 ---- .../shared/components/tree/tree.element.ts | 50 +++++++++++-- 3 files changed, 43 insertions(+), 91 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.element.ts deleted file mode 100644 index d3306add02..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.element.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { css, html } from 'lit'; -import { repeat } from 'lit/directives/repeat.js'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, state } from 'lit/decorators.js'; -import { UmbLitElement } from '@umbraco-cms/element'; -import type { Entity } from '@umbraco-cms/models'; -import { UmbTreeDataStore } from '@umbraco-cms/stores/store'; - -import '../tree-item.element'; - -@customElement('umb-tree-navigator') -export class UmbTreeNavigator extends UmbLitElement { - static styles = [UUITextStyles, css``]; - - @state() - private _loading = true; - - @state() - private _items: Entity[] = []; - - private _store?: UmbTreeDataStore; - - constructor() { - super(); - - this.consumeContext('umbStore', (store) => { - this._store = store; - }); - } - - connectedCallback() { - super.connectedCallback(); - this._observeTreeRoot(); - } - - private _observeTreeRoot() { - if (!this._store?.getTreeRoot) return; - - this._loading = true; - - this.observe(this._store.getTreeRoot(), (rootItems) => { - if (rootItems?.length === 0) return; - this._items = rootItems; - this._loading = false; - }); - } - - render() { - // TODO: Fix Type Mismatch ` as Entity` in this template: - return html` - ${repeat( - this._items, - (item) => item.key, - (item) => - html`` - )} - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-tree-navigator': UmbTreeNavigator; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.stories.ts deleted file mode 100644 index 2ffa111470..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.stories.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Meta, Story } from '@storybook/web-components'; -import { html } from 'lit'; -import './tree-navigator.element'; -import '../tree-item.element'; - -export default { - title: 'Tree Navigator', - component: 'ucp-notification-layout-default', -} as Meta; - -const Template: Story = () => html``; - -export const Default = Template.bind({}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts index 4bc7988cd4..9af9c01147 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts @@ -1,13 +1,14 @@ import { html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { map } from 'rxjs'; +import { repeat } from 'lit-html/directives/repeat.js'; import { UmbTreeContextBase } from './tree.context'; -import type { ManifestTree } from '@umbraco-cms/models'; +import type { Entity, ManifestTree } from '@umbraco-cms/models'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; -import { UmbDataStore } from '@umbraco-cms/stores/store'; +import { UmbTreeDataStore } from '@umbraco-cms/stores/store'; import { UmbLitElement } from '@umbraco-cms/element'; -import './navigator/tree-navigator.element'; +import './tree-item.element'; import './context-menu/tree-context-menu-page-action-list.element'; import './context-menu/tree-context-menu-page.service'; import './context-menu/tree-context-menu.service'; @@ -58,7 +59,14 @@ export class UmbTreeElement extends UmbLitElement { @state() private _tree?: ManifestTree; + @state() + private _items: Entity[] = []; + + @state() + private _loading = true; + private _treeContext?: UmbTreeContextBase; + private _store?: UmbTreeDataStore; connectedCallback(): void { super.connectedCallback(); @@ -77,6 +85,7 @@ export class UmbTreeElement extends UmbLitElement { if (tree) { this._provideTreeContext(); this._provideStore(); + this._observeTreeRoot(); } } ); @@ -99,9 +108,10 @@ export class UmbTreeElement extends UmbLitElement { if (!this._tree?.meta.storeAlias) return; - this.consumeContext(this._tree.meta.storeAlias, (store: UmbDataStore) => - this.provideContext('umbStore', store) - ); + this.consumeContext(this._tree.meta.storeAlias, (store: UmbTreeDataStore) => { + this._store = store; + this.provideContext('umbStore', store); + }); } private _observeSelection() { @@ -114,8 +124,34 @@ export class UmbTreeElement extends UmbLitElement { }); } + private _observeTreeRoot() { + if (!this._store?.getTreeRoot) return; + + this._loading = true; + + this.observe(this._store.getTreeRoot(), (rootItems) => { + if (rootItems?.length === 0) return; + this._items = rootItems; + this._loading = false; + }); + } + render() { - return html``; + // TODO: Fix Type Mismatch ` as Entity` in this template: + return html` + ${repeat( + this._items, + (item) => item.key, + (item) => + html`` + )} + `; } }