@micromag/element-image 0.3.311 → 0.3.322
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.
- package/assets/css/styles.css +1 -1
- package/es/index.js +49 -72
- package/lib/index.js +49 -72
- 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
|
|
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
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
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
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
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
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
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
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
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
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
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
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
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
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
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
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
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
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
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
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
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
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
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.
|
|
3
|
+
"version": "0.3.322",
|
|
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.
|
|
53
|
+
"@micromag/core": "^0.3.322",
|
|
54
54
|
"classnames": "^2.2.6",
|
|
55
55
|
"prop-types": "^15.7.2",
|
|
56
56
|
"react-intl": "^5.12.1",
|
|
57
|
-
"uuid": "^
|
|
57
|
+
"uuid": "^9.0.0"
|
|
58
58
|
},
|
|
59
59
|
"publishConfig": {
|
|
60
60
|
"access": "public"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "2dfe09ad5a9ac720e4bfbffcb6371fc31c24fa9f"
|
|
63
63
|
}
|