@webiny/app-admin 0.0.0-mt-1

package/plugins/menu/renderers/MenuLinkRenderer.js

@@ -0,0 +1,52 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { Link } from "@webiny/react-router";
+import { ListItem, ListItemGraphic } from "@webiny/ui/List";
+import { UIRenderer } from "../../../ui/UIRenderer";
+import { Icon } from "@webiny/ui/Icon";
+import { FooterElement } from "../../../ui/views/NavigationView/FooterElement";
+export var MenuLinkRenderer = /*#__PURE__*/function (_UIRenderer) {
+  _inherits(MenuLinkRenderer, _UIRenderer);
+
+  var _super = _createSuper(MenuLinkRenderer);
+
+  function MenuLinkRenderer() {
+    _classCallCheck(this, MenuLinkRenderer);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(MenuLinkRenderer, [{
+    key: "canRender",
+    value: function canRender(element) {
+      var isInFooter = Boolean(element.getParentByType(FooterElement));
+      return element.depth === 1 && isInFooter;
+    }
+  }, {
+    key: "render",
+    value: function render(_ref) {
+      var element = _ref.element,
+          props = _ref.props;
+      var defaultOnClick = element.getView().getNavigationHook().hideMenu;
+      var onClick = element.config.onClick || defaultOnClick;
+      return /*#__PURE__*/React.createElement(Link, {
+        to: element.config.path,
+        "data-testid": element.config.testId,
+        onClick: onClick ? function () {
+          return onClick(props);
+        } : null,
+        rel: element.config.rel,
+        target: element.config.target
+      }, /*#__PURE__*/React.createElement(ListItem, {
+        ripple: false
+      }, element.config.icon ? /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+        icon: element.config.icon
+      })) : null, element.config.label));
+    }
+  }]);
+
+  return MenuLinkRenderer;
+}(UIRenderer);

package/plugins/menu/renderers/MenuSectionItemRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { UIRenderer, UIRenderParams } from "../../../ui/UIRenderer";
+import { NavigationMenuElement } from "../../../ui/elements/NavigationMenuElement";
+export declare class MenuSectionItemRenderer extends UIRenderer<NavigationMenuElement> {
+    canRender(element: NavigationMenuElement): boolean;
+    render({ element, props }: UIRenderParams<NavigationMenuElement>): React.ReactNode;
+}

package/plugins/menu/renderers/MenuSectionItemRenderer.js

