@s-ui/react-molecule-photo-uploader - npm Package Compare versions

Comparing version 1.18.0 to 1.19.0

lib/DragNotification.js

@@ -1,2 +0,3 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import AtomIcon, { ATOM_ICON_SIZES } from '@s-ui/react-atom-icon';
@@ -14,14 +15,19 @@ import MoleculeNotification, { BRDS_SIZE } from '@s-ui/react-molecule-notification';
       text = _ref.text;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, show && /*#__PURE__*/React.createElement("div", {
-    className: BASE_CLASS_NAME + "-notification"
-  }, /*#__PURE__*/React.createElement(MoleculeNotification, {
-    icon: /*#__PURE__*/React.createElement(AtomIcon, {
-      size: ATOM_ICON_SIZES.extraLarge
-    }, icon),
-    type: MOLECULE_NOTIFICATION_TYPE,
-    show: show,
-    autoClose: null,
-    roundedCorners: BRDS_SIZE.small,
-    onClose: onCloseCallback
-  }, text)));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: show && /*#__PURE__*/_jsx("div", {
+      className: BASE_CLASS_NAME + "-notification",
+      children: /*#__PURE__*/_jsx(MoleculeNotification, {
+        icon: /*#__PURE__*/_jsx(AtomIcon, {
+          size: ATOM_ICON_SIZES.extraLarge,
+          children: icon
+        }),
+        type: MOLECULE_NOTIFICATION_TYPE,
+        show: show,
+        autoClose: null,
+        roundedCorners: BRDS_SIZE.small,
+        onClose: onCloseCallback,
+        children: text
+      })
+    })
+  });
 };
@@ -28,0 +34,0 @@

lib/DragState.js

@@ -1,2 +0,3 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import cx from 'classnames';
@@ -15,9 +16,12 @@ import AtomIcon, { ATOM_ICON_SIZES } from '@s-ui/react-atom-icon';
   var dropzoneClassName = cx(DRAG_STATE_CLASS_NAME, (_cx = {}, _cx[DRAG_STATE_CLASS_NAME + "--accepted"] = status === DRAG_STATE_STATUS_ACCEPTED, _cx[DRAG_STATE_CLASS_NAME + "--rejected"] = status === DRAG_STATE_STATUS_REJECTED, _cx));
-  return /*#__PURE__*/React.createElement("div", {
-    className: dropzoneClassName
-  }, /*#__PURE__*/React.createElement(AtomIcon, {
-    size: ATOM_ICON_SIZES.extraLarge
-  }, icon), /*#__PURE__*/React.createElement("div", {
-    className: DRAG_STATE_CLASS_NAME + "-textState"
-  }, text));
+  return /*#__PURE__*/_jsxs("div", {
+    className: dropzoneClassName,
+    children: [/*#__PURE__*/_jsx(AtomIcon, {
+      size: ATOM_ICON_SIZES.extraLarge,
+      children: icon
+    }), /*#__PURE__*/_jsx("div", {
+      className: DRAG_STATE_CLASS_NAME + "-textState",
+      children: text
+    })]
+  });
 };
@@ -24,0 +28,0 @@

lib/index.js

