@webiny/app-admin 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/ui/views/FormView/FormHeaderElement.js

@@ -1,103 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FormHeaderElement = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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 _react = _interopRequireDefault(require("react"));
-
-var _emotion = require("emotion");
-
-var _Grid = require("@webiny/ui/Grid");
-
-var _Typography = require("@webiny/ui/Typography");
-
-var _UIElement2 = require("../../UIElement");
-
-var _Icon = require("@webiny/ui/Icon");
-
-var iconClass = /*#__PURE__*/(0, _emotion.css)({
-  marginRight: 15,
-  color: "var(--mdc-theme-text-primary-on-background)"
-}, "label:iconClass;");
-var headerClass = /*#__PURE__*/(0, _emotion.css)({
-  borderBottom: "1px solid var(--mdc-theme-on-background)",
-  color: "var(--mdc-theme-text-primary-on-background)"
-}, "label:headerClass;");
-var titleClass = /*#__PURE__*/(0, _emotion.css)({
-  display: "flex",
-  alignItems: "center"
-}, "label:titleClass;");
-var actionsClass = /*#__PURE__*/(0, _emotion.css)({
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center"
-}, "label:actionsClass;");
-
-var FormHeaderElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(FormHeaderElement, _UIElement);
-
-  var _super = (0, _createSuper2.default)(FormHeaderElement);
-
-  function FormHeaderElement(id, config) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, FormHeaderElement);
-    _this = _super.call(this, id, config);
-
-    _this.useGrid(false);
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(FormHeaderElement, [{
-    key: "setIcon",
-    value: function setIcon(icon) {
-      this.config.icon = icon;
-    }
-  }, {
-    key: "addAction",
-    value: function addAction(element) {
-      this.addElement(element);
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var _this$config = this.config,
-          icon = _this$config.icon,
-          getTitle = _this$config.getTitle;
-      return /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
-        className: headerClass
-      }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 6,
-        className: titleClass
-      }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-        className: iconClass,
-        icon: icon
-      }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        use: "headline5"
-      }, getTitle(props)))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 6,
-        className: actionsClass
-      }, (0, _get2.default)((0, _getPrototypeOf2.default)(FormHeaderElement.prototype), "render", this).call(this, props)));
-    }
-  }]);
-  return FormHeaderElement;
-}(_UIElement2.UIElement);
-
-exports.FormHeaderElement = FormHeaderElement;

