@micromag/element-image 0.3.307 → 0.3.318

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 (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +49 -72
  3. package/lib/index.js +49 -72
  4. package/package.json +4 -4
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-element-image-container .micromag-element-image-showEmpty{margin:5px auto}.micromag-element-image-container{position:relative;overflow:hidden}.micromag-element-image-container .micromag-element-image-img{display:block;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.micromag-element-image-container .micromag-element-image-showEmpty{width:300px;height:200px;border:2px dashed #343434;color:#343434}
1
+ .micromag-element-image-container .micromag-element-image-showEmpty{margin:5px auto}.micromag-element-image-container{overflow:hidden;position:relative}.micromag-element-image-container .micromag-element-image-img{display:block;pointer-events:none;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-element-image-container .micromag-element-image-showEmpty{border:2px dashed #343434;color:#343434;height:200px;width:300px}
package/es/index.js CHANGED
@@ -41,70 +41,60 @@ var defaultProps = {
41
41
  loadingMode: 'lazy',
42
42
  shouldLoad: true
43
43
  };
44
-
45
44
  var Image = function Image(_ref) {
46
45
  var media = _ref.media,
47
- alt = _ref.alt,
48
- width = _ref.width,
49
- height = _ref.height,
50
- resolution = _ref.resolution,
51
- objectFit = _ref.objectFit,
52
- containerStyle = _ref.containerStyle,
53
- imageStyle = _ref.imageStyle,
54
- className = _ref.className,
55
- imageClassName = _ref.imageClassName,
56
- onLoaded = _ref.onLoaded,
57
- loadingMode = _ref.loadingMode,
58
- shouldLoad = _ref.shouldLoad;
59
-
46
+ alt = _ref.alt,
47
+ width = _ref.width,
48
+ height = _ref.height,
49
+ resolution = _ref.resolution,
50
+ objectFit = _ref.objectFit,
51
+ containerStyle = _ref.containerStyle,
52
+ imageStyle = _ref.imageStyle,
53
+ className = _ref.className,
54
+ imageClassName = _ref.imageClassName,
55
+ onLoaded = _ref.onLoaded,
56
+ loadingMode = _ref.loadingMode,
57
+ shouldLoad = _ref.shouldLoad;
60
58
  var _ref2 = media || {};
61
- _ref2.url;
62
- var _ref2$metadata = _ref2.metadata,
63
- metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
64
-
59
+ _ref2.url;
60
+ var _ref2$metadata = _ref2.metadata,
61
+ metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
65
62
  var _ref3 = metadata || {},
66
- _ref3$width = _ref3.width,
67
- mediaWidth = _ref3$width === void 0 ? 0 : _ref3$width,
68
- _ref3$height = _ref3.height,
69
- mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height,
70
- _ref3$description = _ref3.description,
71
- description = _ref3$description === void 0 ? 'image' : _ref3$description;
72
-
63
+ _ref3$width = _ref3.width,
64
+ mediaWidth = _ref3$width === void 0 ? 0 : _ref3$width,
65
+ _ref3$height = _ref3.height,
66
+ mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height,
67
+ _ref3$description = _ref3.description,
68
+ description = _ref3$description === void 0 ? 'image' : _ref3$description;
73
69
  var mediaRatio = mediaWidth / mediaHeight;
74
-
75
70
  var _useState = useState({
76
- width: mediaWidth,
77
- height: mediaHeight
78
- }),
79
- _useState2 = _slicedToArray(_useState, 2),
80
- _useState2$ = _useState2[0],
81
- _useState2$$width = _useState2$.width,
82
- realWidth = _useState2$$width === void 0 ? 0 : _useState2$$width,
83
- _useState2$$height = _useState2$.height,
84
- realHeight = _useState2$$height === void 0 ? 0 : _useState2$$height,
85
- setRealSize = _useState2[1];
86
-
71
+ width: mediaWidth,
72
+ height: mediaHeight
73
+ }),
74
+ _useState2 = _slicedToArray(_useState, 2),
75
+ _useState2$ = _useState2[0],
76
+ _useState2$$width = _useState2$.width,
77
+ realWidth = _useState2$$width === void 0 ? 0 : _useState2$$width,
78
+ _useState2$$height = _useState2$.height,
79
+ realHeight = _useState2$$height === void 0 ? 0 : _useState2$$height,
80
+ setRealSize = _useState2[1];
87
81
  var wasLoadedRef = useRef(shouldLoad);
88
-
89
82
  if (shouldLoad && !wasLoadedRef.current) {
90
83
  wasLoadedRef.current = shouldLoad;
91
84
  }
92
-
93
85
  var finalShouldLoad = wasLoadedRef.current;
94
86
  var onImageLoaded = useCallback(function (e) {
95
87
  var _e$target = e.target,
96
- _e$target$naturalWidt = _e$target.naturalWidth,
97
- naturalWidth = _e$target$naturalWidt === void 0 ? 0 : _e$target$naturalWidt,
98
- _e$target$naturalHeig = _e$target.naturalHeight,
99
- naturalHeight = _e$target$naturalHeig === void 0 ? 0 : _e$target$naturalHeig;
100
-
88
+ _e$target$naturalWidt = _e$target.naturalWidth,
89
+ naturalWidth = _e$target$naturalWidt === void 0 ? 0 : _e$target$naturalWidt,
90
+ _e$target$naturalHeig = _e$target.naturalHeight,
91
+ naturalHeight = _e$target$naturalHeig === void 0 ? 0 : _e$target$naturalHeig;
101
92
  if (naturalWidth !== realWidth || naturalHeight !== realHeight) {
102
93
  setRealSize({
103
94
  width: naturalWidth || 0,
104
95
  height: naturalHeight || 0
105
96
  });
106
97
  }
107
-
108
98
  if (onLoaded !== null) {
109
99
  onLoaded(e);
110
100
  }
@@ -113,7 +103,6 @@ var Image = function Image(_ref) {
113
103
  var mediaHasSize = realWidth > 0 && realHeight > 0;
114
104
  var finalContainerStyle;
115
105
  var finalImageStyle;
116
-
117
106
  if (withFit) {
118
107
  var imageTop = 0;
119
108
  var imageLeft = 0;
@@ -121,31 +110,26 @@ var Image = function Image(_ref) {
121
110
  var imageHeight = height;
122
111
  var imageObjectFit = null;
123
112
  var imageObjectPosition = null;
124
-
125
113
  var _ref4 = objectFit || {},
126
- _ref4$fit = _ref4.fit,
127
- fit = _ref4$fit === void 0 ? null : _ref4$fit,
128
- _ref4$horizontalPosit = _ref4.horizontalPosition,
129
- horizontalPosition = _ref4$horizontalPosit === void 0 ? 'center' : _ref4$horizontalPosit,
130
- _ref4$verticalPositio = _ref4.verticalPosition,
131
- verticalPosition = _ref4$verticalPositio === void 0 ? 'center' : _ref4$verticalPositio;
132
-
114
+ _ref4$fit = _ref4.fit,
115
+ fit = _ref4$fit === void 0 ? null : _ref4$fit,
116
+ _ref4$horizontalPosit = _ref4.horizontalPosition,
117
+ horizontalPosition = _ref4$horizontalPosit === void 0 ? 'center' : _ref4$horizontalPosit,
118
+ _ref4$verticalPositio = _ref4.verticalPosition,
119
+ verticalPosition = _ref4$verticalPositio === void 0 ? 'center' : _ref4$verticalPositio;
133
120
  if (mediaHasSize) {
134
121
  var _getSizeWithinBounds = getSizeWithinBounds(realWidth, realHeight, width, height, {
135
- cover: fit === 'cover'
136
- }),
137
- resizedImageWidth = _getSizeWithinBounds.width,
138
- resizedImageHeight = _getSizeWithinBounds.height;
139
-
122
+ cover: fit === 'cover'
123
+ }),
124
+ resizedImageWidth = _getSizeWithinBounds.width,
125
+ resizedImageHeight = _getSizeWithinBounds.height;
140
126
  imageWidth = resizedImageWidth;
141
127
  imageHeight = resizedImageHeight;
142
-
143
128
  if (horizontalPosition === 'center') {
144
129
  imageLeft = -(resizedImageWidth - width) / 2;
145
130
  } else if (horizontalPosition === 'right') {
146
131
  imageLeft = -(resizedImageWidth - width);
147
132
  }
148
-
149
133
  if (verticalPosition === 'center') {
150
134
  imageTop = -(resizedImageHeight - height) / 2;
151
135
  } else if (verticalPosition === 'bottom') {
@@ -155,7 +139,6 @@ var Image = function Image(_ref) {
155
139
  imageObjectFit = fit;
156
140
  imageObjectPosition = "".concat(horizontalPosition, " ").concat(verticalPosition);
157
141
  }
158
-
159
142
  finalContainerStyle = {
160
143
  width: width,
161
144
  height: height
@@ -174,30 +157,25 @@ var Image = function Image(_ref) {
174
157
  var validHeight = height !== null && typeof height === 'number';
175
158
  var ratioWidth = mediaRatio && validHeight ? height * mediaRatio : null;
176
159
  var ratioHeight = mediaRatio && validWidth ? width / mediaRatio : null;
177
-
178
160
  var _finalWidth = width !== null ? width : ratioWidth;
179
-
180
161
  var _finalHeight = height !== null ? height : ratioHeight;
181
-
182
162
  if (_finalWidth === null && _finalHeight === null) {
183
163
  _finalWidth = realWidth > 0 ? mediaWidth : null;
184
164
  _finalHeight = realHeight > 0 ? mediaHeight : null;
185
165
  }
186
-
187
166
  finalImageStyle = {
188
167
  width: _finalWidth,
189
168
  height: _finalHeight
190
169
  };
191
170
  finalContainerStyle = finalImageStyle;
192
171
  }
193
-
194
172
  finalContainerStyle = _objectSpread(_objectSpread({}, finalContainerStyle), containerStyle);
195
173
  finalImageStyle = _objectSpread(_objectSpread({}, finalImageStyle), imageStyle);
196
174
  var _finalImageStyle = finalImageStyle,
197
- _finalImageStyle$widt = _finalImageStyle.width,
198
- finalWidth = _finalImageStyle$widt === void 0 ? null : _finalImageStyle$widt,
199
- _finalImageStyle$heig = _finalImageStyle.height,
200
- finalHeight = _finalImageStyle$heig === void 0 ? null : _finalImageStyle$heig;
175
+ _finalImageStyle$widt = _finalImageStyle.width,
176
+ finalWidth = _finalImageStyle$widt === void 0 ? null : _finalImageStyle$widt,
177
+ _finalImageStyle$heig = _finalImageStyle.height,
178
+ finalHeight = _finalImageStyle$heig === void 0 ? null : _finalImageStyle$heig;
201
179
  var finalUrl = getOptimalImageUrl(media, finalWidth, finalHeight, {
202
180
  resolution: resolution
203
181
  });
@@ -213,7 +191,6 @@ var Image = function Image(_ref) {
213
191
  loading: loadingMode
214
192
  }) : null);
215
193
  };
216
-
217
194
  Image.propTypes = propTypes;
218
195
  Image.defaultProps = defaultProps;
219
196
 
package/lib/index.js CHANGED
@@ -52,70 +52,60 @@ var defaultProps = {
52
52
  loadingMode: 'lazy',
53
53
  shouldLoad: true
54
54
  };
55
-
56
55
  var Image = function Image(_ref) {
57
56
  var media = _ref.media,
58
- alt = _ref.alt,
59
- width = _ref.width,
60
- height = _ref.height,
61
- resolution = _ref.resolution,
62
- objectFit = _ref.objectFit,
63
- containerStyle = _ref.containerStyle,
64
- imageStyle = _ref.imageStyle,
65
- className = _ref.className,
66
- imageClassName = _ref.imageClassName,
67
- onLoaded = _ref.onLoaded,
68
- loadingMode = _ref.loadingMode,
69
- shouldLoad = _ref.shouldLoad;
70
-
57
+ alt = _ref.alt,
58
+ width = _ref.width,
59
+ height = _ref.height,
60
+ resolution = _ref.resolution,
61
+ objectFit = _ref.objectFit,
62
+ containerStyle = _ref.containerStyle,
63
+ imageStyle = _ref.imageStyle,
64
+ className = _ref.className,
65
+ imageClassName = _ref.imageClassName,
66
+ onLoaded = _ref.onLoaded,
67
+ loadingMode = _ref.loadingMode,
68
+ shouldLoad = _ref.shouldLoad;
71
69
  var _ref2 = media || {};
72
- _ref2.url;
73
- var _ref2$metadata = _ref2.metadata,
74
- metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
75
-
70
+ _ref2.url;
71
+ var _ref2$metadata = _ref2.metadata,
72
+ metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
76
73
  var _ref3 = metadata || {},
77
- _ref3$width = _ref3.width,
78
- mediaWidth = _ref3$width === void 0 ? 0 : _ref3$width,
79
- _ref3$height = _ref3.height,
80
- mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height,
81
- _ref3$description = _ref3.description,
82
- description = _ref3$description === void 0 ? 'image' : _ref3$description;
83
-
74
+ _ref3$width = _ref3.width,
75
+ mediaWidth = _ref3$width === void 0 ? 0 : _ref3$width,
76
+ _ref3$height = _ref3.height,
77
+ mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height,
78
+ _ref3$description = _ref3.description,
79
+ description = _ref3$description === void 0 ? 'image' : _ref3$description;
84
80
  var mediaRatio = mediaWidth / mediaHeight;
85
-
86
81
  var _useState = React.useState({
87
- width: mediaWidth,
88
- height: mediaHeight
89
- }),
90
- _useState2 = _slicedToArray__default["default"](_useState, 2),
91
- _useState2$ = _useState2[0],
92
- _useState2$$width = _useState2$.width,
93
- realWidth = _useState2$$width === void 0 ? 0 : _useState2$$width,
94
- _useState2$$height = _useState2$.height,
95
- realHeight = _useState2$$height === void 0 ? 0 : _useState2$$height,
96
- setRealSize = _useState2[1];
97
-
82
+ width: mediaWidth,
83
+ height: mediaHeight
84
+ }),
85
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
86
+ _useState2$ = _useState2[0],
87
+ _useState2$$width = _useState2$.width,
88
+ realWidth = _useState2$$width === void 0 ? 0 : _useState2$$width,
89
+ _useState2$$height = _useState2$.height,
90
+ realHeight = _useState2$$height === void 0 ? 0 : _useState2$$height,
91
+ setRealSize = _useState2[1];
98
92
  var wasLoadedRef = React.useRef(shouldLoad);
99
-
100
93
  if (shouldLoad && !wasLoadedRef.current) {
101
94
  wasLoadedRef.current = shouldLoad;
102
95
  }
103
-
104
96
  var finalShouldLoad = wasLoadedRef.current;
105
97
  var onImageLoaded = React.useCallback(function (e) {
106
98
  var _e$target = e.target,
107
- _e$target$naturalWidt = _e$target.naturalWidth,
108
- naturalWidth = _e$target$naturalWidt === void 0 ? 0 : _e$target$naturalWidt,
109
- _e$target$naturalHeig = _e$target.naturalHeight,
110
- naturalHeight = _e$target$naturalHeig === void 0 ? 0 : _e$target$naturalHeig;
111
-
99
+ _e$target$naturalWidt = _e$target.naturalWidth,
100
+ naturalWidth = _e$target$naturalWidt === void 0 ? 0 : _e$target$naturalWidt,
101
+ _e$target$naturalHeig = _e$target.naturalHeight,
102
+ naturalHeight = _e$target$naturalHeig === void 0 ? 0 : _e$target$naturalHeig;
112
103
  if (naturalWidth !== realWidth || naturalHeight !== realHeight) {
113
104
  setRealSize({
114
105
  width: naturalWidth || 0,
115
106
  height: naturalHeight || 0
116
107
  });
117
108
  }
118
-
119
109
  if (onLoaded !== null) {
120
110
  onLoaded(e);
121
111
  }
@@ -124,7 +114,6 @@ var Image = function Image(_ref) {
124
114
  var mediaHasSize = realWidth > 0 && realHeight > 0;
125
115
  var finalContainerStyle;
126
116
  var finalImageStyle;
127
-
128
117
  if (withFit) {
129
118
  var imageTop = 0;
130
119
  var imageLeft = 0;
@@ -132,31 +121,26 @@ var Image = function Image(_ref) {
132
121
  var imageHeight = height;
133
122
  var imageObjectFit = null;
134
123
  var imageObjectPosition = null;
135
-
136
124
  var _ref4 = objectFit || {},
137
- _ref4$fit = _ref4.fit,
138
- fit = _ref4$fit === void 0 ? null : _ref4$fit,
139
- _ref4$horizontalPosit = _ref4.horizontalPosition,
140
- horizontalPosition = _ref4$horizontalPosit === void 0 ? 'center' : _ref4$horizontalPosit,
141
- _ref4$verticalPositio = _ref4.verticalPosition,
142
- verticalPosition = _ref4$verticalPositio === void 0 ? 'center' : _ref4$verticalPositio;
143
-
125
+ _ref4$fit = _ref4.fit,
126
+ fit = _ref4$fit === void 0 ? null : _ref4$fit,
127
+ _ref4$horizontalPosit = _ref4.horizontalPosition,
128
+ horizontalPosition = _ref4$horizontalPosit === void 0 ? 'center' : _ref4$horizontalPosit,
129
+ _ref4$verticalPositio = _ref4.verticalPosition,
130
+ verticalPosition = _ref4$verticalPositio === void 0 ? 'center' : _ref4$verticalPositio;
144
131
  if (mediaHasSize) {
145
132
  var _getSizeWithinBounds = size.getSizeWithinBounds(realWidth, realHeight, width, height, {
146
- cover: fit === 'cover'
147
- }),
148
- resizedImageWidth = _getSizeWithinBounds.width,
149
- resizedImageHeight = _getSizeWithinBounds.height;
150
-
133
+ cover: fit === 'cover'
134
+ }),
135
+ resizedImageWidth = _getSizeWithinBounds.width,
136
+ resizedImageHeight = _getSizeWithinBounds.height;
151
137
  imageWidth = resizedImageWidth;
152
138
  imageHeight = resizedImageHeight;
153
-
154
139
  if (horizontalPosition === 'center') {
155
140
  imageLeft = -(resizedImageWidth - width) / 2;
156
141
  } else if (horizontalPosition === 'right') {
157
142
  imageLeft = -(resizedImageWidth - width);
158
143
  }
159
-
160
144
  if (verticalPosition === 'center') {
161
145
  imageTop = -(resizedImageHeight - height) / 2;
162
146
  } else if (verticalPosition === 'bottom') {
@@ -166,7 +150,6 @@ var Image = function Image(_ref) {
166
150
  imageObjectFit = fit;
167
151
  imageObjectPosition = "".concat(horizontalPosition, " ").concat(verticalPosition);
168
152
  }
169
-
170
153
  finalContainerStyle = {
171
154
  width: width,
172
155
  height: height
@@ -185,30 +168,25 @@ var Image = function Image(_ref) {
185
168
  var validHeight = height !== null && typeof height === 'number';
186
169
  var ratioWidth = mediaRatio && validHeight ? height * mediaRatio : null;
187
170
  var ratioHeight = mediaRatio && validWidth ? width / mediaRatio : null;
188
-
189
171
  var _finalWidth = width !== null ? width : ratioWidth;
190
-
191
172
  var _finalHeight = height !== null ? height : ratioHeight;
192
-
193
173
  if (_finalWidth === null && _finalHeight === null) {
194
174
  _finalWidth = realWidth > 0 ? mediaWidth : null;
195
175
  _finalHeight = realHeight > 0 ? mediaHeight : null;
196
176
  }
197
-
198
177
  finalImageStyle = {
199
178
  width: _finalWidth,
200
179
  height: _finalHeight
201
180
  };
202
181
  finalContainerStyle = finalImageStyle;
203
182
  }
204
-
205
183
  finalContainerStyle = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalContainerStyle), containerStyle);
206
184
  finalImageStyle = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalImageStyle), imageStyle);
207
185
  var _finalImageStyle = finalImageStyle,
208
- _finalImageStyle$widt = _finalImageStyle.width,
209
- finalWidth = _finalImageStyle$widt === void 0 ? null : _finalImageStyle$widt,
210
- _finalImageStyle$heig = _finalImageStyle.height,
211
- finalHeight = _finalImageStyle$heig === void 0 ? null : _finalImageStyle$heig;
186
+ _finalImageStyle$widt = _finalImageStyle.width,
187
+ finalWidth = _finalImageStyle$widt === void 0 ? null : _finalImageStyle$widt,
188
+ _finalImageStyle$heig = _finalImageStyle.height,
189
+ finalHeight = _finalImageStyle$heig === void 0 ? null : _finalImageStyle$heig;
212
190
  var finalUrl = utils.getOptimalImageUrl(media, finalWidth, finalHeight, {
213
191
  resolution: resolution
214
192
  });
@@ -224,7 +202,6 @@ var Image = function Image(_ref) {
224
202
  loading: loadingMode
225
203
  }) : null);
226
204
  };
227
-
228
205
  Image.propTypes = propTypes;
229
206
  Image.defaultProps = defaultProps;
230
207
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-image",
3
- "version": "0.3.307",
3
+ "version": "0.3.318",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -50,14 +50,14 @@
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/size": "^0.1.20",
53
- "@micromag/core": "^0.3.307",
53
+ "@micromag/core": "^0.3.318",
54
54
  "classnames": "^2.2.6",
55
55
  "prop-types": "^15.7.2",
56
56
  "react-intl": "^5.12.1",
57
- "uuid": "^8.3.2"
57
+ "uuid": "^9.0.0"
58
58
  },
59
59
  "publishConfig": {
60
60
  "access": "public"
61
61
  },
62
- "gitHead": "cdc815b7aebe1b9ae8741e1956e21780def64caf"
62
+ "gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
63
63
  }