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

package/ui/elements/NavigationMenuElement.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TAGS = exports.NavigationMenuElement = void 0;
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+
+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 _store = _interopRequireDefault(require("store"));
+
+var _UIElement2 = require("../UIElement");
+
+var LOCAL_STORAGE_KEY = "webiny_apps_menu_sections";
+var TAGS;
+exports.TAGS = TAGS;
+
+(function (TAGS) {
+  TAGS["UTILS"] = "utils";
+  TAGS["APP"] = "app";
+})(TAGS || (exports.TAGS = TAGS = {}));
+
+var NavigationMenuElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(NavigationMenuElement, _UIElement);
+
+  var _super = (0, _createSuper2.default)(NavigationMenuElement);
+
+  function NavigationMenuElement(id, config) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, NavigationMenuElement);
+    _this = _super.call(this, id, config);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_isExpanded", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_sorters", []);
+
+    _this.useGrid(false);
+
+    var state = _this.loadState();
+
+    _this._isExpanded = state.includes(_this.id);
+
+    _this.addSorter(function (a, b) {
+      if (a.hasTag(TAGS.APP) && b.hasTag(TAGS.UTILS)) {
+        return -1;
+      }
+
+      if (a.hasTag(TAGS.UTILS) && b.hasTag(TAGS.APP)) {
+        return 1;
+      }
+
+      return a.config.label.localeCompare(b.config.label);
+    }); // Apply plugins
+
+
+    _this.applyPlugins(NavigationMenuElement);
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(NavigationMenuElement, [{
+    key: "addElement",
+    value: function addElement(element) {
+      (0, _get2.default)((0, _getPrototypeOf2.default)(NavigationMenuElement.prototype), "addElement", this).call(this, element);
+      this.runSorters();
+      return element;
+    }
+  }, {
+    key: "addSorter",
+    value: function addSorter(sorter) {
+      this._sorters.push(sorter);
+    }
+  }, {
+    key: "isExpanded",
+    get: function get() {
+      return this._isExpanded;
+    }
+  }, {
+    key: "setIcon",
+    value: function setIcon(icon) {
+      this.config.icon = icon;
+    }
+  }, {
+    key: "setLabel",
+    value: function setLabel(label) {
+      this.config.label = label;
+    }
+  }, {
+    key: "setPath",
+    value: function setPath(path) {
+      this.config.path = path;
+    }
+  }, {
+    key: "expandElement",
+    value: function expandElement() {
+      this._isExpanded = true;
+      var state = this.loadState();
+
+      if (!state.includes(this.id)) {
+        state.push(this.id);
+      }
+
+      this.storeState(state);
+      this.getView().refresh();
+    }
+  }, {
+    key: "collapseElement",
+    value: function collapseElement() {
+      this._isExpanded = false;
+      var state = this.loadState();
+
+      if (state.includes(this.id)) {
+        state.splice(state.indexOf(this.id), 1);
+      }
+
+      this.storeState(state);
+      this.getView().refresh();
+    }
+  }, {
+    key: "toggleElement",
+    value: function toggleElement() {
+      if (this._isExpanded) {
+        this.collapseElement();
+        return;
+      }
+
+      this.expandElement();
+    }
+  }, {
+    key: "loadState",
+    value: function loadState() {
+      return (_store.default.get(LOCAL_STORAGE_KEY) || "").split(",").filter(Boolean);
+    }
+  }, {
+    key: "storeState",
+    value: function storeState(state) {
+      _store.default.set(LOCAL_STORAGE_KEY, state.join(","));
+    }
+  }, {
+    key: "runSorters",
+    value: function runSorters() {
+      var _iterator = (0, _createForOfIteratorHelper2.default)(this._sorters),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var sorter = _step.value;
+          this.getLayout().sort(sorter);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  }]);
+  return NavigationMenuElement;
+}(_UIElement2.UIElement);
+
+exports.NavigationMenuElement = NavigationMenuElement;

