@webiny/app-admin 0.0.0-ee-vpcs.549378cf03

package/ui/views/OverlayView/HeaderTitleElement.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderTitleElementRenderer = exports.HeaderTitleElement = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UIElement2 = require("../../UIElement");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var _UIRenderer2 = require("../../UIRenderer");
+
+var HeaderTitleElementRenderer = /*#__PURE__*/function (_UIRenderer) {
+  (0, _inherits2.default)(HeaderTitleElementRenderer, _UIRenderer);
+
+  var _super = (0, _createSuper2.default)(HeaderTitleElementRenderer);
+
+  function HeaderTitleElementRenderer() {
+    (0, _classCallCheck2.default)(this, HeaderTitleElementRenderer);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(HeaderTitleElementRenderer, [{
+    key: "render",
+    value: function render(_ref) {
+      var element = _ref.element;
+      return /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        style: {
+          margin: "0 auto",
+          color: "var(--mdc-theme-on-surface)"
+        },
+        use: "headline6"
+      }, element.config.title());
+    }
+  }]);
+  return HeaderTitleElementRenderer;
+}(_UIRenderer2.UIRenderer);
+
+exports.HeaderTitleElementRenderer = HeaderTitleElementRenderer;
+
+var HeaderTitleElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(HeaderTitleElement, _UIElement);
+
+  var _super2 = (0, _createSuper2.default)(HeaderTitleElement);
+
+  function HeaderTitleElement(id, config) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HeaderTitleElement);
+    _this = _super2.call(this, id, config);
+
+    _this.addRenderer(new HeaderTitleElementRenderer());
+
+    return _this;
+  }
+
+  return (0, _createClass2.default)(HeaderTitleElement);
+}(_UIElement2.UIElement);
+
+exports.HeaderTitleElement = HeaderTitleElement;

package/ui/views/OverlayView/HeaderTitleElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HeaderTitleElementRenderer","element","margin","color","config","title","UIRenderer","HeaderTitleElement","id","addRenderer","UIElement"],"sources":["HeaderTitleElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\n\ninterface HeaderTitleElementConfig extends UIElementConfig {\n    title: () => string | null;\n}\n\nexport class HeaderTitleElementRenderer extends UIRenderer<HeaderTitleElement> {\n    public override render({ element }: UIRenderParams<HeaderTitleElement>): React.ReactNode {\n        return (\n            <Typography\n                style={{ margin: \"0 auto\", color: \"var(--mdc-theme-on-surface)\" }}\n                use={\"headline6\"}\n            >\n                {element.config.title()}\n            </Typography>\n        );\n    }\n}\n\nexport class HeaderTitleElement extends UIElement<HeaderTitleElementConfig> {\n    public constructor(id: string, config: HeaderTitleElementConfig) {\n        super(id, config);\n\n        this.addRenderer(new HeaderTitleElementRenderer());\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;IAMaA,0B;;;;;;;;;;;;WACT,sBAAyF;MAAA,IAAhEC,OAAgE,QAAhEA,OAAgE;MACrF,oBACI,6BAAC,sBAAD;QACI,KAAK,EAAE;UAAEC,MAAM,EAAE,QAAV;UAAoBC,KAAK,EAAE;QAA3B,CADX;QAEI,GAAG,EAAE;MAFT,GAIKF,OAAO,CAACG,MAAR,CAAeC,KAAf,EAJL,CADJ;IAQH;;;EAV2CC,uB;;;;IAanCC,kB;;;;;EACT,4BAAmBC,EAAnB,EAA+BJ,MAA/B,EAAiE;IAAA;;IAAA;IAC7D,2BAAMI,EAAN,EAAUJ,MAAV;;IAEA,MAAKK,WAAL,CAAiB,IAAIT,0BAAJ,EAAjB;;IAH6D;EAIhE;;;EALmCU,qB"}

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

@@ -0,0 +1,5 @@
+export interface UseOverlayView {
+    isVisible: boolean;
+    setIsVisible: (value: boolean) => void;
+}
+export declare const useOverlayView: () => UseOverlayView;

package/ui/views/OverlayView/useOverlayView.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverlayView = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _emotion = require("emotion");
+
+var _OverlayView = require("../OverlayView");
+
+var noScroll = /*#__PURE__*/(0, _emotion.css)({
+  overflow: "hidden",
+  height: "100vh"
+}, "label:noScroll;");
+
+var useOverlayView = function useOverlayView() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isVisible = _useState2[0],
+      setIsVisible = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (isVisible) {
+      _OverlayView.OverlayView.openedViews++;
+      document.body.classList.add(noScroll);
+    } else if (!_OverlayView.OverlayView.openedViews) {
+      document.body.classList.remove(noScroll);
+    }
+  }, [isVisible]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (_OverlayView.OverlayView.openedViews > 0) {
+        _OverlayView.OverlayView.openedViews--;
+      }
+
+      if (!_OverlayView.OverlayView.openedViews) {
+        document.body.classList.remove(noScroll);
+      }
+    };
+  }, []);
+  return {
+    isVisible: isVisible,
+    setIsVisible: setIsVisible
+  };
+};
+
+exports.useOverlayView = useOverlayView;

