@micromerce/media-fileuploader 1.0.1834 → 1.0.1836
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 +13 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +13 -4
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
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:
|
|
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
|
}
|
|
@@ -18049,6 +18050,7 @@ const StyledHover = styled.img `
|
|
|
18049
18050
|
const StyledIcon = styled.img `
|
|
18050
18051
|
width: 22px;
|
|
18051
18052
|
height: 22px;
|
|
18053
|
+
object-fit: contain;
|
|
18052
18054
|
background: #FFFFFF;
|
|
18053
18055
|
`;
|
|
18054
18056
|
const StyledImagePreviewWrapper = styled.div `
|
|
@@ -18056,17 +18058,24 @@ const StyledImagePreviewWrapper = styled.div `
|
|
|
18056
18058
|
display: flex;
|
|
18057
18059
|
top: 50%;
|
|
18058
18060
|
left: 8px;
|
|
18059
|
-
z-index:
|
|
18061
|
+
z-index: 1000;
|
|
18060
18062
|
transform: translateY(-50%);
|
|
18063
|
+
&:hover {
|
|
18064
|
+
z-index: 1001;
|
|
18065
|
+
}
|
|
18061
18066
|
&:hover ${StyledHover} {
|
|
18062
18067
|
display: block;
|
|
18063
18068
|
}
|
|
18064
18069
|
`;
|
|
18065
18070
|
|
|
18071
|
+
const withWidth = (url, w) => url.includes('?') ? `${url}&w=${w}` : `${url}?w=${w}`;
|
|
18066
18072
|
const ImagePreview = ({ previewUrl, type, decodedFileName }) => {
|
|
18067
18073
|
if (!(type === 'image' && previewUrl && decodedFileName))
|
|
18068
18074
|
return (null);
|
|
18069
|
-
|
|
18075
|
+
const isSvg = decodedFileName.toLowerCase().endsWith('.svg');
|
|
18076
|
+
const iconSrc = isSvg ? previewUrl : withWidth(previewUrl, 150);
|
|
18077
|
+
const hoverSrc = isSvg ? previewUrl : withWidth(previewUrl, 450);
|
|
18078
|
+
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
18079
|
};
|
|
18071
18080
|
|
|
18072
18081
|
const StyledProgressbar = styled(StyledVisibilityContainerProgress) `
|