@things-factory/meta-ui 7.0.1-alpha.51 → 7.0.1-alpha.52

package/client/reducers/main.js

@@ -1,79 +0,0 @@
-import { UPDATE_META_UI } from '../actions/main'
-import cloneDeep from 'lodash-es/cloneDeep'
-
-const INITIAL_STATE = {
-  template: [],
-  addon: [],
-  menus: []
-}
-
-export const UPDATE_META_MENU_TEMPLATE = 'UPDATE_META_MENU_TEMPLATE'
-
-function buildMenus(template, addon) {
-  var menus = cloneDeep(template || [])
-  addon = addon || []
-
-  /* make group by parent */
-  const groups =
-    addon
-      .filter(menu => menu.active)
-      .sort((menu1, menu2) => (menu1.parent || '').localeCompare(menu2.parent || '') || menu1.rank - menu2.rank)
-      .reduce((arr, menu) => {
-        let lastparent = arr.length > 0 && arr[arr.length - 1][0].parent
-
-        if (!lastparent || lastparent !== menu.parent) {
-          arr.push([menu])
-        } else {
-          arr[arr.length - 1].push(menu)
-        }
-
-        return arr
-      }, []) || []
-
-  /* iterate group to put menu into parent menu */
-  groups.forEach(group => {
-    group.forEach(menu => {
-      const { parent, name, rank, type, value, icon } = menu
-
-      const parentMenu = parent && menus.find(m => m.name === parent)
-      if (parentMenu && !parentMenu.menus) {
-        parentMenu.menus = []
-      }
-      const children = parentMenu ? parentMenu.menus : menus
-      children.push({
-        name,
-        type,
-        path:
-          type === 'page'
-            ? value
-            : type === 'board'
-            ? `board-viewer/${value}?title=${name}`
-            : type === 'interactive-board'
-            ? `board-viewer/${value}?interactive=true&title=${name}`
-            : '',
-        icon: icon || (type === 'page' ? 'menu' : type === 'board' || type === 'interactive-board' ? 'dashboard' : '')
-      })
-    })
-  })
-
-  return menus
-}
-
-const metaUI = (state = INITIAL_STATE, action) => {
-  switch (action.type) {
-    case UPDATE_META_UI:
-      return { ...state }
-
-    case UPDATE_META_MENU_TEMPLATE:
-      return {
-        ...state,
-        template: action.template,
-        addon: action.addon,
-        menus: buildMenus(action.template, action.addon)
-      }
-    default:
-      return state
-  }
-}
-
-export default metaUI

package/client/viewparts/dynamic-menu-part.ts

@@ -1,119 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/menu/ox-menu-portrait.js'
-import '@operato/menu/ox-menu-landscape.js'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-
-import { store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { Menu } from '@operato/menu/dist/src/types'
-
-function isActiveMenu(menu: Menu, path: string) {
-  return menu.path?.split('?')[0] === path || (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))
-}
-
-// TODO @operato/menu/ox-menu-part를 사용하도록 통합되어야 한다.
-@customElement('dynamic-menu-part')
-export class DynamicMenuPart extends connect(store)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        overflow-y: auto;
-        flex-direction: column;
-        height: 100%;
-        min-width: 200px;
-        background-color: var(--theme-white-color);
-      }
-
-      :host([landscape]) {
-        overflow-x: auto;
-        flex-direction: row;
-        width: 100%;
-        min-height: 20px;
-      }
-
-      ox-menu-portrait,
-      ox-menu-landscape {
-        flex: 1;
-      }
-    `
-  ]
-
-  @property({ type: String }) page!: string
-  @property({ type: String }) resourceId?: string
-  @property({ type: Array }) menus?: Menu[]
-  @property({ type: String }) orientation?: 'landscape' | 'portrait'
-
-  @state() slotTemplate: any
-  @state() _activeTopLevel?: Menu
-  @state() _activeMenu?: Menu
-  @state() _path?: string
-
-  render() {
-    return html`
-      <slot name="head"></slot>
-      ${this.orientation !== 'landscape'
-        ? html`<ox-menu-portrait .menus=${this.menus} .activeTopLevel=${this._activeTopLevel} .activeMenu=${this._activeMenu} .path=${this._path}></ox-menu-portrait>`
-        : html`<ox-menu-landscape .menus=${this.menus} .activeTopLevel=${this._activeTopLevel} .activeMenu=${this._activeMenu} .path=${this._path}></ox-menu-landscape>`}
-      <slot name="tail"></slot>
-    `
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('active-toplevel', (e: Event) => {
-      e.stopPropagation()
-      e.preventDefault()
-
-      this._activeTopLevel = (e as CustomEvent).detail
-    })
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {
-      this.findActivePage()
-    }
-
-    if (changes.has('orientation')) {
-      if (this.orientation == 'portrait') {
-        this.removeAttribute('landscape')
-      } else {
-        this.setAttribute('landscape', '')
-      }
-    }
-
-    if (changes.has('slotTemplate')) {
-      this.replaceChild(this.slotTemplate, this.renderRoot)
-    }
-  }
-
-  stateChanged(state: any): void {
-    this.page = state.route.page
-    this.resourceId = state.route.resourceId
-    this.menus = state.metaUI.menus || []
-    this.slotTemplate = state.metaUI.slotTemplate
-  }
-
-  private findActivePage() {
-    var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page
-    var menus = this.menus || []
-    var activeMenu
-
-    this._activeTopLevel = menus.find(menu => {
-      if (isActiveMenu(menu, path)) {
-        activeMenu = menu
-        return true
-      } else if (menu.menus) {
-        activeMenu = menu.menus.find(menu => isActiveMenu(menu, path))
-        return !!activeMenu
-      }
-    })
-
-    this._path = path
-    this._activeMenu = activeMenu || this._activeTopLevel
-  }
-}