package/ui/views/OverlayView/useOverlayView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["noScroll","css","overflow","height","useOverlayView","useState","isVisible","setIsVisible","useEffect","OverlayView","openedViews","document","body","classList","add","remove"],"sources":["useOverlayView.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { css } from \"emotion\";\nimport { OverlayView } from \"../OverlayView\";\n\nconst noScroll = css({\n    overflow: \"hidden\",\n    height: \"100vh\"\n});\n\nexport interface UseOverlayView {\n    isVisible: boolean;\n    setIsVisible: (value: boolean) => void;\n}\n\nexport const useOverlayView = (): UseOverlayView => {\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n\n    useEffect(() => {\n        if (isVisible) {\n            OverlayView.openedViews++;\n            document.body.classList.add(noScroll);\n        } else if (!OverlayView.openedViews) {\n            document.body.classList.remove(noScroll);\n        }\n    }, [isVisible]);\n\n    useEffect(() => {\n        return () => {\n            if (OverlayView.openedViews > 0) {\n                OverlayView.openedViews--;\n            }\n            if (!OverlayView.openedViews) {\n                document.body.classList.remove(noScroll);\n            }\n        };\n    }, []);\n\n    return { isVisible, setIsVisible };\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,QAAQ,gBAAG,IAAAC,YAAA,EAAI;EACjBC,QAAQ,EAAE,QADO;EAEjBC,MAAM,EAAE;AAFS,CAAJ,oBAAjB;;AAUO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAsB;EAChD,gBAAkC,IAAAC,eAAA,EAAkB,KAAlB,CAAlC;EAAA;EAAA,IAAOC,SAAP;EAAA,IAAkBC,YAAlB;;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACZ,IAAIF,SAAJ,EAAe;MACXG,wBAAA,CAAYC,WAAZ;MACAC,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,GAAxB,CAA4Bd,QAA5B;IACH,CAHD,MAGO,IAAI,CAACS,wBAAA,CAAYC,WAAjB,EAA8B;MACjCC,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAA+Bf,QAA/B;IACH;EACJ,CAPD,EAOG,CAACM,SAAD,CAPH;EASA,IAAAE,gBAAA,EAAU,YAAM;IACZ,OAAO,YAAM;MACT,IAAIC,wBAAA,CAAYC,WAAZ,GAA0B,CAA9B,EAAiC;QAC7BD,wBAAA,CAAYC,WAAZ;MACH;;MACD,IAAI,CAACD,wBAAA,CAAYC,WAAjB,EAA8B;QAC1BC,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAA+Bf,QAA/B;MACH;IACJ,CAPD;EAQH,CATD,EASG,EATH;EAWA,OAAO;IAAEM,SAAS,EAATA,SAAF;IAAaC,YAAY,EAAZA;EAAb,CAAP;AACH,CAxBM"}

package/ui/views/OverlayView.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { UIView, UIViewProps } from "../UIView";
+import { UseOverlayView } from "./OverlayView/useOverlayView";
+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(): UseOverlayView;
+    setIsVisible(visible: boolean): void;
+    getHeaderElement(): HeaderElement;
+    getContentElement(): ContentElement;
+    render(props: UIViewProps): React.ReactNode;
+}
+export {};