package/ui/elements/NavigationMenuElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LOCAL_STORAGE_KEY","TAGS","NavigationMenuElement","id","config","useGrid","state","loadState","_isExpanded","includes","addSorter","a","b","hasTag","APP","UTILS","label","localeCompare","applyPlugins","element","runSorters","sorter","_sorters","push","icon","path","storeState","getView","refresh","splice","indexOf","collapseElement","expandElement","localStorage","get","split","filter","Boolean","set","join","getLayout","sort","UIElement"],"sources":["NavigationMenuElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { default as localStorage } from \"store\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { UILayoutSorter } from \"@webiny/ui-composer/UILayout\";\n\nexport interface NavigationMenuElementConfig extends UIElementConfig {\n    label: React.ReactNode;\n    icon?: React.ReactElement;\n    path?: string;\n    onClick?: Function;\n    testId?: string;\n    rel?: string;\n    target?: string;\n}\n\nconst LOCAL_STORAGE_KEY = \"webiny_apps_menu_sections\";\n\nexport enum TAGS {\n    UTILS = \"utils\",\n    APP = \"app\"\n}\n\nexport class NavigationMenuElement<\n    TConfig extends NavigationMenuElementConfig = NavigationMenuElementConfig\n> extends UIElement<TConfig> {\n    private _isExpanded = false;\n    private _sorters: UILayoutSorter<NavigationMenuElementConfig>[] = [];\n\n    public constructor(id: string, config: TConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n\n        const state = this.loadState();\n        this._isExpanded = state.includes(this.id);\n\n        this.addSorter((a, b) => {\n            if (a.hasTag(TAGS.APP) && b.hasTag(TAGS.UTILS)) {\n                return -1;\n            }\n\n            if (a.hasTag(TAGS.UTILS) && b.hasTag(TAGS.APP)) {\n                return 1;\n            }\n\n            return (a.config.label as string).localeCompare(b.config.label as string);\n        });\n\n        // Apply plugins\n        this.applyPlugins(NavigationMenuElement);\n    }\n\n    public override addElement<TElement extends UIElement = UIElement>(\n        element: TElement\n    ): TElement {\n        super.addElement(element);\n        this.runSorters();\n        return element;\n    }\n\n    public addSorter(sorter: UILayoutSorter<NavigationMenuElementConfig>): void {\n        this._sorters.push(sorter);\n    }\n\n    get isExpanded(): boolean {\n        return this._isExpanded;\n    }\n\n    public setIcon(icon: React.ReactElement): void {\n        this.config.icon = icon;\n    }\n\n    public setLabel(label: string): void {\n        this.config.label = label;\n    }\n\n    public setPath(path: string): void {\n        this.config.path = path;\n    }\n\n    public expandElement(): void {\n        this._isExpanded = true;\n        const state = this.loadState();\n        if (!state.includes(this.id)) {\n            state.push(this.id);\n        }\n        this.storeState(state);\n        this.getView().refresh();\n    }\n\n    public collapseElement(): void {\n        this._isExpanded = false;\n        const state = this.loadState();\n        if (state.includes(this.id)) {\n            state.splice(state.indexOf(this.id), 1);\n        }\n        this.storeState(state);\n        this.getView().refresh();\n    }\n\n    public toggleElement(): void {\n        if (this._isExpanded) {\n            this.collapseElement();\n            return;\n        }\n        this.expandElement();\n    }\n\n    private loadState(): string[] {\n        return (localStorage.get(LOCAL_STORAGE_KEY) || \"\").split(\",\").filter(Boolean);\n    }\n\n    private storeState(state: string[]): void {\n        localStorage.set(LOCAL_STORAGE_KEY, state.join(\",\"));\n    }\n\n    private runSorters(): void {\n        for (const sorter of this._sorters) {\n            this.getLayout().sort(sorter);\n        }\n    }\n}\n"],"mappings":"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"}

package/ui/elements/PanelElement.d.ts

