@webiny/app-admin 0.0.0-mt-1

package/ui/elements/TypographyElement.js

@@ -0,0 +1,49 @@
+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 { UIElement } from "../UIElement";
+import { Typography } from "@webiny/ui/Typography";
+export var TypographyElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(TypographyElement, _UIElement);
+
+  var _super = _createSuper(TypographyElement);
+
+  function TypographyElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, TypographyElement);
+
+    _this = _super.call(this, id, config);
+
+    _this.useGrid(false);
+
+    _this.applyPlugins(TypographyElement);
+
+    return _this;
+  }
+
+  _createClass(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.createElement(Typography, {
+        use: this.getTypography()
+      }, _get(_getPrototypeOf(TypographyElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+
+  return TypographyElement;
+}(UIElement);

package/ui/elements/ViewElement.d.ts

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

package/ui/elements/ViewElement.js

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

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

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

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

@@ -0,0 +1,44 @@
+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 { UIElement } from "../../../UIElement";
+import styled from "@emotion/styled";
+var DynamicFieldsetRow = /*#__PURE__*/styled("div", {
+  target: "e1huneaw0",
+  label: "DynamicFieldsetRow"
+})({
+  paddingBottom: 10
+}); // !GOOD FIRST ISSUE!
+// Extract rendering and styling into a DynamicFieldsetRowElementRenderer class.
+
+export var DynamicFieldsetRowElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(DynamicFieldsetRowElement, _UIElement);
+
+  var _super = _createSuper(DynamicFieldsetRowElement);
+
+  function DynamicFieldsetRowElement(id) {
+    var _this;
+
+    _classCallCheck(this, DynamicFieldsetRowElement);
+
+    _this = _super.call(this, id);
+
+    _this.applyPlugins(DynamicFieldsetRowElement);
+
+    return _this;
+  }
+
+  _createClass(DynamicFieldsetRowElement, [{
+    key: "render",
+    value: function render(props) {
+      return _get(_getPrototypeOf(DynamicFieldsetRowElement.prototype), "render", this).call(this, props);
+      return /*#__PURE__*/React.createElement(DynamicFieldsetRow, null);
+    }
+  }]);
+
+  return DynamicFieldsetRowElement;
+}(UIElement);

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

@@ -0,0 +1,42 @@
+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;
+}
+export interface DynamicFieldsetElementConfig extends FormFieldElementConfig {
+    createHeader?: (params: {
+        actions: DynamicFieldsetActions;
+    }) => UIElement;
+    createRow?: (params: {
+        actions: DynamicFieldsetActions;
+        index: number;
+        row: DynamicFieldsetRowElement;
+    }) => UIElement;
+    createEmpty?: (params: {
+        actions: DynamicFieldsetActions;
+    }) => UIElement;
+}
+export declare class DynamicFieldsetElement extends FormFieldElement<DynamicFieldsetElementConfig> {
+    constructor(id: string, config: DynamicFieldsetElementConfig);
+    getCreateHeaderElement(): (params: {
+        actions: DynamicFieldsetActions;
+    }) => UIElement<import("@webiny/ui-composer/UIElement").UIElementConfig<any>>;
+    setHeaderElement(element: UIElement): void;
+    setCreateHeaderElement(cb: DynamicFieldsetElementConfig["createHeader"]): void;
+    getCreateRowElement(): (params: {
+        actions: DynamicFieldsetActions;
+        index: number;
+        row: DynamicFieldsetRowElement;
+    }) => UIElement<import("@webiny/ui-composer/UIElement").UIElementConfig<any>>;
+    setCreateRowElement(cb: DynamicFieldsetElementConfig["createRow"]): void;
+    getCreateEmptyElement(): (params: {
+        actions: DynamicFieldsetActions;
+    }) => UIElement<import("@webiny/ui-composer/UIElement").UIElementConfig<any>>;
+    setEmptyElement(element: UIElement): void;
+    setCreateEmptyElement(cb: DynamicFieldsetElementConfig["createEmpty"]): void;
+    render(props: FormFieldElementRenderProps): React.ReactNode;
+}
+export {};

package/ui/elements/form/DynamicFieldsetElement.js

@@ -0,0 +1,127 @@
+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 { FormFieldElement } from "./FormFieldElement";
+import { DynamicFieldset } from "@webiny/ui/DynamicFieldset";
+import { Grid } from "@webiny/ui/Grid";
+import { DynamicFieldsetRowElement } from "./DynamicFieldsetElement/DynamicFieldsetRowElement";
+export var DynamicFieldsetElement = /*#__PURE__*/function (_FormFieldElement) {
+  _inherits(DynamicFieldsetElement, _FormFieldElement);
+
+  var _super = _createSuper(DynamicFieldsetElement);
+
+  function DynamicFieldsetElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, DynamicFieldsetElement);
+
+    _this = _super.call(this, id, config);
+
+    _this.useGrid(false);
+
+    _this.applyPlugins(DynamicFieldsetElement);
+
+    return _this;
+  }
+
+  _createClass(DynamicFieldsetElement, [{
+    key: "getCreateHeaderElement",
+    value: function getCreateHeaderElement() {
+      return this.config.createHeader;
+    }
+  }, {
+    key: "setHeaderElement",
+    value: function setHeaderElement(element) {
+      this.config.createHeader = function () {
+        return element;
+      };
+    }
+  }, {
+    key: "setCreateHeaderElement",
+    value: function setCreateHeaderElement(cb) {
+      this.config.createHeader = cb;
+    }
+  }, {
+    key: "getCreateRowElement",
+    value: function getCreateRowElement() {
+      return this.config.createRow;
+    }
+  }, {
+    key: "setCreateRowElement",
+    value: function setCreateRowElement(cb) {
+      this.config.createRow = cb;
+    }
+  }, {
+    key: "getCreateEmptyElement",
+    value: function getCreateEmptyElement() {
+      return this.config.createEmpty;
+    }
+  }, {
+    key: "setEmptyElement",
+    value: function setEmptyElement(element) {
+      this.config.createEmpty = function () {
+        return element;
+      };
+    }
+  }, {
+    key: "setCreateEmptyElement",
+    value: function setCreateEmptyElement(cb) {
+      this.config.createEmpty = cb;
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this2 = this;
+
+      if (!props.formProps) {
+        throw Error("DynamicFieldsetElement must be placed inside of a FormElement.");
+      }
+
+      var Bind = props.formProps.Bind;
+      var createHeader = this.getCreateHeaderElement();
+      var createRow = this.getCreateRowElement();
+      var createEmpty = this.getCreateEmptyElement();
+      return /*#__PURE__*/React.createElement(Bind, {
+        name: this.getName(),
+        defaultValue: this.getDefaultValue(props)
+      }, /*#__PURE__*/React.createElement(DynamicFieldset, null, function (_ref) {
+        var actions = _ref.actions,
+            header = _ref.header,
+            row = _ref.row,
+            empty = _ref.empty;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, header(function () {
+          var headerElement = createHeader({
+            actions: actions
+          }); // This element is not created via `this.addElement()` API.
+          // We need to manually give it a parent to enable proper grid rendering.
+
+          headerElement && headerElement.setParent(_this2);
+          return headerElement ? headerElement.render(props) : null;
+        }), row(function (_ref2) {
+          var index = _ref2.index;
+          var rowElement = createRow({
+            actions: actions,
+            index: index,
+            row: new DynamicFieldsetRowElement("".concat(_this2.id, ".row.").concat(index))
+          }); // This element is not created via `this.addElement()` API.
+          // We need to manually give it a parent to enable proper grid rendering.
+
+          rowElement && rowElement.setParent(_this2);
+          return rowElement ? /*#__PURE__*/React.createElement(Grid, null, rowElement.render(props)) : null;
+        }), empty(function () {
+          var emptyElement = createEmpty({
+            actions: actions
+          }); // This element is not created via `this.addElement()` API.
+          // We need to manually give it a parent to enable proper grid rendering.
+
+          emptyElement && emptyElement.setParent(_this2);
+          return emptyElement ? emptyElement.render(props) : null;
+        }));
+      }));
+    }
+  }]);
+
+  return DynamicFieldsetElement;
+}(FormFieldElement);