@@ -1,2 +0,6 @@
-import React, { useState } from 'react';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useDropzone } from 'react-dropzone';
@@ -254,59 +258,64 @@ import { getTarget } from '@s-ui/js/lib/react';
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: BASE_CLASS_NAME
-  }, /*#__PURE__*/React.createElement("div", getRootProps({
-    className: dropzoneClassName
-  }), /*#__PURE__*/React.createElement("input", getInputProps()), Boolean(!files.length) && !isDragActive && /*#__PURE__*/React.createElement(InitialState, {
-    buttonColor: addPhotoButtonColor,
-    buttonDesign: addPhotoButtonDesign,
-    buttonText: addPhotoTextButton,
-    buttonSize: addPhotoButtonSize,
-    icon: dragPhotosIcon(),
-    text: dragPhotoTextInitialContent,
-    dividerText: dragPhotoDividerTextInitialContent
-  }), Boolean(files.length) && /*#__PURE__*/React.createElement(PhotosPreview, {
-    _callbackPhotosUploaded: _callbackPhotosUploaded,
-    _scrollToBottom: _scrollToBottom,
-    addMorePhotosIcon: addMorePhotosIcon,
-    addPhotoTextSkeleton: addPhotoTextSkeleton,
-    callbackUploadPhoto: callbackUploadPhoto,
-    defaultFormatToBase64Options: DEFAULT_FORMAT_TO_BASE_64_OPTIONS,
-    deleteIcon: deleteIcon,
-    dragDelay: dragDelay,
-    errorInitialPhotoDownloadErrorText: errorInitialPhotoDownloadErrorText,
-    files: files,
-    isPhotoUploaderFully: isPhotoUploaderFully,
-    mainPhotoLabel: mainPhotoLabel,
-    outputImageAspectRatioDisabled: outputImageAspectRatioDisabled,
-    rejectPhotosIcon: rejectPhotosIcon,
-    rotateIcon: rotateIcon,
-    rotationDirection: rotationDirection,
-    retryIcon: retryIcon,
-    setFiles: setFiles,
-    setIsLoading: setIsLoading,
-    setNotificationError: setNotificationError,
-    thumbIconSize: thumbIconSize
-  }), isDragAccept && !isPhotoUploaderFully() && !isLoading && /*#__PURE__*/React.createElement(DragState, {
-    icon: dragPhotosIcon(),
-    text: dropPhotosHereText
-  }), isDragAccept && isPhotoUploaderFully() && /*#__PURE__*/React.createElement(DragState, {
-    icon: rejectPhotosIcon(),
-    status: DRAG_STATE_STATUS_REJECTED,
-    text: limitPhotosUploadedText
-  }), isDragAccept && !isPhotoUploaderFully() && isLoading && /*#__PURE__*/React.createElement(DragState, {
-    icon: rejectPhotosIcon(),
-    status: DRAG_STATE_STATUS_REJECTED,
-    text: uploadingPhotosText
-  }), isDragReject && /*#__PURE__*/React.createElement(DragState, {
-    icon: rejectPhotosIcon(),
-    status: DRAG_STATE_STATUS_REJECTED,
-    text: errorFormatPhotoUploadedText
-  })), /*#__PURE__*/React.createElement(DragNotification, {
-    icon: infoIcon(),
-    onCloseCallback: function onCloseCallback() {
-      return setNotificationError(DEFAULT_NOTIFICATION_ERROR);
-    },
-    show: notificationError.isError,
-    text: notificationError.text
-  })));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: BASE_CLASS_NAME,
+      children: [/*#__PURE__*/_jsxs("div", _extends({}, getRootProps({
+        className: dropzoneClassName
+      }), {
+        children: [/*#__PURE__*/_jsx("input", _extends({}, getInputProps())), Boolean(!files.length) && !isDragActive && /*#__PURE__*/_jsx(InitialState, {
+          buttonColor: addPhotoButtonColor,
+          buttonDesign: addPhotoButtonDesign,
+          buttonText: addPhotoTextButton,
+          buttonSize: addPhotoButtonSize,
+          icon: dragPhotosIcon(),
+          text: dragPhotoTextInitialContent,
+          dividerText: dragPhotoDividerTextInitialContent
+        }), Boolean(files.length) && /*#__PURE__*/_jsx(PhotosPreview, {
+          _callbackPhotosUploaded: _callbackPhotosUploaded,
+          _scrollToBottom: _scrollToBottom,
+          addMorePhotosIcon: addMorePhotosIcon,
+          addPhotoTextSkeleton: addPhotoTextSkeleton,
+          callbackUploadPhoto: callbackUploadPhoto,
+          defaultFormatToBase64Options: DEFAULT_FORMAT_TO_BASE_64_OPTIONS,
+          deleteIcon: deleteIcon,
+          dragDelay: dragDelay,
+          errorInitialPhotoDownloadErrorText: errorInitialPhotoDownloadErrorText,
+          files: files,
+          isPhotoUploaderFully: isPhotoUploaderFully,
+          mainPhotoLabel: mainPhotoLabel,
+          outputImageAspectRatioDisabled: outputImageAspectRatioDisabled,
+          rejectPhotosIcon: rejectPhotosIcon,
+          rotateIcon: rotateIcon,
+          rotationDirection: rotationDirection,
+          retryIcon: retryIcon,
+          setFiles: setFiles,
+          setIsLoading: setIsLoading,
+          setNotificationError: setNotificationError,
+          thumbIconSize: thumbIconSize
+        }), isDragAccept && !isPhotoUploaderFully() && !isLoading && /*#__PURE__*/_jsx(DragState, {
+          icon: dragPhotosIcon(),
+          text: dropPhotosHereText
+        }), isDragAccept && isPhotoUploaderFully() && /*#__PURE__*/_jsx(DragState, {
+          icon: rejectPhotosIcon(),
+          status: DRAG_STATE_STATUS_REJECTED,
+          text: limitPhotosUploadedText
+        }), isDragAccept && !isPhotoUploaderFully() && isLoading && /*#__PURE__*/_jsx(DragState, {
+          icon: rejectPhotosIcon(),
+          status: DRAG_STATE_STATUS_REJECTED,
+          text: uploadingPhotosText
+        }), isDragReject && /*#__PURE__*/_jsx(DragState, {
+          icon: rejectPhotosIcon(),
+          status: DRAG_STATE_STATUS_REJECTED,
+          text: errorFormatPhotoUploadedText
+        })]
+      })), /*#__PURE__*/_jsx(DragNotification, {
+        icon: infoIcon(),
+        onCloseCallback: function onCloseCallback() {
+          return setNotificationError(DEFAULT_NOTIFICATION_ERROR);
+        },
+        show: notificationError.isError,
+        text: notificationError.text
+      })]
+    })
+  });
 };