@@ -0,0 +1,77 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { css } from "emotion";
+import { Link } from "@webiny/react-router";
+import { List, ListItem } from "@webiny/ui/List";
+import { UIRenderer } from "../../../ui/UIRenderer";
+var linkStyle = /*#__PURE__*/css({
+  color: "var(--mdc-theme-text-primary-on-background)",
+  textDecoration: "none",
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  height: "100%",
+  outline: "none",
+  paddingLeft: 65,
+  "&:hover": {
+    textDecoration: "none"
+  }
+}, "label:linkStyle;");
+var submenuItems = /*#__PURE__*/css({
+  ".mdc-drawer &.mdc-list-item": {
+    paddingLeft: 0
+  }
+}, "label:submenuItems;");
+var submenuList = /*#__PURE__*/css({
+  "&.mdc-list": {
+    padding: 0
+  }
+}, "label:submenuList;");
+export var MenuSectionItemRenderer = /*#__PURE__*/function (_UIRenderer) {
+  _inherits(MenuSectionItemRenderer, _UIRenderer);
+
+  var _super = _createSuper(MenuSectionItemRenderer);
+
+  function MenuSectionItemRenderer() {
+    _classCallCheck(this, MenuSectionItemRenderer);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(MenuSectionItemRenderer, [{
+    key: "canRender",
+    value: function canRender(element) {
+      return [2, 3].includes(element.depth) && Boolean(element.config.path);
+    }
+  }, {
+    key: "render",
+    value: function render(_ref) {
+      var element = _ref.element,
+          props = _ref.props;
+      var defaultOnClick = element.getView().getNavigationHook().hideMenu;
+      var onClick = element.config.onClick || defaultOnClick;
+      return /*#__PURE__*/React.createElement(List, {
+        className: submenuList
+      }, /*#__PURE__*/React.createElement(ListItem, {
+        className: submenuItems,
+        "data-testid": element.config.testId
+      }, element.config.path ? /*#__PURE__*/React.createElement(Link, {
+        className: linkStyle,
+        to: element.config.path,
+        onClick: onClick ? function () {
+          return onClick(props);
+        } : null
+      }, element.config.label) : /*#__PURE__*/React.createElement("span", {
+        onClick: onClick ? function () {
+          return onClick(props);
+        } : null,
+        className: linkStyle
+      }, element.config.label)));
+    }
+  }]);
+
+  return MenuSectionItemRenderer;
+}(UIRenderer);

package/plugins/menu/renderers/MenuSectionRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { UIRenderer, UIRenderParams } from "../../../ui/UIRenderer";
+import { NavigationMenuElement } from "../../../ui/elements/NavigationMenuElement";
+export declare class MenuSectionRenderer extends UIRenderer<NavigationMenuElement> {
+    canRender(element: NavigationMenuElement): boolean;
+    render({ element, next }: UIRenderParams<NavigationMenuElement>): React.ReactNode;
+}

package/plugins/menu/renderers/MenuSectionRenderer.js

@@ -0,0 +1,51 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React, { Fragment } from "react";
+import { css } from "emotion";
+import { Typography } from "@webiny/ui/Typography";
+import { UIRenderer } from "../../../ui/UIRenderer";
+var menuSectionTitle = /*#__PURE__*/css({
+  marginLeft: 20,
+  display: "flex",
+  alignItems: "center",
+  color: "var(--mdc-theme-on-surface)"
+}, "label:menuSectionTitle;");
+var iconWrapper = /*#__PURE__*/css({
+  marginRight: 5,
+  color: "var(--mdc-theme-on-surface)"
+}, "label:iconWrapper;");
+export var MenuSectionRenderer = /*#__PURE__*/function (_UIRenderer) {
+  _inherits(MenuSectionRenderer, _UIRenderer);
+
+  var _super = _createSuper(MenuSectionRenderer);
+
+  function MenuSectionRenderer() {
+    _classCallCheck(this, MenuSectionRenderer);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(MenuSectionRenderer, [{
+    key: "canRender",
+    value: function canRender(element) {
+      return element.depth === 2;
+    }
+  }, {
+    key: "render",
+    value: function render(_ref) {
+      var element = _ref.element,
+          next = _ref.next;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: menuSectionTitle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: iconWrapper
+      }, element.config.icon), /*#__PURE__*/React.createElement(Typography, {
+        use: "overline"
+      }, element.config.label)), next());
+    }
+  }]);
+
+  return MenuSectionRenderer;
+}(UIRenderer);

package/plugins/menu/slack.d.ts

@@ -0,0 +1,4 @@
+import { UIViewPlugin } from "../../ui/UIView";
+import { NavigationView } from "../../ui/views/NavigationView";
+declare const _default: () => UIViewPlugin<NavigationView>;
+export default _default;

package/plugins/menu/slack.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { NavigationMenuElement } from "../../ui/elements/NavigationMenuElement";
+import { ReactComponent as SlackIcon } from "@svgr/webpack!../../assets/icons/slack-logo.svg";
+import { UIViewPlugin } from "../../ui/UIView";
+import { NavigationView } from "../../ui/views/NavigationView";
+export default (function () {
+  return new UIViewPlugin(NavigationView, function (view) {
+    view.getFooterElement().addMenuElement(new NavigationMenuElement("slack", {
+      label: "Slack",
+      icon: /*#__PURE__*/React.createElement(SlackIcon, null),
+      path: "https://www.webiny.com/slack/",
+      rel: "noopener noreferrer",
+      target: "_blank"
+    }));
+  });
+});

