@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/esm/index.js
CHANGED
|
@@ -18030,7 +18030,9 @@ const FilenameText = ({ decodedFileName, type, previewUrl }) => {
|
|
|
18030
18030
|
const StyledHover = styled.img `
|
|
18031
18031
|
display: none;
|
|
18032
18032
|
position: absolute;
|
|
18033
|
-
z-index:
|
|
18033
|
+
z-index: 100;
|
|
18034
|
+
left: 0;
|
|
18035
|
+
margin-top: 25px;
|
|
18034
18036
|
padding: 10px;
|
|
18035
18037
|
background: #FFFFFF;
|
|
18036
18038
|
border-radius: 4px;
|
|
@@ -18039,7 +18041,6 @@ const StyledHover = styled.img `
|
|
|
18039
18041
|
min-width: 100px;
|
|
18040
18042
|
max-width: 350px;
|
|
18041
18043
|
max-height: 250px;
|
|
18042
|
-
margin-top: 25px;
|
|
18043
18044
|
@media (max-width: 767px) {
|
|
18044
18045
|
max-width: 250px;
|
|
18045
18046
|
}
|
|
@@ -18047,6 +18048,7 @@ const StyledHover = styled.img `
|
|
|
18047
18048
|
const StyledIcon = styled.img `
|
|
18048
18049
|
width: 22px;
|
|
18049
18050
|
height: 22px;
|
|
18051
|
+
object-fit: contain;
|
|
18050
18052
|
background: #FFFFFF;
|
|
18051
18053
|
`;
|
|
18052
18054
|
const StyledImagePreviewWrapper = styled.div `
|
|
@@ -18054,17 +18056,24 @@ const StyledImagePreviewWrapper = styled.div `
|
|
|
18054
18056
|
display: flex;
|
|
18055
18057
|
top: 50%;
|
|
18056
18058
|
left: 8px;
|
|
18057
|
-
z-index:
|
|
18059
|
+
z-index: 1000;
|
|
18058
18060
|
transform: translateY(-50%);
|
|
18061
|
+
&:hover {
|
|
18062
|
+
z-index: 1001;
|
|
18063
|
+
}
|
|
18059
18064
|
&:hover ${StyledHover} {
|
|
18060
18065
|
display: block;
|
|
18061
18066
|
}
|
|
18062
18067
|
`;
|
|
18063
18068
|
|
|
18069
|
+
const withWidth = (url, w) => url.includes('?') ? `${url}&w=${w}` : `${url}?w=${w}`;
|
|
18064
18070
|
const ImagePreview = ({ previewUrl, type, decodedFileName }) => {
|
|
18065
18071
|
if (!(type === 'image' && previewUrl && decodedFileName))
|
|
18066
18072
|
return (null);
|
|
18067
|
-
|
|
18073
|
+
const isSvg = decodedFileName.toLowerCase().endsWith('.svg');
|
|
18074
|
+
const iconSrc = isSvg ? previewUrl : withWidth(previewUrl, 150);
|
|
18075
|
+
const hoverSrc = isSvg ? previewUrl : withWidth(previewUrl, 450);
|
|
18076
|
+
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' })] }));
|
|
18068
18077
|
};
|
|
18069
18078
|
|
|
18070
18079
|
const StyledProgressbar = styled(StyledVisibilityContainerProgress) `
|