@webiny/app-admin 0.0.0-mt-1

package/ui/views/NavigationView/legacyMenu.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { NavigationMenuElement } from "../../elements/NavigationMenuElement";
+export declare type MenuProps = {
+    name: string;
+    label: React.ReactNode;
+    icon: React.ReactElement;
+    children: React.ReactNode;
+    onClick?: (toggleSection: () => void) => void;
+};
+export interface SectionProps {
+    parent?: NavigationMenuElement;
+    label: React.ReactNode;
+    children: React.ReactNode;
+    icon?: React.ReactElement;
+}
+export interface ItemProps {
+    parent?: NavigationMenuElement;
+    label: React.ReactNode;
+    path: string;
+    style?: React.CSSProperties;
+    onClick?: () => any;
+}

package/ui/views/NavigationView/legacyMenu.js

@@ -0,0 +1 @@
+export {};

package/ui/views/NavigationView/useNavigation.d.ts

@@ -0,0 +1,6 @@
+export declare type UseNavigation = ReturnType<typeof useNavigation>;
+export declare function useNavigation(): {
+    showMenu: () => void;
+    hideMenu: () => void;
+    menuIsShown(): boolean;
+};

package/ui/views/NavigationView/useNavigation.js

@@ -0,0 +1,22 @@
+import _get from "lodash/get";
+import { useUi } from "@webiny/app/hooks/useUi";
+import { set } from "dot-prop-immutable";
+export function useNavigation() {
+  var ui = useUi();
+  var hook = {
+    showMenu: function showMenu() {
+      ui.setState(function (ui) {
+        return set(ui, "appsMenu.show", true);
+      });
+    },
+    hideMenu: function hideMenu() {
+      ui.setState(function (ui) {
+        return set(ui, "appsMenu.show", false);
+      });
+    },
+    menuIsShown: function menuIsShown() {
+      return _get(ui, "appsMenu.show", false);
+    }
+  };
+  return hook;
+}

package/ui/views/NavigationView.d.ts

@@ -0,0 +1,26 @@
+import { UIView } from "../UIView";
+import { UseSecurity } from "@webiny/app-security";
+import { HeaderElement } from "./NavigationView/HeaderElement";
+import { ContentElement } from "./NavigationView/ContentElement";
+import { FooterElement } from "./NavigationView/FooterElement";
+import { UseNavigation } from "./NavigationView/useNavigation";
+import { NavigationMenuElement } from "../elements/NavigationMenuElement";
+export declare enum ElementID {
+    Header = "navigationHeader",
+    Content = "navigationContent",
+    Footer = "navigationFooter",
+    SettingsMenu = "menu.settings"
+}
+export declare class NavigationView extends UIView {
+    constructor();
+    addAppMenuElement(element: NavigationMenuElement): NavigationMenuElement<import("../elements/NavigationMenuElement").NavigationMenuElementConfig>;
+    addUtilityMenuElement(element: NavigationMenuElement): NavigationMenuElement<import("../elements/NavigationMenuElement").NavigationMenuElementConfig>;
+    addSettingsMenuElement(element: NavigationMenuElement): NavigationMenuElement<import("../elements/NavigationMenuElement").NavigationMenuElementConfig>;
+    getNavigationHook(): UseNavigation;
+    getSecurityHook(): UseSecurity;
+    getHeaderElement(): HeaderElement;
+    getContentElement(): ContentElement;
+    getFooterElement(): FooterElement;
+    getSettingsMenuElement(): NavigationMenuElement;
+    private setupLegacyMenuPlugins;
+}

package/ui/views/NavigationView.js