package/ui/views/FormView/FormHeaderElement.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["iconClass","css","marginRight","color","headerClass","borderBottom","titleClass","display","alignItems","actionsClass","justifyContent","FormHeaderElement","id","config","useGrid","icon","element","addElement","props","getTitle","UIElement"],"sources":["FormHeaderElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { FormElementRenderProps } from \"~/ui/elements/form/FormElement\";\n\nconst iconClass = css({\n    marginRight: 15,\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst headerClass = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst titleClass = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst actionsClass = css({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    alignItems: \"center\"\n});\n\ninterface FormHeaderConfig extends UIElementConfig {\n    getTitle(props: FormElementRenderProps): string;\n    icon?: React.ReactElement;\n}\n\nexport class FormHeaderElement extends UIElement<FormHeaderConfig> {\n    public constructor(id: string, config: FormHeaderConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n    }\n\n    public setIcon(icon: React.ReactElement) {\n        this.config.icon = icon;\n    }\n\n    public addAction(element: UIElement) {\n        this.addElement(element);\n    }\n\n    public override render(props: FormElementRenderProps): React.ReactNode {\n        const { icon, getTitle } = this.config;\n\n        return (\n            <Grid className={headerClass}>\n                <Cell span={6} className={titleClass}>\n                    <React.Fragment>\n                        {icon && <Icon className={iconClass} icon={icon} />}\n                        <Typography use=\"headline5\">{getTitle(props)}</Typography>\n                    </React.Fragment>\n                </Cell>\n                <Cell span={6} className={actionsClass}>\n                    {super.render(props)}\n                </Cell>\n            </Grid>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA,IAAMA,SAAS,gBAAG,IAAAC,YAAA,EAAI;EAClBC,WAAW,EAAE,EADK;EAElBC,KAAK,EAAE;AAFW,CAAJ,qBAAlB;AAKA,IAAMC,WAAW,gBAAG,IAAAH,YAAA,EAAI;EACpBI,YAAY,EAAE,0CADM;EAEpBF,KAAK,EAAE;AAFa,CAAJ,uBAApB;AAKA,IAAMG,UAAU,gBAAG,IAAAL,YAAA,EAAI;EACnBM,OAAO,EAAE,MADU;EAEnBC,UAAU,EAAE;AAFO,CAAJ,sBAAnB;AAKA,IAAMC,YAAY,gBAAG,IAAAR,YAAA,EAAI;EACrBM,OAAO,EAAE,MADY;EAErBG,cAAc,EAAE,UAFK;EAGrBF,UAAU,EAAE;AAHS,CAAJ,wBAArB;;IAWaG,iB;;;;;EACT,2BAAmBC,EAAnB,EAA+BC,MAA/B,EAAyD;IAAA;;IAAA;IACrD,0BAAMD,EAAN,EAAUC,MAAV;;IAEA,MAAKC,OAAL,CAAa,KAAb;;IAHqD;EAIxD;;;;WAED,iBAAeC,IAAf,EAAyC;MACrC,KAAKF,MAAL,CAAYE,IAAZ,GAAmBA,IAAnB;IACH;;;WAED,mBAAiBC,OAAjB,EAAqC;MACjC,KAAKC,UAAL,CAAgBD,OAAhB;IACH;;;WAED,gBAAuBE,KAAvB,EAAuE;MACnE,mBAA2B,KAAKL,MAAhC;MAAA,IAAQE,IAAR,gBAAQA,IAAR;MAAA,IAAcI,QAAd,gBAAcA,QAAd;MAEA,oBACI,6BAAC,UAAD;QAAM,SAAS,EAAEf;MAAjB,gBACI,6BAAC,UAAD;QAAM,IAAI,EAAE,CAAZ;QAAe,SAAS,EAAEE;MAA1B,gBACI,6BAAC,cAAD,CAAO,QAAP,QACKS,IAAI,iBAAI,6BAAC,UAAD;QAAM,SAAS,EAAEf,SAAjB;QAA4B,IAAI,EAAEe;MAAlC,EADb,eAEI,6BAAC,sBAAD;QAAY,GAAG,EAAC;MAAhB,GAA6BI,QAAQ,CAACD,KAAD,CAArC,CAFJ,CADJ,CADJ,eAOI,6BAAC,UAAD;QAAM,IAAI,EAAE,CAAZ;QAAe,SAAS,EAAET;MAA1B,6GACkBS,KADlB,EAPJ,CADJ;IAaH;;;EA/BkCE,qB"}

package/ui/views/FormView.d.ts

@@ -1,40 +0,0 @@
-import { FormOnSubmit } from "@webiny/form";
-import { UIElement, UIElementConfig } from "../UIElement";
-import { FormElementRenderProps } from "../elements/form/FormElement";
-import { ButtonElement } from "../elements/ButtonElement";
-import { FormContentElement } from "./FormView/FormContentElement";
-import { FormHeaderElement } from "./FormView/FormHeaderElement";
-import { FormFooterElement } from "./FormView/FormFooterElement";
-import { FormContainerElement } from "./FormView/FormContainerElement";
-import { UIView } from "../UIView";
-export interface FormViewConfig extends UIElementConfig {
-    setupForm?: boolean;
-    onSubmit?: FormOnSubmit;
-    getTitle?: (props: FormElementRenderProps) => string;
-    getFormData?: () => Record<string, any>;
-    isLoading?: () => boolean;
-    onCancel?: () => void;
-    testId?: string;
-    noElevation?: boolean;
-    className?: string;
-}
-interface GetterWithProps<T> {
-    (props: FormElementRenderProps): T;
-}
-interface GetterWithoutProps<T> {
-    (): T;
-}
-export declare class FormView extends UIView<FormViewConfig> {
-    constructor(id: string, config?: FormViewConfig);
-    addElement<TElement extends UIElement = UIElement>(element: TElement): TElement;
-    setTitle(title: string | GetterWithProps<string>): void;
-    setOnSubmit(onSubmit: FormOnSubmit): void;
-    setFormData(getter: GetterWithoutProps<Record<string, any>>): void;
-    getFormContainer(): FormContainerElement;
-    getFormContentElement(): FormContentElement;
-    getFormHeaderElement(): FormHeaderElement;
-    getFormFooterElement(): FormFooterElement;
-    getSubmitButtonElement(): ButtonElement;
-    private addElements;
-}
-export {};

package/ui/views/FormView.js

