@websolutespa/bom-mixer-ui 1.7.13 → 1.7.15

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.7.15
+
+### Patch Changes
+
+- Fixing: MediaImage getMediaRatio
+- Updated dependencies
+  - @websolutespa/bom-mixer-models@1.7.9
+
+## 1.7.14
+
+### Patch Changes
+
+- Modified: Media width & height style support & source image size limits
+
 ## 1.7.13
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -4380,7 +4380,6 @@ function isMediaSizeVariants(item) {
 }
 const StyledMediaImage = styled__default.default.img`
   max-width: 100%;
-  // height: auto;
   user-select: none;
   color: transparent;
 `;
@@ -4402,28 +4401,29 @@ const MediaImage = _a => {
     'image-svg': isSVG(props.src)
   });
   const imageProps = getImageProps(props, theme.mediaQuery);
-  const onLoad = () => {
-    if (typeof onLoaded === 'function') {
-      onLoaded(imageRef);
-    }
-  };
   React.useEffect(() => {
     if (imageRef.current && canLoad) {
-      if (imageRef.current.complete) {
+      const image = imageRef.current;
+      if (image.complete) {
         if (typeof onLoaded === 'function') {
           onLoaded(imageRef);
         }
       } else {
-        imageRef.current.addEventListener('load', onLoad);
+        const onLoad = () => {
+          if (typeof onLoaded === 'function') {
+            onLoaded(imageRef);
+          }
+        };
+        image.addEventListener('load', onLoad);
         return () => {
-          if (imageRef.current) {
-            imageRef.current.removeEventListener('load', onLoad);
+          if (image) {
+            image.removeEventListener('load', onLoad);
           }
         };
       }
     }
     return () => {};
-  }, [imageRef, canLoad]);
+  }, [canLoad, onLoaded]);
   return jsxRuntime.jsx(StyledMediaImage, Object.assign({
     ref: imageRef
   }, canLoad ? imageProps : undefined, {
@@ -4432,25 +4432,30 @@ const MediaImage = _a => {
     draggable: false
   }));
 };