package/ui/elements/form/FileManagerElement/EmptyStateElement.d.ts

@@ -0,0 +1,4 @@
+import { UIElement } from "../../../UIElement";
+export declare class EmptyStateElement extends UIElement<any> {
+    constructor(id: string);
+}

package/ui/elements/form/FileManagerElement/EmptyStateElement.js

@@ -0,0 +1,24 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import { UIElement } from "../../../UIElement";
+import { EmptyStateElementRenderer } from "./EmptyStateElementRenderer";
+export var EmptyStateElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(EmptyStateElement, _UIElement);
+
+  var _super = _createSuper(EmptyStateElement);
+
+  function EmptyStateElement(id) {
+    var _this;
+
+    _classCallCheck(this, EmptyStateElement);
+
+    _this = _super.call(this, id);
+
+    _this.addRenderer(new EmptyStateElementRenderer());
+
+    return _this;
+  }
+
+  return EmptyStateElement;
+}(UIElement);

package/ui/elements/form/FileManagerElement/EmptyStateElementRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { EmptyStateElement } from "./EmptyStateElement";
+import { UIRenderer, UIRenderParams } from "../../../UIRenderer";
+import { FileManagerElementRenderProps } from "./FileManagerElementRenderer";
+export declare class EmptyStateElementRenderer extends UIRenderer<EmptyStateElement, FileManagerElementRenderProps> {
+    render({ props }: UIRenderParams<EmptyStateElement, FileManagerElementRenderProps>): React.ReactNode;
+}

