@micromag/element-image 0.2.403 → 0.2.409

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.
Files changed (3) hide show
  1. package/es/index.js +39 -39
  2. package/lib/index.js +41 -41
  3. package/package.json +3 -3
package/es/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
- import React, { useState, useCallback } from 'react';
5
- import PropTypes$1 from 'prop-types';
6
- import classNames from 'classnames';
4
+ import { getSizeWithinBounds } from '@folklore/size';
7
5
  import { PropTypes } from '@micromag/core';
8
6
  import { getOptimalImageUrl } from '@micromag/core/utils';
9
- import { getSizeWithinBounds } from '@folklore/size';
7
+ import classNames from 'classnames';
8
+ import PropTypes$1 from 'prop-types';
9
+ import React, { useState, useCallback } from 'react';
10
10
 
11
11
  var styles = {"container":"micromag-element-image-container","showEmpty":"micromag-element-image-showEmpty","img":"micromag-element-image-img"};
12
12
 
@@ -51,10 +51,9 @@ var Image = function Image(_ref) {
51
51
  onLoaded = _ref.onLoaded,
52
52
  loadingMode = _ref.loadingMode;
53
53
 
54
- var _ref2 = media || {},
55
- _ref2$url = _ref2.url,
56
- url = _ref2$url === void 0 ? null : _ref2$url,
57
- _ref2$metadata = _ref2.metadata,
54
+ var _ref2 = media || {};
55
+ _ref2.url;
56
+ var _ref2$metadata = _ref2.metadata,
58
57
  metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
59
58
 
60
59
  var _ref3 = metadata || {},
@@ -67,36 +66,38 @@ var Image = function Image(_ref) {
67
66
 
68
67
  var mediaRatio = mediaWidth / mediaHeight;
69
68
 
70
- var _useState = useState(null),
69
+ var _useState = useState({
70
+ width: mediaWidth,
71
+ height: mediaHeight
72
+ }),
71
73
  _useState2 = _slicedToArray(_useState, 2),
72
- realSize = _useState2[0],
74
+ _useState2$ = _useState2[0],
75
+ _useState2$$width = _useState2$.width,
76
+ realWidth = _useState2$$width === void 0 ? 0 : _useState2$$width,
77
+ _useState2$$height = _useState2$.height,
78
+ realHeight = _useState2$$height === void 0 ? 0 : _useState2$$height,
73
79
  setRealSize = _useState2[1];
74
80
 
75
- var _ref4 = realSize || {},
76
- _ref4$realWidth = _ref4.realWidth,
77
- realWidth = _ref4$realWidth === void 0 ? 0 : _ref4$realWidth,
78
- _ref4$realHeight = _ref4.realHeight,
79
- realHeight = _ref4$realHeight === void 0 ? 0 : _ref4$realHeight;
80
-
81
81
  var onImageLoaded = useCallback(function (e) {
82
82
  var _e$target = e.target,
83
83
  _e$target$naturalWidt = _e$target.naturalWidth,
84
84
  naturalWidth = _e$target$naturalWidt === void 0 ? 0 : _e$target$naturalWidt,
85
85
  _e$target$naturalHeig = _e$target.naturalHeight,
86
86
  naturalHeight = _e$target$naturalHeig === void 0 ? 0 : _e$target$naturalHeig;
87
- setRealSize({
88
- width: naturalWidth,
89
- height: naturalHeight
90
- });
87
+
88
+ if (naturalWidth !== realWidth || naturalHeight !== realHeight) {
89
+ setRealSize({
90
+ width: naturalWidth || 0,
91
+ height: naturalHeight || 0
92
+ });
93
+ }
91
94
 
92
95
  if (onLoaded !== null) {
93
96
  onLoaded(e);
94
97
  }
95
98
  }, [onLoaded]);
96
- var finalMediaWidth = realWidth || mediaWidth || 0;
97
- var finalMediaHeight = realHeight || mediaHeight || 0;
98
99
  var withFit = objectFit !== null;
99
- var mediaHasSize = finalMediaWidth > 0 && finalMediaHeight > 0;
100
+ var mediaHasSize = realWidth > 0 && realHeight > 0;
100
101
  var finalContainerStyle;
101
102
  var finalImageStyle;
102
103
 
@@ -108,16 +109,16 @@ var Image = function Image(_ref) {
108
109
  var imageObjectFit = null;
109
110
  var imageObjectPosition = null;
110
111
 
111
- var _ref5 = objectFit || {},
112
- _ref5$fit = _ref5.fit,
113
- fit = _ref5$fit === void 0 ? null : _ref5$fit,
114
- _ref5$horizontalPosit = _ref5.horizontalPosition,
115
- horizontalPosition = _ref5$horizontalPosit === void 0 ? 'center' : _ref5$horizontalPosit,
116
- _ref5$verticalPositio = _ref5.verticalPosition,
117
- verticalPosition = _ref5$verticalPositio === void 0 ? 'center' : _ref5$verticalPositio;
112
+ var _ref4 = objectFit || {},
113
+ _ref4$fit = _ref4.fit,
114
+ fit = _ref4$fit === void 0 ? null : _ref4$fit,
115
+ _ref4$horizontalPosit = _ref4.horizontalPosition,
116
+ horizontalPosition = _ref4$horizontalPosit === void 0 ? 'center' : _ref4$horizontalPosit,
117
+ _ref4$verticalPositio = _ref4.verticalPosition,
118
+ verticalPosition = _ref4$verticalPositio === void 0 ? 'center' : _ref4$verticalPositio;
118
119
 
119
120
  if (mediaHasSize) {
120
- var _getSizeWithinBounds = getSizeWithinBounds(finalMediaWidth, finalMediaHeight, width, height, {
121
+ var _getSizeWithinBounds = getSizeWithinBounds(realWidth, realHeight, width, height, {
121
122
  cover: fit === 'cover'
122
123
  }),
123
124
  resizedImageWidth = _getSizeWithinBounds.width,
@@ -166,8 +167,8 @@ var Image = function Image(_ref) {
166
167
  var _finalHeight = height !== null ? height : ratioHeight;
167
168
 
168
169
  if (_finalWidth === null && _finalHeight === null) {
169
- _finalWidth = finalMediaWidth > 0 ? mediaWidth : null;
170
- _finalHeight = finalMediaHeight > 0 ? mediaHeight : null;
170
+ _finalWidth = realWidth > 0 ? mediaWidth : null;
171
+ _finalHeight = realHeight > 0 ? mediaHeight : null;
171
172
  }
172
173
 
173
174
  finalImageStyle = {
@@ -185,18 +186,17 @@ var Image = function Image(_ref) {
185
186
  _finalImageStyle$heig = _finalImageStyle.height,
186
187
  finalHeight = _finalImageStyle$heig === void 0 ? null : _finalImageStyle$heig;
187
188
  var finalUrl = getOptimalImageUrl(media, finalWidth, finalHeight);
188
- var img = url ? /*#__PURE__*/React.createElement("img", {
189
+ return /*#__PURE__*/React.createElement("div", {
190
+ className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
191
+ style: finalContainerStyle
192
+ }, finalUrl !== null ? /*#__PURE__*/React.createElement("img", {
189
193
  src: finalUrl,
190
194
  alt: alt || description,
191
195
  className: classNames([styles.img, _defineProperty({}, imageClassName, imageClassName !== null)]),
192
196
  style: finalImageStyle,
193
197
  onLoad: onImageLoaded,
194
198
  loading: loadingMode
195
- }) : null;
196
- return /*#__PURE__*/React.createElement("div", {
197
- className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
198
- style: finalContainerStyle
199
- }, img);
199
+ }) : null);
200
200
  };
201
201
 
202
202
  Image.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -3,21 +3,21 @@
3
3
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
5
5
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
6
- var React = require('react');
7
- var PropTypes = require('prop-types');
8
- var classNames = require('classnames');
6
+ var size = require('@folklore/size');
9
7
  var core = require('@micromag/core');
10
8
  var utils = require('@micromag/core/utils');
11
- var size = require('@folklore/size');
9
+ var classNames = require('classnames');
10
+ var PropTypes = require('prop-types');
11
+ var React = require('react');
12
12
 
13
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
14
 
15
15
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
16
16
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
17
17
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
18
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
20
18
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
19
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
20
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
21
 
22
22
  var styles = {"container":"micromag-element-image-container","showEmpty":"micromag-element-image-showEmpty","img":"micromag-element-image-img"};
23
23
 
@@ -62,10 +62,9 @@ var Image = function Image(_ref) {
62
62
  onLoaded = _ref.onLoaded,
63
63
  loadingMode = _ref.loadingMode;
64
64
 
65
- var _ref2 = media || {},
66
- _ref2$url = _ref2.url,
67
- url = _ref2$url === void 0 ? null : _ref2$url,
68
- _ref2$metadata = _ref2.metadata,
65
+ var _ref2 = media || {};
66
+ _ref2.url;
67
+ var _ref2$metadata = _ref2.metadata,
69
68
  metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
70
69
 
71
70
  var _ref3 = metadata || {},
@@ -78,36 +77,38 @@ var Image = function Image(_ref) {
78
77
 
79
78
  var mediaRatio = mediaWidth / mediaHeight;
80
79
 
81
- var _useState = React.useState(null),
80
+ var _useState = React.useState({
81
+ width: mediaWidth,
82
+ height: mediaHeight
83
+ }),
82
84
  _useState2 = _slicedToArray__default["default"](_useState, 2),
83
- realSize = _useState2[0],
85
+ _useState2$ = _useState2[0],
86
+ _useState2$$width = _useState2$.width,
87
+ realWidth = _useState2$$width === void 0 ? 0 : _useState2$$width,
88
+ _useState2$$height = _useState2$.height,
89
+ realHeight = _useState2$$height === void 0 ? 0 : _useState2$$height,
84
90
  setRealSize = _useState2[1];
85
91
 
86
- var _ref4 = realSize || {},
87
- _ref4$realWidth = _ref4.realWidth,
88
- realWidth = _ref4$realWidth === void 0 ? 0 : _ref4$realWidth,
89
- _ref4$realHeight = _ref4.realHeight,
90
- realHeight = _ref4$realHeight === void 0 ? 0 : _ref4$realHeight;
91
-
92
92
  var onImageLoaded = React.useCallback(function (e) {
93
93
  var _e$target = e.target,
94
94
  _e$target$naturalWidt = _e$target.naturalWidth,
95
95
  naturalWidth = _e$target$naturalWidt === void 0 ? 0 : _e$target$naturalWidt,
96
96
  _e$target$naturalHeig = _e$target.naturalHeight,
97
97
  naturalHeight = _e$target$naturalHeig === void 0 ? 0 : _e$target$naturalHeig;
98
- setRealSize({
99
- width: naturalWidth,
100
- height: naturalHeight
101
- });
98
+
99
+ if (naturalWidth !== realWidth || naturalHeight !== realHeight) {
100
+ setRealSize({
101
+ width: naturalWidth || 0,
102
+ height: naturalHeight || 0
103
+ });
104
+ }
102
105
 
103
106
  if (onLoaded !== null) {
104
107
  onLoaded(e);
105
108
  }
106
109
  }, [onLoaded]);
107
- var finalMediaWidth = realWidth || mediaWidth || 0;
108
- var finalMediaHeight = realHeight || mediaHeight || 0;
109
110
  var withFit = objectFit !== null;
110
- var mediaHasSize = finalMediaWidth > 0 && finalMediaHeight > 0;
111
+ var mediaHasSize = realWidth > 0 && realHeight > 0;
111
112
  var finalContainerStyle;
112
113
  var finalImageStyle;
113
114
 
@@ -119,16 +120,16 @@ var Image = function Image(_ref) {
119
120
  var imageObjectFit = null;
120
121
  var imageObjectPosition = null;
121
122
 
122
- var _ref5 = objectFit || {},
123
- _ref5$fit = _ref5.fit,
124
- fit = _ref5$fit === void 0 ? null : _ref5$fit,
125
- _ref5$horizontalPosit = _ref5.horizontalPosition,
126
- horizontalPosition = _ref5$horizontalPosit === void 0 ? 'center' : _ref5$horizontalPosit,
127
- _ref5$verticalPositio = _ref5.verticalPosition,
128
- verticalPosition = _ref5$verticalPositio === void 0 ? 'center' : _ref5$verticalPositio;
123
+ var _ref4 = objectFit || {},
124
+ _ref4$fit = _ref4.fit,
125
+ fit = _ref4$fit === void 0 ? null : _ref4$fit,
126
+ _ref4$horizontalPosit = _ref4.horizontalPosition,
127
+ horizontalPosition = _ref4$horizontalPosit === void 0 ? 'center' : _ref4$horizontalPosit,
128
+ _ref4$verticalPositio = _ref4.verticalPosition,
129
+ verticalPosition = _ref4$verticalPositio === void 0 ? 'center' : _ref4$verticalPositio;
129
130
 
130
131
  if (mediaHasSize) {
131
- var _getSizeWithinBounds = size.getSizeWithinBounds(finalMediaWidth, finalMediaHeight, width, height, {
132
+ var _getSizeWithinBounds = size.getSizeWithinBounds(realWidth, realHeight, width, height, {
132
133
  cover: fit === 'cover'
133
134
  }),
134
135
  resizedImageWidth = _getSizeWithinBounds.width,
@@ -177,8 +178,8 @@ var Image = function Image(_ref) {
177
178
  var _finalHeight = height !== null ? height : ratioHeight;
178
179
 
179
180
  if (_finalWidth === null && _finalHeight === null) {
180
- _finalWidth = finalMediaWidth > 0 ? mediaWidth : null;
181
- _finalHeight = finalMediaHeight > 0 ? mediaHeight : null;
181
+ _finalWidth = realWidth > 0 ? mediaWidth : null;
182
+ _finalHeight = realHeight > 0 ? mediaHeight : null;
182
183
  }
183
184
 
184
185
  finalImageStyle = {
@@ -196,18 +197,17 @@ var Image = function Image(_ref) {
196
197
  _finalImageStyle$heig = _finalImageStyle.height,
197
198
  finalHeight = _finalImageStyle$heig === void 0 ? null : _finalImageStyle$heig;
198
199
  var finalUrl = utils.getOptimalImageUrl(media, finalWidth, finalHeight);
199
- var img = url ? /*#__PURE__*/React__default["default"].createElement("img", {
200
+ return /*#__PURE__*/React__default["default"].createElement("div", {
201
+ className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
202
+ style: finalContainerStyle
203
+ }, finalUrl !== null ? /*#__PURE__*/React__default["default"].createElement("img", {
200
204
  src: finalUrl,
201
205
  alt: alt || description,
202
206
  className: classNames__default["default"]([styles.img, _defineProperty__default["default"]({}, imageClassName, imageClassName !== null)]),
203
207
  style: finalImageStyle,
204
208
  onLoad: onImageLoaded,
205
209
  loading: loadingMode
206
- }) : null;
207
- return /*#__PURE__*/React__default["default"].createElement("div", {
208
- className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
209
- style: finalContainerStyle
210
- }, img);
210
+ }) : null);
211
211
  };
212
212
 
213
213
  Image.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-image",
3
- "version": "0.2.403",
3
+ "version": "0.2.409",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -50,7 +50,7 @@
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/size": "^0.1.15",
53
- "@micromag/core": "^0.2.403",
53
+ "@micromag/core": "^0.2.409",
54
54
  "classnames": "^2.2.6",
55
55
  "prop-types": "^15.7.2",
56
56
  "react-intl": "^5.12.1",
@@ -59,5 +59,5 @@
59
59
  "publishConfig": {
60
60
  "access": "public"
61
61
  },
62
- "gitHead": "7a6604651c990286e594350ef730d40772937195"
62
+ "gitHead": "4c16c3bb63644d1bd5b7d50086098337317ee3f6"
63
63
  }