You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
6.6 KiB
138 lines
6.6 KiB
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
|
|
var _react = _interopRequireWildcard(require("react"));
|
|
|
|
var _reactRouterDom = require("react-router-dom");
|
|
|
|
var _styledComponents = require("styled-components");
|
|
|
|
var _designSystem = require("@adminjs/design-system");
|
|
|
|
var _reactRouter = require("react-router");
|
|
|
|
var _viewHelpers = _interopRequireDefault(require("../../backend/utils/view-helpers/view-helpers"));
|
|
|
|
var _sidebar = _interopRequireDefault(require("./app/sidebar/sidebar"));
|
|
|
|
var _topBar = _interopRequireDefault(require("./app/top-bar"));
|
|
|
|
var _notice = _interopRequireDefault(require("./app/notice"));
|
|
|
|
var _allowOverride = _interopRequireDefault(require("../hoc/allow-override"));
|
|
|
|
var _routes = require("./routes");
|
|
|
|
var _useHistoryListen = _interopRequireDefault(require("../hooks/use-history-listen"));
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
|
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
|
|
/* eslint-disable react/no-children-prop */
|
|
const GlobalStyle = (0, _styledComponents.createGlobalStyle)(["html,body,#app{margin:0;padding:0;width:100%;height:100%;color:", "}"], ({
|
|
theme
|
|
}) => theme.colors.grey100);
|
|
const h = new _viewHelpers.default();
|
|
|
|
const App = () => {
|
|
const [sidebarVisible, toggleSidebar] = (0, _react.useState)(false);
|
|
const location = (0, _reactRouter.useLocation)();
|
|
(0, _useHistoryListen.default)();
|
|
(0, _react.useEffect)(() => {
|
|
if (sidebarVisible) {
|
|
toggleSidebar(false);
|
|
}
|
|
}, [location]);
|
|
const resourceId = ':resourceId';
|
|
const actionName = ':actionName';
|
|
const recordId = ':recordId';
|
|
const pageName = ':pageName';
|
|
const dashboardUrl = h.dashboardUrl();
|
|
const recordActionUrl = h.recordActionUrl({
|
|
resourceId,
|
|
recordId,
|
|
actionName
|
|
});
|
|
const resourceActionUrl = h.resourceActionUrl({
|
|
resourceId,
|
|
actionName
|
|
});
|
|
const bulkActionUrl = h.bulkActionUrl({
|
|
resourceId,
|
|
actionName
|
|
});
|
|
const resourceUrl = h.resourceUrl({
|
|
resourceId
|
|
});
|
|
const pageUrl = h.pageUrl(pageName);
|
|
/**
|
|
* When defining AdminJS routes, we use Routes component twice.
|
|
* This results in warnings appearing in console, for example about not being able to locate
|
|
* "/admin" route. They can be safely ignored though and should appear only
|
|
* in development environment. The warnings originate from the difference between
|
|
* "Switch" component that AdminJS had used in "react-router" v5 which was later replaced
|
|
* with "Routes" in "react-router" v6. "Switch" would use the first "Route" component
|
|
* that matched the provided path, while "Routes" searches for the best matching pattern.
|
|
* In AdminJS we use "DrawerPortal" to display actions in a drawer when
|
|
* "showInDrawer" option is set to true. The drawer should appear above the currently viewed
|
|
* page, but "Routes" broke this behavior because it instead showed a record action route with
|
|
* an empty background.
|
|
* The current flow is that first "Routes" component includes "Resource" route component
|
|
* for drawer-placed actions and the second "Routes" is entered for record actions
|
|
* on a separate page.
|
|
*/
|
|
|
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Reset, null), /*#__PURE__*/_react.default.createElement(GlobalStyle, null), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
|
|
height: "100%",
|
|
flex: true,
|
|
"data-css": "app"
|
|
}, sidebarVisible ? /*#__PURE__*/_react.default.createElement(_designSystem.Overlay, {
|
|
onClick: () => toggleSidebar(!sidebarVisible)
|
|
}) : null, /*#__PURE__*/_react.default.createElement(_sidebar.default, {
|
|
isVisible: sidebarVisible,
|
|
"data-css": "sidebar"
|
|
}), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
|
|
flex: true,
|
|
flexGrow: 1,
|
|
flexDirection: "column",
|
|
overflowY: "auto",
|
|
bg: "bg",
|
|
"data-css": "app-content"
|
|
}, /*#__PURE__*/_react.default.createElement(_topBar.default, {
|
|
toggleSidebar: () => toggleSidebar(!sidebarVisible)
|
|
}), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
|
|
position: "absolute",
|
|
top: 0,
|
|
zIndex: 2000,
|
|
"data-css": "notice"
|
|
}, /*#__PURE__*/_react.default.createElement(_notice.default, null)), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Routes, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
|
|
path: `${resourceUrl}/*`,
|
|
element: /*#__PURE__*/_react.default.createElement(_routes.ResourceRoute, null)
|
|
}), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
|
|
path: pageUrl,
|
|
element: /*#__PURE__*/_react.default.createElement(_routes.PageRoute, null)
|
|
}), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
|
|
path: dashboardUrl,
|
|
element: /*#__PURE__*/_react.default.createElement(_routes.DashboardRoute, null)
|
|
})), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Routes, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
|
|
path: `${resourceActionUrl}/*`,
|
|
element: /*#__PURE__*/_react.default.createElement(_routes.ResourceActionRoute, null)
|
|
}), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
|
|
path: `${bulkActionUrl}/*`,
|
|
element: /*#__PURE__*/_react.default.createElement(_routes.BulkActionRoute, null)
|
|
}), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
|
|
path: `${recordActionUrl}/*`,
|
|
element: /*#__PURE__*/_react.default.createElement(_routes.RecordActionRoute, null)
|
|
})))));
|
|
};
|
|
|
|
var _default = (0, _allowOverride.default)(App, 'Application');
|
|
|
|
exports.default = _default; |