@webiny/app-admin 0.0.0-mt-1

package/ui/views/OverlayView.js

@@ -0,0 +1,176 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+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 _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from "react";
+import { Transition } from "react-transition-group";
+import styled from "@emotion/styled";
+import { UIView } from "../UIView";
+import { useOverlayView } from "./OverlayView/useOverlayView";
+import { HeaderElement } from "./OverlayView/HeaderElement";
+import { ContentElement } from "./OverlayView/ContentElement"; // !GOOD FIRST ISSUE!
+// Extract rendering and styling into an OverlayViewRenderer class.
+
+var OverlayLayoutWrapper = /*#__PURE__*/styled("div", {
+  target: "e1xrojct0",
+  label: "OverlayLayoutWrapper"
+})({
+  position: "fixed",
+  width: "100%",
+  height: "100vh",
+  backgroundColor: "var(--mdc-theme-background)",
+
+  /**
+   * Has to be higher than 5 so it's above advanced settings dialog,
+   * and below 20, so the image editor & Dialogs can be displayed above.
+   */
+  zIndex: 18,
+  top: 0,
+  left: 0
+});
+var defaultStyle = {
+  transform: "translateY(75vh)",
+  opacity: 0,
+  transitionProperty: "transform, opacity",
+  transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
+  transitionDuration: "225ms",
+  willChange: "opacity, transform"
+};
+var transitionStyles = {
+  entering: {
+    transform: "translateY(75vh)",
+    opacity: 0
+  },
+  entered: {
+    transform: "translateY(0px)",
+    opacity: 1
+  }
+};
+export var OverlayView = /*#__PURE__*/function (_UIView) {
+  _inherits(OverlayView, _UIView);
+
+  var _super = _createSuper(OverlayView);
+
+  /**
+   * 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.
+   */
+  function OverlayView() {
+    var _this;
+
+    var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "OverlayView";
+
+    _classCallCheck(this, OverlayView);
+
+    _this = _super.call(this, id);
+
+    _defineProperty(_assertThisInitialized(_this), "_onEntered", []);
+
+    _defineProperty(_assertThisInitialized(_this), "_onExited", []);
+
+    _this.useGrid(false);
+
+    _this.addHookDefinition("overlay", useOverlayView);
+
+    _this.addElement(new HeaderElement("overlayHeader", {
+      onClose: function onClose() {
+        return _this.setIsVisible(false);
+      }
+    }));
+
+    _this.addElement(new ContentElement("overlayContent"));
+
+    _this.applyPlugins(OverlayView);
+
+    return _this;
+  }
+
+  _createClass(OverlayView, [{
+    key: "setTitle",
+    value: function setTitle(title) {
+      this.getHeaderElement().setTitle(title);
+    }
+  }, {
+    key: "onEntered",
+    value: function onEntered() {
+      var _this2 = this;
+
+      _toConsumableArray(this._onEntered).reverse().forEach(function (cb) {
+        return cb(_this2);
+      });
+    }
+  }, {
+    key: "onExited",
+    value: function onExited() {
+      var _this3 = this;
+
+      _toConsumableArray(this._onExited).reverse().forEach(function (cb) {
+        return cb(_this3);
+      });
+    }
+  }, {
+    key: "addOnEntered",
+    value: function addOnEntered(cb) {
+      this._onEntered.push(cb);
+    }
+  }, {
+    key: "addOnExited",
+    value: function addOnExited(cb) {
+      this._onExited.push(cb);
+    }
+  }, {
+    key: "getOverlayHook",
+    value: function getOverlayHook() {
+      return this.getHook("overlay");
+    }
+  }, {
+    key: "setIsVisible",
+    value: function setIsVisible(visible) {
+      this.getOverlayHook().setIsVisible(visible);
+    }
+  }, {
+    key: "getHeaderElement",
+    value: function getHeaderElement() {
+      return this.getElement("overlayHeader");
+    }
+  }, {
+    key: "getContentElement",
+    value: function getContentElement() {
+      return this.getElement("overlayContent");
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this4 = this;
+
+      var _this$getOverlayHook = this.getOverlayHook(),
+          isVisible = _this$getOverlayHook.isVisible;
+
+      return /*#__PURE__*/React.createElement(Transition, {
+        in: isVisible,
+        timeout: 100,
+        appear: true,
+        onExited: function onExited() {
+          return _this4.onExited();
+        },
+        onEntered: function onEntered() {
+          return _this4.onEntered();
+        }
+      }, function (state) {
+        return /*#__PURE__*/React.createElement(OverlayLayoutWrapper, {
+          style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
+        }, _get(_getPrototypeOf(OverlayView.prototype), "render", _this4).call(_this4, props));
+      });
+    }
+  }]);
+
+  return OverlayView;
+}(UIView);
+
+_defineProperty(OverlayView, "openedViews", 0);

package/ui/views/SplitView/SplitViewPanelElement.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { UIElement } from "../../UIElement";
+export declare class SplitViewPanelElement extends UIElement<any> {
+    private _width;
+    private _classNames;
+    setWidth(width: number): void;
+    addClassName(className: string): void;
+    removeClassName(className: string): void;
+    setContentElement(element: UIElement): void;
+    render(props: any): JSX.Element;
+}

package/ui/views/SplitView/SplitViewPanelElement.js

