@webiny/app 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/plugins/image.js

@@ -1,107 +1,86 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["transform", "srcSet"];
 import React from "react";
 import { Image } from "@webiny/ui/Image";
-var SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];
+const SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];
+
 /**
  * Width of the image should not be just any random number. For optimization reasons,
  * we only allow the ones listed in SUPPORTED_IMAGE_RESIZE_WIDTHS list (Webiny Cloud supports only these).
  */
-
-var getSupportedImageResizeWidth = function getSupportedImageResizeWidth(width) {
-  var output = SUPPORTED_IMAGE_RESIZE_WIDTHS[0];
-  var i = SUPPORTED_IMAGE_RESIZE_WIDTHS.length;
-
+const getSupportedImageResizeWidth = width => {
+  let output = SUPPORTED_IMAGE_RESIZE_WIDTHS[0];
+  let i = SUPPORTED_IMAGE_RESIZE_WIDTHS.length;
   while (i >= 0) {
     if (width === SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {
       output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];
       break;
     }
-
     if (width > SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {
       // Use next larger width. If there isn't any, use current.
       output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i + 1];
-
       if (!output) {
         output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];
       }
-
       break;
     }
-
     i--;
   }
-
   return output;
 };
 /**
  * Currently we only allow "width" as a transform option.
  * @param args
  */