package/plugins/menu/source.d.ts

@@ -0,0 +1,4 @@
+import { UIViewPlugin } from "../../ui/UIView";
+import { NavigationView } from "../../ui/views/NavigationView";
+declare const _default: () => UIViewPlugin<NavigationView>;
+export default _default;

package/plugins/menu/source.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { NavigationMenuElement } from "../../ui/elements/NavigationMenuElement";
+import { ReactComponent as GithubIcon } from "@svgr/webpack!../../assets/icons/github-brands.svg";
+import { UIViewPlugin } from "../../ui/UIView";
+import { NavigationView } from "../../ui/views/NavigationView";
+export default (function () {
+  return new UIViewPlugin(NavigationView, function (view) {
+    view.getFooterElement().addMenuElement(new NavigationMenuElement("github", {
+      label: "Source",
+      icon: /*#__PURE__*/React.createElement(GithubIcon, null),
+      path: "https://github.com/webiny/webiny-js",
+      rel: "noopener noreferrer",
+      target: "_blank"
+    }));
+  });
+});

package/plugins/uiLayoutRenderer/index.d.ts

@@ -0,0 +1,3 @@
+import { UILayoutPlugin } from "../../ui/UILayout";
+declare const _default: UILayoutPlugin<import("@webiny/ui-composer/UILayout").UILayout>;
+export default _default;

package/plugins/uiLayoutRenderer/index.js

@@ -0,0 +1,63 @@
+import React, { Fragment } from "react";
+import { Cell, Grid, GridInner } from "@webiny/ui/Grid";
+import { UILayoutPlugin } from "../../ui/UILayout";
+
+function getElementKey(element) {
+  return "".concat(element.constructor.name, ":").concat(element.id);
+}
+
+var ElementID = function ElementID(_ref) {
+  var children = _ref.children;
+  return children;
+};
+
+export default new UILayoutPlugin(function (layout) {
+  layout.setRenderer(function (_ref2) {
+    var layout = _ref2.layout,
+        props = _ref2.props,
+        hasParentGrid = _ref2.hasParentGrid;
+
+    if (!layout.getGrid()) {
+      return /*#__PURE__*/React.createElement(Fragment, null, layout.getLayout().map(function (row, index) {
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: index
+        }, row.map(function (item) {
+          var element = layout.getElement(item.element);
+
+          if (!element) {
+            console.warn("Element \"".concat(item.element, "\" was not found!"));
+            return null;
+          }
+
+          if (!element.shouldRender(props)) {
+            return null;
+          }
+
+          return /*#__PURE__*/React.createElement(ElementID, {
+            key: getElementKey(element)
+          }, element.render(props));
+        }));
+      }));
+    }
+
+    var GridComponent = hasParentGrid ? GridInner : Grid;
+    return /*#__PURE__*/React.createElement(GridComponent, null, layout.getLayout().map(function (row, index) {
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: index
+      }, row.map(function (item) {
+        var element = layout.getElement(item.element);
+
+        if (!element.shouldRender(props)) {
+          return null;
+        }
+
+        return /*#__PURE__*/React.createElement(Cell, {
+          key: item.element,
+          span: item.width
+        }, /*#__PURE__*/React.createElement(ElementID, {
+          key: getElementKey(element)
+        }, element.render(props)));
+      }));
+    }));
+  });
+});

package/plugins/userMenu/UserMenuElement.d.ts

@@ -0,0 +1,7 @@
+import { UIElement } from "@webiny/ui-composer/UIElement";
+export declare class UserMenuElement extends UIElement {
+    private _menuHandleElement;
+    constructor();
+    setMenuHandleElement(element: UIElement): void;
+    getMenuHandleElement(): UIElement<import("@webiny/ui-composer/UIElement").UIElementConfig<any>>;
+}

package/plugins/userMenu/UserMenuElement.js

