@micromag/element-image 0.3.803 → 0.3.811

package/es/index.js

@@ -4,8 +4,9 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { getSizeWithinBounds } from '@folklore/size';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useRef, useCallback } from 'react';
+import React, { forwardRef, useState, useRef, useCallback } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { useSupportsWebp } from '@micromag/core/hooks';
 import { getOptimalImageUrl } from '@micromag/core/utils';
 
 var styles = {"container":"micromag-element-image-container","img":"micromag-element-image-img"};
@@ -23,7 +24,10 @@ var propTypes = {
   imageClassName: PropTypes.string,
   onLoaded: PropTypes.func,
   loadingMode: PropTypes.string,
-  shouldLoad: PropTypes.bool
+  shouldLoad: PropTypes.bool,
+  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })])
 };
 var defaultProps = {
   media: null,
@@ -39,7 +43,8 @@ var defaultProps = {
   imageClassName: null,
   onLoaded: null,
   loadingMode: 'lazy',
-  shouldLoad: true
+  shouldLoad: true,
+  containerRef: null
 };
 var Image = function Image(_ref) {
   var media = _ref.media,
@@ -54,7 +59,8 @@ var Image = function Image(_ref) {
     imageClassName = _ref.imageClassName,
     onLoaded = _ref.onLoaded,
     loadingMode = _ref.loadingMode,
-    shouldLoad = _ref.shouldLoad;
+    shouldLoad = _ref.shouldLoad,
+    containerRef = _ref.containerRef;
   var _ref2 = media || {},
     _ref2$metadata = _ref2.metadata,
     metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
@@ -170,20 +176,26 @@ var Image = function Image(_ref) {
   }
   finalContainerStyle = _objectSpread(_objectSpread({}, finalContainerStyle), containerStyle);
   finalImageStyle = _objectSpread(_objectSpread({}, finalImageStyle), imageStyle);
+  var supportsWebp = useSupportsWebp();
+  console.log({
+    supportsWebp: supportsWebp
+  });
   var _finalImageStyle = finalImageStyle,
     _finalImageStyle$widt = _finalImageStyle.width,
     finalWidth = _finalImageStyle$widt === void 0 ? null : _finalImageStyle$widt,
     _finalImageStyle$heig = _finalImageStyle.height,
     finalHeight = _finalImageStyle$heig === void 0 ? null : _finalImageStyle$heig;
   var finalUrl = getOptimalImageUrl(media, finalWidth, finalHeight || finalWidth, {
-    resolution: resolution
+    resolution: resolution,
+    supportsWebp: supportsWebp
   });
 
   // console.log('image finalWidth, finalHeight, resolution', finalImageStyle, resolution, finalUrl);
 
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
-    style: finalContainerStyle
+    style: finalContainerStyle,
+    ref: containerRef
   }, finalUrl !== null && finalShouldLoad ? /*#__PURE__*/React.createElement("img", {
     src: finalUrl,
     alt: alt || description,
@@ -195,5 +207,10 @@ var Image = function Image(_ref) {
 };
 Image.propTypes = propTypes;
 Image.defaultProps = defaultProps;
+var Image_default = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Image, Object.assign({
+    containerRef: ref
+  }, props));
+});
 
-export { Image as default };
+export { Image_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-image",
-    "version": "0.3.803",
+    "version": "0.3.811",
     "private": false,
     "description": "",
     "keywords": [
@@ -60,7 +60,7 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.803",
+        "@micromag/core": "^0.3.811",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^6.6.4",
@@ -70,5 +70,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "b8d7486367da5144fa0824e48527c44aa4123ddf"
+    "gitHead": "80a754e5a50e86fa1e195015112ea0ff39008da8"
 }