package/ui/views/OverlayView.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverlayView = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _UIView2 = require("../UIView");
+
+var _useOverlayView = require("./OverlayView/useOverlayView");
+
+var _HeaderElement = require("./OverlayView/HeaderElement");
+
+var _ContentElement = require("./OverlayView/ContentElement");
+
+// !GOOD FIRST ISSUE!
+// Extract rendering and styling into an OverlayViewRenderer class.
+var OverlayLayoutWrapper = /*#__PURE__*/(0, _styled.default)("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
+  }
+};
+
+var OverlayView = /*#__PURE__*/function (_UIView) {
+  (0, _inherits2.default)(OverlayView, _UIView);
+
+  var _super = (0, _createSuper2.default)(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";
+    (0, _classCallCheck2.default)(this, OverlayView);
+    _this = _super.call(this, id);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_onEntered", []);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_onExited", []);
+
+    _this.useGrid(false);
+
+    _this.addHookDefinition("overlay", _useOverlayView.useOverlayView);
+
+    _this.addElement(new _HeaderElement.HeaderElement("overlayHeader", {
+      onClose: function onClose() {
+        return _this.setIsVisible(false);
+      }
+    }));
+
+    _this.addElement(new _ContentElement.ContentElement("overlayContent"));
+
+    _this.applyPlugins(OverlayView);
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(OverlayView, [{
+    key: "setTitle",
+    value: function setTitle(title) {
+      this.getHeaderElement().setTitle(title);
+    }
+  }, {
+    key: "onEntered",
+    value: function onEntered() {
+      var _this2 = this;
+
+      (0, _toConsumableArray2.default)(this._onEntered).reverse().forEach(function (cb) {
+        return cb(_this2);
+      });
+    }
+  }, {
+    key: "onExited",
+    value: function onExited() {
+      var _this3 = this;
+
+      (0, _toConsumableArray2.default)(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.default.createElement(_reactTransitionGroup.Transition, {
+        in: isVisible,
+        timeout: 100,
+        appear: true,
+        onExited: function onExited() {
+          return _this4.onExited();
+        },
+        onEntered: function onEntered() {
+          return _this4.onEntered();
+        }
+      }, function (state) {
+        return /*#__PURE__*/_react.default.createElement(OverlayLayoutWrapper, {
+          style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle), transitionStyles[state])
+        }, (0, _get2.default)((0, _getPrototypeOf2.default)(OverlayView.prototype), "render", _this4).call(_this4, props));
+      });
+    }
+  }]);
+  return OverlayView;
+}(_UIView2.UIView);
+
+exports.OverlayView = OverlayView;
+(0, _defineProperty2.default)(OverlayView, "openedViews", 0);