@@ -313,0 +322,0 @@

lib/InitialState.js

@@ -1,2 +0,3 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import Button from '@s-ui/react-atom-button';
@@ -22,22 +23,30 @@ import AtomIcon, { ATOM_ICON_SIZES } from '@s-ui/react-atom-icon';
       dividerText = _ref$dividerText === void 0 ? ALTERNATIVE_ACTION_TEXT : _ref$dividerText;
-  return /*#__PURE__*/React.createElement("div", {
-    className: BASE_CLASS_NAME + "-initialState"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: BASE_CLASS_NAME + "-iconInitialState"
-  }, /*#__PURE__*/React.createElement(AtomIcon, {
-    size: ATOM_ICON_SIZES.extraLarge
-  }, icon)), /*#__PURE__*/React.createElement("div", {
-    className: BASE_CLASS_NAME + "-textState"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: BASE_CLASS_NAME + "-textStateText"
-  }, text), /*#__PURE__*/React.createElement("span", {
-    className: BASE_CLASS_NAME + "-textStateDivider"
-  }, dividerText)), /*#__PURE__*/React.createElement("div", {
-    className: BASE_CLASS_NAME + "-buttonState"
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: buttonColor,
-    design: buttonDesign,
-    isButton: true,
-    size: buttonSize
-  }, buttonText)));
+  return /*#__PURE__*/_jsxs("div", {
+    className: BASE_CLASS_NAME + "-initialState",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: BASE_CLASS_NAME + "-iconInitialState",
+      children: /*#__PURE__*/_jsx(AtomIcon, {
+        size: ATOM_ICON_SIZES.extraLarge,
+        children: icon
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: BASE_CLASS_NAME + "-textState",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: BASE_CLASS_NAME + "-textStateText",
+        children: text
+      }), /*#__PURE__*/_jsx("span", {
+        className: BASE_CLASS_NAME + "-textStateDivider",
+        children: dividerText
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: BASE_CLASS_NAME + "-buttonState",
+      children: /*#__PURE__*/_jsx(Button, {
+        color: buttonColor,
+        design: buttonDesign,
+        isButton: true,
+        size: buttonSize,
+        children: buttonText
+      })
+    })]
+  });
 };
@@ -44,0 +53,0 @@

lib/PhotosPreview.js

 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import React from 'react';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import cx from 'classnames';