@@ -0,0 +1,204 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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";
+var _excluded = ["parent"],
+    _excluded2 = ["parent"];
+import React, { Fragment } from "react";
+import sortBy from "lodash/sortBy";
+import { nanoid } from "nanoid";
+import { UIView } from "../UIView";
+import { plugins } from "@webiny/plugins";
+import { GenericElement } from "../elements/GenericElement";
+import { useSecurity } from "@webiny/app-security";
+import { HeaderElement } from "./NavigationView/HeaderElement";
+import { ContentElement } from "./NavigationView/ContentElement";
+import { FooterElement } from "./NavigationView/FooterElement";
+import { useNavigation } from "./NavigationView/useNavigation";
+import { NavigationMenuElement, TAGS } from "../elements/NavigationMenuElement";
+import { ReactComponent as SettingsIcon } from "@svgr/webpack!../../assets/icons/round-settings-24px.svg";
+import { NavigationViewRenderer } from "./NavigationView/NavigationViewRenderer";
+export var ElementID;
+
+(function (ElementID) {
+  ElementID["Header"] = "navigationHeader";
+  ElementID["Content"] = "navigationContent";
+  ElementID["Footer"] = "navigationFooter";
+  ElementID["SettingsMenu"] = "menu.settings";
+})(ElementID || (ElementID = {}));
+
+export var NavigationView = /*#__PURE__*/function (_UIView) {
+  _inherits(NavigationView, _UIView);
+
+  var _super = _createSuper(NavigationView);
+
+  function NavigationView() {
+    var _this;
+
+    _classCallCheck(this, NavigationView);
+
+    _this = _super.call(this, "NavigationView");
+
+    _this.useGrid(false);
+
+    _this.addHookDefinition("navigation", useNavigation);
+
+    _this.addHookDefinition("security", useSecurity);
+
+    var elementConfig = {
+      closeMenu: function closeMenu() {
+        return _this.getHook("navigation").hideMenu();
+      }
+    };
+
+    _this.addElement(new HeaderElement(ElementID.Header, elementConfig));
+
+    _this.addElement(new ContentElement(ElementID.Content));
+
+    _this.addElement(new FooterElement(ElementID.Footer, elementConfig));
+
+    _this.addUtilityMenuElement(new NavigationMenuElement(ElementID.SettingsMenu, {
+      label: "Settings",
+      icon: /*#__PURE__*/React.createElement(SettingsIcon, null)
+    })); // Load legacy plugins and convert them into elements
+
+
+    _this.setupLegacyMenuPlugins();
+
+    _this.addRenderer(new NavigationViewRenderer());
+
+    _this.applyPlugins(NavigationView);
+
+    return _this;
+  }
+
+  _createClass(NavigationView, [{
+    key: "addAppMenuElement",
+    value: function addAppMenuElement(element) {
+      element.addTag(TAGS.APP);
+      return this.getContentElement().addElement(element);
+    }
+  }, {
+    key: "addUtilityMenuElement",
+    value: function addUtilityMenuElement(element) {
+      element.addTag(TAGS.UTILS);
+      return this.getContentElement().addElement(element);
+    }
+  }, {
+    key: "addSettingsMenuElement",
+    value: function addSettingsMenuElement(element) {
+      return this.getSettingsMenuElement().addElement(element);
+    }
+  }, {
+    key: "getNavigationHook",
+    value: function getNavigationHook() {
+      return this.getHook("navigation");
+    }
+  }, {
+    key: "getSecurityHook",
+    value: function getSecurityHook() {
+      return this.getHook("security");
+    }
+  }, {
+    key: "getHeaderElement",
+    value: function getHeaderElement() {
+      return this.getElement(ElementID.Header);
+    }
+  }, {
+    key: "getContentElement",
+    value: function getContentElement() {
+      return this.getElement(ElementID.Content);
+    }
+  }, {
+    key: "getFooterElement",
+    value: function getFooterElement() {
+      return this.getElement(ElementID.Footer);
+    }
+  }, {
+    key: "getSettingsMenuElement",
+    value: function getSettingsMenuElement() {
+      return this.getElement(ElementID.SettingsMenu);
+    }
+  }, {
+    key: "setupLegacyMenuPlugins",
+    value: function setupLegacyMenuPlugins() {
+      var _this2 = this;
+
+      // IMPORTANT! The following piece of code is for BACKWARDS COMPATIBILITY purposes only!
+      var menuPlugins = plugins.byType("admin-menu");
+
+      if (!menuPlugins) {
+        return;
+      }
+
+      var legacyMenu = new GenericElement("legacy-menu");
+
+      var Menu = function Menu(props) {
+        var menuItem = _this2.addAppMenuElement(new NavigationMenuElement("navigation.content.".concat(props.name), {
+          label: props.label,
+          icon: props.icon
+        }));
+
+        return /*#__PURE__*/React.createElement(Fragment, null, React.Children.map(props.children, function (child) {
+          if (! /*#__PURE__*/React.isValidElement(child)) {
+            return child;
+          }
+
+          return /*#__PURE__*/React.cloneElement(child, {
+            parent: menuItem
+          });
+        }));
+      };
+
+      var Section = function Section(_ref) {
+        var parent = _ref.parent,
+            props = _objectWithoutProperties(_ref, _excluded);
+
+        var sectionMenu = parent.addElement(new NavigationMenuElement(nanoid(), {
+          label: props.label
+        }));
+        return /*#__PURE__*/React.createElement(Fragment, null, React.Children.map(props.children, function (child) {
+          if (! /*#__PURE__*/React.isValidElement(child)) {
+            return child;
+          }
+
+          return /*#__PURE__*/React.cloneElement(child, {
+            parent: sectionMenu
+          });
+        }));
+      };
+
+      var Item = function Item(_ref2) {
+        var parent = _ref2.parent,
+            props = _objectWithoutProperties(_ref2, _excluded2);
+
+        parent.addElement(new NavigationMenuElement(nanoid(), {
+          label: props.label,
+          path: props.path
+        }));
+        return null;
+      };
+
+      sortBy(menuPlugins, [function (p) {
+        return p.order || 50;
+      }, function (p) {
+        return p.name;
+      }]).forEach(function (plugin) {
+        legacyMenu.addElement(new GenericElement(plugin.name, function () {
+          return plugin.render({
+            Menu: Menu,
+            Section: Section,
+            Item: Item
+          });
+        }));
+      });
+      this.addElement(legacyMenu);
+      setTimeout(function () {
+        legacyMenu.remove();
+      }, 100);
+    }
+  }]);
+
+  return NavigationView;
+}(UIView);

