@micromag/element-image 0.3.541 → 0.3.547

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-image",
-    "version": "0.3.541",
+    "version": "0.3.547",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,11 +30,10 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -61,7 +60,7 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.541",
+        "@micromag/core": "^0.3.547",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^6.6.4",
@@ -71,5 +70,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,199 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var size = require('@folklore/size');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var utils = require('@micromag/core/utils');
-
-var styles = {"container":"micromag-element-image-container","showEmpty":"micromag-element-image-showEmpty","img":"micromag-element-image-img"};
-
-var propTypes = {
-  media: core.PropTypes.imageMedia,
-  alt: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  resolution: PropTypes.number,
-  objectFit: core.PropTypes.objectFit,
-  containerStyle: core.PropTypes.containerStyle,
-  imageStyle: core.PropTypes.containerStyle,
-  className: PropTypes.string,
-  imageClassName: PropTypes.string,
-  onLoaded: PropTypes.func,
-  loadingMode: PropTypes.string,
-  shouldLoad: PropTypes.bool
-};
-var defaultProps = {
-  media: null,
-  alt: null,
-  width: null,
-  height: null,
-  resolution: 1,
-  objectFit: null,
-  containerStyle: {},
-  //
-  imageStyle: {},
-  className: null,
-  imageClassName: null,
-  onLoaded: null,
-  loadingMode: 'lazy',
-  shouldLoad: true
-};
-var Image = function Image(_ref) {
-  var media = _ref.media,
-    alt = _ref.alt,
-    width = _ref.width,
-    height = _ref.height,
-    resolution = _ref.resolution,
-    objectFit = _ref.objectFit,
-    containerStyle = _ref.containerStyle,
-    imageStyle = _ref.imageStyle,
-    className = _ref.className,
-    imageClassName = _ref.imageClassName,
-    onLoaded = _ref.onLoaded,
-    loadingMode = _ref.loadingMode,
-    shouldLoad = _ref.shouldLoad;
-  var _ref2 = media || {},
-    _ref2$metadata = _ref2.metadata,
-    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
-  var _ref3 = metadata || {},
-    _ref3$width = _ref3.width,
-    mediaWidth = _ref3$width === void 0 ? 0 : _ref3$width,
-    _ref3$height = _ref3.height,
-    mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height,
-    _ref3$description = _ref3.description,
-    description = _ref3$description === void 0 ? 'image' : _ref3$description;
-  var mediaRatio = mediaWidth / mediaHeight;
-  var _useState = React.useState({
-      width: mediaWidth,
-      height: mediaHeight
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    _useState2$ = _useState2[0],
-    _useState2$$width = _useState2$.width,
-    realWidth = _useState2$$width === void 0 ? 0 : _useState2$$width,
-    _useState2$$height = _useState2$.height,
-    realHeight = _useState2$$height === void 0 ? 0 : _useState2$$height,
-    setRealSize = _useState2[1];
-  var wasLoadedRef = React.useRef(shouldLoad);
-  if (shouldLoad && !wasLoadedRef.current) {
-    wasLoadedRef.current = shouldLoad;
-  }
-  var finalShouldLoad = wasLoadedRef.current;
-  var onImageLoaded = React.useCallback(function (e) {
-    var _e$target = e.target,
-      _e$target$naturalWidt = _e$target.naturalWidth,
-      naturalWidth = _e$target$naturalWidt === void 0 ? 0 : _e$target$naturalWidt,
-      _e$target$naturalHeig = _e$target.naturalHeight,
-      naturalHeight = _e$target$naturalHeig === void 0 ? 0 : _e$target$naturalHeig;
-    if (naturalWidth !== realWidth || naturalHeight !== realHeight) {
-      setRealSize({
-        width: naturalWidth || 0,
-        height: naturalHeight || 0
-      });
-    }
-    if (onLoaded !== null) {
-      onLoaded(e);
-    }
-  }, [onLoaded]);
-  var withFit = objectFit !== null;
-  var mediaHasSize = realWidth > 0 && realHeight > 0;
-  var finalContainerStyle;
-  var finalImageStyle;
-  if (withFit) {
-    var imageTop = 0;
-    var imageLeft = 0;
-    var imageWidth = width;
-    var imageHeight = height;
-    var imageObjectFit = null;
-    var imageObjectPosition = null;
-    var _ref4 = objectFit || {},
-      _ref4$fit = _ref4.fit,
-      fit = _ref4$fit === void 0 ? null : _ref4$fit,
-      _ref4$horizontalPosit = _ref4.horizontalPosition,
-      horizontalPosition = _ref4$horizontalPosit === void 0 ? 'center' : _ref4$horizontalPosit,
-      _ref4$verticalPositio = _ref4.verticalPosition,
-      verticalPosition = _ref4$verticalPositio === void 0 ? 'center' : _ref4$verticalPositio;
-    if (mediaHasSize) {
-      var _getSizeWithinBounds = size.getSizeWithinBounds(realWidth, realHeight, width, height, {
-          cover: fit === 'cover'
-        }),
-        resizedImageWidth = _getSizeWithinBounds.width,
-        resizedImageHeight = _getSizeWithinBounds.height;
-      imageWidth = resizedImageWidth;
-      imageHeight = resizedImageHeight;
-      if (horizontalPosition === 'center') {
-        imageLeft = -(resizedImageWidth - width) / 2;
-      } else if (horizontalPosition === 'right') {
-        imageLeft = -(resizedImageWidth - width);
-      }
-      if (verticalPosition === 'center') {
-        imageTop = -(resizedImageHeight - height) / 2;
-      } else if (verticalPosition === 'bottom') {
-        imageTop = -(resizedImageHeight - height);
-      }
-    } else {
-      imageObjectFit = fit;
-      imageObjectPosition = "".concat(horizontalPosition, " ").concat(verticalPosition);
-    }
-    finalContainerStyle = {
-      width: width,
-      height: height
-    };
-    finalImageStyle = {
-      position: 'absolute',
-      width: imageWidth,
-      height: imageHeight,
-      top: imageTop,
-      left: imageLeft,
-      objectFit: imageObjectFit,
-      objectPosition: imageObjectPosition
-    };
-  } else {
-    var validWidth = width !== null && typeof width === 'number';
-    var validHeight = height !== null && typeof height === 'number';
-    var ratioWidth = mediaRatio && validHeight ? height * mediaRatio : null;
-    var ratioHeight = mediaRatio && validWidth ? width / mediaRatio : null;
-    var _finalWidth = width !== null ? width : ratioWidth;
-    var _finalHeight = height !== null ? height : ratioHeight;
-    if (_finalWidth === null && _finalHeight === null) {
-      _finalWidth = realWidth > 0 ? mediaWidth : null;
-      _finalHeight = realHeight > 0 ? mediaHeight : null;
-    }
-    finalImageStyle = {
-      width: _finalWidth,
-      height: _finalHeight
-    };
-    finalContainerStyle = finalImageStyle;
-  }
-  finalContainerStyle = _objectSpread(_objectSpread({}, finalContainerStyle), containerStyle);
-  finalImageStyle = _objectSpread(_objectSpread({}, finalImageStyle), imageStyle);
-  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 = utils.getOptimalImageUrl(media, finalWidth, finalHeight, {
-    resolution: resolution
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
-    style: finalContainerStyle
-  }, finalUrl !== null && finalShouldLoad ? /*#__PURE__*/React.createElement("img", {
-    src: finalUrl,
-    alt: alt || description,
-    className: classNames([styles.img, _defineProperty({}, imageClassName, imageClassName !== null)]),
-    style: finalImageStyle,
-    onLoad: onImageLoaded,
-    loading: loadingMode
-  }) : null);
-};
-Image.propTypes = propTypes;
-Image.defaultProps = defaultProps;
-var Image$1 = Image;
-
-module.exports = Image$1;