@webiny/app-admin 0.0.0-unstable.fcdad0bc61 → 0.0.0-unstable.fdd9228b5d

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

@@ -1,95 +1,47 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EmptyStateElementRenderer = 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 _UIRenderer2 = require("../../../UIRenderer");
-
-var Ui = _interopRequireWildcard(require("@webiny/ui/ImageUpload"));
-
-var _components = require("@webiny/app/components");
-
-var _styled = require("./styled");
-
-var _attach_file_black_24dp = require("../../../../assets/icons/attach_file_black_24dp.svg");
-
-var _Typography = require("@webiny/ui/Typography");
-
-var _roundClose24px = require("@webiny/ui/ImageUpload/icons/round-close-24px.svg");
-
-var EmptyStateElementRenderer = /*#__PURE__*/function (_UIRenderer) {
-  (0, _inherits2.default)(EmptyStateElementRenderer, _UIRenderer);
-
-  var _super = (0, _createSuper2.default)(EmptyStateElementRenderer);
-
-  function EmptyStateElementRenderer() {
-    (0, _classCallCheck2.default)(this, EmptyStateElementRenderer);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(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/");
+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 "@webiny/icons/attach_file.svg";
+import { ReactComponent as RemoveImageIcon } from "@webiny/icons/close.svg";
+import { Typography } from "@webiny/ui/Typography";
+export class EmptyStateElementRenderer extends UIRenderer {
+  render({
+    props
+  }) {
+    const accept = props.fileManagerElement.getAccept();
+    const acceptsOnlyImages = !accept || accept.every(el => el.startsWith("image/"));
+    if (acceptsOnlyImages) {
+      return /*#__PURE__*/React.createElement(Ui.Image, {
+        placeholder: "Select an image",
+        renderImagePreview: renderImageProps => /*#__PURE__*/React.createElement(Image, renderImageProps),
+        style: {
+          width: "100%",
+          height: "auto"
+        },
+        value: props.value,
+        uploadImage: props.showFileManager,
+        removeImage: props.onChange
       });
-
-      if (acceptsOnlyImages) {
-        return /*#__PURE__*/_react.default.createElement(Ui.Image, {
-          placeholder: "Select an image",
-          renderImagePreview: function renderImagePreview(renderImageProps) {
-            return /*#__PURE__*/_react.default.createElement(_components.Image, renderImageProps);
-          },
-          style: {
-            width: "100%",
-            height: "auto"
-          },
-          value: props.value,
-          uploadImage: props.showFileManager,
-          removeImage: props.onChange
-        });
-      }
-
-      if (props.value) {
-        return /*#__PURE__*/_react.default.createElement(_styled.FilePreviewWrapper, null, /*#__PURE__*/_react.default.createElement("span", null, "Attached file: ", /*#__PURE__*/_react.default.createElement("strong", null, props.value.src.split("/").pop())), /*#__PURE__*/_react.default.createElement(_styled.RemoveImage, {
-          onClick: function onClick() {
-            return props.onChange(null);
-          }
-        }, /*#__PURE__*/_react.default.createElement(_roundClose24px.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_styled.AddImageWrapper, {
-          "data-role": "select-file",
-          onClick: props.showFileManager
-        }, /*#__PURE__*/_react.default.createElement(_styled.AddImageIconWrapper, null, /*#__PURE__*/_react.default.createElement(_attach_file_black_24dp.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-          use: "caption"
-        }, "Select a file"))));
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_styled.AddImageWrapper, {
+    }
+    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: () => props.onChange(null)
+      }, /*#__PURE__*/React.createElement(RemoveImageIcon, null)), /*#__PURE__*/React.createElement(AddImageWrapper, {
         "data-role": "select-file",
         onClick: props.showFileManager
-      }, /*#__PURE__*/_react.default.createElement(_styled.AddImageIconWrapper, null, /*#__PURE__*/_react.default.createElement(_attach_file_black_24dp.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+      }, /*#__PURE__*/React.createElement(AddImageIconWrapper, null, /*#__PURE__*/React.createElement(AddFileIcon, null), /*#__PURE__*/React.createElement(Typography, {
         use: "caption"
-      }, "Select a file")));
+      }, "Select a file"))));
     }
-  }]);
-  return EmptyStateElementRenderer;
-}(_UIRenderer2.UIRenderer);
+    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")));
+  }
+}
 
