@webiny/app 5.44.1-beta.0 → 5.45.0-beta.0

package/presentation/router/components/SimpleLink.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/react-composition";
+import { RouterGateway } from "../../../features/router/abstractions.js";
+import { useContainer } from "../../../shared/di/DiContainerProvider.js";
+export const SimpleLink = makeDecoratable("SimpleLink", ({
+  children,
+  to,
+  ...rest
+}) => {
+  const container = useContainer();
+  const routerGateway = container.resolve(RouterGateway);
+  const handleClick = event => {
+    // Respect cmd+click / ctrl+click / middle click → open in new tab
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey || rest.target === "_blank") {
+      return;
+    }
+    event.preventDefault();
+    routerGateway.pushState(to);
+  };
+  const onClick = rest.onClick ?? handleClick;
+  return /*#__PURE__*/React.createElement("a", Object.assign({
+    href: to,
+    rel: "noreferrer noopener"
+  }, rest, {
+    onClick: onClick
+  }), children);
+});
+export const LinkComponent = SimpleLink;
+
+//# sourceMappingURL=SimpleLink.js.map

package/presentation/router/components/SimpleLink.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","RouterGateway","useContainer","SimpleLink","children","to","rest","container","routerGateway","resolve","handleClick","event","defaultPrevented","button","metaKey","altKey","ctrlKey","shiftKey","target","preventDefault","pushState","onClick","createElement","Object","assign","href","rel","LinkComponent"],"sources":["SimpleLink.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { RouterGateway } from \"~/features/router/abstractions.js\";\nimport { useContainer } from \"~/shared/di/DiContainerProvider.js\";\n\ntype BaseAnchorAttributes = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\">;\n\nexport type SimpleLinkProps = BaseAnchorAttributes & {\n    to: string;\n};\n\nexport const SimpleLink = makeDecoratable(\n    \"SimpleLink\",\n    ({ children, to, ...rest }: SimpleLinkProps) => {\n        const container = useContainer();\n\n        const routerGateway = container.resolve(RouterGateway);\n\n        const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n            // Respect cmd+click / ctrl+click / middle click → open in new tab\n            if (\n                event.defaultPrevented ||\n                event.button !== 0 ||\n                event.metaKey ||\n                event.altKey ||\n                event.ctrlKey ||\n                event.shiftKey ||\n                rest.target === \"_blank\"\n            ) {\n                return;\n            }\n\n            event.preventDefault();\n            routerGateway.pushState(to);\n        };\n\n        const onClick = rest.onClick ?? handleClick;\n\n        return (\n            <a href={to} rel=\"noreferrer noopener\" {...rest} onClick={onClick}>\n                {children}\n            </a>\n        );\n    }\n);\n\nexport const LinkComponent = SimpleLink;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,aAAa;AACtB,SAASC,YAAY;AAQrB,OAAO,MAAMC,UAAU,GAAGH,eAAe,CACrC,YAAY,EACZ,CAAC;EAAEI,QAAQ;EAAEC,EAAE;EAAE,GAAGC;AAAsB,CAAC,KAAK;EAC5C,MAAMC,SAAS,GAAGL,YAAY,CAAC,CAAC;EAEhC,MAAMM,aAAa,GAAGD,SAAS,CAACE,OAAO,CAACR,aAAa,CAAC;EAEtD,MAAMS,WAAW,GAAIC,KAA0C,IAAK;IAChE;IACA,IACIA,KAAK,CAACC,gBAAgB,IACtBD,KAAK,CAACE,MAAM,KAAK,CAAC,IAClBF,KAAK,CAACG,OAAO,IACbH,KAAK,CAACI,MAAM,IACZJ,KAAK,CAACK,OAAO,IACbL,KAAK,CAACM,QAAQ,IACdX,IAAI,CAACY,MAAM,KAAK,QAAQ,EAC1B;MACE;IACJ;IAEAP,KAAK,CAACQ,cAAc,CAAC,CAAC;IACtBX,aAAa,CAACY,SAAS,CAACf,EAAE,CAAC;EAC/B,CAAC;EAED,MAAMgB,OAAO,GAAGf,IAAI,CAACe,OAAO,IAAIX,WAAW;EAE3C,oBACIX,KAAA,CAAAuB,aAAA,MAAAC,MAAA,CAAAC,MAAA;IAAGC,IAAI,EAAEpB,EAAG;IAACqB,GAAG,EAAC;EAAqB,GAAKpB,IAAI;IAAEe,OAAO,EAAEA;EAAQ,IAC7DjB,QACF,CAAC;AAEZ,CACJ,CAAC;AAED,OAAO,MAAMuB,aAAa,GAAGxB,UAAU","ignoreList":[]}

