@micromag/element-image 0.3.91 → 0.3.107

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 +15 -5
  2. package/lib/index.js +14 -4
  3. package/package.json +7 -7
package/es/index.js CHANGED
@@ -6,7 +6,7 @@ import { PropTypes } from '@micromag/core';
6
6
  import { getOptimalImageUrl } from '@micromag/core/utils';
7
7
  import classNames from 'classnames';
8
8
  import PropTypes$1 from 'prop-types';
9
- import React, { useState, useCallback } from 'react';
9
+ import React, { useState, useRef, 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
 
@@ -22,7 +22,8 @@ var propTypes = {
22
22
  className: PropTypes$1.string,
23
23
  imageClassName: PropTypes$1.string,
24
24
  onLoaded: PropTypes$1.func,
25
- loadingMode: PropTypes$1.string
25
+ loadingMode: PropTypes$1.string,
26
+ shouldLoad: PropTypes$1.bool
26
27
  };
27
28
  var defaultProps = {
28
29
  media: null,
@@ -37,7 +38,8 @@ var defaultProps = {
37
38
  className: null,
38
39
  imageClassName: null,
39
40
  onLoaded: null,
40
- loadingMode: 'lazy'
41
+ loadingMode: 'lazy',
42
+ shouldLoad: true
41
43
  };
42
44
 
43
45
  var Image = function Image(_ref) {
@@ -52,7 +54,8 @@ var Image = function Image(_ref) {
52
54
  className = _ref.className,
53
55
  imageClassName = _ref.imageClassName,
54
56
  onLoaded = _ref.onLoaded,
55
- loadingMode = _ref.loadingMode;
57
+ loadingMode = _ref.loadingMode,
58
+ shouldLoad = _ref.shouldLoad;
56
59
 
57
60
  var _ref2 = media || {};
58
61
  _ref2.url;
@@ -81,6 +84,13 @@ var Image = function Image(_ref) {
81
84
  realHeight = _useState2$$height === void 0 ? 0 : _useState2$$height,
82
85
  setRealSize = _useState2[1];
83
86
 
87
+ var wasLoadedRef = useRef(shouldLoad);
88
+
89
+ if (shouldLoad && !wasLoadedRef.current) {
90
+ wasLoadedRef.current = shouldLoad;
91
+ }
92
+
93
+ var finalShouldLoad = wasLoadedRef.current;
84
94
  var onImageLoaded = useCallback(function (e) {
85
95
  var _e$target = e.target,
86
96
  _e$target$naturalWidt = _e$target.naturalWidth,
@@ -194,7 +204,7 @@ var Image = function Image(_ref) {
194
204
  return /*#__PURE__*/React.createElement("div", {
195
205
  className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
196
206
  style: finalContainerStyle
197
- }, finalUrl !== null ? /*#__PURE__*/React.createElement("img", {
207
+ }, finalUrl !== null && finalShouldLoad ? /*#__PURE__*/React.createElement("img", {
198
208
  src: finalUrl,
199
209
  alt: alt || description,
200
210
  className: classNames([styles.img, _defineProperty({}, imageClassName, imageClassName !== null)]),
package/lib/index.js CHANGED
@@ -33,7 +33,8 @@ var propTypes = {
33
33
  className: PropTypes__default["default"].string,
34
34
  imageClassName: PropTypes__default["default"].string,
35
35
  onLoaded: PropTypes__default["default"].func,
36
- loadingMode: PropTypes__default["default"].string
36
+ loadingMode: PropTypes__default["default"].string,
37
+ shouldLoad: PropTypes__default["default"].bool
37
38
  };
38
39
  var defaultProps = {
39
40
  media: null,
@@ -48,7 +49,8 @@ var defaultProps = {
48
49
  className: null,
49
50
  imageClassName: null,
50
51
  onLoaded: null,
51
- loadingMode: 'lazy'
52
+ loadingMode: 'lazy',
53
+ shouldLoad: true
52
54
  };
53
55
 
54
56
  var Image = function Image(_ref) {
@@ -63,7 +65,8 @@ var Image = function Image(_ref) {
63
65
  className = _ref.className,
64
66
  imageClassName = _ref.imageClassName,
65
67
  onLoaded = _ref.onLoaded,
66
- loadingMode = _ref.loadingMode;
68
+ loadingMode = _ref.loadingMode,
69
+ shouldLoad = _ref.shouldLoad;
67
70
 
68
71
  var _ref2 = media || {};
69
72
  _ref2.url;
@@ -92,6 +95,13 @@ var Image = function Image(_ref) {
92
95
  realHeight = _useState2$$height === void 0 ? 0 : _useState2$$height,
93
96
  setRealSize = _useState2[1];
94
97
 
98
+ var wasLoadedRef = React.useRef(shouldLoad);
99
+
100
+ if (shouldLoad && !wasLoadedRef.current) {
101
+ wasLoadedRef.current = shouldLoad;
102
+ }
103
+
104
+ var finalShouldLoad = wasLoadedRef.current;
95
105
  var onImageLoaded = React.useCallback(function (e) {
96
106
  var _e$target = e.target,
97
107
  _e$target$naturalWidt = _e$target.naturalWidth,
@@ -205,7 +215,7 @@ var Image = function Image(_ref) {
205
215
  return /*#__PURE__*/React__default["default"].createElement("div", {
206
216
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
207
217
  style: finalContainerStyle
208
- }, finalUrl !== null ? /*#__PURE__*/React__default["default"].createElement("img", {
218
+ }, finalUrl !== null && finalShouldLoad ? /*#__PURE__*/React__default["default"].createElement("img", {
209
219
  src: finalUrl,
210
220
  alt: alt || description,
211
221
  className: classNames__default["default"]([styles.img, _defineProperty__default["default"]({}, imageClassName, imageClassName !== null)]),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-image",
3
- "version": "0.3.91",
3
+ "version": "0.3.107",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -40,17 +40,17 @@
40
40
  "prepare": "../../scripts/prepare-package.sh"
41
41
  },
42
42
  "devDependencies": {
43
- "react": "^16.8.0 || ^17.0.0",
44
- "react-dom": "^16.8.0 || ^17.0.0"
43
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
44
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
45
45
  },
46
46
  "peerDependencies": {
47
- "react": "^16.8.0 || ^17.0.0",
48
- "react-dom": "^16.8.0 || ^17.0.0"
47
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
48
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/size": "^0.1.20",
53
- "@micromag/core": "^0.3.91",
53
+ "@micromag/core": "^0.3.107",
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": "bce204f3045898193845386933a98a5e3666bcf3"
62
+ "gitHead": "952ef450fe62328a0ae3ab6dbb3c3079bb66d17a"
63
63
  }