@webiny/app-admin 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/ui/views/FormView.js

@@ -1,9 +1,3 @@
-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 { CircularProgress } from "@webiny/ui/Progress";
 import { FormElement } from "../elements/form/FormElement";
@@ -14,147 +8,114 @@ import { FormHeaderElement } from "./FormView/FormHeaderElement";
 import { FormFooterElement } from "./FormView/FormFooterElement";
 import { FormContainerElement } from "./FormView/FormContainerElement";
 import { UIView } from "../UIView";
-export var FormView = /*#__PURE__*/function (_UIView) {
-  _inherits(FormView, _UIView);
-
-  var _super = _createSuper(FormView);
-
-  function FormView(id, config) {
-    var _this;
-
-    _classCallCheck(this, FormView);
-
+export class FormView extends UIView {
+  constructor(id, config) {
+    if (!config) {
+      config = {};
+    }
     if (!("setupForm" in config)) {
       config.setupForm = true;
     }
-
-    _this = _super.call(this, id, config);
-
-    _this.addElements();
-
-    _this.useGrid(false);
-
-    _this.applyPlugins(FormView);
-
-    return _this;
+    super(id, config);
+    this.addElements();
+    this.useGrid(false);
+    this.applyPlugins(FormView);
   }
-
-  _createClass(FormView, [{
-    key: "addElement",
-    value: function addElement(element) {
-      if (element.id === "form" || element.id === "formContainer") {
-        return _get(_getPrototypeOf(FormView.prototype), "addElement", this).call(this, element);
-      }
-
-      return this.getFormContainer().addElement(element);
-    }
-  }, {
-    key: "setTitle",
-    value: function setTitle(title) {
-      if (typeof title === "string") {
-        this.config.getTitle = function () {
-          return title;
-        };
-      } else {
-        this.config.getTitle = title;
-      }
-    }
-  }, {
-    key: "setOnSubmit",
-    value: function setOnSubmit(onSubmit) {
-      this.config.onSubmit = onSubmit;
-    }
-  }, {
-    key: "setFormData",
-    value: function setFormData(getter) {
-      this.config.getFormData = getter;
-    }
-  }, {
-    key: "getFormContainer",
-    value: function getFormContainer() {
-      return this.getElement("formContainer");
+  addElement(element) {
+    if (element.id === "form" || element.id === "formContainer") {
+      return super.addElement(element);
     }
-  }, {
-    key: "getFormContentElement",
-    value: function getFormContentElement() {
-      return this.getElement("formContent");
-    }
-  }, {
-    key: "getFormHeaderElement",
-    value: function getFormHeaderElement() {
-      return this.getElement("formHeader");
-    }
-  }, {
-    key: "getFormFooterElement",
-    value: function getFormFooterElement() {
-      return this.getElement("formFooter");
-    }
-  }, {
-    key: "getSubmitButtonElement",
-    value: function getSubmitButtonElement() {
-      return this.getFormFooterElement().getElement("submit");
+    return this.getFormContainer().addElement(element);
+  }
+  setTitle(title) {
+    if (typeof title === "string") {
+      this.config.getTitle = () => title;
+      return;
     }
-  }, {
-    key: "addElements",
-    value: function addElements() {
-      var _this2 = this;
-
-      var formContainer = new FormContainerElement("formContainer", {
-        testId: this.config.testId,
-        className: this.config.className,
-        noElevation: this.config.noElevation
-      });
-
-      if (this.config.setupForm) {
-        var form = this.addElement(new FormElement("form", {
-          onSubmit: function onSubmit(data, form) {
-            return _this2.config.onSubmit(data, form);
-          },
-          getData: function getData() {
-            return _this2.config.getFormData();
+    this.config.getTitle = title;
+  }
+  setOnSubmit(onSubmit) {
+    this.config.onSubmit = onSubmit;
+  }
+  setFormData(getter) {
+    this.config.getFormData = getter;
+  }
+  getFormContainer() {
+    return this.getElement("formContainer");
+  }
+  getFormContentElement() {
+    return this.getElement("formContent");
+  }
+  getFormHeaderElement() {
+    return this.getElement("formHeader");
+  }
+  getFormFooterElement() {
+    return this.getElement("formFooter");
+  }
+  getSubmitButtonElement() {
+    return this.getFormFooterElement().getElement("submit");
+  }
+  addElements() {
+    const formContainer = new FormContainerElement("formContainer", {
+      testId: this.config.testId,
+      className: this.config.className,
+      noElevation: this.config.noElevation
+    });
+    if (this.config.setupForm) {
+      const form = this.addElement(new FormElement("form", {
+        onSubmit: (data, form) => {
+          if (!this.config.onSubmit) {
+            return;
           }
-        }));
-        form.addElement(formContainer);
-      } else {
-        this.addElement(formContainer);
-      }
-
-      this.addElement(new GenericElement("loading", function () {
-        if (typeof _this2.config.isLoading !== "function") {
-          return null;
-        }
-
-        return _this2.config.isLoading() ? /*#__PURE__*/React.createElement(CircularProgress, null) : null;
-      }));
-      this.addElement(new FormHeaderElement("formHeader", {
-        getTitle: function getTitle(props) {
-          return _this2.config.getTitle(props);
-        }
-      }));
-      this.addElement(new FormContentElement("formContent"));
-      var footer = new FormFooterElement("formFooter");
-      this.addElement(footer);
-      var submitButton = new ButtonElement("submit", {
-        type: "primary",
-        label: "Save",
-        onClick: function onClick(props) {
-          return props.formProps.submit();
-        }
-      });
-      submitButton.moveToTheEndOf(footer);
-      var cancelButton = footer.addElement(new ButtonElement("cancel", {
-        type: "default",
-        label: "Cancel",
-        onClick: function onClick() {
-          return _this2.config.onCancel();
+          return this.config.onSubmit(data, form);
         },
-        shouldRender: function shouldRender() {
-          return typeof _this2.config.onCancel === "function";
+        getData: () => {
+          if (!this.config.getFormData) {
+            return {};
+          }
+          return this.config.getFormData();
         }
       }));
-      cancelButton.moveToTheBeginningOf(footer);
+      form.addElement(formContainer);
+    } else {
+      this.addElement(formContainer);
     }
-  }]);
+    this.addElement(new GenericElement("loading", () => {
+      if (typeof this.config.isLoading !== "function") {
+        return null;
+      }
+      return this.config.isLoading() ? /*#__PURE__*/React.createElement(CircularProgress, null) : null;
+    }));
+    this.addElement(new FormHeaderElement("formHeader", {
+      getTitle: props => {
+        if (!this.config.getTitle) {
+          return "";
+        }
+        return this.config.getTitle(props);
+      }
+    }));
+    this.addElement(new FormContentElement("formContent"));
+    const footer = new FormFooterElement("formFooter");
+    this.addElement(footer);
+    const submitButton = new ButtonElement("submit", {
+      type: "primary",
+      label: "Save",
+      onClick: props => props.formProps.submit()
+    });
+    submitButton.moveToTheEndOf(footer);
+    const cancelButton = footer.addElement(new ButtonElement("cancel", {
+      type: "default",
+      label: "Cancel",
+      onClick: () => {
+        if (!this.config.onCancel) {
+          return;
+        }
+        this.config.onCancel();
+      },
+      shouldRender: () => typeof this.config.onCancel === "function"
+    }));
+    cancelButton.moveToTheBeginningOf(footer);
+  }
+}
 
-  return FormView;
-}(UIView);
+//# sourceMappingURL=FormView.js.map

package/ui/views/FormView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","CircularProgress","FormElement","ButtonElement","GenericElement","FormContentElement","FormHeaderElement","FormFooterElement","FormContainerElement","UIView","FormView","constructor","id","config","setupForm","addElements","useGrid","applyPlugins","addElement","element","getFormContainer","setTitle","title","getTitle","setOnSubmit","onSubmit","setFormData","getter","getFormData","getElement","getFormContentElement","getFormHeaderElement","getFormFooterElement","getSubmitButtonElement","formContainer","testId","className","noElevation","form","data","getData","isLoading","createElement","props","footer","submitButton","type","label","onClick","formProps","submit","moveToTheEndOf","cancelButton","onCancel","shouldRender","moveToTheBeginningOf"],"sources":["FormView.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FormOnSubmit } from \"@webiny/form\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport type { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport type { FormElementRenderProps } from \"~/ui/elements/form/FormElement\";\nimport { FormElement } from \"~/ui/elements/form/FormElement\";\nimport { ButtonElement } from \"~/ui/elements/ButtonElement\";\nimport { GenericElement } from \"~/ui/elements/GenericElement\";\nimport { FormContentElement } from \"./FormView/FormContentElement\";\nimport { FormHeaderElement } from \"./FormView/FormHeaderElement\";\nimport { FormFooterElement } from \"./FormView/FormFooterElement\";\nimport { FormContainerElement } from \"./FormView/FormContainerElement\";\nimport { UIView } from \"~/ui/UIView\";\n\nexport interface FormViewConfig extends UIElementConfig {\n    setupForm?: boolean;\n    onSubmit?: FormOnSubmit;\n    getTitle?: (props: FormElementRenderProps) => string;\n    getFormData?: () => Record<string, any>;\n    isLoading?: () => boolean;\n    onCancel?: () => void;\n    testId?: string;\n    noElevation?: boolean;\n    className?: string;\n}\n\ninterface GetterWithProps<T> {\n    (props: FormElementRenderProps): T;\n}\n\ninterface GetterWithoutProps<T> {\n    (): T;\n}\n\nexport class FormView extends UIView<FormViewConfig> {\n    public constructor(id: string, config?: FormViewConfig) {\n        if (!config) {\n            config = {};\n        }\n        if (!(\"setupForm\" in config)) {\n            config.setupForm = true;\n        }\n\n        super(id, config);\n\n        this.addElements();\n        this.useGrid(false);\n\n        this.applyPlugins(FormView);\n    }\n\n    public override addElement<TElement extends UIElement = UIElement>(\n        element: TElement\n    ): TElement {\n        if (element.id === \"form\" || element.id === \"formContainer\") {\n            return super.addElement(element);\n        }\n\n        return this.getFormContainer().addElement(element);\n    }\n\n    public setTitle(title: string | GetterWithProps<string>): void {\n        if (typeof title === \"string\") {\n            this.config.getTitle = () => title;\n            return;\n        }\n        this.config.getTitle = title;\n    }\n\n    public setOnSubmit(onSubmit: FormOnSubmit): void {\n        this.config.onSubmit = onSubmit;\n    }\n\n    public setFormData(getter: GetterWithoutProps<Record<string, any>>): void {\n        this.config.getFormData = getter;\n    }\n\n    public getFormContainer(): FormContainerElement {\n        return this.getElement(\"formContainer\") as FormContainerElement;\n    }\n\n    public getFormContentElement(): FormContentElement {\n        return this.getElement(\"formContent\") as FormContentElement;\n    }\n\n    public getFormHeaderElement(): FormHeaderElement {\n        return this.getElement(\"formHeader\") as FormHeaderElement;\n    }\n\n    public getFormFooterElement(): FormFooterElement {\n        return this.getElement(\"formFooter\") as FormFooterElement;\n    }\n\n    public getSubmitButtonElement(): ButtonElement {\n        return this.getFormFooterElement().getElement(\"submit\") as ButtonElement;\n    }\n\n    private addElements(): void {\n        const formContainer = new FormContainerElement(\"formContainer\", {\n            testId: this.config.testId,\n            className: this.config.className,\n            noElevation: this.config.noElevation\n        });\n\n        if (this.config.setupForm) {\n            const form = this.addElement(\n                new FormElement(\"form\", {\n                    onSubmit: (data, form) => {\n                        if (!this.config.onSubmit) {\n                            return;\n                        }\n                        return this.config.onSubmit(data, form);\n                    },\n                    getData: () => {\n                        if (!this.config.getFormData) {\n                            return {};\n                        }\n                        return this.config.getFormData();\n                    }\n                })\n            ) as FormElement;\n\n            form.addElement(formContainer);\n        } else {\n            this.addElement(formContainer);\n        }\n\n        this.addElement(\n            new GenericElement(\"loading\", () => {\n                if (typeof this.config.isLoading !== \"function\") {\n                    return null;\n                }\n\n                return this.config.isLoading() ? <CircularProgress /> : null;\n            })\n        );\n\n        this.addElement(\n            new FormHeaderElement(\"formHeader\", {\n                getTitle: props => {\n                    if (!this.config.getTitle) {\n                        return \"\";\n                    }\n                    return this.config.getTitle(props);\n                }\n            })\n        );\n\n        this.addElement(new FormContentElement(\"formContent\"));\n\n        const footer = new FormFooterElement(\"formFooter\");\n        this.addElement(footer);\n\n        const submitButton = new ButtonElement<FormElementRenderProps>(\"submit\", {\n            type: \"primary\",\n            label: \"Save\",\n            onClick: props => props.formProps.submit()\n        });\n\n        submitButton.moveToTheEndOf(footer);\n\n        const cancelButton = footer.addElement(\n            new ButtonElement(\"cancel\", {\n                type: \"default\",\n                label: \"Cancel\",\n                onClick: () => {\n                    if (!this.config.onCancel) {\n                        return;\n                    }\n                    this.config.onCancel();\n                },\n                shouldRender: () => typeof this.config.onCancel === \"function\"\n            })\n        );\n\n        cancelButton.moveToTheBeginningOf(footer);\n    }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/ui/views/OverlayView/ContentElement.js

@@ -1,42 +1,29 @@
-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 _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 import React from "react";
-import styled from "@emotion/styled";
 import { UIElement } from "../../UIElement";
-var ContentWrapper = /*#__PURE__*/styled("div", {
+const ContentWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "exqtwog0"
+} : {
   target: "exqtwog0",
   label: "ContentWrapper"
-})({
-  width: "100%",
-  paddingTop: 65
+})(process.env.NODE_ENV === "production" ? {
+  name: "1msblsr",
+  styles: "width:100%;padding-top:65px"
+} : {
+  name: "1msblsr",
+  styles: "width:100%;padding-top:65px",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRlbnRFbGVtZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLdUIiLCJmaWxlIjoiQ29udGVudEVsZW1lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IFVpRWxlbWVudFJlbmRlclByb3BzIH0gZnJvbSBcIn4vdWkvVUlFbGVtZW50XCI7XG5pbXBvcnQgeyBVSUVsZW1lbnQgfSBmcm9tIFwifi91aS9VSUVsZW1lbnRcIjtcblxuY29uc3QgQ29udGVudFdyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBwYWRkaW5nVG9wOiA2NVxufSk7XG5cbmV4cG9ydCBjbGFzcyBDb250ZW50RWxlbWVudCBleHRlbmRzIFVJRWxlbWVudCB7XG4gICAgY29uc3RydWN0b3IoaWQ6IHN0cmluZykge1xuICAgICAgICBzdXBlcihpZCk7XG4gICAgICAgIHRoaXMudXNlR3JpZChmYWxzZSk7XG4gICAgfVxuXG4gICAgcHVibGljIG92ZXJyaWRlIHJlbmRlcihwcm9wczogVWlFbGVtZW50UmVuZGVyUHJvcHMpOiBSZWFjdC5SZWFjdE5vZGUge1xuICAgICAgICByZXR1cm4gPENvbnRlbnRXcmFwcGVyPntzdXBlci5yZW5kZXIocHJvcHMpfTwvQ29udGVudFdyYXBwZXI+O1xuICAgIH1cbn1cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-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;
+export class ContentElement extends UIElement {
+  constructor(id) {
+    super(id);
+    this.useGrid(false);
   }
+  render(props) {
+    return /*#__PURE__*/React.createElement(ContentWrapper, null, super.render(props));
+  }
+}
 
-  _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);
+//# sourceMappingURL=ContentElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","UIElement","ContentWrapper","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ContentElement","constructor","id","useGrid","render","props","createElement"],"sources":["ContentElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport type { UiElementRenderProps } from \"~/ui/UIElement\";\nimport { UIElement } from \"~/ui/UIElement\";\n\nconst ContentWrapper = styled(\"div\")({\n    width: \"100%\",\n    paddingTop: 65\n});\n\nexport class ContentElement extends UIElement {\n    constructor(id: string) {\n        super(id);\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return <ContentWrapper>{super.render(props)}</ContentWrapper>;\n    }\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,SAAS;AAElB,MAAMC,cAAc,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAGnC,CAAC;AAEF,OAAO,MAAMC,cAAc,SAASb,SAAS,CAAC;EAC1Cc,WAAWA,CAACC,EAAU,EAAE;IACpB,KAAK,CAACA,EAAE,CAAC;IACT,IAAI,CAACC,OAAO,CAAC,KAAK,CAAC;EACvB;EAEgBC,MAAMA,CAACC,KAA2B,EAAmB;IACjE,oBAAOnB,KAAA,CAAAoB,aAAA,CAAClB,cAAc,QAAE,KAAK,CAACgB,MAAM,CAACC,KAAK,CAAkB,CAAC;EACjE;AACJ","ignoreList":[]}

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { UIElement, UIElementConfig } from "../../UIElement";
+import type { UIElementConfig, UiElementRenderProps } from "../../UIElement";
+import { UIElement } from "../../UIElement";
 interface HeaderElementConfig extends UIElementConfig {
     onClose: (event: React.MouseEvent) => void;
     getTitle?: GetterWithoutProps<string>;
@@ -16,9 +17,9 @@ export declare class HeaderElement extends UIElement<HeaderElementConfig> {
     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;
+    getLeftSectionElement(): UIElement;
+    getCenterSectionElement(): UIElement;
+    getRightSectionElement(): UIElement;
+    render(props: UiElementRenderProps): React.ReactNode;
 }
 export {};

package/ui/views/OverlayView/HeaderElement.js

@@ -1,115 +1,72 @@
-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 { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 import { PlaceholderElement } from "../../elements/PlaceholderElement";
 import { HeaderTitleElement } from "./HeaderTitleElement";
-var width = /*#__PURE__*/css({
+const width = 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"));
+// !GOOD FIRST ISSUE!
+// Extract rendering and styling into a HeaderElementRenderer class.
 
-    _this._centerSection = new HeaderTitleElement("title", {
-      title: function title() {
-        return typeof _this.config.getTitle === "function" ? _this.config.getTitle() : null;
+export class HeaderElement extends UIElement {
+  _leftSection = new PlaceholderElement("leftSection");
+  _rightSection = new PlaceholderElement("rightSection");
+  constructor(id, config) {
+    super(id, config);
+    this._centerSection = new HeaderTitleElement("title", {
+      title: () => {
+        return typeof this.config.getTitle === "function" ? this.config.getTitle() : null;
       }
     });
-
-    _this.useGrid(false);
-
-    return _this;
+    this.useGrid(false);
   }
+  setTitle(title) {
+    this.config.getTitle = title;
+  }
+  setLeftSectionElement(element) {
+    this._leftSection = element;
+  }
+  setCenterSectionElement(element) {
+    this._centerSection = element;
+  }
+  setRightSectionElement(element) {
+    this._rightSection = element;
+  }
+  getLeftSectionElement() {
+    return this._leftSection;
+  }
+  getCenterSectionElement() {
+    return this._centerSection;
+  }
+  getRightSectionElement() {
+    return this._rightSection;
+  }
+  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, null)
+    })));
+  }
+}
 
-  _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);
+//# sourceMappingURL=HeaderElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","css","UIElement","TopAppBarSecondary","TopAppBarSection","IconButton","ReactComponent","CloseIcon","PlaceholderElement","HeaderTitleElement","width","HeaderElement","_leftSection","_rightSection","constructor","id","config","_centerSection","title","getTitle","useGrid","setTitle","setLeftSectionElement","element","setCenterSectionElement","setRightSectionElement","getLeftSectionElement","getCenterSectionElement","getRightSectionElement","render","props","createElement","fixed","style","top","className","alignStart","alignEnd","ripple","onClick","onClose","icon"],"sources":["HeaderElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport type { UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { TopAppBarSecondary, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { PlaceholderElement } from \"~/ui/elements/PlaceholderElement\";\nimport { HeaderTitleElement } from \"./HeaderTitleElement\";\n\ninterface HeaderElementConfig extends UIElementConfig {\n    onClose: (event: React.MouseEvent) => void;\n    getTitle?: GetterWithoutProps<string>;\n}\n\nconst width = css({\n    width: \"33%\"\n});\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into a HeaderElementRenderer class.\n\ninterface GetterWithoutProps<T> {\n    (): T;\n}\n\nexport class HeaderElement extends UIElement<HeaderElementConfig> {\n    private _leftSection: UIElement = new PlaceholderElement(\"leftSection\");\n    private _centerSection: UIElement;\n    private _rightSection: UIElement = new PlaceholderElement(\"rightSection\");\n\n    public constructor(id: string, config: HeaderElementConfig) {\n        super(id, config);\n\n        this._centerSection = new HeaderTitleElement(\"title\", {\n            title: () => {\n                return typeof this.config.getTitle === \"function\" ? this.config.getTitle() : null;\n            }\n        });\n\n        this.useGrid(false);\n    }\n\n    public setTitle(title: GetterWithoutProps<string>): void {\n        this.config.getTitle = title;\n    }\n\n    public setLeftSectionElement(element: UIElement): void {\n        this._leftSection = element;\n    }\n\n    public setCenterSectionElement(element: UIElement): void {\n        this._centerSection = element;\n    }\n\n    public setRightSectionElement(element: UIElement): void {\n        this._rightSection = element;\n    }\n\n    public getLeftSectionElement(): UIElement {\n        return this._leftSection;\n    }\n\n    public getCenterSectionElement(): UIElement {\n        return this._centerSection;\n    }\n\n    public getRightSectionElement(): UIElement {\n        return this._rightSection;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return (\n            <TopAppBarSecondary fixed style={{ top: 0 }}>\n                <TopAppBarSection className={width} alignStart>\n                    {this.getLeftSectionElement().render(props)}\n                </TopAppBarSection>\n                <TopAppBarSection className={width} alignEnd>\n                    {this.getCenterSectionElement().render(props)}\n                </TopAppBarSection>\n                <TopAppBarSection className={width} alignEnd>\n                    {this.getRightSectionElement().render(props)}\n                    <IconButton ripple={false} onClick={this.config.onClose} icon={<CloseIcon />} />\n                </TopAppBarSection>\n            </TopAppBarSecondary>\n        );\n    }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,QAAQ,SAAS;AAE7B,SAASC,SAAS;AAClB,SAASC,kBAAkB,EAAEC,gBAAgB,QAAQ,sBAAsB;AAC3E,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AACrE,SAASC,kBAAkB;AAC3B,SAASC,kBAAkB;AAO3B,MAAMC,KAAK,GAAGT,GAAG,CAAC;EACdS,KAAK,EAAE;AACX,CAAC,CAAC;;AAEF;AACA;;AAMA,OAAO,MAAMC,aAAa,SAAST,SAAS,CAAsB;EACtDU,YAAY,GAAc,IAAIJ,kBAAkB,CAAC,aAAa,CAAC;EAE/DK,aAAa,GAAc,IAAIL,kBAAkB,CAAC,cAAc,CAAC;EAElEM,WAAWA,CAACC,EAAU,EAAEC,MAA2B,EAAE;IACxD,KAAK,CAACD,EAAE,EAAEC,MAAM,CAAC;IAEjB,IAAI,CAACC,cAAc,GAAG,IAAIR,kBAAkB,CAAC,OAAO,EAAE;MAClDS,KAAK,EAAEA,CAAA,KAAM;QACT,OAAO,OAAO,IAAI,CAACF,MAAM,CAACG,QAAQ,KAAK,UAAU,GAAG,IAAI,CAACH,MAAM,CAACG,QAAQ,CAAC,CAAC,GAAG,IAAI;MACrF;IACJ,CAAC,CAAC;IAEF,IAAI,CAACC,OAAO,CAAC,KAAK,CAAC;EACvB;EAEOC,QAAQA,CAACH,KAAiC,EAAQ;IACrD,IAAI,CAACF,MAAM,CAACG,QAAQ,GAAGD,KAAK;EAChC;EAEOI,qBAAqBA,CAACC,OAAkB,EAAQ;IACnD,IAAI,CAACX,YAAY,GAAGW,OAAO;EAC/B;EAEOC,uBAAuBA,CAACD,OAAkB,EAAQ;IACrD,IAAI,CAACN,cAAc,GAAGM,OAAO;EACjC;EAEOE,sBAAsBA,CAACF,OAAkB,EAAQ;IACpD,IAAI,CAACV,aAAa,GAAGU,OAAO;EAChC;EAEOG,qBAAqBA,CAAA,EAAc;IACtC,OAAO,IAAI,CAACd,YAAY;EAC5B;EAEOe,uBAAuBA,CAAA,EAAc;IACxC,OAAO,IAAI,CAACV,cAAc;EAC9B;EAEOW,sBAAsBA,CAAA,EAAc;IACvC,OAAO,IAAI,CAACf,aAAa;EAC7B;EAEgBgB,MAAMA,CAACC,KAA2B,EAAmB;IACjE,oBACI9B,KAAA,CAAA+B,aAAA,CAAC5B,kBAAkB;MAAC6B,KAAK;MAACC,KAAK,EAAE;QAAEC,GAAG,EAAE;MAAE;IAAE,gBACxClC,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB;MAAC+B,SAAS,EAAEzB,KAAM;MAAC0B,UAAU;IAAA,GACzC,IAAI,CAACV,qBAAqB,CAAC,CAAC,CAACG,MAAM,CAACC,KAAK,CAC5B,CAAC,eACnB9B,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB;MAAC+B,SAAS,EAAEzB,KAAM;MAAC2B,QAAQ;IAAA,GACvC,IAAI,CAACV,uBAAuB,CAAC,CAAC,CAACE,MAAM,CAACC,KAAK,CAC9B,CAAC,eACnB9B,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB;MAAC+B,SAAS,EAAEzB,KAAM;MAAC2B,QAAQ;IAAA,GACvC,IAAI,CAACT,sBAAsB,CAAC,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC,eAC5C9B,KAAA,CAAA+B,aAAA,CAAC1B,UAAU;MAACiC,MAAM,EAAE,KAAM;MAACC,OAAO,EAAE,IAAI,CAACvB,MAAM,CAACwB,OAAQ;MAACC,IAAI,eAAEzC,KAAA,CAAA+B,aAAA,CAACxB,SAAS,MAAE;IAAE,CAAE,CACjE,CACF,CAAC;EAE7B;AACJ","ignoreList":[]}

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

@@ -1,8 +1,10 @@
 import React from "react";
-import { UIElement, UIElementConfig } from "../../UIElement";
-import { UIRenderer, UIRenderParams } from "../../UIRenderer";
+import type { UIElementConfig } from "../../UIElement";
+import { UIElement } from "../../UIElement";
+import type { UIRenderParams } from "../../UIRenderer";
+import { UIRenderer } from "../../UIRenderer";
 interface HeaderTitleElementConfig extends UIElementConfig {
-    title: () => string;
+    title: () => string | null;
 }
 export declare class HeaderTitleElementRenderer extends UIRenderer<HeaderTitleElement> {
     render({ element }: UIRenderParams<HeaderTitleElement>): React.ReactNode;

package/ui/views/OverlayView/HeaderTitleElement.js

@@ -1,54 +1,25 @@
-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);
+export class HeaderTitleElementRenderer extends UIRenderer {
+  render({
+    element
+  }) {
+    return /*#__PURE__*/React.createElement(Typography, {
+      style: {
+        margin: "0 auto",
+        color: "var(--mdc-theme-on-surface)"
+      },
+      use: "headline6"
+    }, element.config.title());
   }
-
-  _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;
+}
+export class HeaderTitleElement extends UIElement {
+  constructor(id, config) {
+    super(id, config);
+    this.addRenderer(new HeaderTitleElementRenderer());
   }
+}
 
-  return HeaderTitleElement;
-}(UIElement);
+//# sourceMappingURL=HeaderTitleElement.js.map