@teambit/workspace
Version:
277 lines (275 loc) • 10.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MinimalModeUrlBroadcasterAndListener = MinimalModeUrlBroadcasterAndListener;
exports.Workspace = Workspace;
require("reset-css");
function _pluralize() {
const data = _interopRequireDefault(require("pluralize"));
_pluralize = function () {
return data;
};
return data;
}
function _react() {
const data = _interopRequireWildcard(require("react"));
_react = function () {
return data;
};
return data;
}
function _reactRouterDom() {
const data = require("react-router-dom");
_reactRouterDom = function () {
return data;
};
return data;
}
function _uiFoundationUiNotifications() {
const data = require("@teambit/ui-foundation.ui.notifications.notification-context");
_uiFoundationUiNotifications = function () {
return data;
};
return data;
}
function _uiFoundationUiReactRouter() {
const data = require("@teambit/ui-foundation.ui.react-router.slot-router");
_uiFoundationUiReactRouter = function () {
return data;
};
return data;
}
function _uiFoundationUi() {
const data = require("@teambit/ui-foundation.ui.corner");
_uiFoundationUi = function () {
return data;
};
return data;
}
function _uiFoundationUiButtons() {
const data = require("@teambit/ui-foundation.ui.buttons.collapser");
_uiFoundationUiButtons = function () {
return data;
};
return data;
}
function _baseUiSurfacesSplitPane() {
const data = require("@teambit/base-ui.surfaces.split-pane.split-pane");
_baseUiSurfacesSplitPane = function () {
return data;
};
return data;
}
function _baseReactThemes() {
const data = require("@teambit/base-react.themes.theme-switcher");
_baseReactThemes = function () {
return data;
};
return data;
}
function _baseUiSurfacesSplitPane2() {
const data = require("@teambit/base-ui.surfaces.split-pane.hover-splitter");
_baseUiSurfacesSplitPane2 = function () {
return data;
};
return data;
}
function _uiFoundationUi2() {
const data = require("@teambit/ui-foundation.ui.top-bar");
_uiFoundationUi2 = function () {
return data;
};
return data;
}
function _workspaceUi() {
const data = require("@teambit/workspace.ui.preserve-workspace-mode");
_workspaceUi = function () {
return data;
};
return data;
}
function _classnames() {
const data = _interopRequireDefault(require("classnames"));
_classnames = function () {
return data;
};
return data;
}
function _workspaceUi2() {
const data = require("@teambit/workspace.ui.use-workspace-mode");
_workspaceUi2 = function () {
return data;
};
return data;
}
function _workspaceHooks() {
const data = require("@teambit/workspace.hooks.use-url-change-broadcaster");
_workspaceHooks = function () {
return data;
};
return data;
}
function _workspaceHooks2() {
const data = require("@teambit/workspace.hooks.use-navigation-message-listener");
_workspaceHooks2 = function () {
return data;
};
return data;
}
function _useWorkspace() {
const data = require("./use-workspace");
_useWorkspace = function () {
return data;
};
return data;
}
function _workspaceOverview() {
const data = require("./workspace-overview");
_workspaceOverview = function () {
return data;
};
return data;
}
function _workspaceProvider() {
const data = require("./workspace-provider");
_workspaceProvider = function () {
return data;
};
return data;
}
function _workspaceModule() {
const data = _interopRequireDefault(require("./workspace.module.scss"));
_workspaceModule = function () {
return data;
};
return data;
}
function _themeFromUrl() {
const data = require("./theme-from-url");
_themeFromUrl = function () {
return data;
};
return data;
}
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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* main workspace component.
*/
function Workspace({
routeSlot,
menuSlot,
sidebar,
workspaceUI,
onSidebarTogglerChange
}) {
const {
isMinimal
} = (0, _workspaceUi2().useWorkspaceMode)();
const reactionsRef = (0, _react().useRef)({
onComponentAdded: () => {},
onComponentRemoved: () => {}
});
const reactions = (0, _react().useMemo)(() => ({
onComponentAdded: comps => reactionsRef.current.onComponentAdded(comps),
onComponentRemoved: ids => reactionsRef.current.onComponentRemoved(ids)
}), []);
const {
workspace
} = (0, _useWorkspace().useWorkspace)(reactions);
const theme = (0, _baseReactThemes().useThemePicker)();
const currentTheme = theme?.current;
const [isSidebarOpen, setSidebarOpen] = (0, _react().useState)(null);
const handleSidebarToggle = (0, _react().useCallback)(() => {
setSidebarOpen(prev => !prev);
}, []);
const sidebarOpenness = isSidebarOpen ? _baseUiSurfacesSplitPane().Layout.row : _baseUiSurfacesSplitPane().Layout.right;
const themeName = currentTheme?.themeName || 'light';
onSidebarTogglerChange(handleSidebarToggle);
(0, _react().useEffect)(() => {
if (!window) return;
if (window.innerWidth <= 1024) {
setSidebarOpen(false);
}
}, []);
(0, _react().useLayoutEffect)(() => {
setSidebarOpen(!isMinimal);
}, [isMinimal]);
if (!workspace) {
return /*#__PURE__*/_react().default.createElement("div", {
className: _workspaceModule().default.emptyContainer
});
}
workspaceUI.setComponents(workspace.components);
const inIframe = typeof window !== 'undefined' && window.parent && window.parent !== window;
return /*#__PURE__*/_react().default.createElement(_workspaceProvider().WorkspaceProvider, {
workspace: workspace
}, !isMinimal && /*#__PURE__*/_react().default.createElement(NotificationsBinder, {
reactionsRef: reactionsRef
}), /*#__PURE__*/_react().default.createElement(_workspaceUi().PreserveWorkspaceMode, null, /*#__PURE__*/_react().default.createElement(_themeFromUrl().ThemeFromUrlSync, null), isMinimal && inIframe && /*#__PURE__*/_react().default.createElement(MinimalModeUrlBroadcasterAndListener, null), /*#__PURE__*/_react().default.createElement("div", {
className: _workspaceModule().default.workspaceWrapper
}, /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().TopBar, {
className: (0, _classnames().default)(_workspaceModule().default.topbar, _workspaceModule().default[themeName], isMinimal && _workspaceModule().default.minimal),
Corner: () => /*#__PURE__*/_react().default.createElement(_uiFoundationUi().Corner, {
className: (0, _classnames().default)(isMinimal && _workspaceModule().default.minimalCorner || _workspaceModule().default.corner, _workspaceModule().default[themeName]),
name: isMinimal ? '' : workspace.name,
icon: isMinimal ? 'https://static.bit.dev/bit-icons/house.svg' : workspace.icon
})
// @ts-ignore - getting an error of "Types have separate declarations of a private property 'registerFn'." for some reason after upgrading teambit.harmony/harmony from 0.4.6 to 0.4.7
,
menu: menuSlot
}), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().SplitPane, {
className: _workspaceModule().default.main,
size: 246,
layout: sidebarOpenness
}, /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().Pane, {
className: (0, _classnames().default)(_workspaceModule().default.sidebar, _workspaceModule().default[themeName], !isSidebarOpen && _workspaceModule().default.closed)
}, sidebar), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane2().HoverSplitter, {
className: _workspaceModule().default.splitter
}, /*#__PURE__*/_react().default.createElement(_uiFoundationUiButtons().Collapser, {
isOpen: Boolean(isSidebarOpen),
onMouseDown: e => e.stopPropagation() // avoid split-pane drag
,
onClick: handleSidebarToggle,
tooltipContent: `${isSidebarOpen ? 'Hide' : 'Show'} side panel`
})), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().Pane, null, /*#__PURE__*/_react().default.createElement(_uiFoundationUiReactRouter().SlotRouter, {
slot: routeSlot
}, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
index: true,
element: /*#__PURE__*/_react().default.createElement(_workspaceOverview().WorkspaceOverview, null)
})))))));
}
function NotificationsBinder({
reactionsRef
}) {
const notifications = (0, _uiFoundationUiNotifications().useNotifications)();
const notificationsMapped = (0, _react().useMemo)(() => {
return {
onComponentAdded: comps => {
const notificationId = notifications.log(`added ${(0, _pluralize().default)('component', comps.length)}: ${comps.map(comp => comp.id.toString()).join(', ')}`);
setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);
},
onComponentRemoved: ids => {
const notificationId = notifications.log(`removed ${(0, _pluralize().default)('component', ids.length)} ${ids.map(id => id.toString()).join(', ')}`);
setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);
}
};
}, [notifications]);
(0, _react().useEffect)(() => {
reactionsRef.current = notificationsMapped;
return () => {
reactionsRef.current = {
onComponentAdded: () => {},
onComponentRemoved: () => {}
};
};
}, [notificationsMapped, reactionsRef]);
return null;
}
function MinimalModeUrlBroadcasterAndListener() {
(0, _workspaceHooks().useUrlChangeBroadcaster)();
(0, _workspaceHooks2().useNavigationMessageListener)();
return null;
}
//# sourceMappingURL=workspace.js.map