@@ -0,0 +1,72 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+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 _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from "react";
+import classNames from "classnames";
+import { UIElement } from "../../UIElement";
+import { Cell } from "@webiny/ui/Grid";
+export var SplitViewPanelElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(SplitViewPanelElement, _UIElement);
+
+  var _super = _createSuper(SplitViewPanelElement);
+
+  function SplitViewPanelElement() {
+    var _this;
+
+    _classCallCheck(this, SplitViewPanelElement);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "_width", 12);
+
+    _defineProperty(_assertThisInitialized(_this), "_classNames", new Set());
+
+    return _this;
+  }
+
+  _createClass(SplitViewPanelElement, [{
+    key: "setWidth",
+    value: function setWidth(width) {
+      this._width = width;
+    }
+  }, {
+    key: "addClassName",
+    value: function addClassName(className) {
+      this._classNames.add(className);
+    }
+  }, {
+    key: "removeClassName",
+    value: function removeClassName(className) {
+      this._classNames.delete(className);
+    }
+  }, {
+    key: "setContentElement",
+    value: function setContentElement(element) {
+      // Remove previous content
+      this.getChildren().forEach(function (el) {
+        return el.remove();
+      }); // Add new content
+
+      this.addElement(element);
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/React.createElement(Cell, {
+        span: this._width,
+        className: classNames(Array.from(this._classNames.values()))
+      }, _get(_getPrototypeOf(SplitViewPanelElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+
+  return SplitViewPanelElement;
+}(UIElement);

package/ui/views/SplitView.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { UIElement } from "../UIElement";
+import { SplitViewPanelElement } from "./SplitView/SplitViewPanelElement";
+import { UIView } from "../UIView";
+interface SplitViewConfig {
+    leftPanel?: UIElement;
+    rightPanel?: UIElement;
+}
+export declare class SplitView extends UIView {
+    private _classNames;
+    private _leftPanel;
+    private _rightPanel;
+    constructor(id: any, config?: SplitViewConfig);
+    addClassName(className: string): void;
+    removeClassName(className: string): void;
+    getLeftPanel(): SplitViewPanelElement;
+    getRightPanel(): SplitViewPanelElement;
+    render(props?: any): React.ReactNode;
+    private addElements;
+}
+export {};

package/ui/views/SplitView.js

@@ -0,0 +1,142 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+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 _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from "react";
+import classNames from "classnames";
+import { css } from "emotion";
+import { Grid } from "@webiny/ui/Grid";
+import { SplitViewPanelElement } from "./SplitView/SplitViewPanelElement";
+import { UIView } from "../UIView";
+var grid = /*#__PURE__*/css({
+  "&.mdc-layout-grid": {
+    padding: 0,
+    backgroundColor: "var(--mdc-theme-background)",
+    ">.mdc-layout-grid__inner": {
+      gridGap: 0
+    }
+  }
+}, "label:grid;");
+var leftPanel = /*#__PURE__*/css({
+  backgroundColor: "var(--mdc-theme-surface)",
+  ">.webiny-data-list": {
+    display: "flex",
+    flexDirection: "column",
+    height: "calc(100vh - 70px)",
+    ".mdc-list": {
+      overflow: "auto"
+    }
+  },
+  ">.mdc-list": {
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: "calc(100vh - 70px)",
+    overflow: "auto"
+  }
+}, "label:leftPanel;");
+var rightPanel = /*#__PURE__*/css({
+  backgroundColor: "var(--mdc-theme-background)",
+  overflow: "auto",
+  height: "calc(100vh - 70px)"
+}, "label:rightPanel;");
+export var SplitView = /*#__PURE__*/function (_UIView) {
+  _inherits(SplitView, _UIView);
+
+  var _super = _createSuper(SplitView);
+
+  function SplitView(id) {
+    var _this;
+
+    var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    _classCallCheck(this, SplitView);
+
+    _this = _super.call(this, "SplitView.".concat(id));
+
+    _defineProperty(_assertThisInitialized(_this), "_classNames", new Set());
+
+    _defineProperty(_assertThisInitialized(_this), "_leftPanel", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_rightPanel", void 0);
+
+    _this.useGrid(false);
+
+    _this.addClassName(grid);
+
+    _this.addClassName("webiny-split-view");
+
+    _this.addElements();
+
+    if (config.leftPanel) {
+      _this.getLeftPanel().addElement(config.leftPanel);
+    }
+
+    if (config.rightPanel) {
+      _this.getRightPanel().addElement(config.rightPanel);
+    }
+
+    return _this;
+  }
+
+  _createClass(SplitView, [{
+    key: "addClassName",
+    value: function addClassName(className) {
+      this._classNames.add(className);
+    }
+  }, {
+    key: "removeClassName",
+    value: function removeClassName(className) {
+      this._classNames.delete(className);
+    }
+  }, {
+    key: "getLeftPanel",
+    value: function getLeftPanel() {
+      return this.getElement("leftPanel");
+    }
+  }, {
+    key: "getRightPanel",
+    value: function getRightPanel() {
+      return this.getElement("rightPanel");
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/React.createElement(Grid, {
+        className: classNames(Array.from(this._classNames.values()))
+      }, _get(_getPrototypeOf(SplitView.prototype), "render", this).call(this, props));
+    }
+  }, {
+    key: "addElements",
+    value: function addElements() {
+      this._leftPanel = new SplitViewPanelElement("leftPanel");
+
+      this._leftPanel.useGrid(false);
+
+      this._leftPanel.setWidth(5);
+
+      this._leftPanel.addClassName(leftPanel);
+
+      this._leftPanel.addClassName("webiny-split-view__left-panel");
+
+      this._rightPanel = new SplitViewPanelElement("rightPanel");
+
+      this._rightPanel.useGrid(false);
+
+      this._rightPanel.setWidth(7);
+
+      this._rightPanel.addClassName(rightPanel);
+
+      this._rightPanel.addClassName("webiny-split-view__right-panel");
+
+      this.addElement(this._leftPanel);
+
+      this._rightPanel.moveAfter(this._leftPanel);
+    }
+  }]);
+
+  return SplitView;
+}(UIView);