@@ -1,208 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FormView = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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 _react = _interopRequireDefault(require("react"));
-
-var _Progress = require("@webiny/ui/Progress");
-
-var _FormElement = require("../elements/form/FormElement");
-
-var _ButtonElement = require("../elements/ButtonElement");
-
-var _GenericElement = require("../elements/GenericElement");
-
-var _FormContentElement = require("./FormView/FormContentElement");
-
-var _FormHeaderElement = require("./FormView/FormHeaderElement");
-
-var _FormFooterElement = require("./FormView/FormFooterElement");
-
-var _FormContainerElement = require("./FormView/FormContainerElement");
-
-var _UIView2 = require("../UIView");
-
-var FormView = /*#__PURE__*/function (_UIView) {
-  (0, _inherits2.default)(FormView, _UIView);
-
-  var _super = (0, _createSuper2.default)(FormView);
-
-  function FormView(id, config) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, FormView);
-
-    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;
-  }
-
-  (0, _createClass2.default)(FormView, [{
-    key: "addElement",
-    value: function addElement(element) {
-      if (element.id === "form" || element.id === "formContainer") {
-        return (0, _get2.default)((0, _getPrototypeOf2.default)(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;
-        };
-
-        return;
-      }
-
-      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");
-    }
-  }, {
-    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");
-    }
-  }, {
-    key: "addElements",
-    value: function addElements() {
-      var _this2 = this;
-
-      var formContainer = new _FormContainerElement.FormContainerElement("formContainer", {
-        testId: this.config.testId,
-        className: this.config.className,
-        noElevation: this.config.noElevation
-      });
-
-      if (this.config.setupForm) {
-        var form = this.addElement(new _FormElement.FormElement("form", {
-          onSubmit: function onSubmit(data, form) {
-            if (!_this2.config.onSubmit) {
-              return;
-            }
-
-            return _this2.config.onSubmit(data, form);
-          },
-          getData: function getData() {
-            if (!_this2.config.getFormData) {
-              return {};
-            }
-
-            return _this2.config.getFormData();
-          }
-        }));
-        form.addElement(formContainer);
-      } else {
-        this.addElement(formContainer);
-      }
-
-      this.addElement(new _GenericElement.GenericElement("loading", function () {
-        if (typeof _this2.config.isLoading !== "function") {
-          return null;
-        }
-
-        return _this2.config.isLoading() ? /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null) : null;
-      }));
-      this.addElement(new _FormHeaderElement.FormHeaderElement("formHeader", {
-        getTitle: function getTitle(props) {
-          if (!_this2.config.getTitle) {
-            return "";
-          }
-
-          return _this2.config.getTitle(props);
-        }
-      }));
-      this.addElement(new _FormContentElement.FormContentElement("formContent"));
-      var footer = new _FormFooterElement.FormFooterElement("formFooter");
-      this.addElement(footer);
-      var submitButton = new _ButtonElement.ButtonElement("submit", {
-        type: "primary",
-        label: "Save",
-        onClick: function onClick(props) {
-          return props.formProps.submit();
-        }
-      });
-      submitButton.moveToTheEndOf(footer);
-      var cancelButton = footer.addElement(new _ButtonElement.ButtonElement("cancel", {
-        type: "default",
-        label: "Cancel",
-        onClick: function onClick() {
-          if (!_this2.config.onCancel) {
-            return;
-          }
-
-          _this2.config.onCancel();
-        },
-        shouldRender: function shouldRender() {
-          return typeof _this2.config.onCancel === "function";
-        }
-      }));
-      cancelButton.moveToTheBeginningOf(footer);
-    }
-  }]);
-  return FormView;
-}(_UIView2.UIView);
-
-exports.FormView = FormView;

package/ui/views/FormView.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["FormView","id","config","setupForm","addElements","useGrid","applyPlugins","element","getFormContainer","addElement","title","getTitle","onSubmit","getter","getFormData","getElement","getFormFooterElement","formContainer","FormContainerElement","testId","className","noElevation","form","FormElement","data","getData","GenericElement","isLoading","FormHeaderElement","props","FormContentElement","footer","FormFooterElement","submitButton","ButtonElement","type","label","onClick","formProps","submit","moveToTheEndOf","cancelButton","onCancel","shouldRender","moveToTheBeginningOf","UIView"],"sources":["FormView.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormOnSubmit } from \"@webiny/form\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { FormElement, FormElementRenderProps } 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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"}

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

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

package/ui/views/OverlayView/ContentElement.js