-function getMediaSizes(mediaQuery, ratio, size) {
-  // console.log('getMediaSizes', size, ratio);
+function getMediaSizes(mediaQuery, ratio, size, maxWidth, maxHeight) {
+  if (maxWidth === void 0) {
+    maxWidth = Number.POSITIVE_INFINITY;
+  }
+  if (maxHeight === void 0) {
+    maxHeight = Number.POSITIVE_INFINITY;
+  }
+  // console.log('getMediaSizes', mediaQuery, ratio, size, maxWidth, maxHeight);
+  let sizes = [];
   if (size) {
     if (typeof size === 'number') {
       const s = size;
       // console.log('typeof size === \'number\'', size);
-      const sizes = Object.entries(ratio).map(_ref2 => {
+      sizes = Object.entries(ratio).map(_ref2 => {
         let [k, v] = _ref2;
         const w = IMAGE_SIZEMAP[k];
         return [w && s > w ? w : s, parseInt(String(mediaQuery[k])), v];
       }).filter(x => x[0] >= x[1]);
       // console.log(size, 'sizes', sizes);
-      return sizes;
-    }
-    if (isMediaSizeVariant(size)) {
+    } else if (isMediaSizeVariant(size)) {
       // console.log('isMediaSizeVariant');
       const sizeLimit = IMAGE_SIZEMAP[size] || 0;
       // console.log(size, ratio[size], sizeLimit);
-      return Object.entries(IMAGE_SIZEMAP).filter(_ref3 => {
+      sizes = Object.entries(IMAGE_SIZEMAP).filter(_ref3 => {
         let [k, v] = _ref3;
         return v <= sizeLimit;
       }).map(_ref4 => {
@@ -4458,14 +4463,17 @@ function getMediaSizes(mediaQuery, ratio, size) {
         return [v, parseInt(String(mediaQuery[k])), ratio[k]];
       });
     }
+  } else {
+    size = size || IMAGE_SIZEMAP;
+    // console.log('size || IMAGE_SIZEMAP', size, IMAGE_SIZEMAP);
+    sizes = Object.entries(size).map(_ref5 => {
+      let [k, v] = _ref5;
+      return [v, parseInt(String(mediaQuery[k])), ratio[k]];
+    });
   }
-  size = size || IMAGE_SIZEMAP;
-  // console.log('size || IMAGE_SIZEMAP', size, IMAGE_SIZEMAP);
-  const sizes = Object.entries(size).map(_ref5 => {
-    let [k, v] = _ref5;
-    return [v, parseInt(String(mediaQuery[k])), ratio[k]];
-  });
   // console.log(size, 'sizes', sizes, ratio);
+  sizes = sizes.filter((size, i) => i === 0 || size[0] <= maxWidth && (size[2] === 0 || size[0] / size[2] <= maxHeight));
+  // console.log(sizes[0][2] ? sizes[0][0] / sizes[0][2] : 0, maxHeight);
   return sizes;
 }
 function getImageProps(_a, mediaQuery) {
@@ -4485,18 +4493,25 @@ function getImageProps(_a, mediaQuery) {
     } = props,
     otherProps = __rest(props, ["width", "height", "size"]);
   let useSize = size;
+  let useWidth = undefined;
   if (typeof width === 'string' && width.indexOf('px') !== -1) {
-    useSize = parseInt(width);
+    useWidth = parseInt(width);
+    useSize = useWidth;
+  } else if (typeof width === 'number') {
+    useWidth = width;
   }
-  // console.log(useSize, width);
-  const ratio = getMediaRatio(props);
-  const sizes = getMediaSizes(mediaQuery, ratio, useSize);
+  let useHeight = undefined;
+  if (typeof height === 'string' && height.indexOf('px') !== -1) {
+    useHeight = parseInt(height);
+  } else if (typeof height === 'number') {
+    useHeight = height;
+  }
+  const ratio = getMediaRatio(useWidth, useHeight, props.aspectRatio, props.aspectRatioSm, props.aspectRatioMd, props.aspectRatioLg, props.aspectRatioXl);
+  const sizes = getMediaSizes(mediaQuery, ratio, useSize, props.mediaWidth, props.mediaHeight);
   const imageSrc = getImageSrc(src, sizes[0][0], sizes[0][2]);
   const imageSrcSet = getImageSrcset(src, sizes);
   const imageSizes = getImageSizes(sizes);
-  let useWidth = typeof width === 'string' ? parseInt(width) : width;
-  let useHeight = typeof height === 'string' ? parseInt(height) : height;
-  // console.log('width', width, 'useWidth', useWidth, 'height', height, 'useHeight', useHeight, 'useSize', useSize);
+  // console.log('useSize', useSize, 'width', width, useWidth, 'height', height, useHeight);
   return Object.assign({
     src: imageSrc,
     srcSet: imageSrcSet,
@@ -4505,23 +4520,14 @@ function getImageProps(_a, mediaQuery) {
     height: useHeight ? `${useHeight}px` : undefined
   }, otherProps);
 }
-function getMediaRatio(props) {
-  let width = undefined;
-  let height = undefined;
-  if (props.width) {
-    width = parseInt(String(props.width));
-  }
-  props.width = width;
-  if (props.height) {
-    height = parseInt(String(props.height));
-  }
-  props.height = height;
+function getMediaRatio(width, height, aspectRatio, aspectRatioSm, aspectRatioMd, aspectRatioLg, aspectRatioXl) {
+  // console.log('getMediaRatio', width, height, aspectRatio);
   const defaultRatio = width && height ? width / height : 0;
-  const xs = getRatio(props.aspectRatio, defaultRatio);
-  const sm = getRatio(props.aspectRatioSm, xs);
-  const md = getRatio(props.aspectRatioMd, sm);
-  const lg = getRatio(props.aspectRatioLg, md);
-  const xl = getRatio(props.aspectRatioXl, lg);
+  const xs = getRatio(aspectRatio, defaultRatio);
+  const sm = getRatio(aspectRatioSm, xs);
+  const md = getRatio(aspectRatioMd, sm);
+  const lg = getRatio(aspectRatioLg, md);
+  const xl = getRatio(aspectRatioXl, lg);
   const ratio = {
     xs,
     sm,
@@ -4605,16 +4611,15 @@ const MediaVideo = _a => {
   };
   React.useEffect(() => {
     if (videoRef.current && canLoad) {
-      if (videoRef.current.readyState && videoRef.current.readyState >= 2) {
+      const video = videoRef.current;
+      if (video.readyState && video.readyState >= 2) {
         if (typeof onLoaded === 'function') {
           onLoaded(videoRef);
         }
       } else {
-        videoRef.current.addEventListener('loadeddata', onLoad);
+        video.addEventListener('loadeddata', onLoad);
         return () => {
-          if (videoRef.current) {
-            videoRef.current.removeEventListener('loadeddata', onLoad);
-          }
+          video.removeEventListener('loadeddata', onLoad);
         };
       }
     }
@@ -4647,81 +4652,8 @@ const MediaItem = _ref => {
     item,
     options = {}
   } = _ref;
-  const mediaItem = React.useMemo(() => {
-    if (typeof item['media'] === 'object') {
-      item = item['media'];
-    }
-    const mediaItem = {
-      type: item.type,
-      src: item.src
-    };
-    if (item.abstract) {
-      mediaItem.abstract = item.abstract;
-    }
-    if (item.alt) {
-      mediaItem.alt = item.alt;
-    }
-    if (item.mimeType) {
-      mediaItem.mimeType = item.mimeType;
-    }
-    if (item.url) {
-      mediaItem.src = item.url;
-    }
-    if (item.title) {
-      mediaItem.title = item.title;
-    }
-    mediaItem.width = options.width || item.width;
-    mediaItem.height = options.height || item.height;
-    mediaItem.aspectRatio = options.aspectRatio;
-    mediaItem.aspectRatioSm = options.aspectRatioSm;
-    mediaItem.aspectRatioMd = options.aspectRatioMd;
-    mediaItem.aspectRatioLg = options.aspectRatioLg;
-    mediaItem.aspectRatioXl = options.aspectRatioXl;
-    mediaItem.onLoaded = options.onLoaded;
-    mediaItem.canLoad = options.canLoad;
-    return mediaItem;
-  }, [item, options]);
-  const mediaItemProps = React.useMemo(() => {
-    const media = __rest(mediaItem, ["width", "height", "sizes"]);
-    const title = media.title || options.title || media.alt || options.alt;
-    const alt = media.alt || options.alt || media.title || options.title;
-    const src = media.src || media.url || '';
-    const mediaItemProps = {
-      src,
-      title,
-      alt,
-      size: options.size,
-      onLoaded: mediaItem.onLoaded,
-      canLoad: mediaItem.canLoad
-    };
-    const hasGallery = options.galleryId != null && typeof options.open === 'function';
-    if (hasGallery) {
-      mediaItemProps['data-gallery'] = JSON.stringify({
-        galleryId: options.galleryId,
-        media
-      });
-      mediaItemProps.onClick = event => {
-        if (options.open) {
-          options.open(media);
-        }
-      };
-    }
-    if (bomCore.isMediaImage(media)) {
-      if (options.width) {
-        mediaItemProps.width = options.width;
-      }
-      mediaItemProps.height = options.height;
-      mediaItemProps.aspectRatio = options.aspectRatio;
-      mediaItemProps.aspectRatioSm = options.aspectRatioSm;
-      mediaItemProps.aspectRatioMd = options.aspectRatioMd;
-      mediaItemProps.aspectRatioLg = options.aspectRatioLg;
-      mediaItemProps.aspectRatioXl = options.aspectRatioXl;
-      if (options.eager) {
-        mediaItemProps.loading = 'eager';
-      }
-    }
-    return mediaItemProps;
-  }, [mediaItem]);
+  const mediaItem = React.useMemo(() => getMediaItem(item, options), [item, options]);
+  const mediaItemProps = React.useMemo(() => getMediaItemProps(mediaItem, options), [mediaItem, options]);
   return bomCore.isMediaVideo(mediaItem) ? jsxRuntime.jsx(MediaVideo, Object.assign({}, mediaItemProps)) : jsxRuntime.jsx(MediaImage, Object.assign({}, mediaItemProps));
 };
 const MediaItems = _ref2 => {
@@ -4735,6 +4667,87 @@ const MediaItems = _ref2 => {
     options: options
   }, m));
 };
+function getMediaItem(item, options) {
+  if (typeof item['media'] === 'object') {
+    item = item['media'];
+  }
+  const mediaItem = {
+    type: item.type,
+    src: item.src
+  };
+  if (item.abstract) {
+    mediaItem.abstract = item.abstract;
+  }
+  if (item.alt) {
+    mediaItem.alt = item.alt;
+  }
+  if (item.mimeType) {
+    mediaItem.mimeType = item.mimeType;
+  }
+  if (item.url) {
+    mediaItem.src = item.url;
+  }
+  if (item.title) {
+    mediaItem.title = item.title;
+  }
+  if (typeof item.width === 'number') {
+    mediaItem.mediaWidth = item.width;
+  }
+  if (typeof item.height === 'number') {
+    mediaItem.mediaHeight = item.height;
+  }
+  mediaItem.width = options.width;
+  mediaItem.height = options.height;
+  mediaItem.aspectRatio = options.aspectRatio;
+  mediaItem.aspectRatioSm = options.aspectRatioSm;
+  mediaItem.aspectRatioMd = options.aspectRatioMd;
+  mediaItem.aspectRatioLg = options.aspectRatioLg;
+  mediaItem.aspectRatioXl = options.aspectRatioXl;
+  mediaItem.onLoaded = options.onLoaded;
+  mediaItem.canLoad = options.canLoad;
+  return mediaItem;
+}
+function getMediaItemProps(mediaItem, options) {
+  const media = __rest(mediaItem, ["width", "height", "sizes"]);
+  const title = media.title || options.title || media.alt || options.alt;
+  const alt = media.alt || options.alt || media.title || options.title;
+  const src = media.src || media.url || '';
+  const mediaItemProps = {
+    src,
+    title,
+    alt,
+    size: options.size,
+    onLoaded: mediaItem.onLoaded,
+    canLoad: mediaItem.canLoad
+  };
+  const hasGallery = options.galleryId != null && typeof options.open === 'function';
+  if (hasGallery) {
+    mediaItemProps['data-gallery'] = JSON.stringify({
+      galleryId: options.galleryId,
+      media
+    });
+    mediaItemProps.onClick = event => {
+      if (options.open) {
+        options.open(media);
+      }
+    };
+  }
+  if (bomCore.isMediaImage(media)) {
+    mediaItemProps.mediaWidth = mediaItem.mediaWidth;
+    mediaItemProps.mediaHeight = mediaItem.mediaHeight;
+    mediaItemProps.width = options.width;
+    mediaItemProps.height = options.height;
+    mediaItemProps.aspectRatio = options.aspectRatio;
+    mediaItemProps.aspectRatioSm = options.aspectRatioSm;
+    mediaItemProps.aspectRatioMd = options.aspectRatioMd;
+    mediaItemProps.aspectRatioLg = options.aspectRatioLg;
+    mediaItemProps.aspectRatioXl = options.aspectRatioXl;
+    if (options.eager) {
+      mediaItemProps.loading = 'eager';
+    }
+  }
+  return mediaItemProps;
+}
 
 const StyledMediaInfo = styled__default.default.div`
   position: absolute;
@@ -4836,7 +4849,7 @@ const StyledMedia$1 = styled__default.default.div`
       left: 0;
       width: 100%;
       height: 100%;
-      ${typeof props.overlay === 'number' ? `background: rgba(0,0,0,${props.overlay});` : `background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 15.9%, rgba(0, 0, 0, 0) 41.67%, rgba(0, 0, 0, 0.1) 61.79%, rgba(0, 0, 0, 0.6) 100%);`}
+      ${typeof props.overlay === 'number' ? `background: rgba(0,0,0,${props.overlay});` : 'background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 15.9%, rgba(0, 0, 0, 0) 41.67%, rgba(0, 0, 0, 0.1) 61.79%, rgba(0, 0, 0, 0.6) 100%);'}
     }
   ` : ''}
 `;
@@ -4865,10 +4878,10 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
     'media--gallery': id
   });
   const style = {};
-  if (typeof width === 'string' && width.indexOf('px') !== -1) {
+  if (typeof width === 'string') {
     style.width = width;
   }
-  if (typeof height === 'string' && height.indexOf('px') !== -1) {
+  if (typeof height === 'string') {
     style.height = height;
   }
   return jsxRuntime.jsx(StyledMedia$1, Object.assign({