UNPKG

@teambit/workspace

Version:
208 lines (206 loc) • 7.07 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.WorkspaceOverview = WorkspaceOverview; exports.useCardPlugins = useCardPlugins; function _react() { const data = _interopRequireWildcard(require("react")); _react = function () { return data; }; return data; } function _explorerUiGallery() { const data = require("@teambit/explorer.ui.gallery.component-grid"); _explorerUiGallery = function () { return data; }; return data; } function _workspaceUi() { const data = require("@teambit/workspace.ui.empty-workspace"); _workspaceUi = function () { return data; }; return data; } function _previewUi() { const data = require("@teambit/preview.ui.preview-placeholder"); _previewUi = function () { return data; }; return data; } function _designUi() { const data = require("@teambit/design.ui.tooltip"); _designUi = function () { return data; }; return data; } function _componentId() { const data = require("@teambit/component-id"); _componentId = function () { return data; }; return data; } function _cloudHooks() { const data = require("@teambit/cloud.hooks.use-cloud-scopes"); _cloudHooks = function () { return data; }; return data; } function _scopes() { const data = require("@teambit/scopes.scope-id"); _scopes = function () { return data; }; return data; } function _lodash() { const data = require("lodash"); _lodash = function () { return data; }; return data; } function _workspaceUi2() { const data = require("@teambit/workspace.ui.workspace-component-card"); _workspaceUi2 = function () { return data; }; return data; } function _workspaceUi3() { const data = require("@teambit/workspace.ui.use-workspace-mode"); _workspaceUi3 = function () { return data; }; return data; } function _workspaceContext() { const data = require("../workspace-context"); _workspaceContext = function () { return data; }; return data; } function _workspaceOverviewModule() { const data = _interopRequireDefault(require("./workspace-overview.module.scss")); _workspaceOverviewModule = function () { return data; }; return data; } function _linkPlugin() { const data = require("./link-plugin"); _linkPlugin = function () { return data; }; return data; } function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } function WorkspaceOverview() { const workspace = (0, _react().useContext)(_workspaceContext().WorkspaceContext); const { isMinimal } = (0, _workspaceUi3().useWorkspaceMode)(); const compModelsById = new Map(workspace.components.map(comp => [comp.id.toString(), comp])); const { components, componentDescriptors } = workspace; const uniqueScopes = new Set(components.map(c => c.id.scope)); const uniqueScopesArr = Array.from(uniqueScopes); const { cloudScopes = [] } = (0, _cloudHooks().useCloudScopes)(uniqueScopesArr); const cloudScopesById = new Map(cloudScopes.map(scope => [scope.id.toString(), scope])); const plugins = useCardPlugins({ compModelsById, showPreview: isMinimal }); if (!components || components.length === 0) return /*#__PURE__*/_react().default.createElement(_workspaceUi().EmptyWorkspace, { name: workspace.name }); const compDescriptorById = new Map(componentDescriptors.map(comp => [comp.id.toString(), comp])); const componentsWithDescriptorAndScope = (0, _lodash().compact)(components.map(component => { if (component.deprecation?.isDeprecate) return null; const componentDescriptor = compDescriptorById.get(component.id.toString()); if (!componentDescriptor) return null; const cloudScope = cloudScopesById.get(component.id.scope); const scope = cloudScope || _scopes().ScopeID.isValid(component.id.scope) && { id: _scopes().ScopeID.fromString(component.id.scope) } || undefined; return { component, componentDescriptor, scope }; })); return /*#__PURE__*/_react().default.createElement("div", { className: _workspaceOverviewModule().default.container }, /*#__PURE__*/_react().default.createElement(_explorerUiGallery().ComponentGrid, { className: _workspaceOverviewModule().default.cardGrid }, componentsWithDescriptorAndScope.map(({ component, componentDescriptor, scope }) => { return /*#__PURE__*/_react().default.createElement(_workspaceUi2().WorkspaceComponentCard, { key: component.id.toString(), componentDescriptor: componentDescriptor, component: component, plugins: plugins, scope: scope, shouldShowPreviewState: isMinimal }); }))); } function useCardPlugins({ compModelsById, showPreview }) { const serverUrlsSignature = _react().default.useMemo(() => { const serversCount = Array.from(compModelsById.values()).filter(comp => comp.server?.url).map(comp => comp.server?.url).join(','); return serversCount; }, [compModelsById]); const plugins = _react().default.useMemo(() => [{ preview: function Preview({ component, shouldShowPreview }) { const compModel = compModelsById.get(component.id.toString()); if (!compModel) return null; return /*#__PURE__*/_react().default.createElement(_previewUi().PreviewPlaceholder, { componentDescriptor: component, component: compModel, shouldShowPreview: showPreview || shouldShowPreview }); } }, { previewBottomRight: function PreviewBottomRight({ component }) { const env = component.get('teambit.envs/envs'); const envComponentId = env?.id ? _componentId().ComponentID.fromString(env?.id) : undefined; return /*#__PURE__*/_react().default.createElement("div", { className: _workspaceOverviewModule().default.rightPreviewPlugins }, /*#__PURE__*/_react().default.createElement("div", { className: _workspaceOverviewModule().default.badge }, /*#__PURE__*/_react().default.createElement(_designUi().Tooltip, { delay: 300, content: envComponentId?.name }, /*#__PURE__*/_react().default.createElement("img", { src: env?.icon, className: _workspaceOverviewModule().default.envIcon })))); } }, new (_linkPlugin().LinkPlugin)()], [compModelsById.size, serverUrlsSignature, showPreview]); return plugins; } //# sourceMappingURL=workspace-overview.js.map