-
-
-var sanitizeTransformArgs = function sanitizeTransformArgs(args) {
-  var output = {};
-
-  if (args) {
-    var width = parseInt(args.width);
-
-    if (width > 0) {
-      output.width = getSupportedImageResizeWidth(width);
-    }
+const sanitizeTransformArgs = args => {
+  const output = {};
+  if (!args || args.width === undefined || args.width === null) {
+    return output;
+  }
+  const width = parseInt(args.width);
+  if (width > 0) {
+    output.width = getSupportedImageResizeWidth(width);
   }
-
   return output;
 };
-
-var getSizes = function getSizes(width) {
+const getSizes = width => {
+  if (typeof width !== "string") {
+    return undefined;
+  }
   // Check if width was set as percentage, with "%" in the value.
-  if (typeof width === "string" && width.endsWith("%")) {
-    return "".concat(parseInt(width), "vw");
-  } // Check if width was set as viewport width, with "vw" in the value.
-
-
-  if (typeof width === "string" && width.endsWith("vw")) {
-    return "".concat(parseInt(width), "vw");
-  } // Check if width was set as relative, with "em" in the value.
-
-
-  if (typeof width === "string" && width.endsWith("em")) {
-    return "".concat(parseInt(width), "em");
+  if (width.endsWith("%")) {
+    return `${parseInt(width)}vw`;
+  }
+  // Check if width was set as viewport width, with "vw" in the value.
+  if (width.endsWith("vw")) {
+    return `${parseInt(width)}vw`;
   }
 
-  return null;
+  // Check if width was set as relative, with "em" in the value.
+  if (width.endsWith("em")) {
+    return `${parseInt(width)}em`;
+  }
+  return undefined;
 };
-
-var isFixedImageWidth = function isFixedImageWidth(width) {
+const isFixedImageWidth = width => {
   if (Number.isFinite(width)) {
     return true;
   }
-
   if (typeof width === "string" && width.endsWith("px")) {
     return true;
   }
-
   return false;
 };
-
-var getSrcSetAutoSizes = function getSrcSetAutoSizes(max) {
+const getSrcSetAutoSizes = max => {
   max = isFixedImageWidth(max) ? parseInt("" + max) : 2500;
-  var maxWidth = getSupportedImageResizeWidth(max);
-  return SUPPORTED_IMAGE_RESIZE_WIDTHS.filter(function (supportedWidth) {
+  const maxWidth = getSupportedImageResizeWidth(max);
+  return SUPPORTED_IMAGE_RESIZE_WIDTHS.filter(supportedWidth => {
     return supportedWidth <= maxWidth;
   });
 };
-
-var convertTransformToQueryParams = function convertTransformToQueryParams(transform) {
-  return Object.keys(transform).map(function (key) {
-    return "".concat(key, "=").concat(transform[key]);
-  }).join("&");
+const convertTransformToQueryParams = transform => {
+  return Object.keys(transform).map(key => `${key}=${transform[key]}`).join("&");
 };
-
-export default (function () {
-  var imagePlugin = {
+export default () => {
+  const imagePlugin = {
     name: "image-component",
     type: "image-component",
     presets: {
@@ -109,51 +88,50 @@ export default (function () {
         width: 300
       }
     },
-    getImageSrc: function getImageSrc(props) {
+    getImageSrc: props => {
       if (!props) {
         return "";
       }
-
-      var src = props.src,
-          transform = props.transform;
-
+      const {
+        src,
+        transform
+      } = props;
       if (!transform) {
         return src;
       }
-
       if (!src || src.startsWith("data:") || src.endsWith("svg")) {
         return src;
       }
-
-      var params = sanitizeTransformArgs(transform);
-      params = convertTransformToQueryParams(params);
+      const sanitizedParams = sanitizeTransformArgs(transform);
+      const params = convertTransformToQueryParams(sanitizedParams);
       return src + "?" + params;
     },
-    render: function render(props) {
-      var transform = props.transform,
-          srcSetInitial = props.srcSet,
-          imageProps = _objectWithoutProperties(props, _excluded);
-
-      var srcSet = srcSetInitial;
-      var sizes;
-      var src = imageProps.src;
-
+    render(props) {
+      const {
+        transform,
+        srcSet: srcSetInitial,
+        ...imageProps
+      } = props;
+      let srcSet = srcSetInitial;
+      let sizes;
+      const src = imageProps.src;
       if (srcSet && srcSet === "auto") {
-        srcSet = {}; // Check if image width was forced, and additionally if width was set as pixels, with "px" in the value.
+        srcSet = {};
 
-        var forcedWidth = props.width || props.style && props.style.width;
-        var srcSetAutoWidths = getSrcSetAutoSizes(forcedWidth);
-        srcSetAutoWidths.forEach(function (width) {
+        // Check if image width was forced, and additionally if width was set as pixels, with "px" in the value.
+        const forcedWidth = props.width || props.style && props.style.width;
+        const srcSetAutoWidths = getSrcSetAutoSizes(forcedWidth);
+        srcSetAutoWidths.forEach(width => {
           srcSet[width + "w"] = imagePlugin.getImageSrc({
-            src: src,
-            transform: _objectSpread(_objectSpread({}, transform), {}, {
-              width: width
-            })
+            src,
+            transform: {
+              ...transform,
+              width
+            }
           });
         });
         sizes = getSizes(forcedWidth);
       }
-
       return /*#__PURE__*/React.createElement(Image, Object.assign({}, imageProps, {
         srcSet: srcSet,
         src: src,
@@ -162,4 +140,6 @@ export default (function () {
     }
   };
   return imagePlugin;
-});
+};
+
+//# sourceMappingURL=image.js.map

package/plugins/image.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","SUPPORTED_IMAGE_RESIZE_WIDTHS","getSupportedImageResizeWidth","width","output","i","length","sanitizeTransformArgs","args","undefined","parseInt","getSizes","endsWith","isFixedImageWidth","Number","isFinite","getSrcSetAutoSizes","max","maxWidth","filter","supportedWidth","convertTransformToQueryParams","transform","Object","keys","map","key","join","imagePlugin","name","type","presets","avatar","getImageSrc","props","src","startsWith","sanitizedParams","params","render","srcSet","srcSetInitial","imageProps","sizes","forcedWidth","style","srcSetAutoWidths","forEach","createElement","assign"],"sources":["image.tsx"],"sourcesContent":["import React from \"react\";\nimport { Image } from \"@webiny/ui/Image\";\nimport type { ImageComponentPlugin } from \"~/types\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];\n\n/**\n * Width of the image should not be just any random number. For optimization reasons,\n * we only allow the ones listed in SUPPORTED_IMAGE_RESIZE_WIDTHS list (Webiny Cloud supports only these).\n */\nconst getSupportedImageResizeWidth = (width: number) => {\n    let output = SUPPORTED_IMAGE_RESIZE_WIDTHS[0];\n    let i = SUPPORTED_IMAGE_RESIZE_WIDTHS.length;\n    while (i >= 0) {\n        if (width === SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {\n            output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            break;\n        }\n\n        if (width > SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {\n            // Use next larger width. If there isn't any, use current.\n            output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i + 1];\n            if (!output) {\n                output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            }\n            break;\n        }\n\n        i--;\n    }\n\n    return output;\n};\n\ninterface SanitizeTransformArgsParams {\n    width?: string;\n}\ninterface SanitizeTransformArgsResult {\n    width?: number;\n}\n/**\n * Currently we only allow \"width\" as a transform option.\n * @param args\n */\nconst sanitizeTransformArgs = (args?: SanitizeTransformArgsParams): SanitizeTransformArgsResult => {\n    const output: SanitizeTransformArgsResult = {};\n    if (!args || args.width === undefined || args.width === null) {\n        return output;\n    }\n    const width = parseInt(args.width);\n    if (width > 0) {\n        output.width = getSupportedImageResizeWidth(width);\n    }\n\n    return output;\n};\n\nconst getSizes = (width?: string | number): string | undefined => {\n    if (typeof width !== \"string\") {\n        return undefined;\n    }\n    // Check if width was set as percentage, with \"%\" in the value.\n    if (width.endsWith(\"%\")) {\n        return `${parseInt(width)}vw`;\n    }\n    // Check if width was set as viewport width, with \"vw\" in the value.\n    if (width.endsWith(\"vw\")) {\n        return `${parseInt(width)}vw`;\n    }\n\n    // Check if width was set as relative, with \"em\" in the value.\n    if (width.endsWith(\"em\")) {\n        return `${parseInt(width)}em`;\n    }\n\n    return undefined;\n};\n\nconst isFixedImageWidth = (width?: number | string) => {\n    if (Number.isFinite(width)) {\n        return true;\n    }\n\n    if (typeof width === \"string\" && width.endsWith(\"px\")) {\n        return true;\n    }\n    return false;\n};\n\nconst getSrcSetAutoSizes = (max?: string | number) => {\n    max = isFixedImageWidth(max) ? parseInt(\"\" + max) : 2500;\n    const maxWidth = getSupportedImageResizeWidth(max);\n    return SUPPORTED_IMAGE_RESIZE_WIDTHS.filter((supportedWidth: number) => {\n        return supportedWidth <= maxWidth;\n    });\n};\n\nconst convertTransformToQueryParams = (transform: Record<string, any>): string => {\n    return Object.keys(transform)\n        .map(key => `${key}=${transform[key]}`)\n        .join(\"&\");\n};\n\nexport default () => {\n    const imagePlugin: ImageComponentPlugin = {\n        name: \"image-component\",\n        type: \"image-component\",\n        presets: {\n            avatar: { width: 300 }\n        },\n        getImageSrc: (props?: Record<string, any>) => {\n            if (!props) {\n                return \"\";\n            }\n\n            const { src, transform } = props;\n            if (!transform) {\n                return src;\n            }\n\n            if (!src || src.startsWith(\"data:\") || src.endsWith(\"svg\")) {\n                return src;\n            }\n\n            const sanitizedParams = sanitizeTransformArgs(transform);\n            const params = convertTransformToQueryParams(sanitizedParams);\n            return src + \"?\" + params;\n        },\n        render(props) {\n            const { transform, srcSet: srcSetInitial, ...imageProps } = props;\n            let srcSet: any = srcSetInitial;\n            let sizes: string | undefined;\n            const src = imageProps.src;\n            if (srcSet && srcSet === \"auto\") {\n                srcSet = {};\n\n                // Check if image width was forced, and additionally if width was set as pixels, with \"px\" in the value.\n                const forcedWidth = props.width || (props.style && props.style.width);\n                const srcSetAutoWidths = getSrcSetAutoSizes(forcedWidth);\n                srcSetAutoWidths.forEach(width => {\n                    srcSet[width + \"w\"] = imagePlugin.getImageSrc({\n                        src,\n                        transform: { ...transform, width }\n                    });\n                });\n                sizes = getSizes(forcedWidth);\n            }\n\n            return <Image {...imageProps} srcSet={srcSet} src={src} sizes={sizes} />;\n        }\n    };\n\n    return imagePlugin;\n};\n"],"mappings":"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","ignoreList":[]}

package/plugins/index.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
-import { Plugin } from "@webiny/plugins/types";
+import type { ReactNode } from "react";
+import type { Plugin } from "@webiny/plugins/types";
 import imagePlugin from "./image";
 export { imagePlugin };
-declare type RenderPluginOptions<T> = {
+type RenderPluginOptions<T> = {
     wrapper?: boolean;
     fn?: string;
     filter?: (value: T, index: number, array: T[]) => boolean;

package/plugins/index.js

@@ -3,71 +3,64 @@ import warning from "warning";
 import { plugins } from "@webiny/plugins";
 import imagePlugin from "./image";
 export { imagePlugin };
-
-var PluginComponent = function PluginComponent(props) {
+const PluginComponent = props => {
   return props.children;
 };
-
-var PluginsComponent = function PluginsComponent(props) {
+const PluginsComponent = props => {
   return props.children;
 };
-
-export var renderPlugin = function renderPlugin(name) {
-  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _options$wrapper = options.wrapper,
-      wrapper = _options$wrapper === void 0 ? true : _options$wrapper,
-      _options$fn = options.fn,
-      fn = _options$fn === void 0 ? "render" : _options$fn;
-  var plugin = plugins.byName(name);
-  warning(plugin, "No such plugin \"".concat(name, "\""));
-
+export const renderPlugin = (name, params = {}, options = {}) => {
+  const {
+    wrapper = true,
+    fn = "render"
+  } = options;
+  const plugin = plugins.byName(name);
+  warning(plugin, `No such plugin "${name}"`);
   if (!plugin) {
     return null;
   }
-
-  var content = plugin[fn](params);
-
+  const content = plugin[fn](params);
   if (content) {
     return wrapper ? /*#__PURE__*/React.createElement(PluginComponent, {
       key: plugin.name,
       name: name,
       params: params,
       fn: fn
-    }, content) : /*#__PURE__*/React.cloneElement(content, {
+    }, content) : (/*#__PURE__*/React.cloneElement(content, {
       key: plugin.name
-    });
+    }));
   }
-
   return null;
 };
-export var renderPlugins = function renderPlugins(type) {
-  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _options$wrapper2 = options.wrapper,
-      wrapper = _options$wrapper2 === void 0 ? true : _options$wrapper2,
-      _options$fn2 = options.fn,
-      fn = _options$fn2 === void 0 ? "render" : _options$fn2,
-      _options$filter = options.filter,
-      filter = _options$filter === void 0 ? function (v) {
-    return v;
-  } : _options$filter,
-      reverse = options.reverse;
-  var content = plugins.byType(type).filter(filter).map(function (plugin) {
-    return renderPlugin(plugin.name, params, {
-      wrapper: wrapper,
-      fn: fn
-    });
-  }).filter(Boolean);
-
+export const renderPlugins = (type, params = {}, options = {}) => {
+  const {
+    wrapper = true,
+    fn = "render",
+    filter = v => v,
+    reverse
+  } = options;
+  const content = plugins.byType(type).filter(pl => {
+    /**
+     * TODO @ts-refactor Problem with possibility of a different subtype.
+     */
+    // @ts-expect-error
+    return filter(pl);
+  })
+  /**
+   * We cast as string because renderPlugin checks for the plugin.name
+   */.map(plugin => renderPlugin(plugin.name, params, {
+    wrapper,
+    fn
+  })).filter(Boolean);
   if (reverse) {
     content.reverse();
   }
-
   return wrapper ? /*#__PURE__*/React.createElement(PluginsComponent, {
     type: type,
     params: params,
     fn: fn
   }, content) : content;
 };
-export default [imagePlugin];
+export default [imagePlugin];
+
+//# sourceMappingURL=index.js.map

package/plugins/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","warning","plugins","imagePlugin","PluginComponent","props","children","PluginsComponent","renderPlugin","name","params","options","wrapper","fn","plugin","byName","content","createElement","key","cloneElement","renderPlugins","type","filter","v","reverse","byType","pl","map","Boolean"],"sources":["index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\nimport warning from \"warning\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { Plugin } from \"@webiny/plugins/types\";\nimport imagePlugin from \"./image\";\n\nexport { imagePlugin };\n\ntype RenderPluginOptions<T> = {\n    wrapper?: boolean;\n    fn?: string;\n    filter?: (value: T, index: number, array: T[]) => boolean;\n    reverse?: boolean;\n};\n\ninterface RenderPlugin {\n    <T extends Plugin = Plugin>(name: string, params?: any, options?: RenderPluginOptions<T>):\n        | ReactNode\n        | ReactNode[];\n}\n\ninterface RenderPlugins {\n    <T extends Plugin = Plugin>(type: string, params?: any, options?: RenderPluginOptions<T>):\n        | ReactNode\n        | ReactNode[];\n}\n\ninterface PluginComponentProps {\n    name: string;\n    params: Record<string, any>;\n    fn: string;\n    children: React.ReactNode;\n}\nconst PluginComponent = (props: PluginComponentProps) => {\n    return props.children as React.ReactElement;\n};\ninterface PluginsComponentProps {\n    type: string;\n    params: Record<string, any>;\n    fn: string;\n    children: React.ReactNode;\n}\nconst PluginsComponent = (props: PluginsComponentProps) => {\n    return props.children as React.ReactElement;\n};\n\nexport const renderPlugin: RenderPlugin = (name, params = {}, options = {}) => {\n    const { wrapper = true, fn = \"render\" } = options;\n\n    const plugin = plugins.byName(name);\n    warning(plugin, `No such plugin \"${name}\"`);\n\n    if (!plugin) {\n        return null;\n    }\n\n    const content = plugin[fn](params);\n    if (content) {\n        return wrapper ? (\n            <PluginComponent key={plugin.name} name={name} params={params} fn={fn}>\n                {content}\n            </PluginComponent>\n        ) : (\n            React.cloneElement(content, { key: plugin.name })\n        );\n    }\n    return null;\n};\n\nexport const renderPlugins: RenderPlugins = (type, params = {}, options = {}) => {\n    const { wrapper = true, fn = \"render\", filter = v => v, reverse } = options;\n\n    const content = plugins\n        .byType(type)\n        .filter(pl => {\n            /**\n             * TODO @ts-refactor Problem with possibility of a different subtype.\n             */\n            // @ts-expect-error\n            return filter(pl);\n        })\n        /**\n         * We cast as string because renderPlugin checks for the plugin.name\n         */\n        .map(plugin => renderPlugin(plugin.name as string, params, { wrapper, fn }))\n        .filter(Boolean);\n\n    if (reverse) {\n        content.reverse();\n    }\n\n    return wrapper ? (\n        <PluginsComponent type={type} params={params} fn={fn}>\n            {content}\n        </PluginsComponent>\n    ) : (\n        content\n    );\n};\n\nexport default [imagePlugin];\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,SAAS;AAC7B,SAASC,OAAO,QAAQ,iBAAiB;AAEzC,OAAOC,WAAW;AAElB,SAASA,WAAW;AA2BpB,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EACrD,OAAOA,KAAK,CAACC,QAAQ;AACzB,CAAC;AAOD,MAAMC,gBAAgB,GAAIF,KAA4B,IAAK;EACvD,OAAOA,KAAK,CAACC,QAAQ;AACzB,CAAC;AAED,OAAO,MAAME,YAA0B,GAAGA,CAACC,IAAI,EAAEC,MAAM,GAAG,CAAC,CAAC,EAAEC,OAAO,GAAG,CAAC,CAAC,KAAK;EAC3E,MAAM;IAAEC,OAAO,GAAG,IAAI;IAAEC,EAAE,GAAG;EAAS,CAAC,GAAGF,OAAO;EAEjD,MAAMG,MAAM,GAAGZ,OAAO,CAACa,MAAM,CAACN,IAAI,CAAC;EACnCR,OAAO,CAACa,MAAM,EAAE,mBAAmBL,IAAI,GAAG,CAAC;EAE3C,IAAI,CAACK,MAAM,EAAE;IACT,OAAO,IAAI;EACf;EAEA,MAAME,OAAO,GAAGF,MAAM,CAACD,EAAE,CAAC,CAACH,MAAM,CAAC;EAClC,IAAIM,OAAO,EAAE;IACT,OAAOJ,OAAO,gBACVZ,KAAA,CAAAiB,aAAA,CAACb,eAAe;MAACc,GAAG,EAAEJ,MAAM,CAACL,IAAK;MAACA,IAAI,EAAEA,IAAK;MAACC,MAAM,EAAEA,MAAO;MAACG,EAAE,EAAEA;IAAG,GACjEG,OACY,CAAC,iBAElBhB,KAAK,CAACmB,YAAY,CAACH,OAAO,EAAE;MAAEE,GAAG,EAAEJ,MAAM,CAACL;IAAK,CAAC,CAAC,CACpD;EACL;EACA,OAAO,IAAI;AACf,CAAC;AAED,OAAO,MAAMW,aAA4B,GAAGA,CAACC,IAAI,EAAEX,MAAM,GAAG,CAAC,CAAC,EAAEC,OAAO,GAAG,CAAC,CAAC,KAAK;EAC7E,MAAM;IAAEC,OAAO,GAAG,IAAI;IAAEC,EAAE,GAAG,QAAQ;IAAES,MAAM,GAAGC,CAAC,IAAIA,CAAC;IAAEC;EAAQ,CAAC,GAAGb,OAAO;EAE3E,MAAMK,OAAO,GAAGd,OAAO,CAClBuB,MAAM,CAACJ,IAAI,CAAC,CACZC,MAAM,CAACI,EAAE,IAAI;IACV;AACZ;AACA;IACY;IACA,OAAOJ,MAAM,CAACI,EAAE,CAAC;EACrB,CAAC;EACD;AACR;AACA,KAFQ,CAGCC,GAAG,CAACb,MAAM,IAAIN,YAAY,CAACM,MAAM,CAACL,IAAI,EAAYC,MAAM,EAAE;IAAEE,OAAO;IAAEC;EAAG,CAAC,CAAC,CAAC,CAC3ES,MAAM,CAACM,OAAO,CAAC;EAEpB,IAAIJ,OAAO,EAAE;IACTR,OAAO,CAACQ,OAAO,CAAC,CAAC;EACrB;EAEA,OAAOZ,OAAO,gBACVZ,KAAA,CAAAiB,aAAA,CAACV,gBAAgB;IAACc,IAAI,EAAEA,IAAK;IAACX,MAAM,EAAEA,MAAO;IAACG,EAAE,EAAEA;EAAG,GAChDG,OACa,CAAC,GAEnBA,OACH;AACL,CAAC;AAED,eAAe,CAACb,WAAW,CAAC","ignoreList":[]}

package/react-butterfiles/Files.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+export type SelectedFile = {
+    id: string;
+    name: string;
+    type: string;
+    size: number;
+    src: {
+        file: File;
+        base64: string | null;
+    };
+};
+export type FileError = {
+    id: string;
+    type: "unsupportedFileType" | "maxSizeExceeded" | "multipleMaxSizeExceeded" | "multipleMaxCountExceeded" | "multipleNotAllowed";
+    index?: number;
+    file?: SelectedFile | File;
+    multipleFileSize?: number;
+    multipleMaxSize?: number;
+    multipleMaxCount?: number;
+    multipleCount?: number;
+};
+export type BrowseFilesParams = {
+    onSuccess?: (files: SelectedFile[]) => void;
+    onError?: (errors: FileError[], files: SelectedFile[]) => void;
+};
+export type RenderPropParams = {
+    browseFiles: (params: BrowseFilesParams) => void;
+    getDropZoneProps: (additionalProps: any) => any;
+    getLabelProps: (additionalProps: any) => any;
+    validateFiles: (files: SelectedFile[] | File[]) => FileError[];
+};
+export type FilesRules = {
+    accept: string[];
+    multiple: boolean;
+    maxSize: string;
+    multipleMaxSize: string;
+    multipleMaxCount: number | null;
+    convertToBase64: boolean;
+    onSuccess?: (files: SelectedFile[]) => void;
+    onError?: (errors: FileError[], files: SelectedFile[]) => void;
+};
+export type Props = FilesRules & {
+    children: (params: RenderPropParams) => React.ReactNode;
+    id?: string;
+};
+export declare class Files extends React.Component<Props> {
+    static defaultProps: {
+        accept: never[];
+        multiple: boolean;
+        maxSize: string;
+        multipleMaxSize: string;
+        multipleMaxCount: null;
+        convertToBase64: boolean;
+    };
+    input: HTMLInputElement | null;
+    browseFilesPassedParams: BrowseFilesParams | null;
+    id: string;
+    validateFiles: (files: SelectedFile[] | File[]) => FileError[];
+    processSelectedFiles: (eventFiles: Array<File>) => Promise<void>;
+    /**
+     * Extracted into a separate method just for testing purposes.
+     */
+    onDropFilesHandler: ({ e, onSuccess, onError }: any) => Promise<void>;
+    /**
+     * Extracted into a separate method just for testing purposes.
+     */
+    browseFilesHandler: ({ onSuccess, onError }: any) => void;
+    render(): React.JSX.Element;
+}

package/react-butterfiles/Files.js

@@ -0,0 +1,227 @@
+import React from "react";
+import bytes from "bytes";
+import minimatch from "minimatch";
+import { readFileContent } from "./utils/readFileContent";
+import { generateId } from "./utils/generateId";
+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;
+    }
+    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: generateId(),
+          index,
+          file,
+          type: "unsupportedFileType"
+        });
+      } else if (maxSize) {
+        const sizeAsBytes = bytes(maxSize);
+        if (sizeAsBytes && file.size > sizeAsBytes) {
+          errors.push({
+            id: generateId(),
+            index,
+            file,
+            type: "maxSizeExceeded"
+          });
+        }
+      }
+      if (multiple) {
+        multipleFileSize += file.size;
+      }
+    }
+    if (multiple) {
+      const maxMultipleMaxSize = bytes(multipleMaxSize);
+      if (maxMultipleMaxSize && multipleMaxSize && multipleFileSize > maxMultipleMaxSize) {
+        errors.push({
+          id: generateId(),
+          type: "multipleMaxSizeExceeded",
+          multipleFileSize,
+          multipleMaxSize: maxMultipleMaxSize
+        });
+      }
+      if (multipleMaxCount && files.length > multipleMaxCount) {
+        errors.push({
+          id: generateId(),
+          type: "multipleMaxCountExceeded",
+          multipleCount: files.length,
+          multipleMaxCount
+        });
+      }
+    }
+    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
+        }
+      };
+    });
+    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);
+        }
+      }
+      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
+            });
+          }
+        };
+      }
+    }), /*#__PURE__*/React.createElement("input", {
+      id: id || this.id,
+      ref: ref => {
+        if (ref) {
+          this.input = ref;
+        }
+      },
+      accept: accept.join(","),
+      style: {
+        display: "none"
+      },
+      type: "file",
+      multiple: multiple,
+      onChange: e => this.processSelectedFiles(e.target.files ?? [])
+    }));
+  }
+}
+
+//# sourceMappingURL=Files.js.map