@@ -154,22 +156,22 @@ import { ReactSortable } from 'react-sortablejs';
     return files.map(function (file, index) {
-      return /*#__PURE__*/React.createElement("li", {
+      return /*#__PURE__*/_jsx("li", {
         className: thumbClassName,
-        key: "" + file.preview + index,
         onClick: function onClick(e) {
           return e.stopPropagation();
-        }
-      }, /*#__PURE__*/React.createElement(ThumbCard, {
-        iconSize: thumbIconSize,
-        image: file,
-        index: index,
-        mainPhotoLabel: mainPhotoLabel,
-        callbackDeleteItem: _deleteItem,
-        callbackRetryUpload: _retryUpload,
-        callbackRotateItem: _rotateItem,
-        rotateIcon: rotateIcon(),
-        deleteIcon: deleteIcon(),
-        retryIcon: retryIcon(),
-        rejectPhotosIcon: rejectPhotosIcon(),
-        outputImageAspectRatioDisabled: outputImageAspectRatioDisabled
-      }));
+        },
+        children: /*#__PURE__*/_jsx(ThumbCard, {
+          iconSize: thumbIconSize,
+          image: file,
+          index: index,
+          mainPhotoLabel: mainPhotoLabel,
+          callbackDeleteItem: _deleteItem,
+          callbackRetryUpload: _retryUpload,
+          callbackRotateItem: _rotateItem,
+          rotateIcon: rotateIcon(),
+          deleteIcon: deleteIcon(),
+          retryIcon: retryIcon(),
+          rejectPhotosIcon: rejectPhotosIcon(),
+          outputImageAspectRatioDisabled: outputImageAspectRatioDisabled
+        })
+      }, "" + file.preview + index);
     });
@@ -179,3 +181,3 @@ };
   var previewCardClass = cx(PREVIEW_CARD_CLASS_NAME, (_cx2 = {}, _cx2[PREVIEW_CARD_CLASS_NAME + "--ratioDisabled"] = outputImageAspectRatioDisabled, _cx2));
-  return /*#__PURE__*/React.createElement(ReactSortable, {
+  return /*#__PURE__*/_jsx(ReactSortable, {
     className: previewCardClass,
@@ -194,7 +196,10 @@ handle: ".sui-MoleculePhotoUploader-thumbCard-imageContainer",
     },
-    delay: dragDelay
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, thumbCards(files), !isPhotoUploaderFully() && /*#__PURE__*/React.createElement(SkeletonCard, {
-    icon: addMorePhotosIcon(),
-    text: addPhotoTextSkeleton
-  })));
+    delay: dragDelay,
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [thumbCards(files), !isPhotoUploaderFully() && /*#__PURE__*/_jsx(SkeletonCard, {
+        icon: addMorePhotosIcon(),
+        text: addPhotoTextSkeleton
+      })]
+    })
+  });
 };
@@ -201,0 +206,0 @@

lib/photoTools.js