package/presentation/router/hooks/useRoute.d.ts

@@ -0,0 +1,6 @@
+import type { Route, RouteParamsDefinition, RouteParamsInfer } from "../../../features/router/Route.js";
+import { MatchedRoute } from "../../../features/router/abstractions.js";
+export declare function useRoute<TParams extends RouteParamsDefinition | undefined = undefined>(route?: Route<TParams>): {
+    route: MatchedRoute<TParams extends RouteParamsDefinition ? RouteParamsInfer<TParams> : undefined>;
+    setRouteParams: <T extends Record<string, any>>(cb: (params: T) => T) => void;
+};

package/presentation/router/hooks/useRoute.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { autorun } from "mobx";
+import { RouterFeature } from "../../../features/router/feature.js";
+import { useFeature } from "../../../shared/di/useFeature.js";
+export function useRoute(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+route) {
+  const {
+    presenter
+  } = useFeature(RouterFeature);
+  const [currentRoute, setCurrentRoute] = useState(presenter.vm.currentRoute);
+  useEffect(() => {
+    autorun(() => {
+      const route = presenter.vm.currentRoute;
+      if (!route) {
+        return;
+      }
+      setCurrentRoute(route);
+    });
+  }, []);
+
+  // TODO: add validation (the requested route must match  the current route)
+
+  return {
+    route: currentRoute,
+    setRouteParams: presenter.setRouteParams.bind(presenter)
+  };
+}
+
+//# sourceMappingURL=useRoute.js.map

package/presentation/router/hooks/useRoute.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","autorun","RouterFeature","useFeature","useRoute","route","presenter","currentRoute","setCurrentRoute","vm","setRouteParams","bind"],"sources":["useRoute.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { Route, RouteParamsDefinition, RouteParamsInfer } from \"~/features/router/Route.js\";\nimport { MatchedRoute } from \"~/features/router/abstractions.js\";\nimport { RouterFeature } from \"~/features/router/feature.js\";\nimport { useFeature } from \"~/shared/di/useFeature.js\";\n\nexport function useRoute<TParams extends RouteParamsDefinition | undefined = undefined>(\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    route?: Route<TParams>\n) {\n    const { presenter } = useFeature(RouterFeature);\n    const [currentRoute, setCurrentRoute] = useState<MatchedRoute | undefined>(\n        presenter.vm.currentRoute\n    );\n\n    useEffect(() => {\n        autorun(() => {\n            const route = presenter.vm.currentRoute;\n\n            if (!route) {\n                return;\n            }\n\n            setCurrentRoute(route);\n        });\n    }, []);\n\n    // TODO: add validation (the requested route must match  the current route)\n\n    return {\n        route: currentRoute as MatchedRoute<\n            TParams extends RouteParamsDefinition ? RouteParamsInfer<TParams> : undefined\n        >,\n        setRouteParams: presenter.setRouteParams.bind(presenter)\n    };\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,aAAa;AACtB,SAASC,UAAU;AAEnB,OAAO,SAASC,QAAQA;AACpB;AACAC,KAAsB,EACxB;EACE,MAAM;IAAEC;EAAU,CAAC,GAAGH,UAAU,CAACD,aAAa,CAAC;EAC/C,MAAM,CAACK,YAAY,EAAEC,eAAe,CAAC,GAAGR,QAAQ,CAC5CM,SAAS,CAACG,EAAE,CAACF,YACjB,CAAC;EAEDR,SAAS,CAAC,MAAM;IACZE,OAAO,CAAC,MAAM;MACV,MAAMI,KAAK,GAAGC,SAAS,CAACG,EAAE,CAACF,YAAY;MAEvC,IAAI,CAACF,KAAK,EAAE;QACR;MACJ;MAEAG,eAAe,CAACH,KAAK,CAAC;IAC1B,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;;EAEN;;EAEA,OAAO;IACHA,KAAK,EAAEE,YAEN;IACDG,cAAc,EAAEJ,SAAS,CAACI,cAAc,CAACC,IAAI,CAACL,SAAS;EAC3D,CAAC;AACL","ignoreList":[]}