package/ui/views/OverlayView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["OverlayLayoutWrapper","styled","position","width","height","backgroundColor","zIndex","top","left","defaultStyle","transform","opacity","transitionProperty","transitionTimingFunction","transitionDuration","willChange","transitionStyles","entering","entered","OverlayView","id","useGrid","addHookDefinition","useOverlayView","addElement","HeaderElement","onClose","setIsVisible","ContentElement","applyPlugins","title","getHeaderElement","setTitle","_onEntered","reverse","forEach","cb","_onExited","push","getHook","visible","getOverlayHook","getElement","props","isVisible","onExited","onEntered","state","UIView"],"sources":["OverlayView.tsx"],"sourcesContent":["import React from \"react\";\nimport { Transition } from \"react-transition-group\";\nimport styled from \"@emotion/styled\";\nimport { UIView, UIViewProps } from \"~/ui/UIView\";\nimport { UseOverlayView, useOverlayView } from \"./OverlayView/useOverlayView\";\nimport { HeaderElement } from \"./OverlayView/HeaderElement\";\nimport { ContentElement } from \"./OverlayView/ContentElement\";\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into an OverlayViewRenderer class.\n\nconst OverlayLayoutWrapper = styled(\"div\")({\n    position: \"fixed\",\n    width: \"100%\",\n    height: \"100vh\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    /**\n     * Has to be higher than 5 so it's above advanced settings dialog,\n     * and below 20, so the image editor & Dialogs can be displayed above.\n     */\n    zIndex: 18,\n    top: 0,\n    left: 0\n});\n\nconst defaultStyle: Record<string, string | number> = {\n    transform: \"translateY(75vh)\",\n    opacity: 0,\n    transitionProperty: \"transform, opacity\",\n    transitionTimingFunction: \"cubic-bezier(0, 0, .2, 1)\",\n    transitionDuration: \"225ms\",\n    willChange: \"opacity, transform\"\n};\n\nconst transitionStyles: Record<string, any> = {\n    entering: {\n        transform: \"translateY(75vh)\",\n        opacity: 0\n    },\n    entered: {\n        transform: \"translateY(0px)\",\n        opacity: 1\n    }\n};\n\ninterface OnExited {\n    (view: OverlayView): void;\n}\n\ninterface OnEntered {\n    (view: OverlayView): void;\n}\n\nexport class OverlayView extends UIView {\n    /**\n     * This property is used to track the amount of opened overlays. Since we're applying a CSS class to disable\n     * window scroll, we must make sure we don't remove that CSS class until all the overlays are closed.\n     */\n    static openedViews = 0;\n    private _onEntered: OnEntered[] = [];\n    private _onExited: OnExited[] = [];\n\n    public constructor(id = \"OverlayView\") {\n        super(id);\n        this.useGrid(false);\n\n        this.addHookDefinition(\"overlay\", useOverlayView);\n\n        this.addElement(\n            new HeaderElement(\"overlayHeader\", {\n                onClose: () => this.setIsVisible(false)\n            })\n        );\n\n        this.addElement(new ContentElement(\"overlayContent\"));\n\n        this.applyPlugins(OverlayView);\n    }\n\n    public setTitle(title: () => string): void {\n        this.getHeaderElement().setTitle(title);\n    }\n\n    public onEntered(): void {\n        [...this._onEntered].reverse().forEach(cb => cb(this));\n    }\n\n    public onExited(): void {\n        [...this._onExited].reverse().forEach(cb => cb(this));\n    }\n\n    public addOnEntered(cb: OnExited): void {\n        this._onEntered.push(cb);\n    }\n\n    public addOnExited(cb: OnExited): void {\n        this._onExited.push(cb);\n    }\n\n    public getOverlayHook(): UseOverlayView {\n        return this.getHook<UseOverlayView>(\"overlay\");\n    }\n\n    public setIsVisible(visible: boolean): void {\n        this.getOverlayHook().setIsVisible(visible);\n    }\n\n    public getHeaderElement(): HeaderElement {\n        return this.getElement(\"overlayHeader\") as HeaderElement;\n    }\n\n    public getContentElement(): ContentElement {\n        return this.getElement(\"overlayContent\") as HeaderElement;\n    }\n\n    public override render(props: UIViewProps): React.ReactNode {\n        const { isVisible } = this.getOverlayHook();\n        return (\n            <Transition\n                in={isVisible}\n                timeout={100}\n                appear\n                onExited={() => this.onExited()}\n                onEntered={() => this.onEntered()}\n            >\n                {state => (\n                    <OverlayLayoutWrapper style={{ ...defaultStyle, ...transitionStyles[state] }}>\n                        {super.render(props)}\n                    </OverlayLayoutWrapper>\n                )}\n            </Transition>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;AACA;AAEA,IAAMA,oBAAoB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACvCC,QAAQ,EAAE,OAD6B;EAEvCC,KAAK,EAAE,MAFgC;EAGvCC,MAAM,EAAE,OAH+B;EAIvCC,eAAe,EAAE,6BAJsB;;EAKvC;AACJ;AACA;AACA;EACIC,MAAM,EAAE,EAT+B;EAUvCC,GAAG,EAAE,CAVkC;EAWvCC,IAAI,EAAE;AAXiC,CAAjB,CAA1B;AAcA,IAAMC,YAA6C,GAAG;EAClDC,SAAS,EAAE,kBADuC;EAElDC,OAAO,EAAE,CAFyC;EAGlDC,kBAAkB,EAAE,oBAH8B;EAIlDC,wBAAwB,EAAE,2BAJwB;EAKlDC,kBAAkB,EAAE,OAL8B;EAMlDC,UAAU,EAAE;AANsC,CAAtD;AASA,IAAMC,gBAAqC,GAAG;EAC1CC,QAAQ,EAAE;IACNP,SAAS,EAAE,kBADL;IAENC,OAAO,EAAE;EAFH,CADgC;EAK1CO,OAAO,EAAE;IACLR,SAAS,EAAE,iBADN;IAELC,OAAO,EAAE;EAFJ;AALiC,CAA9C;;IAmBaQ,W;;;;;EACT;AACJ;AACA;AACA;EAKI,uBAAuC;IAAA;;IAAA,IAApBC,EAAoB,uEAAf,aAAe;IAAA;IACnC,0BAAMA,EAAN;IADmC,yFAHL,EAGK;IAAA,wFAFP,EAEO;;IAEnC,MAAKC,OAAL,CAAa,KAAb;;IAEA,MAAKC,iBAAL,CAAuB,SAAvB,EAAkCC,8BAAlC;;IAEA,MAAKC,UAAL,CACI,IAAIC,4BAAJ,CAAkB,eAAlB,EAAmC;MAC/BC,OAAO,EAAE;QAAA,OAAM,MAAKC,YAAL,CAAkB,KAAlB,CAAN;MAAA;IADsB,CAAnC,CADJ;;IAMA,MAAKH,UAAL,CAAgB,IAAII,8BAAJ,CAAmB,gBAAnB,CAAhB;;IAEA,MAAKC,YAAL,CAAkBV,WAAlB;;IAdmC;EAetC;;;;WAED,kBAAgBW,KAAhB,EAA2C;MACvC,KAAKC,gBAAL,GAAwBC,QAAxB,CAAiCF,KAAjC;IACH;;;WAED,qBAAyB;MAAA;;MACrB,iCAAI,KAAKG,UAAT,EAAqBC,OAArB,GAA+BC,OAA/B,CAAuC,UAAAC,EAAE;QAAA,OAAIA,EAAE,CAAC,MAAD,CAAN;MAAA,CAAzC;IACH;;;WAED,oBAAwB;MAAA;;MACpB,iCAAI,KAAKC,SAAT,EAAoBH,OAApB,GAA8BC,OAA9B,CAAsC,UAAAC,EAAE;QAAA,OAAIA,EAAE,CAAC,MAAD,CAAN;MAAA,CAAxC;IACH;;;WAED,sBAAoBA,EAApB,EAAwC;MACpC,KAAKH,UAAL,CAAgBK,IAAhB,CAAqBF,EAArB;IACH;;;WAED,qBAAmBA,EAAnB,EAAuC;MACnC,KAAKC,SAAL,CAAeC,IAAf,CAAoBF,EAApB;IACH;;;WAED,0BAAwC;MACpC,OAAO,KAAKG,OAAL,CAA6B,SAA7B,CAAP;IACH;;;WAED,sBAAoBC,OAApB,EAA4C;MACxC,KAAKC,cAAL,GAAsBd,YAAtB,CAAmCa,OAAnC;IACH;;;WAED,4BAAyC;MACrC,OAAO,KAAKE,UAAL,CAAgB,eAAhB,CAAP;IACH;;;WAED,6BAA2C;MACvC,OAAO,KAAKA,UAAL,CAAgB,gBAAhB,CAAP;IACH;;;WAED,gBAAuBC,KAAvB,EAA4D;MAAA;;MACxD,2BAAsB,KAAKF,cAAL,EAAtB;MAAA,IAAQG,SAAR,wBAAQA,SAAR;;MACA,oBACI,6BAAC,gCAAD;QACI,EAAE,EAAEA,SADR;QAEI,OAAO,EAAE,GAFb;QAGI,MAAM,MAHV;QAII,QAAQ,EAAE;UAAA,OAAM,MAAI,CAACC,QAAL,EAAN;QAAA,CAJd;QAKI,SAAS,EAAE;UAAA,OAAM,MAAI,CAACC,SAAL,EAAN;QAAA;MALf,GAOK,UAAAC,KAAK;QAAA,oBACF,6BAAC,oBAAD;UAAsB,KAAK,8DAAOtC,YAAP,GAAwBO,gBAAgB,CAAC+B,KAAD,CAAxC;QAA3B,2GACkBJ,KADlB,EADE;MAAA,CAPV,CADJ;IAeH;;;EA/E4BK,e;;;8BAApB7B,W,iBAKY,C"}

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { UIElement, UiElementRenderProps } 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: UiElementRenderProps): React.ReactNode;
+}

