@bigbinary/neeto-image-uploader-frontend 2.3.6 → 2.3.8

package/dist/{ImageWithFallback-edf8eba8.js → ImageWithFallback-1ddf3f25.js}

@@ -5,6 +5,7 @@ var classnames = require('classnames');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Button = require('@bigbinary/neetoui/Button');
 var Typography = require('@bigbinary/neetoui/Typography');
+var ProgressBar = require('@bigbinary/neetoui/ProgressBar');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var utils = require('./utils-ede1695e.js');
@@ -19,6 +20,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var ProgressBar__default = /*#__PURE__*/_interopDefaultLegacy(ProgressBar);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
@@ -28,26 +30,6 @@ var getAllowedTypes = function getAllowedTypes(uploadConfig) {
   }), ramda.map(ramda.toUpper), ramda.join(", "))(uploadConfig.allowedImageTypes);
 };
 
-var ProgressBar = function ProgressBar(_ref) {
-  var _ref$progressPercenta = _ref.progressPercentage,
-    progressPercentage = _ref$progressPercenta === void 0 ? 0 : _ref$progressPercenta,
-    progressValue = _ref.progressValue;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "neeto-ui-border-primary-600 hover:neeto-ui-bg-gray-100 neeto-ui-rounded-lg flex h-full cursor-pointer items-center justify-center gap-3 border border-dashed p-5 transition-all duration-300 ease-in-out",
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-full w-full overflow-hidden dark:bg-gray-700",
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "neeto-ui-bg-primary-600 text-2xs neeto-ui-text-primary-100 neeto-ui-rounded-full flex h-3 animate-pulse items-center justify-center font-medium leading-none transition-all duration-300 ease-in-out",
-        "data-cy": "neeto-image-uploader-progress-bar",
-        style: {
-          width: "".concat(progressPercentage, "%")
-        },
-        children: progressValue
-      })
-    })
-  });
-};
-
 function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageDirectUpload = function ImageDirectUpload(_ref) {
@@ -67,15 +49,15 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
     isDragActive = _useUploadDropzone.isDragActive,
     uploadProgress = _useUploadDropzone.uploadProgress;
   var shouldShowProgress = !!(uploadProgress && !ramda.equals(uploadProgress, 1));
-  return shouldShowProgress ? /*#__PURE__*/jsxRuntime.jsx(ProgressBar, {
-    progressPercentage: uploadProgress,
-    progressValue: "".concat(uploadProgress, "%")
-  }) : /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$2(_objectSpread$2({}, getRootProps()), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$2(_objectSpread$2({}, getRootProps()), {}, {
     className: classnames__default["default"](utils.DROPZONE_ROOT_DIV_CLASSNAME, {
       "neeto-ui-border-gray-300": !isDragActive,
       "neeto-ui-border-gray-700": isDragActive
     }),
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: shouldShowProgress ? /*#__PURE__*/jsxRuntime.jsx(ProgressBar__default["default"], {
+      progressPercentage: uploadProgress,
+      progressValue: "".concat(uploadProgress, "%")
+    }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col space-y-1",
       children: [!isDisabled && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
         className: "neeto-ui-text-gray-800 text-center leading-4",
@@ -169,4 +151,4 @@ var ImageWithFallback = function ImageWithFallback(_ref) {
 
 exports.ImageDirectUpload = ImageDirectUpload;
 exports.ImageWithFallback = ImageWithFallback;
-//# sourceMappingURL=ImageWithFallback-edf8eba8.js.map
+//# sourceMappingURL=ImageWithFallback-1ddf3f25.js.map

package/dist/ImageWithFallback-1ddf3f25.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWithFallback-1ddf3f25.js","sources":["../app/javascript/src/components/ImageUploader/utils.js","../app/javascript/src/components/common/ImageDirectUpload.jsx","../app/javascript/src/components/common/ImagePlaceholder.jsx","../app/javascript/src/components/common/ImageWithFallback.jsx"],"sourcesContent":["import { flatten, pipe, join, map, toUpper, values } from \"ramda\";\n\nexport const getAllowedTypes = uploadConfig =>\n  pipe(\n    values,\n    flatten,\n    map(extension => extension.slice(1)),\n    map(toUpper),\n    join(\", \")\n  )(uploadConfig.allowedImageTypes);\n","import classnames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { Button, Typography, ProgressBar } from \"neetoui\";\nimport { equals } from \"ramda\";\nimport { Trans } from \"react-i18next\";\n\nimport { DEFAULT_UPLOAD_CONFIG } from \"components/ImageUploader/constants\";\nimport { getAllowedTypes } from \"components/ImageUploader/utils\";\nimport useUploadDropzone from \"hooks/useUploadDropzone\";\n\nimport { DROPZONE_ROOT_DIV_CLASSNAME } from \"./constants\";\n\nconst ImageDirectUpload = ({\n  uploadConfig = DEFAULT_UPLOAD_CONFIG,\n  onDrop = noop,\n  isDisabled = false,\n  setIsAssetLibraryOpen,\n}) => {\n  const { getRootProps, getInputProps, isDragActive, uploadProgress } =\n    useUploadDropzone({ uploadConfig, onDrop });\n\n  const shouldShowProgress = !!(uploadProgress && !equals(uploadProgress, 1));\n\n  return (\n    <div\n      {...getRootProps()}\n      className={classnames(DROPZONE_ROOT_DIV_CLASSNAME, {\n        \"neeto-ui-border-gray-300\": !isDragActive,\n        \"neeto-ui-border-gray-700\": isDragActive,\n      })}\n    >\n      {shouldShowProgress ? (\n        <ProgressBar\n          progressPercentage={uploadProgress}\n          progressValue={`${uploadProgress}%`}\n        />\n      ) : (\n        <div className=\"flex flex-col space-y-1\">\n          {!isDisabled && (\n            <Typography\n              className=\"neeto-ui-text-gray-800 text-center leading-4\"\n              style=\"body2\"\n            >\n              <Trans\n                i18nKey=\"neetoImageUploader.imageUpload.dragAndDropOrBrowseFile\"\n                components={{\n                  span: (\n                    <Button\n                      data-cy=\"neeto-image-uploader-browse-text\"\n                      style=\"link\"\n                    />\n                  ),\n                }}\n              />\n            </Typography>\n          )}\n          {setIsAssetLibraryOpen && (\n            <Typography\n              className=\"text-center leading-4\"\n              style=\"body2\"\n              onClick={e => {\n                e.stopPropagation();\n                setIsAssetLibraryOpen(true);\n              }}\n            >\n              <Trans\n                i18nKey=\"neetoImageUploader.imageUpload.selectImagefromImageLibrary\"\n                components={{\n                  span: (\n                    <Button data-cy=\"open-asset-library-button\" style=\"link\" />\n                  ),\n                }}\n              />\n            </Typography>\n          )}\n          <input\n            {...getInputProps()}\n            data-cy=\"neeto-image-uploader-file-input\"\n            disabled={isDisabled}\n          />\n          <Typography\n            className=\"neeto-ui-text-gray-700 text-center leading-4\"\n            data-cy=\"neeto-image-uploader-restriction-message\"\n            lineHeight=\"snug\"\n            style=\"nano\"\n          >\n            <Trans\n              i18nKey=\"neetoImageUploader.imageUpload.restrictionMessage\"\n              values={{\n                fileTypes: getAllowedTypes(uploadConfig),\n                size: uploadConfig?.maxImageSize,\n              }}\n            />\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ImageDirectUpload;\n","import classnames from \"classnames\";\n\nconst ImagePlaceholder = ({ className = \"\", ...props }) => (\n  <div\n    className={classnames(\"neeto-ui-bg-gray-200\", {\n      [className]: className,\n    })}\n    {...props}\n  />\n);\n\nexport default ImagePlaceholder;\n","import { useEffect, useState } from \"react\";\n\nimport ImagePlaceholder from \"./ImagePlaceholder\";\n\nconst ImageWithFallback = ({\n  src,\n  className = \"h-full w-full\",\n  fallback: Fallback = ImagePlaceholder,\n  ...props\n}) => {\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  useEffect(() => {\n    const img = new Image();\n    img.onload = () => {\n      setIsLoaded(true);\n    };\n    img.src = src;\n  }, [src]);\n\n  return isLoaded ? (\n    <img {...{ src, ...props }} className=\"h-full w-auto object-contain\" />\n  ) : (\n    <Fallback {...{ className, ...props }} />\n  );\n};\n\nexport default ImageWithFallback;\n"],"names":["getAllowedTypes","uploadConfig","pipe","values","flatten","map","extension","slice","toUpper","join","allowedImageTypes","ImageDirectUpload","_ref","_ref$uploadConfig","DEFAULT_UPLOAD_CONFIG","_ref$onDrop","onDrop","noop","_ref$isDisabled","isDisabled","setIsAssetLibraryOpen","_useUploadDropzone","useUploadDropzone","getRootProps","getInputProps","isDragActive","uploadProgress","shouldShowProgress","equals","_jsx","_objectSpread","className","classnames","DROPZONE_ROOT_DIV_CLASSNAME","children","ProgressBar","progressPercentage","progressValue","concat","_jsxs","Typography","style","Trans","i18nKey","components","span","Button","onClick","e","stopPropagation","disabled","lineHeight","fileTypes","size","maxImageSize","ImagePlaceholder","_ref$className","props","_objectWithoutProperties","_excluded","_defineProperty","ImageWithFallback","src","_ref$fallback","fallback","Fallback","_useState","useState","_useState2","_slicedToArray","isLoaded","setIsLoaded","useEffect","img","Image","onload"],"mappings":"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"}

package/dist/{ImageWithFallback-8d240931.js → ImageWithFallback-933ea4b1.js}

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import { noop } from '@bigbinary/neeto-cist';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
+import ProgressBar from '@bigbinary/neetoui/ProgressBar';
 import { pipe, values, flatten, map, toUpper, join, equals } from 'ramda';
 import { Trans } from 'react-i18next';
 import { u as useUploadDropzone, p as DROPZONE_ROOT_DIV_CLASSNAME, j as DEFAULT_UPLOAD_CONFIG } from './utils-fa0fa918.js';
@@ -17,26 +18,6 @@ var getAllowedTypes = function getAllowedTypes(uploadConfig) {
   }), map(toUpper), join(", "))(uploadConfig.allowedImageTypes);
 };
 
-var ProgressBar = function ProgressBar(_ref) {
-  var _ref$progressPercenta = _ref.progressPercentage,
-    progressPercentage = _ref$progressPercenta === void 0 ? 0 : _ref$progressPercenta,
-    progressValue = _ref.progressValue;
-  return /*#__PURE__*/jsx("div", {
-    className: "neeto-ui-border-primary-600 hover:neeto-ui-bg-gray-100 neeto-ui-rounded-lg flex h-full cursor-pointer items-center justify-center gap-3 border border-dashed p-5 transition-all duration-300 ease-in-out",
-    children: /*#__PURE__*/jsx("div", {
-      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-full w-full overflow-hidden dark:bg-gray-700",
-      children: /*#__PURE__*/jsx("div", {
-        className: "neeto-ui-bg-primary-600 text-2xs neeto-ui-text-primary-100 neeto-ui-rounded-full flex h-3 animate-pulse items-center justify-center font-medium leading-none transition-all duration-300 ease-in-out",
-        "data-cy": "neeto-image-uploader-progress-bar",
-        style: {
-          width: "".concat(progressPercentage, "%")
-        },
-        children: progressValue
-      })
-    })
-  });
-};
-
 function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageDirectUpload = function ImageDirectUpload(_ref) {
@@ -56,15 +37,15 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
     isDragActive = _useUploadDropzone.isDragActive,
     uploadProgress = _useUploadDropzone.uploadProgress;
   var shouldShowProgress = !!(uploadProgress && !equals(uploadProgress, 1));
-  return shouldShowProgress ? /*#__PURE__*/jsx(ProgressBar, {
-    progressPercentage: uploadProgress,
-    progressValue: "".concat(uploadProgress, "%")
-  }) : /*#__PURE__*/jsx("div", _objectSpread$2(_objectSpread$2({}, getRootProps()), {}, {
+  return /*#__PURE__*/jsx("div", _objectSpread$2(_objectSpread$2({}, getRootProps()), {}, {
     className: classnames(DROPZONE_ROOT_DIV_CLASSNAME, {
       "neeto-ui-border-gray-300": !isDragActive,
       "neeto-ui-border-gray-700": isDragActive
     }),
-    children: /*#__PURE__*/jsxs("div", {
+    children: shouldShowProgress ? /*#__PURE__*/jsx(ProgressBar, {
+      progressPercentage: uploadProgress,
+      progressValue: "".concat(uploadProgress, "%")
+    }) : /*#__PURE__*/jsxs("div", {
       className: "flex flex-col space-y-1",
       children: [!isDisabled && /*#__PURE__*/jsx(Typography, {
         className: "neeto-ui-text-gray-800 text-center leading-4",
@@ -157,4 +138,4 @@ var ImageWithFallback = function ImageWithFallback(_ref) {
 };
 
 export { ImageWithFallback as I, ImageDirectUpload as a };
-//# sourceMappingURL=ImageWithFallback-8d240931.js.map
+//# sourceMappingURL=ImageWithFallback-933ea4b1.js.map

package/dist/ImageWithFallback-933ea4b1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWithFallback-933ea4b1.js","sources":["../app/javascript/src/components/ImageUploader/utils.js","../app/javascript/src/components/common/ImageDirectUpload.jsx","../app/javascript/src/components/common/ImagePlaceholder.jsx","../app/javascript/src/components/common/ImageWithFallback.jsx"],"sourcesContent":["import { flatten, pipe, join, map, toUpper, values } from \"ramda\";\n\nexport const getAllowedTypes = uploadConfig =>\n  pipe(\n    values,\n    flatten,\n    map(extension => extension.slice(1)),\n    map(toUpper),\n    join(\", \")\n  )(uploadConfig.allowedImageTypes);\n","import classnames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { Button, Typography, ProgressBar } from \"neetoui\";\nimport { equals } from \"ramda\";\nimport { Trans } from \"react-i18next\";\n\nimport { DEFAULT_UPLOAD_CONFIG } from \"components/ImageUploader/constants\";\nimport { getAllowedTypes } from \"components/ImageUploader/utils\";\nimport useUploadDropzone from \"hooks/useUploadDropzone\";\n\nimport { DROPZONE_ROOT_DIV_CLASSNAME } from \"./constants\";\n\nconst ImageDirectUpload = ({\n  uploadConfig = DEFAULT_UPLOAD_CONFIG,\n  onDrop = noop,\n  isDisabled = false,\n  setIsAssetLibraryOpen,\n}) => {\n  const { getRootProps, getInputProps, isDragActive, uploadProgress } =\n    useUploadDropzone({ uploadConfig, onDrop });\n\n  const shouldShowProgress = !!(uploadProgress && !equals(uploadProgress, 1));\n\n  return (\n    <div\n      {...getRootProps()}\n      className={classnames(DROPZONE_ROOT_DIV_CLASSNAME, {\n        \"neeto-ui-border-gray-300\": !isDragActive,\n        \"neeto-ui-border-gray-700\": isDragActive,\n      })}\n    >\n      {shouldShowProgress ? (\n        <ProgressBar\n          progressPercentage={uploadProgress}\n          progressValue={`${uploadProgress}%`}\n        />\n      ) : (\n        <div className=\"flex flex-col space-y-1\">\n          {!isDisabled && (\n            <Typography\n              className=\"neeto-ui-text-gray-800 text-center leading-4\"\n              style=\"body2\"\n            >\n              <Trans\n                i18nKey=\"neetoImageUploader.imageUpload.dragAndDropOrBrowseFile\"\n                components={{\n                  span: (\n                    <Button\n                      data-cy=\"neeto-image-uploader-browse-text\"\n                      style=\"link\"\n                    />\n                  ),\n                }}\n              />\n            </Typography>\n          )}\n          {setIsAssetLibraryOpen && (\n            <Typography\n              className=\"text-center leading-4\"\n              style=\"body2\"\n              onClick={e => {\n                e.stopPropagation();\n                setIsAssetLibraryOpen(true);\n              }}\n            >\n              <Trans\n                i18nKey=\"neetoImageUploader.imageUpload.selectImagefromImageLibrary\"\n                components={{\n                  span: (\n                    <Button data-cy=\"open-asset-library-button\" style=\"link\" />\n                  ),\n                }}\n              />\n            </Typography>\n          )}\n          <input\n            {...getInputProps()}\n            data-cy=\"neeto-image-uploader-file-input\"\n            disabled={isDisabled}\n          />\n          <Typography\n            className=\"neeto-ui-text-gray-700 text-center leading-4\"\n            data-cy=\"neeto-image-uploader-restriction-message\"\n            lineHeight=\"snug\"\n            style=\"nano\"\n          >\n            <Trans\n              i18nKey=\"neetoImageUploader.imageUpload.restrictionMessage\"\n              values={{\n                fileTypes: getAllowedTypes(uploadConfig),\n                size: uploadConfig?.maxImageSize,\n              }}\n            />\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ImageDirectUpload;\n","import classnames from \"classnames\";\n\nconst ImagePlaceholder = ({ className = \"\", ...props }) => (\n  <div\n    className={classnames(\"neeto-ui-bg-gray-200\", {\n      [className]: className,\n    })}\n    {...props}\n  />\n);\n\nexport default ImagePlaceholder;\n","import { useEffect, useState } from \"react\";\n\nimport ImagePlaceholder from \"./ImagePlaceholder\";\n\nconst ImageWithFallback = ({\n  src,\n  className = \"h-full w-full\",\n  fallback: Fallback = ImagePlaceholder,\n  ...props\n}) => {\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  useEffect(() => {\n    const img = new Image();\n    img.onload = () => {\n      setIsLoaded(true);\n    };\n    img.src = src;\n  }, [src]);\n\n  return isLoaded ? (\n    <img {...{ src, ...props }} className=\"h-full w-auto object-contain\" />\n  ) : (\n    <Fallback {...{ className, ...props }} />\n  );\n};\n\nexport default ImageWithFallback;\n"],"names":["getAllowedTypes","uploadConfig","pipe","values","flatten","map","extension","slice","toUpper","join","allowedImageTypes","ImageDirectUpload","_ref","_ref$uploadConfig","DEFAULT_UPLOAD_CONFIG","_ref$onDrop","onDrop","noop","_ref$isDisabled","isDisabled","setIsAssetLibraryOpen","_useUploadDropzone","useUploadDropzone","getRootProps","getInputProps","isDragActive","uploadProgress","shouldShowProgress","equals","_jsx","_objectSpread","className","classnames","DROPZONE_ROOT_DIV_CLASSNAME","children","ProgressBar","progressPercentage","progressValue","concat","_jsxs","Typography","style","Trans","i18nKey","components","span","Button","onClick","e","stopPropagation","disabled","lineHeight","fileTypes","size","maxImageSize","ImagePlaceholder","_ref$className","props","_objectWithoutProperties","_excluded","_defineProperty","ImageWithFallback","src","_ref$fallback","fallback","Fallback","_useState","useState","_useState2","_slicedToArray","isLoaded","setIsLoaded","useEffect","img","Image","onload"],"mappings":"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"}