package/presentation/router/hooks/useRouter.d.ts

@@ -0,0 +1,7 @@
+import { type ReactRoute } from "../../../presentation/router/index.js";
+export declare const useRouter: () => {
+    goToRoute: <TParams extends import("../../../features/router/Route").RouteParamsDefinition | undefined>(route: import("../../..").Route<TParams>, ...args: import("../../../features/router/abstractions").RouteParamsArgs<TParams>) => void;
+    getLink: <TParams extends import("../../../features/router/Route").RouteParamsDefinition | undefined>(route: import("../../..").Route<TParams>, ...args: import("../../../features/router/abstractions").RouteParamsArgs<TParams>) => string;
+    onRouteExit: (cb: import("../../../features/router/abstractions").OnRouteExit) => void;
+    setRoutes: (routes: ReactRoute[]) => void;
+};

package/presentation/router/hooks/useRouter.js

@@ -0,0 +1,26 @@
+import { RouteElementRegistry } from "../index.js";
+import { RouterFeature } from "../../../features/router/feature.js";
+import { useFeature } from "../../../shared/di/useFeature.js";
+import { useContainer } from "../../../shared/di/DiContainerProvider.js";
+export const useRouter = () => {
+  const {
+    presenter
+  } = useFeature(RouterFeature);
+  const container = useContainer();
+  const registry = container.resolve(RouteElementRegistry);
+  return {
+    goToRoute: presenter.goToRoute.bind(presenter),
+    getLink: presenter.getLink.bind(presenter),
+    onRouteExit: presenter.onRouteExit.bind(presenter),
+    setRoutes: routes => {
+      const cleanRoutes = [];
+      for (const route of routes) {
+        cleanRoutes.push(route.route);
+        registry.register(route.route.name, route.element);
+      }
+      presenter.bootstrap(cleanRoutes);
+    }
+  };
+};
+
+//# sourceMappingURL=useRouter.js.map

package/presentation/router/hooks/useRouter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RouteElementRegistry","RouterFeature","useFeature","useContainer","useRouter","presenter","container","registry","resolve","goToRoute","bind","getLink","onRouteExit","setRoutes","routes","cleanRoutes","route","push","register","name","element","bootstrap"],"sources":["useRouter.ts"],"sourcesContent":["import { type ReactRoute, RouteElementRegistry } from \"~/presentation/router/index.js\";\nimport { RouterFeature } from \"~/features/router/feature.js\";\nimport { useFeature } from \"~/shared/di/useFeature.js\";\nimport { useContainer } from \"~/shared/di/DiContainerProvider.js\";\n\nexport const useRouter = () => {\n    const { presenter } = useFeature(RouterFeature);\n    const container = useContainer();\n    const registry = container.resolve(RouteElementRegistry);\n\n    return {\n        goToRoute: presenter.goToRoute.bind(presenter),\n        getLink: presenter.getLink.bind(presenter),\n        onRouteExit: presenter.onRouteExit.bind(presenter),\n        setRoutes: (routes: ReactRoute[]) => {\n            const cleanRoutes = [];\n\n            for (const route of routes) {\n                cleanRoutes.push(route.route);\n                registry.register(route.route.name, route.element);\n            }\n\n            presenter.bootstrap(cleanRoutes);\n        }\n    };\n};\n"],"mappings":"AAAA,SAA0BA,oBAAoB;AAC9C,SAASC,aAAa;AACtB,SAASC,UAAU;AACnB,SAASC,YAAY;AAErB,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC3B,MAAM;IAAEC;EAAU,CAAC,GAAGH,UAAU,CAACD,aAAa,CAAC;EAC/C,MAAMK,SAAS,GAAGH,YAAY,CAAC,CAAC;EAChC,MAAMI,QAAQ,GAAGD,SAAS,CAACE,OAAO,CAACR,oBAAoB,CAAC;EAExD,OAAO;IACHS,SAAS,EAAEJ,SAAS,CAACI,SAAS,CAACC,IAAI,CAACL,SAAS,CAAC;IAC9CM,OAAO,EAAEN,SAAS,CAACM,OAAO,CAACD,IAAI,CAACL,SAAS,CAAC;IAC1CO,WAAW,EAAEP,SAAS,CAACO,WAAW,CAACF,IAAI,CAACL,SAAS,CAAC;IAClDQ,SAAS,EAAGC,MAAoB,IAAK;MACjC,MAAMC,WAAW,GAAG,EAAE;MAEtB,KAAK,MAAMC,KAAK,IAAIF,MAAM,EAAE;QACxBC,WAAW,CAACE,IAAI,CAACD,KAAK,CAACA,KAAK,CAAC;QAC7BT,QAAQ,CAACW,QAAQ,CAACF,KAAK,CAACA,KAAK,CAACG,IAAI,EAAEH,KAAK,CAACI,OAAO,CAAC;MACtD;MAEAf,SAAS,CAACgB,SAAS,CAACN,WAAW,CAAC;IACpC;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/presentation/router/index.d.ts