-exports.EmptyStateElementRenderer = EmptyStateElementRenderer;
+//# sourceMappingURL=EmptyStateElementRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["EmptyStateElementRenderer","props","accept","fileManagerElement","getAccept","acceptsOnlyImages","every","el","startsWith","renderImageProps","width","height","value","showFileManager","onChange","src","split","pop","UIRenderer"],"sources":["EmptyStateElementRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { EmptyStateElement } from \"./EmptyStateElement\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { Image } from \"@webiny/app/components\";\nimport { FileManagerElementRenderProps } from \"~/ui/elements/form/FileManagerElement/FileManagerElementRenderer\";\nimport { AddImageIconWrapper, AddImageWrapper, FilePreviewWrapper, RemoveImage } from \"./styled\";\nimport { ReactComponent as AddFileIcon } from \"~/assets/icons/attach_file_black_24dp.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as RemoveImageIcon } from \"@webiny/ui/ImageUpload/icons/round-close-24px.svg\";\n\nexport class EmptyStateElementRenderer extends UIRenderer<\n    EmptyStateElement,\n    FileManagerElementRenderProps\n> {\n    public override render({\n        props\n    }: UIRenderParams<EmptyStateElement, FileManagerElementRenderProps>): React.ReactNode {\n        const accept = props.fileManagerElement.getAccept();\n        const acceptsOnlyImages = !accept || accept.every(el => el.startsWith(\"image/\"));\n\n        if (acceptsOnlyImages) {\n            return (\n                <Ui.Image\n                    placeholder={\"Select an image\"}\n                    renderImagePreview={renderImageProps => <Image {...renderImageProps} />}\n                    style={{ width: \"100%\", height: \"auto\" }}\n                    value={props.value}\n                    uploadImage={props.showFileManager}\n                    removeImage={props.onChange}\n                />\n            );\n        }\n\n        if (props.value) {\n            return (\n                <FilePreviewWrapper>\n                    <span>\n                        Attached file: <strong>{props.value.src.split(\"/\").pop()}</strong>\n                    </span>\n\n                    <RemoveImage onClick={() => props.onChange(null)}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n\n                    <AddImageWrapper data-role={\"select-file\"} onClick={props.showFileManager}>\n                        <AddImageIconWrapper>\n                            <AddFileIcon />\n                            <Typography use={\"caption\"}>Select a file</Typography>\n                        </AddImageIconWrapper>\n                    </AddImageWrapper>\n                </FilePreviewWrapper>\n            );\n        }\n\n        return (\n            <AddImageWrapper data-role={\"select-file\"} onClick={props.showFileManager}>\n                <AddImageIconWrapper>\n                    <AddFileIcon />\n                    <Typography use={\"caption\"}>Select a file</Typography>\n                </AddImageIconWrapper>\n            </AddImageWrapper>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;IAEaA,yB;;;;;;;;;;;;WAIT,sBAEsF;MAAA,IADlFC,KACkF,QADlFA,KACkF;MAClF,IAAMC,MAAM,GAAGD,KAAK,CAACE,kBAAN,CAAyBC,SAAzB,EAAf;MACA,IAAMC,iBAAiB,GAAG,CAACH,MAAD,IAAWA,MAAM,CAACI,KAAP,CAAa,UAAAC,EAAE;QAAA,OAAIA,EAAE,CAACC,UAAH,CAAc,QAAd,CAAJ;MAAA,CAAf,CAArC;;MAEA,IAAIH,iBAAJ,EAAuB;QACnB,oBACI,6BAAC,EAAD,CAAI,KAAJ;UACI,WAAW,EAAE,iBADjB;UAEI,kBAAkB,EAAE,4BAAAI,gBAAgB;YAAA,oBAAI,6BAAC,iBAAD,EAAWA,gBAAX,CAAJ;UAAA,CAFxC;UAGI,KAAK,EAAE;YAAEC,KAAK,EAAE,MAAT;YAAiBC,MAAM,EAAE;UAAzB,CAHX;UAII,KAAK,EAAEV,KAAK,CAACW,KAJjB;UAKI,WAAW,EAAEX,KAAK,CAACY,eALvB;UAMI,WAAW,EAAEZ,KAAK,CAACa;QANvB,EADJ;MAUH;;MAED,IAAIb,KAAK,CAACW,KAAV,EAAiB;QACb,oBACI,6BAAC,0BAAD,qBACI,2EACmB,6CAASX,KAAK,CAACW,KAAN,CAAYG,GAAZ,CAAgBC,KAAhB,CAAsB,GAAtB,EAA2BC,GAA3B,EAAT,CADnB,CADJ,eAKI,6BAAC,mBAAD;UAAa,OAAO,EAAE;YAAA,OAAMhB,KAAK,CAACa,QAAN,CAAe,IAAf,CAAN;UAAA;QAAtB,gBACI,6BAAC,8BAAD,OADJ,CALJ,eASI,6BAAC,uBAAD;UAAiB,aAAW,aAA5B;UAA2C,OAAO,EAAEb,KAAK,CAACY;QAA1D,gBACI,6BAAC,2BAAD,qBACI,6BAAC,sCAAD,OADJ,eAEI,6BAAC,sBAAD;UAAY,GAAG,EAAE;QAAjB,mBAFJ,CADJ,CATJ,CADJ;MAkBH;;MAED,oBACI,6BAAC,uBAAD;QAAiB,aAAW,aAA5B;QAA2C,OAAO,EAAEZ,KAAK,CAACY;MAA1D,gBACI,6BAAC,2BAAD,qBACI,6BAAC,sCAAD,OADJ,eAEI,6BAAC,sBAAD;QAAY,GAAG,EAAE;MAAjB,mBAFJ,CADJ,CADJ;IAQH;;;EApD0CK,uB"}
+{"version":3,"names":["React","UIRenderer","Ui","Image","AddImageIconWrapper","AddImageWrapper","FilePreviewWrapper","RemoveImage","ReactComponent","AddFileIcon","RemoveImageIcon","Typography","EmptyStateElementRenderer","render","props","accept","fileManagerElement","getAccept","acceptsOnlyImages","every","el","startsWith","createElement","placeholder","renderImagePreview","renderImageProps","style","width","height","value","uploadImage","showFileManager","removeImage","onChange","src","split","pop","onClick","use"],"sources":["EmptyStateElementRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport type { EmptyStateElement } from \"./EmptyStateElement\";\nimport type { UIRenderParams } from \"~/ui/UIRenderer\";\nimport { UIRenderer } from \"~/ui/UIRenderer\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { Image } from \"@webiny/app/components\";\nimport type { FileManagerElementRenderProps } from \"~/ui/elements/form/FileManagerElement/FileManagerElementRenderer\";\nimport { AddImageIconWrapper, AddImageWrapper, FilePreviewWrapper, RemoveImage } from \"./styled\";\nimport { ReactComponent as AddFileIcon } from \"@webiny/icons/attach_file.svg\";\nimport { ReactComponent as RemoveImageIcon } from \"@webiny/icons/close.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nexport class EmptyStateElementRenderer extends UIRenderer<\n    EmptyStateElement,\n    FileManagerElementRenderProps\n> {\n    public override render({\n        props\n    }: UIRenderParams<EmptyStateElement, FileManagerElementRenderProps>): React.ReactNode {\n        const accept = props.fileManagerElement.getAccept();\n        const acceptsOnlyImages = !accept || accept.every(el => el.startsWith(\"image/\"));\n\n        if (acceptsOnlyImages) {\n            return (\n                <Ui.Image\n                    placeholder={\"Select an image\"}\n                    renderImagePreview={renderImageProps => <Image {...renderImageProps} />}\n                    style={{ width: \"100%\", height: \"auto\" }}\n                    value={props.value}\n                    uploadImage={props.showFileManager}\n                    removeImage={props.onChange}\n                />\n            );\n        }\n\n        if (props.value) {\n            return (\n                <FilePreviewWrapper>\n                    <span>\n                        Attached file: <strong>{props.value.src.split(\"/\").pop()}</strong>\n                    </span>\n\n                    <RemoveImage onClick={() => props.onChange(null)}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n\n                    <AddImageWrapper data-role={\"select-file\"} onClick={props.showFileManager}>\n                        <AddImageIconWrapper>\n                            <AddFileIcon />\n                            <Typography use={\"caption\"}>Select a file</Typography>\n                        </AddImageIconWrapper>\n                    </AddImageWrapper>\n                </FilePreviewWrapper>\n            );\n        }\n\n        return (\n            <AddImageWrapper data-role={\"select-file\"} onClick={props.showFileManager}>\n                <AddImageIconWrapper>\n                    <AddFileIcon />\n                    <Typography use={\"caption\"}>Select a file</Typography>\n                </AddImageIconWrapper>\n            </AddImageWrapper>\n        );\n    }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,UAAU;AACnB,OAAO,KAAKC,EAAE,MAAM,wBAAwB;AAC5C,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,mBAAmB,EAAEC,eAAe,EAAEC,kBAAkB,EAAEC,WAAW;AAC9E,SAASC,cAAc,IAAIC,WAAW,QAAQ,+BAA+B;AAC7E,SAASD,cAAc,IAAIE,eAAe,QAAQ,yBAAyB;AAC3E,SAASC,UAAU,QAAQ,uBAAuB;AAElD,OAAO,MAAMC,yBAAyB,SAASX,UAAU,CAGvD;EACkBY,MAAMA,CAAC;IACnBC;EAC8D,CAAC,EAAmB;IAClF,MAAMC,MAAM,GAAGD,KAAK,CAACE,kBAAkB,CAACC,SAAS,CAAC,CAAC;IACnD,MAAMC,iBAAiB,GAAG,CAACH,MAAM,IAAIA,MAAM,CAACI,KAAK,CAACC,EAAE,IAAIA,EAAE,CAACC,UAAU,CAAC,QAAQ,CAAC,CAAC;IAEhF,IAAIH,iBAAiB,EAAE;MACnB,oBACIlB,KAAA,CAAAsB,aAAA,CAACpB,EAAE,CAACC,KAAK;QACLoB,WAAW,EAAE,iBAAkB;QAC/BC,kBAAkB,EAAEC,gBAAgB,iBAAIzB,KAAA,CAAAsB,aAAA,CAACnB,KAAK,EAAKsB,gBAAmB,CAAE;QACxEC,KAAK,EAAE;UAAEC,KAAK,EAAE,MAAM;UAAEC,MAAM,EAAE;QAAO,CAAE;QACzCC,KAAK,EAAEf,KAAK,CAACe,KAAM;QACnBC,WAAW,EAAEhB,KAAK,CAACiB,eAAgB;QACnCC,WAAW,EAAElB,KAAK,CAACmB;MAAS,CAC/B,CAAC;IAEV;IAEA,IAAInB,KAAK,CAACe,KAAK,EAAE;MACb,oBACI7B,KAAA,CAAAsB,aAAA,CAAChB,kBAAkB,qBACfN,KAAA,CAAAsB,aAAA,eAAM,iBACa,eAAAtB,KAAA,CAAAsB,aAAA,iBAASR,KAAK,CAACe,KAAK,CAACK,GAAG,CAACC,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,CAAU,CAC/D,CAAC,eAEPpC,KAAA,CAAAsB,aAAA,CAACf,WAAW;QAAC8B,OAAO,EAAEA,CAAA,KAAMvB,KAAK,CAACmB,QAAQ,CAAC,IAAI;MAAE,gBAC7CjC,KAAA,CAAAsB,aAAA,CAACZ,eAAe,MAAE,CACT,CAAC,eAEdV,KAAA,CAAAsB,aAAA,CAACjB,eAAe;QAAC,aAAW,aAAc;QAACgC,OAAO,EAAEvB,KAAK,CAACiB;MAAgB,gBACtE/B,KAAA,CAAAsB,aAAA,CAAClB,mBAAmB,qBAChBJ,KAAA,CAAAsB,aAAA,CAACb,WAAW,MAAE,CAAC,eACfT,KAAA,CAAAsB,aAAA,CAACX,UAAU;QAAC2B,GAAG,EAAE;MAAU,GAAC,eAAyB,CACpC,CACR,CACD,CAAC;IAE7B;IAEA,oBACItC,KAAA,CAAAsB,aAAA,CAACjB,eAAe;MAAC,aAAW,aAAc;MAACgC,OAAO,EAAEvB,KAAK,CAACiB;IAAgB,gBACtE/B,KAAA,CAAAsB,aAAA,CAAClB,mBAAmB,qBAChBJ,KAAA,CAAAsB,aAAA,CAACb,WAAW,MAAE,CAAC,eACfT,KAAA,CAAAsB,aAAA,CAACX,UAAU;MAAC2B,GAAG,EAAE;IAAU,GAAC,eAAyB,CACpC,CACR,CAAC;EAE1B;AACJ","ignoreList":[]}

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { UIRenderer, UIRenderParams } from "../../../UIRenderer";
-import { FileManagerElement } from "../FileManagerElement";
-import { FormFieldElementRenderProps } from "../FormFieldElement";
+import type { UIRenderParams } from "../../../UIRenderer";
+import { UIRenderer } from "../../../UIRenderer";
+import type { FileManagerElement } from "../FileManagerElement";
+import type { FormFieldElementRenderProps } from "../FormFieldElement";
 export interface FileManagerElementRenderProps extends FormFieldElementRenderProps {
     fileManagerElement: FileManagerElement;
     value: any;

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

@@ -1,113 +1,73 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileManagerElementRenderer = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
-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 _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _UIRenderer2 = require("../../../UIRenderer");
-
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-
-var _components = require("../../../../components");
-
-var ImageUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+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 { UIRenderer } from "../../../UIRenderer";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage";
+import { FileManager } from "../../../../base/ui/FileManager";
+const ImageUploadWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1g56mwy0"
+} : {
   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)"
-  }
+})(process.env.NODE_ENV === "production" ? {
+  name: "rdeqjg",
+  styles: "position:relative;.disabled{opacity:0.75;pointer-events:none;}.mdc-floating-label--float-above{transform:scale(0.75);top:10px;left:10px;color:var(--mdc-theme-text-secondary-on-background);}.mdc-text-field-helper-text{color:var(--mdc-theme-text-secondary-on-background);}"
+} : {
+  name: "rdeqjg",
+  styles: "position:relative;.disabled{opacity:0.75;pointer-events:none;}.mdc-floating-label--float-above{transform:scale(0.75);top:10px;left:10px;color:var(--mdc-theme-text-secondary-on-background);}.mdc-text-field-helper-text{color:var(--mdc-theme-text-secondary-on-background);}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVNYW5hZ2VyRWxlbWVudFJlbmRlcmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVMkIiLCJmaWxlIjoiRmlsZU1hbmFnZXJFbGVtZW50UmVuZGVyZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IFVJUmVuZGVyUGFyYW1zIH0gZnJvbSBcIn4vdWkvVUlSZW5kZXJlclwiO1xuaW1wb3J0IHsgVUlSZW5kZXJlciB9IGZyb20gXCJ+L3VpL1VJUmVuZGVyZXJcIjtcbmltcG9ydCB7IEZvcm1FbGVtZW50TWVzc2FnZSB9IGZyb20gXCJAd2ViaW55L3VpL0Zvcm1FbGVtZW50TWVzc2FnZVwiO1xuaW1wb3J0IHR5cGUgeyBGaWxlTWFuYWdlckVsZW1lbnQgfSBmcm9tIFwifi91aS9lbGVtZW50cy9mb3JtL0ZpbGVNYW5hZ2VyRWxlbWVudFwiO1xuaW1wb3J0IHR5cGUgeyBGaWxlTWFuYWdlckZpbGVJdGVtIH0gZnJvbSBcIn4vYmFzZS91aS9GaWxlTWFuYWdlclwiO1xuaW1wb3J0IHsgRmlsZU1hbmFnZXIgfSBmcm9tIFwifi9iYXNlL3VpL0ZpbGVNYW5hZ2VyXCI7XG5pbXBvcnQgdHlwZSB7IEZvcm1GaWVsZEVsZW1lbnRSZW5kZXJQcm9wcyB9IGZyb20gXCJ+L3VpL2VsZW1lbnRzL2Zvcm0vRm9ybUZpZWxkRWxlbWVudFwiO1xuXG5jb25zdCBJbWFnZVVwbG9hZFdyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgXCIuZGlzYWJsZWRcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLjc1LFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCIubWRjLWZsb2F0aW5nLWxhYmVsLS1mbG9hdC1hYm92ZVwiOiB7XG4gICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwLjc1KVwiLFxuICAgICAgICB0b3A6IDEwLFxuICAgICAgICBsZWZ0OiAxMCxcbiAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtc2Vjb25kYXJ5LW9uLWJhY2tncm91bmQpXCJcbiAgICB9LFxuICAgIFwiLm1kYy10ZXh0LWZpZWxkLWhlbHBlci10ZXh0XCI6IHtcbiAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtc2Vjb25kYXJ5LW9uLWJhY2tncm91bmQpXCJcbiAgICB9XG59KTtcblxuZXhwb3J0IGludGVyZmFjZSBGaWxlTWFuYWdlckVsZW1lbnRSZW5kZXJQcm9wcyBleHRlbmRzIEZvcm1GaWVsZEVsZW1lbnRSZW5kZXJQcm9wcyB7XG4gICAgZmlsZU1hbmFnZXJFbGVtZW50OiBGaWxlTWFuYWdlckVsZW1lbnQ7XG4gICAgdmFsdWU6IGFueTtcbiAgICBzaG93RmlsZU1hbmFnZXI6ICgpID0+IHZvaWQ7XG4gICAgb25DaGFuZ2U6ICh2YWx1ZTogYW55KSA9PiB2b2lkO1xufVxuXG5leHBvcnQgY2xhc3MgRmlsZU1hbmFnZXJFbGVtZW50UmVuZGVyZXIgZXh0ZW5kcyBVSVJlbmRlcmVyPFxuICAgIEZpbGVNYW5hZ2VyRWxlbWVudCxcbiAgICBGb3JtRmllbGRFbGVtZW50UmVuZGVyUHJvcHNcbj4ge1xuICAgIHB1YmxpYyBvdmVycmlkZSByZW5kZXIoe1xuICAgICAgICBlbGVtZW50LFxuICAgICAgICBwcm9wc1xuICAgIH06IFVJUmVuZGVyUGFyYW1zPEZpbGVNYW5hZ2VyRWxlbWVudCwgRm9ybUZpZWxkRWxlbWVudFJlbmRlclByb3BzPik6IFJlYWN0LlJlYWN0Tm9kZSB7XG4gICAgICAgIGlmICghcHJvcHMuZm9ybVByb3BzKSB7XG4gICAgICAgICAgICB0aHJvdyBFcnJvcihgRmlsZU1hbmFnZXJFbGVtZW50IG11c3QgYmUgcGxhY2VkIGluc2lkZSBvZiBhIEZvcm1FbGVtZW50LmApO1xuICAgICAgICB9XG5cbiAgICAgICAgY29uc3QgeyBCaW5kIH0gPSBwcm9wcy5mb3JtUHJvcHM7XG5cbiAgICAgICAgY29uc3QgYWNjZXB0ID0gZWxlbWVudC5nZXRBY2NlcHQoKTtcbiAgICAgICAgY29uc3QgbGFiZWwgPSBlbGVtZW50LmdldExhYmVsKHByb3BzKTtcbiAgICAgICAgY29uc3QgZGVzY3JpcHRpb24gPSBlbGVtZW50LmdldERlc2NyaXB0aW9uKHByb3BzKTtcblxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPEJpbmRcbiAgICAgICAgICAgICAgICBuYW1lPXtlbGVtZW50LmdldE5hbWUoKX1cbiAgICAgICAgICAgICAgICB2YWxpZGF0b3JzPXtlbGVtZW50LmdldFZhbGlkYXRvcnMocHJvcHMpfVxuICAgICAgICAgICAgICAgIGRlZmF1bHRWYWx1ZT17ZWxlbWVudC5nZXREZWZhdWx0VmFsdWUocHJvcHMpfVxuICAgICAgICAgICAgICAgIGJlZm9yZUNoYW5nZT17KHZhbHVlOiBzdHJpbmcsIGNiKSA9PiBlbGVtZW50Lm9uQmVmb3JlQ2hhbmdlKHZhbHVlLCBjYil9XG4gICAgICAgICAgICAgICAgYWZ0ZXJDaGFuZ2U9eyh2YWx1ZTogc3RyaW5nLCBmb3JtKSA9PiBlbGVtZW50Lm9uQWZ0ZXJDaGFuZ2UodmFsdWUsIGZvcm0pfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHsoeyB2YWx1ZSwgb25DaGFuZ2UsIHZhbGlkYXRpb24gfSkgPT4gKFxuICAgICAgICAgICAgICAgICAgICA8SW1hZ2VVcGxvYWRXcmFwcGVyPlxuICAgICAgICAgICAgICAgICAgICAgICAge2xhYmVsICYmIChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cIm1kYy1mbG9hdGluZy1sYWJlbCBtZGMtZmxvYXRpbmctbGFiZWwtLWZsb2F0LWFib3ZlXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICl9XG5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxGaWxlTWFuYWdlclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXsodmFsdWU6IEZpbGVNYW5hZ2VyRmlsZUl0ZW0gfCBudWxsKSA9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNoYW5nZSh2YWx1ZSA/IHsgaWQ6IHZhbHVlLmlkLCBzcmM6IHZhbHVlLnNyYyB9IDogbnVsbClcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYWNjZXB0PXthY2NlcHR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgaW1hZ2VzPXshYWNjZXB0fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1heFNpemU9e2VsZW1lbnQuZ2V0TWF4U2l6ZSgpfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJlbmRlcj17KHsgc2hvd0ZpbGVNYW5hZ2VyIH0pID0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZW1lbnQuZ2V0RW1wdHlTdGF0ZUVsZW1lbnQoKS5yZW5kZXIoe1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgLi4ucHJvcHMsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmaWxlTWFuYWdlckVsZW1lbnQ6IGVsZW1lbnQsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzaG93RmlsZU1hbmFnZXIsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YWx1ZSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlOiAodmFsdWU6IEZpbGVNYW5hZ2VyRmlsZUl0ZW0gfCBudWxsKSA9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlKHZhbHVlID8geyBpZDogdmFsdWUuaWQsIHNyYzogdmFsdWUuc3JjIH0gOiBudWxsKVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICAgIC8+XG5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt2YWxpZGF0aW9uLmlzVmFsaWQgPT09IGZhbHNlICYmIChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8Rm9ybUVsZW1lbnRNZXNzYWdlIGVycm9yPnt2YWxpZGF0aW9uLm1lc3NhZ2V9PC9Gb3JtRWxlbWVudE1lc3NhZ2U+XG4gICAgICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAgICAgICAge3ZhbGlkYXRpb24uaXNWYWxpZCAhPT0gZmFsc2UgJiYgZGVzY3JpcHRpb24gJiYgKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGb3JtRWxlbWVudE1lc3NhZ2U+e2Rlc2NyaXB0aW9ufTwvRm9ybUVsZW1lbnRNZXNzYWdlPlxuICAgICAgICAgICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICAgICAgPC9JbWFnZVVwbG9hZFdyYXBwZXI+XG4gICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvQmluZD5cbiAgICAgICAgKTtcbiAgICB9XG59XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-
-var FileManagerElementRenderer = /*#__PURE__*/function (_UIRenderer) {
-  (0, _inherits2.default)(FileManagerElementRenderer, _UIRenderer);
-
-  var _super = (0, _createSuper2.default)(FileManagerElementRenderer);
-
-  function FileManagerElementRenderer() {
-    (0, _classCallCheck2.default)(this, FileManagerElementRenderer);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(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.default.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.default.createElement(ImageUploadWrapper, null, label && /*#__PURE__*/_react.default.createElement("div", {
-          className: "mdc-floating-label mdc-floating-label--float-above"
-        }, label), /*#__PURE__*/_react.default.createElement(_components.FileManager, {
-          onChange: onChange,
-          accept: accept,
-          images: !accept,
-          maxSize: element.getMaxSize(),
-          render: function render(_ref3) {
-            var showFileManager = _ref3.showFileManager;
-            return element.getEmptyStateElement().render((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-              fileManagerElement: element,
-              showFileManager: showFileManager,
-              value: value,
-              onChange: onChange
-            }));
-          }
-        }), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-          error: true
-        }, validation.message), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
-      });
+export class FileManagerElementRenderer extends UIRenderer {
+  render({
+    element,
+    props
+  }) {
+    if (!props.formProps) {
+      throw Error(`FileManagerElement must be placed inside of a FormElement.`);
     }
-  }]);
-  return FileManagerElementRenderer;
-}(_UIRenderer2.UIRenderer);
+    const {
+      Bind
+    } = props.formProps;
+    const accept = element.getAccept();
+    const label = element.getLabel(props);
+    const description = element.getDescription(props);
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: element.getName(),
+      validators: element.getValidators(props),
+      defaultValue: element.getDefaultValue(props),
+      beforeChange: (value, cb) => element.onBeforeChange(value, cb),
+      afterChange: (value, form) => element.onAfterChange(value, form)
+    }, ({
+      value,
+      onChange,
+      validation
+    }) => /*#__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: value => onChange(value ? {
+        id: value.id,
+        src: value.src
+      } : null),
+      accept: accept,
+      images: !accept,
+      maxSize: element.getMaxSize(),
+      render: ({
+        showFileManager
+      }) => element.getEmptyStateElement().render({
+        ...props,
+        fileManagerElement: element,
+        showFileManager,
+        value,
+        onChange: value => onChange(value ? {
+          id: value.id,
+          src: value.src
+        } : null)
+      })
+    }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      error: true
+    }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description)));
+  }
+}
 
-exports.FileManagerElementRenderer = FileManagerElementRenderer;
+//# sourceMappingURL=FileManagerElementRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["ImageUploadWrapper","styled","position","opacity","pointerEvents","transform","top","left","color","FileManagerElementRenderer","element","props","formProps","Error","Bind","accept","getAccept","label","getLabel","description","getDescription","getName","getValidators","getDefaultValue","value","cb","onBeforeChange","form","onAfterChange","onChange","validation","getMaxSize","showFileManager","getEmptyStateElement","render","fileManagerElement","isValid","message","UIRenderer"],"sources":["FileManagerElementRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { FileManagerElement } from \"~/ui/elements/form/FileManagerElement\";\nimport { FileManager } from \"~/components\";\nimport { FormFieldElementRenderProps } from \"~/ui/elements/form/FormFieldElement\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\nexport interface FileManagerElementRenderProps extends FormFieldElementRenderProps {\n    fileManagerElement: FileManagerElement;\n    value: any;\n    showFileManager: () => void;\n    onChange: (value: any) => void;\n}\n\nexport class FileManagerElementRenderer extends UIRenderer<\n    FileManagerElement,\n    FormFieldElementRenderProps\n> {\n    public override render({\n        element,\n        props\n    }: UIRenderParams<FileManagerElement, FormFieldElementRenderProps>): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`FileManagerElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n\n        const accept = element.getAccept();\n        const label = element.getLabel(props);\n        const description = element.getDescription(props);\n\n        return (\n            <Bind\n                name={element.getName()}\n                validators={element.getValidators(props)}\n                defaultValue={element.getDefaultValue(props)}\n                beforeChange={(value: string, cb) => element.onBeforeChange(value, cb)}\n                afterChange={(value: string, form) => element.onAfterChange(value, form)}\n            >\n                {({ value, onChange, validation }) => (\n                    <ImageUploadWrapper>\n                        {label && (\n                            <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                                {label}\n                            </div>\n                        )}\n\n                        <FileManager\n                            onChange={onChange}\n                            accept={accept}\n                            images={!accept}\n                            maxSize={element.getMaxSize()}\n                            render={({ showFileManager }) =>\n                                element.getEmptyStateElement().render({\n                                    ...props,\n                                    fileManagerElement: element,\n                                    showFileManager,\n                                    value,\n                                    onChange\n                                })\n                            }\n                        />\n\n                        {validation.isValid === false && (\n                            <FormElementMessage error>{validation.message}</FormElementMessage>\n                        )}\n                        {validation.isValid !== false && description && (\n                            <FormElementMessage>{description}</FormElementMessage>\n                        )}\n                    </ImageUploadWrapper>\n                )}\n            </Bind>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AAGA,IAAMA,kBAAkB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACrCC,QAAQ,EAAE,UAD2B;EAErC,aAAa;IACTC,OAAO,EAAE,IADA;IAETC,aAAa,EAAE;EAFN,CAFwB;EAMrC,oCAAoC;IAChCC,SAAS,EAAE,aADqB;IAEhCC,GAAG,EAAE,EAF2B;IAGhCC,IAAI,EAAE,EAH0B;IAIhCC,KAAK,EAAE;EAJyB,CANC;EAYrC,+BAA+B;IAC3BA,KAAK,EAAE;EADoB;AAZM,CAAjB,CAAxB;;IAwBaC,0B;;;;;;;;;;;;WAIT,sBAGqF;MAAA,IAFjFC,OAEiF,QAFjFA,OAEiF;MAAA,IADjFC,KACiF,QADjFA,KACiF;;MACjF,IAAI,CAACA,KAAK,CAACC,SAAX,EAAsB;QAClB,MAAMC,KAAK,8DAAX;MACH;;MAED,IAAQC,IAAR,GAAiBH,KAAK,CAACC,SAAvB,CAAQE,IAAR;MAEA,IAAMC,MAAM,GAAGL,OAAO,CAACM,SAAR,EAAf;MACA,IAAMC,KAAK,GAAGP,OAAO,CAACQ,QAAR,CAAiBP,KAAjB,CAAd;MACA,IAAMQ,WAAW,GAAGT,OAAO,CAACU,cAAR,CAAuBT,KAAvB,CAApB;MAEA,oBACI,6BAAC,IAAD;QACI,IAAI,EAAED,OAAO,CAACW,OAAR,EADV;QAEI,UAAU,EAAEX,OAAO,CAACY,aAAR,CAAsBX,KAAtB,CAFhB;QAGI,YAAY,EAAED,OAAO,CAACa,eAAR,CAAwBZ,KAAxB,CAHlB;QAII,YAAY,EAAE,sBAACa,KAAD,EAAgBC,EAAhB;UAAA,OAAuBf,OAAO,CAACgB,cAAR,CAAuBF,KAAvB,EAA8BC,EAA9B,CAAvB;QAAA,CAJlB;QAKI,WAAW,EAAE,qBAACD,KAAD,EAAgBG,IAAhB;UAAA,OAAyBjB,OAAO,CAACkB,aAAR,CAAsBJ,KAAtB,EAA6BG,IAA7B,CAAzB;QAAA;MALjB,GAOK;QAAA,IAAGH,KAAH,SAAGA,KAAH;QAAA,IAAUK,QAAV,SAAUA,QAAV;QAAA,IAAoBC,UAApB,SAAoBA,UAApB;QAAA,oBACG,6BAAC,kBAAD,QACKb,KAAK,iBACF;UAAK,SAAS,EAAC;QAAf,GACKA,KADL,CAFR,eAOI,6BAAC,uBAAD;UACI,QAAQ,EAAEY,QADd;UAEI,MAAM,EAAEd,MAFZ;UAGI,MAAM,EAAE,CAACA,MAHb;UAII,OAAO,EAAEL,OAAO,CAACqB,UAAR,EAJb;UAKI,MAAM,EAAE;YAAA,IAAGC,eAAH,SAAGA,eAAH;YAAA,OACJtB,OAAO,CAACuB,oBAAR,GAA+BC,MAA/B,6DACOvB,KADP;cAEIwB,kBAAkB,EAAEzB,OAFxB;cAGIsB,eAAe,EAAfA,eAHJ;cAIIR,KAAK,EAALA,KAJJ;cAKIK,QAAQ,EAARA;YALJ,GADI;UAAA;QALZ,EAPJ,EAuBKC,UAAU,CAACM,OAAX,KAAuB,KAAvB,iBACG,6BAAC,sCAAD;UAAoB,KAAK;QAAzB,GAA2BN,UAAU,CAACO,OAAtC,CAxBR,EA0BKP,UAAU,CAACM,OAAX,KAAuB,KAAvB,IAAgCjB,WAAhC,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CA3BR,CADH;MAAA,CAPL,CADJ;IA0CH;;;EA5D2CmB,uB"}
+{"version":3,"names":["React","UIRenderer","FormElementMessage","FileManager","ImageUploadWrapper","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","FileManagerElementRenderer","render","element","props","formProps","Error","Bind","accept","getAccept","getLabel","description","getDescription","createElement","getName","validators","getValidators","defaultValue","getDefaultValue","beforeChange","value","cb","onBeforeChange","afterChange","form","onAfterChange","onChange","validation","className","id","src","images","maxSize","getMaxSize","showFileManager","getEmptyStateElement","fileManagerElement","isValid","error","message"],"sources":["FileManagerElementRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport type { UIRenderParams } from \"~/ui/UIRenderer\";\nimport { UIRenderer } from \"~/ui/UIRenderer\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport type { FileManagerElement } from \"~/ui/elements/form/FileManagerElement\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager\";\nimport { FileManager } from \"~/base/ui/FileManager\";\nimport type { FormFieldElementRenderProps } from \"~/ui/elements/form/FormFieldElement\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\nexport interface FileManagerElementRenderProps extends FormFieldElementRenderProps {\n    fileManagerElement: FileManagerElement;\n    value: any;\n    showFileManager: () => void;\n    onChange: (value: any) => void;\n}\n\nexport class FileManagerElementRenderer extends UIRenderer<\n    FileManagerElement,\n    FormFieldElementRenderProps\n> {\n    public override render({\n        element,\n        props\n    }: UIRenderParams<FileManagerElement, FormFieldElementRenderProps>): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`FileManagerElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n\n        const accept = element.getAccept();\n        const label = element.getLabel(props);\n        const description = element.getDescription(props);\n\n        return (\n            <Bind\n                name={element.getName()}\n                validators={element.getValidators(props)}\n                defaultValue={element.getDefaultValue(props)}\n                beforeChange={(value: string, cb) => element.onBeforeChange(value, cb)}\n                afterChange={(value: string, form) => element.onAfterChange(value, form)}\n            >\n                {({ value, onChange, validation }) => (\n                    <ImageUploadWrapper>\n                        {label && (\n                            <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                                {label}\n                            </div>\n                        )}\n\n                        <FileManager\n                            onChange={(value: FileManagerFileItem | null) =>\n                                onChange(value ? { id: value.id, src: value.src } : null)\n                            }\n                            accept={accept}\n                            images={!accept}\n                            maxSize={element.getMaxSize()}\n                            render={({ showFileManager }) =>\n                                element.getEmptyStateElement().render({\n                                    ...props,\n                                    fileManagerElement: element,\n                                    showFileManager,\n                                    value,\n                                    onChange: (value: FileManagerFileItem | null) =>\n                                        onChange(value ? { id: value.id, src: value.src } : null)\n                                })\n                            }\n                        />\n\n                        {validation.isValid === false && (\n                            <FormElementMessage error>{validation.message}</FormElementMessage>\n                        )}\n                        {validation.isValid !== false && description && (\n                            <FormElementMessage>{description}</FormElementMessage>\n                        )}\n                    </ImageUploadWrapper>\n                )}\n            </Bind>\n        );\n    }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,20 +1,23 @@
 /// <reference types="react" />
-/// <reference types="web" />
-/// <reference types="react" />
-export declare const AddImageIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const AddImageWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const AddImageWrapperRound: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
-} & {
-    children?: import("react").ReactNode;
-}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
-} & {
-    children?: import("react").ReactNode;
-}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("react").HTMLAttributes<HTMLDivElement> | "theme">, object>;
-export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const FilePreviewWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const AddImageIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AddImageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AddImageWrapperRound: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const RemoveImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FilePreviewWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;