package/ui/views/SplitView/SplitViewPanelElement.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitViewPanelElement = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _UIElement2 = require("../../UIElement");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var SplitViewPanelElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(SplitViewPanelElement, _UIElement);
+
+  var _super = (0, _createSuper2.default)(SplitViewPanelElement);
+
+  function SplitViewPanelElement() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_width", 12);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_classNames", new Set());
+    return _this;
+  }
+
+  (0, _createClass2.default)(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.default.createElement(_Grid.Cell, {
+        span: this._width,
+        className: (0, _classnames.default)(Array.from(this._classNames.values()))
+      }, (0, _get2.default)((0, _getPrototypeOf2.default)(SplitViewPanelElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+  return SplitViewPanelElement;
+}(_UIElement2.UIElement);
+
+exports.SplitViewPanelElement = SplitViewPanelElement;

package/ui/views/SplitView/SplitViewPanelElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SplitViewPanelElement","Set","width","_width","className","_classNames","add","delete","element","getChildren","forEach","el","remove","addElement","props","classNames","Array","from","values","UIElement"],"sources":["SplitViewPanelElement.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { Cell } from \"@webiny/ui/Grid\";\n\nexport class SplitViewPanelElement extends UIElement<any> {\n    private _width = 12;\n    private _classNames: Set<string> = new Set();\n\n    public setWidth(width: number): void {\n        this._width = width;\n    }\n\n    public addClassName(className: string): void {\n        this._classNames.add(className);\n    }\n\n    public removeClassName(className: string): void {\n        this._classNames.delete(className);\n    }\n\n    public setContentElement(element: UIElement): void {\n        // Remove previous content\n        this.getChildren().forEach(el => el.remove());\n\n        // Add new content\n        this.addElement(element);\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return (\n            <Cell span={this._width} className={classNames(Array.from(this._classNames.values()))}>\n                {super.render(props)}\n            </Cell>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;IAEaA,qB;;;;;;;;;;;;;;;yFACQ,E;8FACkB,IAAIC,GAAJ,E;;;;;;WAEnC,kBAAgBC,KAAhB,EAAqC;MACjC,KAAKC,MAAL,GAAcD,KAAd;IACH;;;WAED,sBAAoBE,SAApB,EAA6C;MACzC,KAAKC,WAAL,CAAiBC,GAAjB,CAAqBF,SAArB;IACH;;;WAED,yBAAuBA,SAAvB,EAAgD;MAC5C,KAAKC,WAAL,CAAiBE,MAAjB,CAAwBH,SAAxB;IACH;;;WAED,2BAAyBI,OAAzB,EAAmD;MAC/C;MACA,KAAKC,WAAL,GAAmBC,OAAnB,CAA2B,UAAAC,EAAE;QAAA,OAAIA,EAAE,CAACC,MAAH,EAAJ;MAAA,CAA7B,EAF+C,CAI/C;;MACA,KAAKC,UAAL,CAAgBL,OAAhB;IACH;;;WAED,gBAAuBM,KAAvB,EAAqE;MACjE,oBACI,6BAAC,UAAD;QAAM,IAAI,EAAE,KAAKX,MAAjB;QAAyB,SAAS,EAAE,IAAAY,mBAAA,EAAWC,KAAK,CAACC,IAAN,CAAW,KAAKZ,WAAL,CAAiBa,MAAjB,EAAX,CAAX;MAApC,iHACkBJ,KADlB,EADJ;IAKH;;;EA9BsCK,qB"}

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: string, config?: SplitViewConfig);
+    addClassName(className: string): void;
+    removeClassName(className: string): void;
+    getLeftPanel(): SplitViewPanelElement;
+    getRightPanel(): SplitViewPanelElement;
+    render(props?: any): React.ReactNode;
+    private addElements;
+}
+export {};