@@ -0,0 +1,4 @@
+export { useRouter } from "./hooks/useRouter.js";
+export { useRoute } from "./hooks/useRoute.js";
+export { RouteElementRegistry } from "./abstractions.js";
+export type { ReactRoute } from "./types.js";

package/presentation/router/index.js

@@ -0,0 +1,5 @@
+export { useRouter } from "./hooks/useRouter.js";
+export { useRoute } from "./hooks/useRoute.js";
+export { RouteElementRegistry } from "./abstractions.js";
+
+//# sourceMappingURL=index.js.map

package/presentation/router/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useRouter","useRoute","RouteElementRegistry"],"sources":["index.ts"],"sourcesContent":["export { useRouter } from \"./hooks/useRouter.js\";\nexport { useRoute } from \"./hooks/useRoute.js\";\nexport { RouteElementRegistry } from \"./abstractions.js\";\nexport type { ReactRoute } from \"./types.js\";\n"],"mappings":"AAAA,SAASA,SAAS;AAClB,SAASC,QAAQ;AACjB,SAASC,oBAAoB","ignoreList":[]}

package/presentation/router/types.d.ts

@@ -0,0 +1,5 @@
+import type { Route } from "../../features/router/Route.js";
+export type ReactRoute = {
+    route: Route<any>;
+    element: JSX.Element;
+};

package/presentation/router/types.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=types.js.map

package/presentation/router/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { Route } from \"~/features/router/Route.js\";\n\nexport type ReactRoute = {\n    route: Route<any>;\n    element: JSX.Element;\n};\n"],"mappings":"","ignoreList":[]}

package/react-butterfiles/Files.js