@@ -0,0 +1,43 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { UIElement } from "@webiny/ui-composer/UIElement";
+import { UserMenuRenderer } from "./UserMenuRenderer";
+export var UserMenuElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(UserMenuElement, _UIElement);
+
+  var _super = _createSuper(UserMenuElement);
+
+  function UserMenuElement() {
+    var _this;
+
+    _classCallCheck(this, UserMenuElement);
+
+    _this = _super.call(this, "userMenu");
+
+    _defineProperty(_assertThisInitialized(_this), "_menuHandleElement", void 0);
+
+    _this.useGrid(false);
+
+    _this.addRenderer(new UserMenuRenderer());
+
+    return _this;
+  }
+
+  _createClass(UserMenuElement, [{
+    key: "setMenuHandleElement",
+    value: function setMenuHandleElement(element) {
+      this._menuHandleElement = element;
+    }
+  }, {
+    key: "getMenuHandleElement",
+    value: function getMenuHandleElement() {
+      return this._menuHandleElement;
+    }
+  }]);
+
+  return UserMenuElement;
+}(UIElement);

package/plugins/userMenu/UserMenuRenderer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { UIRenderer, UIRenderParams } from "../../ui/UIRenderer";
+import { UserMenuElement } from "./UserMenuElement";
+export declare class UserMenuRenderer extends UIRenderer<UserMenuElement> {
+    render({ element, props, next }: UIRenderParams<UserMenuElement>): React.ReactNode;
+}

package/plugins/userMenu/UserMenuRenderer.js

@@ -0,0 +1,47 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { UIRenderer } from "../../ui/UIRenderer";
+import { css } from "emotion";
+import { Menu } from "@webiny/ui/Menu";
+import { TopAppBarActionItem } from "@webiny/ui/TopAppBar";
+import { List } from "@webiny/ui/List";
+var menuDialog = /*#__PURE__*/css({
+  "&.mdc-menu": {
+    minWidth: 300
+  }
+}, "label:menuDialog;");
+export var UserMenuRenderer = /*#__PURE__*/function (_UIRenderer) {
+  _inherits(UserMenuRenderer, _UIRenderer);
+
+  var _super = _createSuper(UserMenuRenderer);
+
+  function UserMenuRenderer() {
+    _classCallCheck(this, UserMenuRenderer);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(UserMenuRenderer, [{
+    key: "render",
+    value: function render(_ref) {
+      var element = _ref.element,
+          props = _ref.props,
+          next = _ref.next;
+      var handle = element.getMenuHandleElement();
+      return /*#__PURE__*/React.createElement(Menu, {
+        className: menuDialog,
+        anchor: "topEnd",
+        handle: /*#__PURE__*/React.createElement(TopAppBarActionItem, {
+          icon: /*#__PURE__*/React.createElement("div", null, handle ? handle.render(props) : null)
+        })
+      }, /*#__PURE__*/React.createElement(List, {
+        "data-testid": "logged-in-user-menu-list"
+      }, next()));
+    }
+  }]);
+
+  return UserMenuRenderer;
+}(UIRenderer);

package/plugins/userMenu/index.d.ts

@@ -0,0 +1,4 @@
+import { UIViewPlugin } from "../../ui/UIView";
+import { AdminView } from "../../ui/views/AdminView";
+declare const _default: UIViewPlugin<AdminView>;
+export default _default;

package/plugins/userMenu/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { GenericElement } from "../../ui/elements/GenericElement";
+import { Icon } from "@webiny/ui/Icon";
+import { UIViewPlugin } from "../../ui/UIView";
+import { UserMenuElement } from "./UserMenuElement";
+import { ReactComponent as Account } from "@svgr/webpack!../../assets/icons/round-account_circle-24px.svg";
+import { AdminView } from "../../ui/views/AdminView";
+export default new UIViewPlugin(AdminView, function (view) {
+  var rightSection = view.getHeaderElement().getRightSection();
+  var userMenu = rightSection.addElement(new UserMenuElement());
+  userMenu.setMenuHandleElement(new GenericElement("handle", function () {
+    return /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Account, null)
+    });
+  }));
+});