@@ -0,0 +1,3 @@
+import { UIElement } from "../UIElement";
+export declare class PanelElement extends UIElement<any> {
+}

package/ui/elements/PanelElement.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelElement = void 0;
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _UIElement2 = require("../UIElement");
+
+var PanelElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(PanelElement, _UIElement);
+
+  var _super = (0, _createSuper2.default)(PanelElement);
+
+  function PanelElement() {
+    (0, _classCallCheck2.default)(this, PanelElement);
+    return _super.apply(this, arguments);
+  }
+
+  return (0, _createClass2.default)(PanelElement);
+}(_UIElement2.UIElement);
+
+exports.PanelElement = PanelElement;

package/ui/elements/PanelElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PanelElement","UIElement"],"sources":["PanelElement.tsx"],"sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\n\nexport class PanelElement extends UIElement<any> {}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;IAEaA,Y;;;;;;;;;;;EAAqBC,qB"}

package/ui/elements/PlaceholderElement.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { UIElement } from "../UIElement";
+export declare class PlaceholderElement extends UIElement {
+    render(): React.ReactNode;
+    remove(): void;
+}

package/ui/elements/PlaceholderElement.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlaceholderElement = 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 _UIElement2 = require("../UIElement");
+
+var PlaceholderElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(PlaceholderElement, _UIElement);
+
+  var _super = (0, _createSuper2.default)(PlaceholderElement);
+
+  function PlaceholderElement() {
+    (0, _classCallCheck2.default)(this, PlaceholderElement);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(PlaceholderElement, [{
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }, {
+    key: "remove",
+    value: function remove() {
+      return;
+    }
+  }]);
+  return PlaceholderElement;
+}(_UIElement2.UIElement);
+
+exports.PlaceholderElement = PlaceholderElement;

package/ui/elements/PlaceholderElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PlaceholderElement","UIElement"],"sources":["PlaceholderElement.tsx"],"sourcesContent":["import { UIElement } from \"../UIElement\";\n\nexport class PlaceholderElement extends UIElement {\n    public override render(): React.ReactNode {\n        return null;\n    }\n\n    public override remove(): void {\n        return;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;IAEaA,kB;;;;;;;;;;;;WACT,kBAA0C;MACtC,OAAO,IAAP;IACH;;;WAED,kBAA+B;MAC3B;IACH;;;EAPmCC,qB"}

package/ui/elements/SmallButtonElement.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ButtonElement, ButtonElementConfig } from "./ButtonElement";
+export declare class SmallButtonElement<TRenderProps = any> extends ButtonElement<TRenderProps> {
+    constructor(id: string, config: ButtonElementConfig<TRenderProps>);
+    render(props: TRenderProps): React.ReactElement;
+}

package/ui/elements/SmallButtonElement.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmallButtonElement = 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 _Button = require("@webiny/ui/Button");
+
+var _ButtonElement2 = require("./ButtonElement");
+
+var BUTTONS = {
+  default: _Button.ButtonDefault,
+  primary: _Button.ButtonPrimary,
+  secondary: _Button.ButtonSecondary
+};
+
+var SmallButtonElement = /*#__PURE__*/function (_ButtonElement) {
+  (0, _inherits2.default)(SmallButtonElement, _ButtonElement);
+
+  var _super = (0, _createSuper2.default)(SmallButtonElement);
+
+  function SmallButtonElement(id, config) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, SmallButtonElement);
+    _this = _super.call(this, id, config);
+
+    _this.applyPlugins(SmallButtonElement);
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(SmallButtonElement, [{
+    key: "render",
+    value: function render(props) {
+      var Component = BUTTONS[this.getType()];
+
+      var _onClick = this.getOnClick();
+
+      return /*#__PURE__*/_react.default.createElement(Component, {
+        small: true,
+        onClick: function onClick() {
+          return _onClick(props);
+        }
+      }, this.getLabel());
+    }
+  }]);
+  return SmallButtonElement;
+}(_ButtonElement2.ButtonElement);
+
+exports.SmallButtonElement = SmallButtonElement;

