@micromerce/media-fileuploader 1.0.1831 → 1.0.1835

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/index.js CHANGED
@@ -18032,7 +18032,9 @@ const FilenameText = ({ decodedFileName, type, previewUrl }) => {
18032
18032
  const StyledHover = styled.img `
18033
18033
  display: none;
18034
18034
  position: absolute;
18035
- z-index: 2;
18035
+ z-index: 100;
18036
+ left: 0;
18037
+ margin-top: 25px;
18036
18038
  padding: 10px;
18037
18039
  background: #FFFFFF;
18038
18040
  border-radius: 4px;
@@ -18041,7 +18043,6 @@ const StyledHover = styled.img `
18041
18043
  min-width: 100px;
18042
18044
  max-width: 350px;
18043
18045
  max-height: 250px;
18044
- margin-top: 25px;
18045
18046
  @media (max-width: 767px) {
18046
18047
  max-width: 250px;
18047
18048
  }
@@ -18056,17 +18057,24 @@ const StyledImagePreviewWrapper = styled.div `
18056
18057
  display: flex;
18057
18058
  top: 50%;
18058
18059
  left: 8px;
18059
- z-index: 2;
18060
+ z-index: 1000;
18060
18061
  transform: translateY(-50%);
18062
+ &:hover {
18063
+ z-index: 1001;
18064
+ }
18061
18065
  &:hover ${StyledHover} {
18062
18066
  display: block;
18063
18067
  }
18064
18068
  `;
18065
18069
 
18070
+ const withWidth = (url, w) => url.includes('?') ? `${url}&w=${w}` : `${url}?w=${w}`;
18066
18071
  const ImagePreview = ({ previewUrl, type, decodedFileName }) => {
18067
18072
  if (!(type === 'image' && previewUrl && decodedFileName))
18068
18073
  return (null);
18069
- return (jsxRuntimeExports.jsxs(StyledImagePreviewWrapper, { "data-testid": 'fileuploader__preview-image', children: [jsxRuntimeExports.jsx(StyledIcon, { "data-testid": 'fileuploader__preview-image__icon', className: 'lazyload', src: previewUrl.includes('?') ? previewUrl + '&w=22' : previewUrl + '?w=22', "data-sizes": 'auto' }), jsxRuntimeExports.jsx(StyledHover, { className: 'lazyload', src: previewUrl.includes('?') ? previewUrl + '&w=450' : previewUrl + '?w=450', "data-sizes": 'auto' })] }));
18074
+ const isSvg = decodedFileName.toLowerCase().endsWith('.svg');
18075
+ const iconSrc = isSvg ? previewUrl : withWidth(previewUrl, 22);
18076
+ const hoverSrc = isSvg ? previewUrl : withWidth(previewUrl, 450);
18077
+ return (jsxRuntimeExports.jsxs(StyledImagePreviewWrapper, { "data-testid": 'fileuploader__preview-image', children: [jsxRuntimeExports.jsx(StyledIcon, { "data-testid": 'fileuploader__preview-image__icon', className: 'lazyload', src: iconSrc, "data-sizes": 'auto' }), jsxRuntimeExports.jsx(StyledHover, { className: 'lazyload', src: hoverSrc, "data-sizes": 'auto' })] }));
18070
18078
  };
18071
18079
 
18072
18080
  const StyledProgressbar = styled(StyledVisibilityContainerProgress) `