@@ -1,254 +1,227 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Files = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _bytes = _interopRequireDefault(require("bytes"));
-var _minimatch = _interopRequireDefault(require("minimatch"));
-var _readFileContent = require("./utils/readFileContent");
-var _generateId = require("./utils/generateId");
-var _excluded = ["onSuccess", "onError", "onDragOver", "onDrop"];
-var Files = exports.Files = /*#__PURE__*/function (_React$Component) {
-  function Files() {
-    var _this;
-    (0, _classCallCheck2.default)(this, Files);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+import React from "react";
+import bytes from "bytes";
+import { minimatch } from "minimatch";
+import { readFileContent } from "./utils/readFileContent.js";
+import { generateId } from "./utils/generateId.js";
+export class Files extends React.Component {
+  static defaultProps = {
+    accept: [],
+    multiple: false,
+    maxSize: "2mb",
+    multipleMaxSize: "10mb",
+    multipleMaxCount: null,
+    convertToBase64: false
+  };
+  input = null;
+  browseFilesPassedParams = null;
+  id = generateId();
+  validateFiles = files => {
+    const {
+      multiple,
+      multipleMaxSize,
+      multipleMaxCount,
+      accept,
+      maxSize
+    } = this.props;
+    const errors = [];
+    let multipleFileSize = 0;
+    if (!multiple && files.length > 1) {
+      errors.push({
+        id: generateId(),
+        type: "multipleNotAllowed"
+      });
+      return errors;
     }
-    _this = (0, _callSuper2.default)(this, Files, [].concat(args));
-    (0, _defineProperty2.default)(_this, "input", null);
-    (0, _defineProperty2.default)(_this, "browseFilesPassedParams", null);
-    (0, _defineProperty2.default)(_this, "id", (0, _generateId.generateId)());
-    (0, _defineProperty2.default)(_this, "validateFiles", function (files) {
-      var _this$props = _this.props,
-        multiple = _this$props.multiple,
-        multipleMaxSize = _this$props.multipleMaxSize,
-        multipleMaxCount = _this$props.multipleMaxCount,
-        accept = _this$props.accept,
-        maxSize = _this$props.maxSize;
-      var errors = [];
-      var multipleFileSize = 0;
-      if (!multiple && files.length > 1) {
+    for (let index = 0; index < files.length; index++) {
+      const file = files[index];
+      if (Array.isArray(accept) && accept.length && !accept.some(type => minimatch(file.type, type))) {
         errors.push({
-          id: (0, _generateId.generateId)(),
-          type: "multipleNotAllowed"
+          id: generateId(),
+          index,
+          file,
+          type: "unsupportedFileType"
         });
-        return errors;
-      }
-      var _loop = function _loop() {
-        var file = files[index];
-        if (Array.isArray(accept) && accept.length && !accept.some(function (type) {
-          return (0, _minimatch.default)(file.type, type);
-        })) {
+      } else if (maxSize) {
+        const sizeAsBytes = bytes(maxSize);
+        if (sizeAsBytes && file.size > sizeAsBytes) {
           errors.push({
-            id: (0, _generateId.generateId)(),
-            index: index,
-            file: file,
-            type: "unsupportedFileType"
+            id: generateId(),
+            index,
+            file,
+            type: "maxSizeExceeded"
           });
-        } else if (maxSize) {
-          var sizeAsBytes = (0, _bytes.default)(maxSize);
-          if (sizeAsBytes && file.size > sizeAsBytes) {
-            errors.push({
-              id: (0, _generateId.generateId)(),
-              index: index,
-              file: file,
-              type: "maxSizeExceeded"
-            });
-          }
         }
-        if (multiple) {
-          multipleFileSize += file.size;
-        }
-      };
-      for (var index = 0; index < files.length; index++) {
-        _loop();
       }
       if (multiple) {
-        var maxMultipleMaxSize = (0, _bytes.default)(multipleMaxSize);
-        if (maxMultipleMaxSize && multipleMaxSize && multipleFileSize > maxMultipleMaxSize) {
-          errors.push({
-            id: (0, _generateId.generateId)(),
-            type: "multipleMaxSizeExceeded",
-            multipleFileSize: multipleFileSize,
-            multipleMaxSize: maxMultipleMaxSize
-          });
-        }
-        if (multipleMaxCount && files.length > multipleMaxCount) {
-          errors.push({
-            id: (0, _generateId.generateId)(),
-            type: "multipleMaxCountExceeded",
-            multipleCount: files.length,
-            multipleMaxCount: multipleMaxCount
-          });
-        }
+        multipleFileSize += file.size;
       }
-      return errors;
-    });
-    (0, _defineProperty2.default)(_this, "processSelectedFiles", async function (eventFiles) {
-      if (eventFiles.length === 0) {
-        return;
-      }
-      var _this$props2 = _this.props,
-        convertToBase64 = _this$props2.convertToBase64,
-        onSuccess = _this$props2.onSuccess,
-        onError = _this$props2.onError;
-      var _this2 = _this,
-        browseFilesPassedParams = _this2.browseFilesPassedParams;
-      var callbacks = {
-        onSuccess: onSuccess,
-        onError: onError
-      };
-      if (browseFilesPassedParams && browseFilesPassedParams.onSuccess) {
-        callbacks.onSuccess = browseFilesPassedParams.onSuccess;
+    }
+    if (multiple) {
+      const maxMultipleMaxSize = bytes(multipleMaxSize);
+      if (maxMultipleMaxSize && multipleMaxSize && multipleFileSize > maxMultipleMaxSize) {
+        errors.push({
+          id: generateId(),
+          type: "multipleMaxSizeExceeded",
+          multipleFileSize,
+          multipleMaxSize: maxMultipleMaxSize
+        });
       }
-      if (browseFilesPassedParams && browseFilesPassedParams.onError) {
-        callbacks.onError = browseFilesPassedParams.onError;
+      if (multipleMaxCount && files.length > multipleMaxCount) {
+        errors.push({
+          id: generateId(),
+          type: "multipleMaxCountExceeded",
+          multipleCount: files.length,
+          multipleMaxCount
+        });
       }
-      var files = (0, _toConsumableArray2.default)(eventFiles).map(function (file) {
-        return {
-          id: (0, _generateId.generateId)(),
-          name: file.name,
-          type: file.type,
-          size: file.size,
-          src: {
-            file: file,
-            base64: null
-          }
-        };
-      });
-      var errors = _this.validateFiles(files);
-      if (errors.length) {
-        callbacks.onError && callbacks.onError(errors, files);
-      } else {
-        if (convertToBase64) {
-          for (var i = 0; i < files.length; i++) {
-            var file = files[i].src.file;
-            files[i].src.base64 = await (0, _readFileContent.readFileContent)(file);
-          }
+    }
+    return errors;
+  };
+  processSelectedFiles = async eventFiles => {
+    if (eventFiles.length === 0) {
+      return;
+    }
+    const {
+      convertToBase64,
+      onSuccess,
+      onError
+    } = this.props;
+    const {
+      browseFilesPassedParams
+    } = this;
+    const callbacks = {
+      onSuccess,
+      onError
+    };
+    if (browseFilesPassedParams && browseFilesPassedParams.onSuccess) {
+      callbacks.onSuccess = browseFilesPassedParams.onSuccess;
+    }
+    if (browseFilesPassedParams && browseFilesPassedParams.onError) {
+      callbacks.onError = browseFilesPassedParams.onError;
+    }
+    const files = [...eventFiles].map(file => {
+      return {
+        id: generateId(),
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        src: {
+          file,
+          base64: null
         }
-        callbacks.onSuccess && callbacks.onSuccess(files);
-      }
-
-      // Reset the browseFiles arguments.
-      if (_this.input) {
-        _this.input.value = "";
-      }
-      _this.browseFilesPassedParams = null;
-    });
-    /**
-     * Extracted into a separate method just for testing purposes.
-     */
-    (0, _defineProperty2.default)(_this, "onDropFilesHandler", async function (_ref) {
-      var e = _ref.e,
-        onSuccess = _ref.onSuccess,
-        onError = _ref.onError;
-      _this.browseFilesPassedParams = {
-        onSuccess: onSuccess,
-        onError: onError
       };
-      e.dataTransfer && e.dataTransfer.files && (await _this.processSelectedFiles(e.dataTransfer.files));
     });
-    /**
-     * Extracted into a separate method just for testing purposes.
-     */
-    (0, _defineProperty2.default)(_this, "browseFilesHandler", function (_ref2) {
-      var onSuccess = _ref2.onSuccess,
-        onError = _ref2.onError;
-      _this.browseFilesPassedParams = {
-        onSuccess: onSuccess,
-        onError: onError
-      };
-      _this.input && _this.input.click();
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(Files, _React$Component);
-  return (0, _createClass2.default)(Files, [{
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-      var _this$props3 = this.props,
-        multiple = _this$props3.multiple,
-        accept = _this$props3.accept,
-        id = _this$props3.id;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.props.children({
-        getLabelProps: function getLabelProps(props) {
-          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-            htmlFor: id || _this3.id
-          });
-        },
-        validateFiles: this.validateFiles,
-        browseFiles: function browseFiles() {
-          var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            onSuccess = _ref3.onSuccess,
-            onError = _ref3.onError;
-          _this3.browseFilesHandler({
-            onSuccess: onSuccess,
-            onError: onError
-          });
-        },
-        getDropZoneProps: function getDropZoneProps() {
-          var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-          var onSuccess = _ref4.onSuccess,
-            onError = _ref4.onError,
-            _onDragOver = _ref4.onDragOver,
-            _onDrop = _ref4.onDrop,
-            rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
-          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
-            onDragOver: function onDragOver(e) {
-              e.preventDefault();
-              typeof _onDragOver === "function" && _onDragOver();
-            },
-            onDrop: async function onDrop(e) {
-              e.preventDefault();
-              typeof _onDrop === "function" && _onDrop();
-              _this3.onDropFilesHandler({
-                e: e,
-                onSuccess: onSuccess,
-                onError: onError
-              });
-            }
-          });
+    const errors = this.validateFiles(files);
+    if (errors.length) {
+      callbacks.onError && callbacks.onError(errors, files);
+    } else {
+      if (convertToBase64) {
+        for (let i = 0; i < files.length; i++) {
+          const file = files[i].src.file;
+          files[i].src.base64 = await readFileContent(file);
         }
-      }), /*#__PURE__*/_react.default.createElement("input", {
-        id: id || this.id,
-        ref: function ref(_ref5) {
-          if (_ref5) {
-            _this3.input = _ref5;
+      }
+      callbacks.onSuccess && callbacks.onSuccess(files);
+    }
+
+    // Reset the browseFiles arguments.
+    if (this.input) {
+      this.input.value = "";
+    }
+    this.browseFilesPassedParams = null;
+  };
+
+  /**
+   * Extracted into a separate method just for testing purposes.
+   */
+  onDropFilesHandler = async ({
+    e,
+    onSuccess,
+    onError
+  }) => {
+    this.browseFilesPassedParams = {
+      onSuccess,
+      onError
+    };
+    e.dataTransfer && e.dataTransfer.files && (await this.processSelectedFiles(e.dataTransfer.files));
+  };
+
+  /**
+   * Extracted into a separate method just for testing purposes.
+   */
+  browseFilesHandler = ({
+    onSuccess,
+    onError
+  }) => {
+    this.browseFilesPassedParams = {
+      onSuccess,
+      onError
+    };
+    this.input && this.input.click();
+  };
+  render() {
+    const {
+      multiple,
+      accept,
+      id
+    } = this.props;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children({
+      getLabelProps: props => {
+        return {
+          ...props,
+          htmlFor: id || this.id
+        };
+      },
+      validateFiles: this.validateFiles,
+      browseFiles: ({
+        onSuccess,
+        onError
+      } = {}) => {
+        this.browseFilesHandler({
+          onSuccess,
+          onError
+        });
+      },
+      getDropZoneProps: ({
+        onSuccess,
+        onError,
+        onDragOver,
+        onDrop,
+        ...rest
+      } = {}) => {
+        return {
+          ...rest,
+          onDragOver: e => {
+            e.preventDefault();
+            typeof onDragOver === "function" && onDragOver();
+          },
+          onDrop: async e => {
+            e.preventDefault();
+            typeof onDrop === "function" && onDrop();
+            this.onDropFilesHandler({
+              e,
+              onSuccess,
+              onError
+            });
           }
-        },
-        accept: accept.join(","),
-        style: {
-          display: "none"
-        },
-        type: "file",
-        multiple: multiple,
-        onChange: function onChange(e) {
-          return _this3.processSelectedFiles(e.target.files ?? []);
+        };
+      }
+    }), /*#__PURE__*/React.createElement("input", {
+      id: id || this.id,
+      ref: ref => {
+        if (ref) {
+          this.input = ref;
         }
-      }));
-    }
-  }]);
-}(_react.default.Component);
-(0, _defineProperty2.default)(Files, "defaultProps", {
-  accept: [],
-  multiple: false,
-  maxSize: "2mb",
-  multipleMaxSize: "10mb",
-  multipleMaxCount: null,
-  convertToBase64: false
-});
+      },
+      accept: accept.join(","),
+      style: {
+        display: "none"
+      },
+      type: "file",
+      multiple: multiple,
+      onChange: e => this.processSelectedFiles(e.target.files ?? [])
+    }));
+  }
+}
 
 //# sourceMappingURL=Files.js.map