package/ui/elements/SmallButtonElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BUTTONS","default","ButtonDefault","primary","ButtonPrimary","secondary","ButtonSecondary","SmallButtonElement","id","config","applyPlugins","props","Component","getType","onClick","getOnClick","getLabel","ButtonElement"],"sources":["SmallButtonElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { ButtonDefault, ButtonPrimary, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { ButtonElement, ButtonElementConfig } from \"~/ui/elements/ButtonElement\";\n\nconst BUTTONS = {\n    default: ButtonDefault,\n    primary: ButtonPrimary,\n    secondary: ButtonSecondary\n};\n\nexport class SmallButtonElement<TRenderProps = any> extends ButtonElement<TRenderProps> {\n    public constructor(id: string, config: ButtonElementConfig<TRenderProps>) {\n        super(id, config);\n\n        this.applyPlugins(SmallButtonElement);\n    }\n\n    public override render(props: TRenderProps): React.ReactElement {\n        const Component = BUTTONS[this.getType()];\n        const onClick = this.getOnClick();\n\n        return (\n            <Component small onClick={() => onClick(props)}>\n                {this.getLabel()}\n            </Component>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,OAAO,GAAG;EACZC,OAAO,EAAEC,qBADG;EAEZC,OAAO,EAAEC,qBAFG;EAGZC,SAAS,EAAEC;AAHC,CAAhB;;IAMaC,kB;;;;;EACT,4BAAmBC,EAAnB,EAA+BC,MAA/B,EAA0E;IAAA;;IAAA;IACtE,0BAAMD,EAAN,EAAUC,MAAV;;IAEA,MAAKC,YAAL,CAAkBH,kBAAlB;;IAHsE;EAIzE;;;;WAED,gBAAuBI,KAAvB,EAAgE;MAC5D,IAAMC,SAAS,GAAGZ,OAAO,CAAC,KAAKa,OAAL,EAAD,CAAzB;;MACA,IAAMC,QAAO,GAAG,KAAKC,UAAL,EAAhB;;MAEA,oBACI,6BAAC,SAAD;QAAW,KAAK,MAAhB;QAAiB,OAAO,EAAE;UAAA,OAAMD,QAAO,CAACH,KAAD,CAAb;QAAA;MAA1B,GACK,KAAKK,QAAL,EADL,CADJ;IAKH;;;EAhBuDC,6B"}

package/ui/elements/TypographyElement.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { UIElement, UIElementConfig } from "../UIElement";
+export declare type TypographyT = "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline";
+interface TypographyElementConfig extends UIElementConfig {
+    typography: TypographyT;
+}
+export declare class TypographyElement extends UIElement<TypographyElementConfig> {
+    constructor(id: string, config: TypographyElementConfig);
+    getTypography(): TypographyT;
+    setTypography(typography: TypographyT): void;
+    render(props: any): React.ReactNode;
+}
+export {};

