@teambit/lanes
Version:
492 lines (489 loc) • 16.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.LanesUI = void 0;
exports.useComponentFilters = useComponentFilters;
exports.useComponentId = useComponentId;
exports.useLaneComponentIdFromUrl = useLaneComponentIdFromUrl;
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 _harmony() {
const data = require("@teambit/harmony");
_harmony = function () {
return data;
};
return data;
}
function _lanesUiCompare() {
const data = require("@teambit/lanes.ui.compare.lane-compare");
_lanesUiCompare = function () {
return data;
};
return data;
}
function _ui() {
const data = require("@teambit/ui");
_ui = function () {
return data;
};
return data;
}
function _designUiPages() {
const data = require("@teambit/design.ui.pages.not-found");
_designUiPages = function () {
return data;
};
return data;
}
function _scope() {
const data = require("@teambit/scope");
_scope = function () {
return data;
};
return data;
}
function _workspace() {
const data = require("@teambit/workspace");
_workspace = function () {
return data;
};
return data;
}
function _component() {
const data = require("@teambit/component");
_component = function () {
return data;
};
return data;
}
function _lanesUi() {
const data = require("@teambit/lanes.ui.lane-overview");
_lanesUi = function () {
return data;
};
return data;
}
function _lanesUiMenus() {
const data = require("@teambit/lanes.ui.menus.lanes-overview-menu");
_lanesUiMenus = function () {
return data;
};
return data;
}
function _uiFoundationUiReactRouter() {
const data = require("@teambit/ui-foundation.ui.react-router.use-query");
_uiFoundationUiReactRouter = function () {
return data;
};
return data;
}
function _lanesUiMenus2() {
const data = require("@teambit/lanes.ui.menus.use-lanes-menu");
_lanesUiMenus2 = function () {
return data;
};
return data;
}
function _lanesUiModels() {
const data = require("@teambit/lanes.ui.models.lanes-model");
_lanesUiModels = function () {
return data;
};
return data;
}
function _lanesHooks() {
const data = require("@teambit/lanes.hooks.use-lanes");
_lanesHooks = function () {
return data;
};
return data;
}
function _lanesUiNavigation() {
const data = require("@teambit/lanes.ui.navigation.lane-switcher");
_lanesUiNavigation = function () {
return data;
};
return data;
}
function _lanesHooks2() {
const data = require("@teambit/lanes.hooks.use-viewed-lane-from-url");
_lanesHooks2 = function () {
return data;
};
return data;
}
function _componentCompare() {
const data = require("@teambit/component-compare");
_componentCompare = function () {
return data;
};
return data;
}
function _lanesUiCompare2() {
const data = require("@teambit/lanes.ui.compare.lane-compare-page");
_lanesUiCompare2 = function () {
return data;
};
return data;
}
function _scopeUi() {
const data = require("@teambit/scope.ui.scope-icon");
_scopeUi = function () {
return data;
};
return data;
}
function _commandBar() {
const data = require("@teambit/command-bar");
_commandBar = function () {
return data;
};
return data;
}
function _lanes() {
const data = require("./lanes.aspect");
_lanes = function () {
return data;
};
return data;
}
function _lanesUiModule() {
const data = _interopRequireDefault(require("./lanes.ui.module.scss"));
_lanesUiModule = 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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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); }
function useComponentFilters() {
const idFromLocation = (0, _component().useIdFromLocation)(undefined, true);
const {
lanesModel,
loading
} = (0, _lanesHooks().useLanes)();
const laneFromUrl = (0, _lanesHooks2().useViewedLaneFromUrl)();
const laneComponentId = idFromLocation && !laneFromUrl?.isDefault() ? lanesModel?.resolveComponentFromUrl(idFromLocation, laneFromUrl) ?? null : null;
if (laneComponentId === null || loading) {
return {
loading: true
};
}
return {
loading: false,
log: {
head: laneComponentId.version
}
};
}
function useLaneComponentIdFromUrl() {
const idFromLocation = (0, _component().useIdFromLocation)(undefined, true);
const {
lanesModel,
loading
} = (0, _lanesHooks().useLanes)();
const laneFromUrl = (0, _lanesHooks2().useViewedLaneFromUrl)();
const query = (0, _uiFoundationUiReactRouter().useQuery)();
const componentVersion = query.get('version');
if (!idFromLocation) return null;
const compIdFromLocation = _component().ComponentID.tryFromString(`${idFromLocation}${componentVersion ? `@${componentVersion}` : ''}`);
if (compIdFromLocation) return compIdFromLocation;
if (loading) return undefined;
const lanesComp = lanesModel?.resolveComponentFromUrl(idFromLocation, laneFromUrl) ?? null;
if (componentVersion) {
return lanesComp?.changeVersion(componentVersion);
}
return lanesComp;
}
function useComponentId() {
return useLaneComponentIdFromUrl()?.toString();
}
class LanesUI {
constructor(componentUI, componentCompareUI, routeSlot, navSlot, menuWidgetSlot,
/**
* overview line slot to add new lines beneath the overview section
*/
overviewSlot, laneProviderIgnoreSlot, workspace, scope) {
this.componentUI = componentUI;
this.componentCompareUI = componentCompareUI;
this.routeSlot = routeSlot;
this.navSlot = navSlot;
this.menuWidgetSlot = menuWidgetSlot;
this.overviewSlot = overviewSlot;
this.laneProviderIgnoreSlot = laneProviderIgnoreSlot;
this.workspace = workspace;
this.scope = scope;
_defineProperty(this, "lanesHost", void 0);
_defineProperty(this, "hostAspect", void 0);
_defineProperty(this, "host", void 0);
_defineProperty(this, "renderContext", ({
children
}) => {
const ignoreFns = this.laneProviderIgnoreSlot.values();
return /*#__PURE__*/_react().default.createElement(_lanesHooks().LanesProvider, {
ignoreDerivingFromUrl: ignoreFns
}, children);
});
_defineProperty(this, "getLaneCompare", props => {
const tabs = this.componentCompareUI.tabs;
if (!props.base || !props.compare) return null;
return /*#__PURE__*/_react().default.createElement(_lanesUiCompare().LaneCompare, _extends({}, props, {
base: props.base,
compare: props.compare,
host: props.host || this.host,
tabs: props.tabs || tabs
}));
});
this.hostAspect = workspace || scope;
this.lanesHost = workspace ? 'workspace' : 'scope';
this.host = workspace ? _workspace().WorkspaceAspect.id : _scope().ScopeAspect.id;
}
registerHostAspectRoutes() {
if (!this.hostAspect) return;
this.hostAspect.registerRoutes(this.getLaneRoutes());
this.hostAspect.registerMenuRoutes(this.getMenuRoutes());
}
getLaneRoutes() {
return [{
path: _lanesUiModels().LanesModel.lanesPrefix,
children: /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
path: _lanesUiModels().LanesModel.lanePath
}, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
index: true,
element: this.getLaneOverview()
}), /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
path: "~component/*",
element: this.getLaneComponent()
}), /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
path: "~compare/*",
element: this.getLanesComparePage()
}), /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
path: "*",
element: /*#__PURE__*/_react().default.createElement(_designUiPages().NotFoundPage, null)
})), /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
path: "*",
element: /*#__PURE__*/_react().default.createElement(_designUiPages().NotFoundPage, null)
}))
}];
}
overrideComputeLaneUrl(fn) {
const {
prefix,
path,
getLaneComponentUrl,
getLaneIdFromPathname,
getLaneUrl
} = fn();
_lanesUiModels().LanesModel.lanesPrefix = prefix;
_lanesUiModels().LanesModel.lanePath = path;
_lanesUiModels().LanesModel.getLaneComponentUrl = getLaneComponentUrl;
_lanesUiModels().LanesModel.getLaneUrl = getLaneUrl;
_lanesUiModels().LanesModel.getLaneIdFromPathname = getLaneIdFromPathname;
}
getLaneComponent() {
return this.componentUI.getComponentUI(this.host, {
componentId: useComponentId,
useComponentFilters
});
}
getLaneComponentMenu() {
return this.componentUI.getMenu(this.host, {
componentId: useComponentId,
useComponentFilters
});
}
getLaneOverview() {
return /*#__PURE__*/_react().default.createElement(_lanesUi().LaneOverview, {
routeSlot: this.routeSlot,
overviewSlot: this.overviewSlot,
host: this.lanesHost,
useLanes: _lanesHooks().useLanes
});
}
getLanesComparePage() {
return /*#__PURE__*/_react().default.createElement(_lanesUiCompare2().LaneComparePage, {
getLaneCompare: this.getLaneCompare,
groupByScope: this.lanesHost === 'workspace'
});
}
getMenuRoutes() {
return [{
path: _lanesUiModels().LanesModel.lanesPrefix,
children: /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
path: `${_lanesUiModels().LanesModel.lanePath}/*`
}, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
path: '*',
element: this.getLanesOverviewMenu()
}), /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
path: "~component/*",
element: this.getLaneComponentMenu()
}))
}];
}
getLanesOverviewMenu() {
return /*#__PURE__*/_react().default.createElement(_lanesUiMenus().LanesOverviewMenu, {
navigationSlot: this.navSlot,
widgetSlot: this.menuWidgetSlot
});
}
registerMenuWidget(...menuItems) {
this.menuWidgetSlot.register(menuItems);
return this;
}
registerLaneProviderIgnoreSlot(ignoreFn) {
this.laneProviderIgnoreSlot.register(ignoreFn);
return this;
}
registerLanesRoutes() {
this.registerNavigation([
// {
// props: {
// href: '.',
// exact: true,
// children: 'README',
// },
// order: 1,
// hide: () => {
// const { lanesModel } = useLanes();
// return !lanesModel?.viewedLane?.readmeComponent;
// },
// },
{
props: {
href: '.',
exact: true,
children: 'Overview'
},
order: 1
}, {
props: {
href: '~compare',
children: 'Compare'
},
order: 2,
hide: () => {
const {
lanesModel
} = (0, _lanesHooks().useLanes)();
return !lanesModel?.viewedLane || lanesModel?.lanes.length < 2;
}
}]);
}
registerRoutes() {
this.registerHostAspectRoutes();
this.registerLanesRoutes();
}
getLanesSwitcher() {
const mainIcon = () => {
const scope = (0, _react().useContext)(_scope().ScopeContext);
return /*#__PURE__*/_react().default.createElement(_scopeUi().ScopeIcon, {
size: 24,
scopeImage: scope.icon,
bgColor: scope.backgroundIconColor,
className: _lanesUiModule().default.mainLaneIcon
});
};
const LanesSwitcher = /*#__PURE__*/_react().default.createElement(_lanesUiNavigation().LaneSwitcher, {
groupByScope: this.lanesHost === 'workspace',
mainIcon: this.lanesHost === 'scope' ? mainIcon : undefined
// @ts-ignore @todo - fix this
,
useLanes: _lanesHooks().useLanes
});
return LanesSwitcher;
}
getLanesProvider() {
return _lanesHooks().LanesProvider;
}
getUseLanes() {
return _lanesHooks().useLanes;
}
registerLanesDropdown() {
const LanesSwitcher = this.getLanesSwitcher();
this.hostAspect?.registerSidebarLink({
component: function Gallery() {
return LanesSwitcher;
},
weight: 1000
});
}
registerRoute(route) {
this.routeSlot.register(route);
return this;
}
/**
* register a new line beneath the lane overview section.
*/
registerOverviewLine(...lines) {
this.overviewSlot.register(lines);
return this;
}
registerNavigation(routes) {
this.navSlot.register(routes);
}
static async provider([uiUi, componentUI, workspaceUi, scopeUi, componentCompareUI, commandBarUI], _, [routeSlot, overviewSlot, navSlot, menuWidgetSlot, laneProviderIgnoreSlot], harmony) {
const {
config
} = harmony;
const host = String(config.get('teambit.harmony/bit'));
let workspace;
let scope;
if (host === _workspace().WorkspaceAspect.id) {
workspace = workspaceUi;
}
if (host === _scope().ScopeAspect.id) {
scope = scopeUi;
}
const lanesUi = new LanesUI(componentUI, componentCompareUI, routeSlot, navSlot, menuWidgetSlot, overviewSlot, laneProviderIgnoreSlot, workspace, scope);
if (uiUi) uiUi.registerRenderHooks({
reactContext: lanesUi.renderContext
});
lanesUi.registerRoutes();
lanesUi.registerMenuWidget(() => {
const {
lanesModel
} = (0, _lanesHooks().useLanes)();
if (!lanesModel?.viewedLane) return null;
const {
viewedLane,
currentLane
} = lanesModel;
return /*#__PURE__*/_react().default.createElement(_lanesUiMenus2().UseLaneMenu, {
actionName: 'Import',
actionIcon: 'terminal',
host: lanesUi.lanesHost,
viewedLaneId: viewedLane.id,
currentLaneId: currentLane?.id
});
});
lanesUi.registerLanesDropdown();
if (workspace) {
lanesUi.registerMenuWidget(commandBarUI.CommandBarButton);
}
return lanesUi;
}
}
exports.LanesUI = LanesUI;
_defineProperty(LanesUI, "dependencies", [_ui().UIAspect, _component().ComponentAspect, _workspace().WorkspaceAspect, _scope().ScopeAspect, _componentCompare().ComponentCompareAspect, _commandBar().CommandBarAspect]);
_defineProperty(LanesUI, "runtime", _ui().UIRuntime);
_defineProperty(LanesUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
var _default = exports.default = LanesUI;
_lanes().LanesAspect.addRuntime(LanesUI);
//# sourceMappingURL=lanes.ui.runtime.js.map