@@ -1,61 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ContentElement = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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 _react = _interopRequireDefault(require("react"));
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _UIElement2 = require("../../UIElement");
-
-var ContentWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "exqtwog0",
-  label: "ContentWrapper"
-})({
-  width: "100%",
-  paddingTop: 65
-});
-
-var ContentElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(ContentElement, _UIElement);
-
-  var _super = (0, _createSuper2.default)(ContentElement);
-
-  function ContentElement(id) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ContentElement);
-    _this = _super.call(this, id);
-
-    _this.useGrid(false);
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(ContentElement, [{
-    key: "render",
-    value: function render(props) {
-      return /*#__PURE__*/_react.default.createElement(ContentWrapper, null, (0, _get2.default)((0, _getPrototypeOf2.default)(ContentElement.prototype), "render", this).call(this, props));
-    }
-  }]);
-  return ContentElement;
-}(_UIElement2.UIElement);
-
-exports.ContentElement = ContentElement;

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

@@ -1 +0,0 @@
-{"version":3,"names":["ContentWrapper","styled","width","paddingTop","ContentElement","id","useGrid","props","UIElement"],"sources":["ContentElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIElement, UiElementRenderProps } 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;;AACA;;AACA;;AAEA,IAAMA,cAAc,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACjCC,KAAK,EAAE,MAD0B;EAEjCC,UAAU,EAAE;AAFqB,CAAjB,CAApB;;IAKaC,c;;;;;EACT,wBAAYC,EAAZ,EAAwB;IAAA;;IAAA;IACpB,0BAAMA,EAAN;;IACA,MAAKC,OAAL,CAAa,KAAb;;IAFoB;EAGvB;;;;WAED,gBAAuBC,KAAvB,EAAqE;MACjE,oBAAO,6BAAC,cAAD,+GAA8BA,KAA9B,EAAP;IACH;;;EAR+BC,qB"}

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

@@ -1,24 +0,0 @@
-import React from "react";
-import { UIElement, UIElementConfig, UiElementRenderProps } 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;
-    getCenterSectionElement(): UIElement;
-    getRightSectionElement(): UIElement;
-    render(props: UiElementRenderProps): React.ReactNode;
-}
-export {};

package/ui/views/OverlayView/HeaderElement.js

@@ -1,134 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HeaderElement = 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 _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 _emotion = require("emotion");
-
-var _UIElement2 = require("../../UIElement");
-
-var _TopAppBar = require("@webiny/ui/TopAppBar");
-
-var _Button = require("@webiny/ui/Button");
-
-var _close = require("../../../components/OverlayLayout/icons/close.svg");
-
-var _PlaceholderElement = require("../../elements/PlaceholderElement");
-
-var _HeaderTitleElement = require("./HeaderTitleElement");
-
-var width = /*#__PURE__*/(0, _emotion.css)({
-  width: "33%"
-}, "label:width;"); // !GOOD FIRST ISSUE!
-// Extract rendering and styling into a HeaderElementRenderer class.
-
-var HeaderElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(HeaderElement, _UIElement);
-
-  var _super = (0, _createSuper2.default)(HeaderElement);
-
-  function HeaderElement(id, config) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, HeaderElement);
-    _this = _super.call(this, id, config);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_leftSection", new _PlaceholderElement.PlaceholderElement("leftSection"));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_centerSection", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_rightSection", new _PlaceholderElement.PlaceholderElement("rightSection"));
-    _this._centerSection = new _HeaderTitleElement.HeaderTitleElement("title", {
-      title: function title() {
-        return typeof _this.config.getTitle === "function" ? _this.config.getTitle() : null;
-      }
-    });
-
-    _this.useGrid(false);
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(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.default.createElement(_TopAppBar.TopAppBarSecondary, {
-        fixed: true,
-        style: {
-          top: 0
-        }
-      }, /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-        className: width,
-        alignStart: true
-      }, this.getLeftSectionElement().render(props)), /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-        className: width,
-        alignEnd: true
-      }, this.getCenterSectionElement().render(props)), /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-        className: width,
-        alignEnd: true
-      }, this.getRightSectionElement().render(props), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-        ripple: false,
-        onClick: this.config.onClose,
-        icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, {
-          style: {
-            width: 24,
-            height: 24
-          }
-        })
-      })));
-    }
-  }]);
-  return HeaderElement;
-}(_UIElement2.UIElement);
-
-exports.HeaderElement = HeaderElement;

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