package/ui/elements/TypographyElement.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypographyElement = 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 _UIElement2 = require("../UIElement");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var TypographyElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(TypographyElement, _UIElement);
+
+  var _super = (0, _createSuper2.default)(TypographyElement);
+
+  function TypographyElement(id, config) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, TypographyElement);
+    _this = _super.call(this, id, config);
+
+    _this.useGrid(false);
+
+    _this.applyPlugins(TypographyElement);
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(TypographyElement, [{
+    key: "getTypography",
+    value: function getTypography() {
+      return this.config.typography;
+    }
+  }, {
+    key: "setTypography",
+    value: function setTypography(typography) {
+      this.config.typography = typography;
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: this.getTypography()
+      }, (0, _get2.default)((0, _getPrototypeOf2.default)(TypographyElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+  return TypographyElement;
+}(_UIElement2.UIElement);
+
+exports.TypographyElement = TypographyElement;

package/ui/elements/TypographyElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TypographyElement","id","config","useGrid","applyPlugins","typography","props","getTypography","UIElement"],"sources":["TypographyElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { UIElement, UIElementConfig } from \"../UIElement\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nexport type TypographyT =\n    | \"headline1\"\n    | \"headline2\"\n    | \"headline3\"\n    | \"headline4\"\n    | \"headline5\"\n    | \"headline6\"\n    | \"subtitle1\"\n    | \"subtitle2\"\n    | \"body1\"\n    | \"body2\"\n    | \"caption\"\n    | \"button\"\n    | \"overline\";\n\ninterface TypographyElementConfig extends UIElementConfig {\n    typography: TypographyT;\n}\n\nexport class TypographyElement extends UIElement<TypographyElementConfig> {\n    constructor(id: string, config: TypographyElementConfig) {\n        super(id, config);\n        this.useGrid(false);\n\n        this.applyPlugins(TypographyElement);\n    }\n\n    public getTypography(): TypographyT {\n        return this.config.typography;\n    }\n\n    public setTypography(typography: TypographyT): void {\n        this.config.typography = typography;\n    }\n\n    public override render(props: any): React.ReactNode {\n        return <Typography use={this.getTypography()}>{super.render(props)}</Typography>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;IAqBaA,iB;;;;;EACT,2BAAYC,EAAZ,EAAwBC,MAAxB,EAAyD;IAAA;;IAAA;IACrD,0BAAMD,EAAN,EAAUC,MAAV;;IACA,MAAKC,OAAL,CAAa,KAAb;;IAEA,MAAKC,YAAL,CAAkBJ,iBAAlB;;IAJqD;EAKxD;;;;WAED,yBAAoC;MAChC,OAAO,KAAKE,MAAL,CAAYG,UAAnB;IACH;;;WAED,uBAAqBA,UAArB,EAAoD;MAChD,KAAKH,MAAL,CAAYG,UAAZ,GAAyBA,UAAzB;IACH;;;WAED,gBAAuBC,KAAvB,EAAoD;MAChD,oBAAO,6BAAC,sBAAD;QAAY,GAAG,EAAE,KAAKC,aAAL;MAAjB,6GAAqDD,KAArD,EAAP;IACH;;;EAlBkCE,qB"}

package/ui/elements/ViewElement.d.ts

@@ -0,0 +1 @@
+export * from "@webiny/ui-composer/elements/ViewElement";

package/ui/elements/ViewElement.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ViewElement = require("@webiny/ui-composer/elements/ViewElement");
+
+Object.keys(_ViewElement).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ViewElement[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ViewElement[key];
+    }
+  });
+});

package/ui/elements/ViewElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["ViewElement.tsx"],"sourcesContent":["export * from \"@webiny/ui-composer/elements/ViewElement\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/ui/elements/form/DynamicFieldsetElement/DynamicFieldsetRowElement.d.ts

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

package/ui/elements/form/DynamicFieldsetElement/DynamicFieldsetRowElement.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DynamicFieldsetRowElement = 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 _UIElement2 = require("../../../UIElement");
+
+// import styled from "@emotion/styled";
+// const DynamicFieldsetRow = styled("div")({
+//     paddingBottom: 10
+// });
+// !GOOD FIRST ISSUE!
+// Extract rendering and styling into a DynamicFieldsetRowElementRenderer class.
+var DynamicFieldsetRowElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(DynamicFieldsetRowElement, _UIElement);
+
+  var _super = (0, _createSuper2.default)(DynamicFieldsetRowElement);
+
+  function DynamicFieldsetRowElement(id) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, DynamicFieldsetRowElement);
+    _this = _super.call(this, id);
+
+    _this.applyPlugins(DynamicFieldsetRowElement);
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(DynamicFieldsetRowElement, [{
+    key: "render",
+    value: function render(props) {
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(DynamicFieldsetRowElement.prototype), "render", this).call(this, props);
+      /**
+       * TODO @ts-refactor @pavel
+       * Why was this left here?
+       */
+      // return <DynamicFieldsetRow>{}</DynamicFieldsetRow>;
+    }
+  }]);
+  return DynamicFieldsetRowElement;
+}(_UIElement2.UIElement);
+
+exports.DynamicFieldsetRowElement = DynamicFieldsetRowElement;

