UNPKG

@teambit/workspace

Version:
301 lines (299 loc) • 10.1 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = exports.WorkspaceUI = void 0; function _component() { const data = require("@teambit/component"); _component = function () { return data; }; return data; } function _lodash() { const data = require("lodash"); _lodash = function () { return data; }; return data; } function _componentTree() { const data = require("@teambit/component-tree"); _componentTree = function () { return data; }; return data; } function _harmony() { const data = require("@teambit/harmony"); _harmony = function () { return data; }; return data; } function _sidebar() { const data = require("@teambit/sidebar"); _sidebar = function () { return data; }; return data; } function _ui() { const data = require("@teambit/ui"); _ui = function () { return data; }; return data; } function _graph() { const data = require("@teambit/graph"); _graph = function () { return data; }; return data; } function _react() { const data = _interopRequireDefault(require("react")); _react = function () { return data; }; return data; } function _commandBar() { const data = require("@teambit/command-bar"); _commandBar = function () { return data; }; return data; } function _designUiSurfacesMenu() { const data = require("@teambit/design.ui.surfaces.menu.link-item"); _designUiSurfacesMenu = function () { return data; }; return data; } function _componentUiComponentFilters() { const data = require("@teambit/component.ui.component-filters.deprecate-filter"); _componentUiComponentFilters = function () { return data; }; return data; } function _componentUiComponentFilters2() { const data = require("@teambit/component.ui.component-filters.env-filter"); _componentUiComponentFilters2 = function () { return data; }; return data; } function _componentUiComponentFilters3() { const data = require("@teambit/component.ui.component-filters.show-main-filter"); _componentUiComponentFilters3 = function () { return data; }; return data; } function _componentUi() { const data = require("@teambit/component.ui.component-drawer"); _componentUi = function () { return data; }; return data; } function _componentTree2() { const data = require("./component-tree.widget"); _componentTree2 = function () { return data; }; return data; } function _ui2() { const data = require("./ui"); _ui2 = function () { return data; }; return data; } function _workspace() { const data = require("./workspace.aspect"); _workspace = function () { return data; }; return data; } function _workspaceUi() { const data = require("./workspace.ui.drawer"); _workspaceUi = function () { return data; }; return data; } function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } class WorkspaceUI { constructor( /** * route slot. */ routeSlot, /** * component ui extension. */ componentUi, /** * menu slot */ menuSlot, menuItemSlot, sidebar, sidebarSlot, /** * sidebar link slot */ sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot, commandBarUI, menuWidgetSlot) { this.routeSlot = routeSlot; this.componentUi = componentUi; this.menuSlot = menuSlot; this.menuItemSlot = menuItemSlot; this.sidebar = sidebar; this.sidebarSlot = sidebarSlot; this.sidebarItemSlot = sidebarItemSlot; this.drawerWidgetSlot = drawerWidgetSlot; this.drawerComponentsFiltersSlot = drawerComponentsFiltersSlot; this.commandBarUI = commandBarUI; this.menuWidgetSlot = menuWidgetSlot; _defineProperty(this, "setKeyBindHandler", () => {}); _defineProperty(this, "registerMenuItem", menuItems => { this.menuItemSlot.register(menuItems); }); _defineProperty(this, "registerMenuWidget", menuWidgets => { this.menuWidgetSlot.register(menuWidgets); }); _defineProperty(this, "registerMenuRoutes", routes => { this.menuSlot.register(routes); return this; }); _defineProperty(this, "setComponents", components => { this.componentUi.updateComponents(components); }); _defineProperty(this, "registerSidebarLink", (...links) => { this.sidebarItemSlot.register(links); }); /** * register component filters */ _defineProperty(this, "registerDrawerComponentFilters", filters => { this.drawerComponentsFiltersSlot.register(filters); }); _defineProperty(this, "registerDrawerWidgets", widgets => { this.drawerWidgetSlot.register(widgets); }); _defineProperty(this, "menuItems", [{ category: 'general', title: 'Open command bar', keyChar: 'mod+k', handler: () => this.commandBarUI?.run('command-bar.open') }, { category: 'general', title: 'Toggle component list', keyChar: 'alt+s', handler: () => this.commandBarUI?.run('sidebar.toggle') }]); } /** * register a route to the workspace. */ registerRoutes(routes) { this.routeSlot.register(routes); return this; } registerDrawers(...drawers) { this.sidebar.registerDrawer(...drawers); return this; } registerSidebarWidget(componentTreeNode) { this.sidebarSlot.register(componentTreeNode); return this; } uiRoot() { this.registerDrawers((0, _workspaceUi().workspaceDrawer)({ treeWidgets: this.sidebarSlot, drawerWidgetSlot: this.drawerWidgetSlot, filtersSlot: this.drawerComponentsFiltersSlot })); const [setKeyBindHandler] = this.commandBarUI.addCommand({ id: 'sidebar.toggle', // TODO - extract to a component! action: () => {}, displayName: 'Toggle component list', keybinding: 'alt+s' }); this.setKeyBindHandler = setKeyBindHandler; return { routes: [{ path: '/*', element: /*#__PURE__*/_react().default.createElement(_ui2().Workspace, { menuSlot: this.menuSlot, routeSlot: this.routeSlot, sidebar: /*#__PURE__*/_react().default.createElement(this.sidebar.render, { items: this.listSidebarItems() }), workspaceUI: this, onSidebarTogglerChange: this.setKeyBindHandler }) }] }; } listSidebarItems() { const items = (0, _lodash().flatten)(this.sidebarItemSlot.values()); return (0, _lodash().compact)(items.map(item => { return item.component; })); } static async provider([ui, componentUi, sidebar, componentTree, commandBarUI, graphUI], config, [routeSlot, menuSlot, menuItemSlot, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot, menuWidgetSlot]) { componentTree.registerTreeNode(new (_componentTree2().ComponentTreeWidget)()); sidebarSlot.register(new (_componentTree2().ComponentTreeWidget)()); graphUI.registerComponentWidget(new (_componentTree2().ComponentTreeWidget)().widget); const workspaceUI = new WorkspaceUI(routeSlot, componentUi, menuSlot, menuItemSlot, sidebar, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot, commandBarUI, menuWidgetSlot); workspaceUI.registerDrawerComponentFilters([_componentUiComponentFilters().DeprecateFilter, _componentUiComponentFilters2().EnvsFilter, (0, _componentUiComponentFilters3().ShowMainFilter)(true)]); workspaceUI.registerDrawerWidgets([/*#__PURE__*/_react().default.createElement(_componentUi().FilterWidget, { key: 'workspace-filter-widget' }), /*#__PURE__*/_react().default.createElement(_componentUi().TreeToggleWidget, { key: 'workspace-tree-toggle-widget' })]); ui.registerRoot(workspaceUI.uiRoot.bind(workspaceUI)); workspaceUI.registerMenuItem(workspaceUI.menuItems); workspaceUI.registerSidebarLink({ component: function Gallery() { return /*#__PURE__*/_react().default.createElement(_designUiSurfacesMenu().MenuLinkItem, { exact: true, href: "/", icon: "comps" }, "Workspace overview"); } }); workspaceUI.registerMenuRoutes([{ path: '/', element: /*#__PURE__*/_react().default.createElement(_ui2().WorkspaceMenu, { menuItemSlot: workspaceUI.menuItemSlot, widgetSlot: workspaceUI.menuWidgetSlot }) }, { path: workspaceUI.componentUi.routePath, element: workspaceUI.componentUi.getMenu(_workspace().WorkspaceAspect.id) }]); workspaceUI.registerRoutes([{ path: workspaceUI.componentUi.routePath, element: workspaceUI.componentUi.getComponentUI(_workspace().WorkspaceAspect.id) }]); workspaceUI.registerMenuWidget([commandBarUI.CommandBarButton]); return workspaceUI; } } exports.WorkspaceUI = WorkspaceUI; _defineProperty(WorkspaceUI, "dependencies", [_ui().UIAspect, _component().ComponentAspect, _sidebar().SidebarAspect, _componentTree().ComponentTreeAspect, _commandBar().CommandBarAspect, _graph().GraphAspect]); _defineProperty(WorkspaceUI, "runtime", _ui().UIRuntime); _defineProperty(WorkspaceUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]); var _default = exports.default = WorkspaceUI; _workspace().WorkspaceAspect.addRuntime(WorkspaceUI); //# sourceMappingURL=workspace.ui.runtime.js.map