@@ -1 +0,0 @@
-{"version":3,"names":["width","css","HeaderElement","id","config","PlaceholderElement","_centerSection","HeaderTitleElement","title","getTitle","useGrid","element","_leftSection","_rightSection","props","top","getLeftSectionElement","render","getCenterSectionElement","getRightSectionElement","onClose","height","UIElement"],"sources":["HeaderElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { UIElement, UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { TopAppBarSecondary, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as CloseIcon } from \"~/components/OverlayLayout/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\n                        ripple={false}\n                        onClick={this.config.onClose}\n                        icon={<CloseIcon style={{ width: 24, height: 24 }} />}\n                    />\n                </TopAppBarSection>\n            </TopAppBarSecondary>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA,IAAMA,KAAK,gBAAG,IAAAC,YAAA,EAAI;EACdD,KAAK,EAAE;AADO,CAAJ,iBAAd,C,CAIA;AACA;;IAMaE,a;;;;;EAKT,uBAAmBC,EAAnB,EAA+BC,MAA/B,EAA4D;IAAA;;IAAA;IACxD,0BAAMD,EAAN,EAAUC,MAAV;IADwD,2FAJ1B,IAAIC,sCAAJ,CAAuB,aAAvB,CAI0B;IAAA;IAAA,4FAFzB,IAAIA,sCAAJ,CAAuB,cAAvB,CAEyB;IAGxD,MAAKC,cAAL,GAAsB,IAAIC,sCAAJ,CAAuB,OAAvB,EAAgC;MAClDC,KAAK,EAAE,iBAAM;QACT,OAAO,OAAO,MAAKJ,MAAL,CAAYK,QAAnB,KAAgC,UAAhC,GAA6C,MAAKL,MAAL,CAAYK,QAAZ,EAA7C,GAAsE,IAA7E;MACH;IAHiD,CAAhC,CAAtB;;IAMA,MAAKC,OAAL,CAAa,KAAb;;IATwD;EAU3D;;;;WAED,kBAAgBF,KAAhB,EAAyD;MACrD,KAAKJ,MAAL,CAAYK,QAAZ,GAAuBD,KAAvB;IACH;;;WAED,+BAA6BG,OAA7B,EAAuD;MACnD,KAAKC,YAAL,GAAoBD,OAApB;IACH;;;WAED,iCAA+BA,OAA/B,EAAyD;MACrD,KAAKL,cAAL,GAAsBK,OAAtB;IACH;;;WAED,gCAA8BA,OAA9B,EAAwD;MACpD,KAAKE,aAAL,GAAqBF,OAArB;IACH;;;WAED,iCAA0C;MACtC,OAAO,KAAKC,YAAZ;IACH;;;WAED,mCAA4C;MACxC,OAAO,KAAKN,cAAZ;IACH;;;WAED,kCAA2C;MACvC,OAAO,KAAKO,aAAZ;IACH;;;WAED,gBAAuBC,KAAvB,EAAqE;MACjE,oBACI,6BAAC,6BAAD;QAAoB,KAAK,MAAzB;QAA0B,KAAK,EAAE;UAAEC,GAAG,EAAE;QAAP;MAAjC,gBACI,6BAAC,2BAAD;QAAkB,SAAS,EAAEf,KAA7B;QAAoC,UAAU;MAA9C,GACK,KAAKgB,qBAAL,GAA6BC,MAA7B,CAAoCH,KAApC,CADL,CADJ,eAII,6BAAC,2BAAD;QAAkB,SAAS,EAAEd,KAA7B;QAAoC,QAAQ;MAA5C,GACK,KAAKkB,uBAAL,GAA+BD,MAA/B,CAAsCH,KAAtC,CADL,CAJJ,eAOI,6BAAC,2BAAD;QAAkB,SAAS,EAAEd,KAA7B;QAAoC,QAAQ;MAA5C,GACK,KAAKmB,sBAAL,GAA8BF,MAA9B,CAAqCH,KAArC,CADL,eAEI,6BAAC,kBAAD;QACI,MAAM,EAAE,KADZ;QAEI,OAAO,EAAE,KAAKV,MAAL,CAAYgB,OAFzB;QAGI,IAAI,eAAE,6BAAC,qBAAD;UAAW,KAAK,EAAE;YAAEpB,KAAK,EAAE,EAAT;YAAaqB,MAAM,EAAE;UAArB;QAAlB;MAHV,EAFJ,CAPJ,CADJ;IAkBH;;;EAhE8BC,qB"}

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

@@ -1,13 +0,0 @@
-import React from "react";
-import { UIElement, UIElementConfig } from "../../UIElement";
-import { UIRenderer, UIRenderParams } from "../../UIRenderer";
-interface HeaderTitleElementConfig extends UIElementConfig {
-    title: () => string | null;
-}
-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 {};