package/ui/elements/form/FileManagerElement/EmptyStateElementRenderer.js

@@ -0,0 +1,72 @@
+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 { UIRenderer } from "../../../UIRenderer";
+import * as Ui from "@webiny/ui/ImageUpload";
+import { Image } from "@webiny/app/components";
+import { AddImageIconWrapper, AddImageWrapper, FilePreviewWrapper, RemoveImage } from "./styled";
+import { ReactComponent as AddFileIcon } from "@svgr/webpack!../../../../assets/icons/attach_file_black_24dp.svg";
+import { Typography } from "@webiny/ui/Typography";
+import { ReactComponent as RemoveImageIcon } from "@svgr/webpack!@webiny/ui/ImageUpload/icons/round-close-24px.svg";
+export var EmptyStateElementRenderer = /*#__PURE__*/function (_UIRenderer) {
+  _inherits(EmptyStateElementRenderer, _UIRenderer);
+
+  var _super = _createSuper(EmptyStateElementRenderer);
+
+  function EmptyStateElementRenderer() {
+    _classCallCheck(this, EmptyStateElementRenderer);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(EmptyStateElementRenderer, [{
+    key: "render",
+    value: function render(_ref) {
+      var props = _ref.props;
+      var accept = props.fileManagerElement.getAccept();
+      var acceptsOnlyImages = !accept || accept.every(function (el) {
+        return el.startsWith("image/");
+      });
+
+      if (acceptsOnlyImages) {
+        return /*#__PURE__*/React.createElement(Ui.Image, {
+          placeholder: "Select an image",
+          renderImagePreview: function renderImagePreview(renderImageProps) {
+            return /*#__PURE__*/React.createElement(Image, renderImageProps);
+          },
+          style: {
+            width: "100%",
+            height: "auto"
+          },
+          value: props.value,
+          uploadImage: props.showFileManager,
+          removeImage: props.onChange
+        });
+      }
+
+      if (props.value) {
+        return /*#__PURE__*/React.createElement(FilePreviewWrapper, null, /*#__PURE__*/React.createElement("span", null, "Attached file: ", /*#__PURE__*/React.createElement("strong", null, props.value.src.split("/").pop())), /*#__PURE__*/React.createElement(RemoveImage, {
+          onClick: function onClick() {
+            return props.onChange(null);
+          }
+        }, /*#__PURE__*/React.createElement(RemoveImageIcon, null)), /*#__PURE__*/React.createElement(AddImageWrapper, {
+          "data-role": "select-file",
+          onClick: props.showFileManager
+        }, /*#__PURE__*/React.createElement(AddImageIconWrapper, null, /*#__PURE__*/React.createElement(AddFileIcon, null), /*#__PURE__*/React.createElement(Typography, {
+          use: "caption"
+        }, "Select a file"))));
+      }
+
+      return /*#__PURE__*/React.createElement(AddImageWrapper, {
+        "data-role": "select-file",
+        onClick: props.showFileManager
+      }, /*#__PURE__*/React.createElement(AddImageIconWrapper, null, /*#__PURE__*/React.createElement(AddFileIcon, null), /*#__PURE__*/React.createElement(Typography, {
+        use: "caption"
+      }, "Select a file")));
+    }
+  }]);
+
+  return EmptyStateElementRenderer;
+}(UIRenderer);

package/ui/elements/form/FileManagerElement/FileManagerElementRenderer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { UIRenderer, UIRenderParams } from "../../../UIRenderer";
+import { FileManagerElement } from "../FileManagerElement";
+import { FormFieldElementRenderProps } from "../FormFieldElement";
+export interface FileManagerElementRenderProps extends FormFieldElementRenderProps {
+    fileManagerElement: FileManagerElement;
+    value: any;
+    showFileManager: () => void;
+    onChange: (value: any) => void;
+}
+export declare class FileManagerElementRenderer extends UIRenderer<FileManagerElement, FormFieldElementRenderProps> {
+    render({ element, props }: UIRenderParams<FileManagerElement, FormFieldElementRenderProps>): React.ReactNode;
+}

package/ui/elements/form/FileManagerElement/FileManagerElementRenderer.js

@@ -0,0 +1,95 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+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 styled from "@emotion/styled";
+import { UIRenderer } from "../../../UIRenderer";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage";
+import { FileManager } from "../../../../components";
+var ImageUploadWrapper = /*#__PURE__*/styled("div", {
+  target: "e1g56mwy0",
+  label: "ImageUploadWrapper"
+})({
+  position: "relative",
+  ".disabled": {
+    opacity: 0.75,
+    pointerEvents: "none"
+  },
+  ".mdc-floating-label--float-above": {
+    transform: "scale(0.75)",
+    top: 10,
+    left: 10,
+    color: "var(--mdc-theme-text-secondary-on-background)"
+  },
+  ".mdc-text-field-helper-text": {
+    color: "var(--mdc-theme-text-secondary-on-background)"
+  }
+});
+export var FileManagerElementRenderer = /*#__PURE__*/function (_UIRenderer) {
+  _inherits(FileManagerElementRenderer, _UIRenderer);
+
+  var _super = _createSuper(FileManagerElementRenderer);
+
+  function FileManagerElementRenderer() {
+    _classCallCheck(this, FileManagerElementRenderer);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(FileManagerElementRenderer, [{
+    key: "render",
+    value: function render(_ref) {
+      var element = _ref.element,
+          props = _ref.props;
+
+      if (!props.formProps) {
+        throw Error("FileManagerElement must be placed inside of a FormElement.");
+      }
+
+      var Bind = props.formProps.Bind;
+      var accept = element.getAccept();
+      var label = element.getLabel(props);
+      var description = element.getDescription(props);
+      return /*#__PURE__*/React.createElement(Bind, {
+        name: element.getName(),
+        validators: element.getValidators(props),
+        defaultValue: element.getDefaultValue(props),
+        beforeChange: function beforeChange(value, cb) {
+          return element.onBeforeChange(value, cb);
+        },
+        afterChange: function afterChange(value, form) {
+          return element.onAfterChange(value, form);
+        }
+      }, function (_ref2) {
+        var value = _ref2.value,
+            onChange = _ref2.onChange,
+            validation = _ref2.validation;
+        return /*#__PURE__*/React.createElement(ImageUploadWrapper, null, label && /*#__PURE__*/React.createElement("div", {
+          className: "mdc-floating-label mdc-floating-label--float-above"
+        }, label), /*#__PURE__*/React.createElement(FileManager, {
+          onChange: onChange,
+          onChangePick: element.getOnChangePickAttributes(),
+          accept: accept,
+          images: !accept,
+          maxSize: element.getMaxSize(),
+          multipleMaxCount: element.getMultipleMaxCount(),
+          multipleMaxSize: element.getMultipleMaxSize()
+        }, function (_ref3) {
+          var showFileManager = _ref3.showFileManager;
+          return element.getEmptyStateElement().render(_objectSpread(_objectSpread({}, props), {}, {
+            fileManagerElement: element,
+            showFileManager: showFileManager,
+            value: value,
+            onChange: onChange
+          }));
+        }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+          error: true
+        }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      });
+    }
+  }]);
+
+  return FileManagerElementRenderer;
+}(UIRenderer);