package/ui/views/OverlayView/ContentElement.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { UIElement } from "../../UIElement";
+export declare class ContentElement extends UIElement {
+    constructor(id: string);
+    render(props: any): React.ReactNode;
+}

package/ui/views/OverlayView/ContentElement.js

@@ -0,0 +1,42 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import styled from "@emotion/styled";
+import { UIElement } from "../../UIElement";
+var ContentWrapper = /*#__PURE__*/styled("div", {
+  target: "exqtwog0",
+  label: "ContentWrapper"
+})({
+  width: "100%",
+  paddingTop: 65
+});
+export var ContentElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(ContentElement, _UIElement);
+
+  var _super = _createSuper(ContentElement);
+
+  function ContentElement(id) {
+    var _this;
+
+    _classCallCheck(this, ContentElement);
+
+    _this = _super.call(this, id);
+
+    _this.useGrid(false);
+
+    return _this;
+  }
+
+  _createClass(ContentElement, [{
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/React.createElement(ContentWrapper, null, _get(_getPrototypeOf(ContentElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+
+  return ContentElement;
+}(UIElement);

package/ui/views/OverlayView/HeaderElement.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { UIElement, UIElementConfig } from "../../UIElement";
+interface HeaderElementConfig extends UIElementConfig {
+    onClose: (event: React.MouseEvent) => void;
+    getTitle?: GetterWithoutProps<string>;
+}
+interface GetterWithoutProps<T> {
+    (): T;
+}
+export declare class HeaderElement extends UIElement<HeaderElementConfig> {
+    private _leftSection;
+    private _centerSection;
+    private _rightSection;
+    constructor(id: string, config: HeaderElementConfig);
+    setTitle(title: GetterWithoutProps<string>): void;
+    setLeftSectionElement(element: UIElement): void;
+    setCenterSectionElement(element: UIElement): void;
+    setRightSectionElement(element: UIElement): void;
+    getLeftSectionElement(): UIElement<UIElementConfig<any>>;
+    getCenterSectionElement(): UIElement<UIElementConfig<any>>;
+    getRightSectionElement(): UIElement<UIElementConfig<any>>;
+    render(props: any): React.ReactNode;
+}
+export {};

package/ui/views/OverlayView/HeaderElement.js

@@ -0,0 +1,115 @@
+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 React from "react";
+import { css } from "emotion";
+import { UIElement } from "../../UIElement";
+import { TopAppBarSecondary, TopAppBarSection } from "@webiny/ui/TopAppBar";
+import { IconButton } from "@webiny/ui/Button";
+import { ReactComponent as CloseIcon } from "@svgr/webpack!../../../components/OverlayLayout/icons/close.svg";
+import { PlaceholderElement } from "../../elements/PlaceholderElement";
+import { HeaderTitleElement } from "./HeaderTitleElement";
+var width = /*#__PURE__*/css({
+  width: "33%"
+}, "label:width;"); // !GOOD FIRST ISSUE!
+// Extract rendering and styling into a HeaderElementRenderer class.
+
+export var HeaderElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(HeaderElement, _UIElement);
+
+  var _super = _createSuper(HeaderElement);
+
+  function HeaderElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, HeaderElement);
+
+    _this = _super.call(this, id, config);
+
+    _defineProperty(_assertThisInitialized(_this), "_leftSection", new PlaceholderElement("leftSection"));
+
+    _defineProperty(_assertThisInitialized(_this), "_centerSection", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_rightSection", new PlaceholderElement("rightSection"));
+
+    _this._centerSection = new HeaderTitleElement("title", {
+      title: function title() {
+        return typeof _this.config.getTitle === "function" ? _this.config.getTitle() : null;
+      }
+    });
+
+    _this.useGrid(false);
+
+    return _this;
+  }
+
+  _createClass(HeaderElement, [{
+    key: "setTitle",
+    value: function setTitle(title) {
+      this.config.getTitle = title;
+    }
+  }, {
+    key: "setLeftSectionElement",
+    value: function setLeftSectionElement(element) {
+      this._leftSection = element;
+    }
+  }, {
+    key: "setCenterSectionElement",
+    value: function setCenterSectionElement(element) {
+      this._centerSection = element;
+    }
+  }, {
+    key: "setRightSectionElement",
+    value: function setRightSectionElement(element) {
+      this._rightSection = element;
+    }
+  }, {
+    key: "getLeftSectionElement",
+    value: function getLeftSectionElement() {
+      return this._leftSection;
+    }
+  }, {
+    key: "getCenterSectionElement",
+    value: function getCenterSectionElement() {
+      return this._centerSection;
+    }
+  }, {
+    key: "getRightSectionElement",
+    value: function getRightSectionElement() {
+      return this._rightSection;
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/React.createElement(TopAppBarSecondary, {
+        fixed: true,
+        style: {
+          top: 0
+        }
+      }, /*#__PURE__*/React.createElement(TopAppBarSection, {
+        className: width,
+        alignStart: true
+      }, this.getLeftSectionElement().render(props)), /*#__PURE__*/React.createElement(TopAppBarSection, {
+        className: width,
+        alignEnd: true
+      }, this.getCenterSectionElement().render(props)), /*#__PURE__*/React.createElement(TopAppBarSection, {
+        className: width,
+        alignEnd: true
+      }, this.getRightSectionElement().render(props), /*#__PURE__*/React.createElement(IconButton, {
+        ripple: false,
+        onClick: this.config.onClose,
+        icon: /*#__PURE__*/React.createElement(CloseIcon, {
+          style: {
+            width: 24,
+            height: 24
+          }
+        })
+      })));
+    }
+  }]);
+
+  return HeaderElement;
+}(UIElement);

package/ui/views/OverlayView/HeaderTitleElement.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { UIElement, UIElementConfig } from "../../UIElement";
+import { UIRenderer, UIRenderParams } from "../../UIRenderer";
+interface HeaderTitleElementConfig extends UIElementConfig {
+    title: () => string;
+}
+export declare class HeaderTitleElementRenderer extends UIRenderer<HeaderTitleElement> {
+    render({ element }: UIRenderParams<HeaderTitleElement>): React.ReactNode;
+}
+export declare class HeaderTitleElement extends UIElement<HeaderTitleElementConfig> {
+    constructor(id: string, config: HeaderTitleElementConfig);
+}
+export {};

package/ui/views/OverlayView/HeaderTitleElement.js

@@ -0,0 +1,54 @@
+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 { UIElement } from "../../UIElement";
+import { Typography } from "@webiny/ui/Typography";
+import { UIRenderer } from "../../UIRenderer";
+export var HeaderTitleElementRenderer = /*#__PURE__*/function (_UIRenderer) {
+  _inherits(HeaderTitleElementRenderer, _UIRenderer);
+
+  var _super = _createSuper(HeaderTitleElementRenderer);
+
+  function HeaderTitleElementRenderer() {
+    _classCallCheck(this, HeaderTitleElementRenderer);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(HeaderTitleElementRenderer, [{
+    key: "render",
+    value: function render(_ref) {
+      var element = _ref.element;
+      return /*#__PURE__*/React.createElement(Typography, {
+        style: {
+          margin: "0 auto",
+          color: "var(--mdc-theme-on-surface)"
+        },
+        use: "headline6"
+      }, element.config.title());
+    }
+  }]);
+
+  return HeaderTitleElementRenderer;
+}(UIRenderer);
+export var HeaderTitleElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(HeaderTitleElement, _UIElement);
+
+  var _super2 = _createSuper(HeaderTitleElement);
+
+  function HeaderTitleElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, HeaderTitleElement);
+
+    _this = _super2.call(this, id, config);
+
+    _this.addRenderer(new HeaderTitleElementRenderer());
+
+    return _this;
+  }
+
+  return HeaderTitleElement;
+}(UIElement);

package/ui/views/OverlayView/useOverlayView.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type UseOverlayView = ReturnType<typeof useOverlayView>;
+export declare function useOverlayView(): {
+    isVisible: boolean;
+    setIsVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/ui/views/OverlayView/useOverlayView.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from "react";
+import { css } from "emotion";
+import { OverlayView } from "../OverlayView";
+var noScroll = /*#__PURE__*/css({
+  overflow: "hidden",
+  height: "100vh"
+}, "label:noScroll;");
+export function useOverlayView() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isVisible = _useState2[0],
+      setIsVisible = _useState2[1];
+
+  useEffect(function () {
+    if (isVisible) {
+      OverlayView.openedViews++;
+      document.body.classList.add(noScroll);
+    } else if (!OverlayView.openedViews) {
+      document.body.classList.remove(noScroll);
+    }
+  }, [isVisible]);
+  useEffect(function () {
+    return function () {
+      if (OverlayView.openedViews > 0) {
+        OverlayView.openedViews--;
+      }
+
+      if (!OverlayView.openedViews) {
+        document.body.classList.remove(noScroll);
+      }
+    };
+  }, []);
+  return {
+    isVisible: isVisible,
+    setIsVisible: setIsVisible
+  };
+}

package/ui/views/OverlayView.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { UIView } from "../UIView";
+import { HeaderElement } from "./OverlayView/HeaderElement";
+import { ContentElement } from "./OverlayView/ContentElement";
+interface OnExited {
+    (view: OverlayView): void;
+}
+export declare class OverlayView extends UIView {
+    /**
+     * This property is used to track the amount of opened overlays. Since we're applying a CSS class to disable
+     * window scroll, we must make sure we don't remove that CSS class until all the overlays are closed.
+     */
+    static openedViews: number;
+    private _onEntered;
+    private _onExited;
+    constructor(id?: string);
+    setTitle(title: () => string): void;
+    onEntered(): void;
+    onExited(): void;
+    addOnEntered(cb: OnExited): void;
+    addOnExited(cb: OnExited): void;
+    getOverlayHook(): {
+        isVisible: boolean;
+        setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    };
+    setIsVisible(visible: boolean): void;
+    getHeaderElement(): HeaderElement;
+    getContentElement(): ContentElement;
+    render(props: any): JSX.Element;
+}
+export {};