@@ -238,3 +238,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-  return new Promise(function (resolve, reject) {
+  return new Promise(function (resolve) {
     return resolve({
@@ -241,0 +241,0 @@ blob: new Blob([ia], {

lib/SkeletonCard.js

@@ -1,2 +0,3 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import AtomIcon, { ATOM_ICON_SIZES } from '@s-ui/react-atom-icon';
@@ -9,11 +10,15 @@ import { BASE_CLASS_NAME } from './config';
       text = _ref.text;
-  return /*#__PURE__*/React.createElement("li", {
-    className: SKELETON_CLASS_NAME
-  }, /*#__PURE__*/React.createElement("div", {
-    className: SKELETON_CLASS_NAME + "-icon"
-  }, /*#__PURE__*/React.createElement(AtomIcon, {
-    size: ATOM_ICON_SIZES.medium
-  }, icon)), /*#__PURE__*/React.createElement("div", {
-    className: SKELETON_CLASS_NAME + "-text"
-  }, text));
+  return /*#__PURE__*/_jsxs("li", {
+    className: SKELETON_CLASS_NAME,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: SKELETON_CLASS_NAME + "-icon",
+      children: /*#__PURE__*/_jsx(AtomIcon, {
+        size: ATOM_ICON_SIZES.medium,
+        children: icon
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: SKELETON_CLASS_NAME + "-text",
+      children: text
+    })]
+  });
 };
@@ -20,0 +25,0 @@

lib/ThumbCard.js

@@ -1,2 +0,3 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import cx from 'classnames';
@@ -31,39 +32,51 @@ import AtomIcon, { ATOM_ICON_SIZES } from '@s-ui/react-atom-icon';
   var imageThumbClass = cx(IMAGE_THUMB_CARD_CLASS_NAME, (_cx2 = {}, _cx2[IMAGE_THUMB_CARD_CLASS_NAME + "--ratioDisabled"] = outputImageAspectRatioDisabled, _cx2));
-  return /*#__PURE__*/React.createElement("div", {
-    className: THUMB_CARD_CLASS_NAME
-  }, /*#__PURE__*/React.createElement("div", {
-    className: counterClass
-  }, index === 0 ? mainPhotoLabel : index + 1), /*#__PURE__*/React.createElement("div", {
-    className: CONTAINER_THUMB_CARD_CLASS_NAME
-  }, hasErrors ? /*#__PURE__*/React.createElement("div", {
-    className: "" + ICON_THUMB_CARD_CLASS_NAME
-  }, /*#__PURE__*/React.createElement(AtomIcon, {
-    size: ATOM_ICON_SIZES.extraLarge
-  }, rejectPhotosIcon)) : /*#__PURE__*/React.createElement("img", {
-    src: image.preview,
-    className: imageThumbClass
-  })), /*#__PURE__*/React.createElement("div", {
-    className: ACTION_THUMB_CARD_CLASS_NAME
-  }, /*#__PURE__*/React.createElement("div", {
-    className: BUTTON_THUMB_CARD_CLASS_NAME,
-    onClick: function onClick() {
-      return callbackDeleteItem(index);
-    }
-  }, /*#__PURE__*/React.createElement(AtomIcon, {
-    size: iconSize
-  }, deleteIcon)), hasErrors ? /*#__PURE__*/React.createElement("div", {
-    className: BUTTON_THUMB_CARD_CLASS_NAME,
-    onClick: function onClick(e) {
-      return callbackRetryUpload(index);
-    }
-  }, /*#__PURE__*/React.createElement(AtomIcon, {
-    size: iconSize
-  }, retryIcon)) : /*#__PURE__*/React.createElement("div", {
-    className: BUTTON_THUMB_CARD_CLASS_NAME,
-    onClick: function onClick(e) {
-      return callbackRotateItem(index);
-    }
-  }, /*#__PURE__*/React.createElement(AtomIcon, {
-    size: iconSize
-  }, rotateIcon))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: THUMB_CARD_CLASS_NAME,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: counterClass,
+      children: index === 0 ? mainPhotoLabel : index + 1
+    }), /*#__PURE__*/_jsx("div", {
+      className: CONTAINER_THUMB_CARD_CLASS_NAME,
+      children: hasErrors ? /*#__PURE__*/_jsx("div", {
+        className: "" + ICON_THUMB_CARD_CLASS_NAME,
+        children: /*#__PURE__*/_jsx(AtomIcon, {
+          size: ATOM_ICON_SIZES.extraLarge,
+          children: rejectPhotosIcon
+        })
+      }) : /*#__PURE__*/_jsx("img", {
+        src: image.preview,
+        className: imageThumbClass
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: ACTION_THUMB_CARD_CLASS_NAME,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: BUTTON_THUMB_CARD_CLASS_NAME,
+        onClick: function onClick() {
+          return callbackDeleteItem(index);
+        },
+        children: /*#__PURE__*/_jsx(AtomIcon, {
+          size: iconSize,
+          children: deleteIcon
+        })
+      }), hasErrors ? /*#__PURE__*/_jsx("div", {
+        className: BUTTON_THUMB_CARD_CLASS_NAME,
+        onClick: function onClick(e) {
+          return callbackRetryUpload(index);
+        },
+        children: /*#__PURE__*/_jsx(AtomIcon, {
+          size: iconSize,
+          children: retryIcon
+        })
+      }) : /*#__PURE__*/_jsx("div", {
+        className: BUTTON_THUMB_CARD_CLASS_NAME,
+        onClick: function onClick(e) {
+          return callbackRotateItem(index);
+        },
+        children: /*#__PURE__*/_jsx(AtomIcon, {
+          size: iconSize,
+          children: rotateIcon
+        })
+      })]
+    })]
+  });
 };
@@ -70,0 +83,0 @@

package.json

 {
   "name": "@s-ui/react-molecule-photo-uploader",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73117

increased by1.75%

Lines of code

1214

increased by4.39%

No dependency changes