package/ui/elements/form/DynamicFieldsetElement/DynamicFieldsetRowElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DynamicFieldsetRowElement","id","applyPlugins","props","UIElement"],"sources":["DynamicFieldsetRowElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n// import styled from \"@emotion/styled\";\n\n// const DynamicFieldsetRow = styled(\"div\")({\n//     paddingBottom: 10\n// });\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into a DynamicFieldsetRowElementRenderer class.\n\nexport class DynamicFieldsetRowElement extends UIElement<any> {\n    public constructor(id: string) {\n        super(id);\n\n        this.applyPlugins(DynamicFieldsetRowElement);\n    }\n\n    public override render(props?: UiElementRenderProps): React.ReactNode {\n        return super.render(props);\n        /**\n         * TODO @ts-refactor @pavel\n         * Why was this left here?\n         */\n        // return <DynamicFieldsetRow>{}</DynamicFieldsetRow>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA;;AACA;AAEA;AACA;AACA;AAEA;AACA;IAEaA,yB;;;;;EACT,mCAAmBC,EAAnB,EAA+B;IAAA;;IAAA;IAC3B,0BAAMA,EAAN;;IAEA,MAAKC,YAAL,CAAkBF,yBAAlB;;IAH2B;EAI9B;;;;WAED,gBAAuBG,KAAvB,EAAsE;MAClE,yHAAoBA,KAApB;MACA;AACR;AACA;AACA;MACQ;IACH;;;EAd0CC,qB"}

package/ui/elements/form/DynamicFieldsetElement.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { FormFieldElement, FormFieldElementConfig, FormFieldElementRenderProps } from "./FormFieldElement";
+import { UIElement } from "../../UIElement";
+import { DynamicFieldsetRowElement } from "./DynamicFieldsetElement/DynamicFieldsetRowElement";
+interface DynamicFieldsetActions {
+    add: (index?: number) => () => void;
+    remove: (index: number) => () => void;
+}
+interface CreateHeaderCallable {
+    (params: {
+        actions: DynamicFieldsetActions;
+    }): UIElement;
+}
+interface CreateRowCallable {
+    (params: {
+        actions: DynamicFieldsetActions;
+        index: number;
+        row: DynamicFieldsetRowElement;
+    }): UIElement;
+}
+interface CreateEmptyCallable {
+    (params: {
+        actions: DynamicFieldsetActions;
+    }): UIElement;
+}
+export interface DynamicFieldsetElementConfig extends FormFieldElementConfig {
+    createHeader?: CreateHeaderCallable;
+    createRow?: CreateRowCallable;
+    createEmpty?: CreateEmptyCallable;
+}
+export declare class DynamicFieldsetElement extends FormFieldElement<DynamicFieldsetElementConfig> {
+    constructor(id: string, config: DynamicFieldsetElementConfig);
+    getCreateHeaderElement(): CreateHeaderCallable | undefined;
+    setHeaderElement(element: UIElement): void;
+    setCreateHeaderElement(cb: DynamicFieldsetElementConfig["createHeader"]): void;
+    getCreateRowElement(): CreateRowCallable | undefined;
+    setCreateRowElement(cb: DynamicFieldsetElementConfig["createRow"]): void;
+    getCreateEmptyElement(): CreateEmptyCallable | undefined;
+    setEmptyElement(element: UIElement): void;
+    setCreateEmptyElement(cb: DynamicFieldsetElementConfig["createEmpty"]): void;
+    render(props: FormFieldElementRenderProps): React.ReactNode;
+}
+export {};