react-datocms 4.0.2 → 4.0.4
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/dist/cjs/Image/index.js
CHANGED
|
@@ -96,10 +96,20 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
96
96
|
var className = _a.className, _m = _a.fadeInDuration, fadeInDuration = _m === void 0 ? 500 : _m, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _o = _a.lazyLoad, rawLazyLoad = _o === void 0 ? true : _o, style = _a.style, pictureStyle = _a.pictureStyle, _p = _a.layout, layout = _p === void 0 ? 'intrinsic' : _p, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _q = _a.usePlaceholder, usePlaceholder = _q === void 0 ? true : _q, _r = _a.priority, priority = _r === void 0 ? false : _r, sizes = _a.sizes, _s = _a.srcSetCandidates, srcSetCandidates = _s === void 0 ? [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] : _s;
|
|
97
97
|
var lazyLoad = priority ? false : rawLazyLoad;
|
|
98
98
|
var _t = (0, react_1.useState)(false), loaded = _t[0], setLoaded = _t[1];
|
|
99
|
+
var imageRef = (0, react_1.useRef)(null);
|
|
99
100
|
var handleLoad = function () {
|
|
100
101
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
101
102
|
setLoaded(true);
|
|
102
103
|
};
|
|
104
|
+
// https://stackoverflow.com/q/39777833/266535
|
|
105
|
+
(0, react_1.useEffect)(function () {
|
|
106
|
+
if (!imageRef.current) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
if (imageRef.current.complete && imageRef.current.naturalWidth) {
|
|
110
|
+
handleLoad();
|
|
111
|
+
}
|
|
112
|
+
}, []);
|
|
103
113
|
var _u = (0, react_intersection_observer_1.useInView)({
|
|
104
114
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
105
115
|
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
@@ -131,7 +141,22 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
131
141
|
var webpSource = data.webpSrcSet && (react_1["default"].createElement("source", { srcSet: data.webpSrcSet, sizes: (_b = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _b !== void 0 ? _b : undefined, type: "image/webp" }));
|
|
132
142
|
var regularSource = (react_1["default"].createElement("source", { srcSet: (_c = data.srcSet) !== null && _c !== void 0 ? _c : buildSrcSet(data.src, data.width, srcSetCandidates), sizes: (_d = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _d !== void 0 ? _d : undefined }));
|
|
133
143
|
var transition = fadeInDuration > 0 ? "opacity ".concat(fadeInDuration, "ms") : undefined;
|
|
134
|
-
var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style:
|
|
144
|
+
var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: {
|
|
145
|
+
backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined,
|
|
146
|
+
objectFit: objectFit,
|
|
147
|
+
objectPosition: objectPosition,
|
|
148
|
+
transition: transition,
|
|
149
|
+
opacity: showImage ? 0 : 1,
|
|
150
|
+
// During the opacity transition of the placeholder to the definitive version,
|
|
151
|
+
// hardware acceleration is triggered. This results in the browser trying to render the
|
|
152
|
+
// placeholder with your GPU, causing blurred edges. Solution: style the placeholder
|
|
153
|
+
// so the edges overflow the container
|
|
154
|
+
position: 'absolute',
|
|
155
|
+
left: '-5%',
|
|
156
|
+
top: '-5%',
|
|
157
|
+
width: '110%',
|
|
158
|
+
height: '110%'
|
|
159
|
+
} })) : null;
|
|
135
160
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
136
161
|
var height = (_g = data.height) !== null && _g !== void 0 ? _g : (aspectRatio ? width / aspectRatio : 0);
|
|
137
162
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\"></svg>");
|
|
@@ -151,11 +176,11 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
151
176
|
addImage && (react_1["default"].createElement("picture", null,
|
|
152
177
|
webpSource,
|
|
153
178
|
regularSource,
|
|
154
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad,
|
|
179
|
+
data.src && (react_1["default"].createElement("img", { ref: imageRef, src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchpriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
|
|
155
180
|
react_1["default"].createElement("noscript", null,
|
|
156
181
|
react_1["default"].createElement("picture", null,
|
|
157
182
|
webpSource,
|
|
158
183
|
regularSource,
|
|
159
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined,
|
|
184
|
+
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchpriority: priority ? 'high' : undefined }))))));
|
|
160
185
|
});
|
|
161
186
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/Image/index.js
CHANGED
|
@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import React, { useState, forwardRef, useCallback } from 'react';
|
|
12
|
+
import React, { useState, forwardRef, useCallback, useRef, useEffect, } from 'react';
|
|
13
13
|
import { useInView } from 'react-intersection-observer';
|
|
14
14
|
import { encode } from 'universal-base64';
|
|
15
15
|
var isSsr = typeof window === 'undefined';
|
|
@@ -74,10 +74,20 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
74
74
|
var className = _a.className, _m = _a.fadeInDuration, fadeInDuration = _m === void 0 ? 500 : _m, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _o = _a.lazyLoad, rawLazyLoad = _o === void 0 ? true : _o, style = _a.style, pictureStyle = _a.pictureStyle, _p = _a.layout, layout = _p === void 0 ? 'intrinsic' : _p, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _q = _a.usePlaceholder, usePlaceholder = _q === void 0 ? true : _q, _r = _a.priority, priority = _r === void 0 ? false : _r, sizes = _a.sizes, _s = _a.srcSetCandidates, srcSetCandidates = _s === void 0 ? [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] : _s;
|
|
75
75
|
var lazyLoad = priority ? false : rawLazyLoad;
|
|
76
76
|
var _t = useState(false), loaded = _t[0], setLoaded = _t[1];
|
|
77
|
+
var imageRef = useRef(null);
|
|
77
78
|
var handleLoad = function () {
|
|
78
79
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
79
80
|
setLoaded(true);
|
|
80
81
|
};
|
|
82
|
+
// https://stackoverflow.com/q/39777833/266535
|
|
83
|
+
useEffect(function () {
|
|
84
|
+
if (!imageRef.current) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (imageRef.current.complete && imageRef.current.naturalWidth) {
|
|
88
|
+
handleLoad();
|
|
89
|
+
}
|
|
90
|
+
}, []);
|
|
81
91
|
var _u = useInView({
|
|
82
92
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
83
93
|
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
@@ -109,7 +119,22 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
109
119
|
var webpSource = data.webpSrcSet && (React.createElement("source", { srcSet: data.webpSrcSet, sizes: (_b = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _b !== void 0 ? _b : undefined, type: "image/webp" }));
|
|
110
120
|
var regularSource = (React.createElement("source", { srcSet: (_c = data.srcSet) !== null && _c !== void 0 ? _c : buildSrcSet(data.src, data.width, srcSetCandidates), sizes: (_d = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _d !== void 0 ? _d : undefined }));
|
|
111
121
|
var transition = fadeInDuration > 0 ? "opacity ".concat(fadeInDuration, "ms") : undefined;
|
|
112
|
-
var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style:
|
|
122
|
+
var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: {
|
|
123
|
+
backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined,
|
|
124
|
+
objectFit: objectFit,
|
|
125
|
+
objectPosition: objectPosition,
|
|
126
|
+
transition: transition,
|
|
127
|
+
opacity: showImage ? 0 : 1,
|
|
128
|
+
// During the opacity transition of the placeholder to the definitive version,
|
|
129
|
+
// hardware acceleration is triggered. This results in the browser trying to render the
|
|
130
|
+
// placeholder with your GPU, causing blurred edges. Solution: style the placeholder
|
|
131
|
+
// so the edges overflow the container
|
|
132
|
+
position: 'absolute',
|
|
133
|
+
left: '-5%',
|
|
134
|
+
top: '-5%',
|
|
135
|
+
width: '110%',
|
|
136
|
+
height: '110%'
|
|
137
|
+
} })) : null;
|
|
113
138
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
114
139
|
var height = (_g = data.height) !== null && _g !== void 0 ? _g : (aspectRatio ? width / aspectRatio : 0);
|
|
115
140
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\"></svg>");
|
|
@@ -129,11 +154,11 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
129
154
|
addImage && (React.createElement("picture", null,
|
|
130
155
|
webpSource,
|
|
131
156
|
regularSource,
|
|
132
|
-
data.src && (React.createElement("img", { src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad,
|
|
157
|
+
data.src && (React.createElement("img", { ref: imageRef, src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchpriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
|
|
133
158
|
React.createElement("noscript", null,
|
|
134
159
|
React.createElement("picture", null,
|
|
135
160
|
webpSource,
|
|
136
161
|
regularSource,
|
|
137
|
-
data.src && (React.createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined,
|
|
162
|
+
data.src && (React.createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchpriority: priority ? 'high' : undefined }))))));
|
|
138
163
|
});
|
|
139
164
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -38,13 +38,15 @@ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
|
|
|
38
38
|
style={
|
|
39
39
|
Object {
|
|
40
40
|
"backgroundColor": undefined,
|
|
41
|
-
"height": "
|
|
42
|
-
"left":
|
|
41
|
+
"height": "110%",
|
|
42
|
+
"left": "-5%",
|
|
43
43
|
"objectFit": undefined,
|
|
44
44
|
"objectPosition": undefined,
|
|
45
|
+
"opacity": 1,
|
|
45
46
|
"position": "absolute",
|
|
46
|
-
"top":
|
|
47
|
-
"
|
|
47
|
+
"top": "-5%",
|
|
48
|
+
"transition": "opacity 500ms",
|
|
49
|
+
"width": "110%",
|
|
48
50
|
}
|
|
49
51
|
}
|
|
50
52
|
/>
|
|
@@ -93,13 +95,15 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
|
|
|
93
95
|
style={
|
|
94
96
|
Object {
|
|
95
97
|
"backgroundColor": undefined,
|
|
96
|
-
"height": "
|
|
97
|
-
"left":
|
|
98
|
+
"height": "110%",
|
|
99
|
+
"left": "-5%",
|
|
98
100
|
"objectFit": undefined,
|
|
99
101
|
"objectPosition": undefined,
|
|
102
|
+
"opacity": 0,
|
|
100
103
|
"position": "absolute",
|
|
101
|
-
"top":
|
|
102
|
-
"
|
|
104
|
+
"top": "-5%",
|
|
105
|
+
"transition": "opacity 500ms",
|
|
106
|
+
"width": "110%",
|
|
103
107
|
}
|
|
104
108
|
}
|
|
105
109
|
/>
|
|
@@ -168,13 +172,15 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
|
|
|
168
172
|
style={
|
|
169
173
|
Object {
|
|
170
174
|
"backgroundColor": undefined,
|
|
171
|
-
"height": "
|
|
172
|
-
"left":
|
|
175
|
+
"height": "110%",
|
|
176
|
+
"left": "-5%",
|
|
173
177
|
"objectFit": undefined,
|
|
174
178
|
"objectPosition": undefined,
|
|
179
|
+
"opacity": 1,
|
|
175
180
|
"position": "absolute",
|
|
176
|
-
"top":
|
|
177
|
-
"
|
|
181
|
+
"top": "-5%",
|
|
182
|
+
"transition": "opacity 500ms",
|
|
183
|
+
"width": "110%",
|
|
178
184
|
}
|
|
179
185
|
}
|
|
180
186
|
/>
|
|
@@ -246,13 +252,15 @@ exports[`Image layout=fill visible renders the image 1`] = `
|
|
|
246
252
|
style={
|
|
247
253
|
Object {
|
|
248
254
|
"backgroundColor": undefined,
|
|
249
|
-
"height": "
|
|
250
|
-
"left":
|
|
255
|
+
"height": "110%",
|
|
256
|
+
"left": "-5%",
|
|
251
257
|
"objectFit": undefined,
|
|
252
258
|
"objectPosition": undefined,
|
|
259
|
+
"opacity": 1,
|
|
253
260
|
"position": "absolute",
|
|
254
|
-
"top":
|
|
255
|
-
"
|
|
261
|
+
"top": "-5%",
|
|
262
|
+
"transition": "opacity 500ms",
|
|
263
|
+
"width": "110%",
|
|
256
264
|
}
|
|
257
265
|
}
|
|
258
266
|
/>
|
|
@@ -334,13 +342,15 @@ exports[`Image layout=fixed not visible renders the blur-up thumb 1`] = `
|
|
|
334
342
|
style={
|
|
335
343
|
Object {
|
|
336
344
|
"backgroundColor": undefined,
|
|
337
|
-
"height": "
|
|
338
|
-
"left":
|
|
345
|
+
"height": "110%",
|
|
346
|
+
"left": "-5%",
|
|
339
347
|
"objectFit": undefined,
|
|
340
348
|
"objectPosition": undefined,
|
|
349
|
+
"opacity": 1,
|
|
341
350
|
"position": "absolute",
|
|
342
|
-
"top":
|
|
343
|
-
"
|
|
351
|
+
"top": "-5%",
|
|
352
|
+
"transition": "opacity 500ms",
|
|
353
|
+
"width": "110%",
|
|
344
354
|
}
|
|
345
355
|
}
|
|
346
356
|
/>
|
|
@@ -397,13 +407,15 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
|
|
|
397
407
|
style={
|
|
398
408
|
Object {
|
|
399
409
|
"backgroundColor": undefined,
|
|
400
|
-
"height": "
|
|
401
|
-
"left":
|
|
410
|
+
"height": "110%",
|
|
411
|
+
"left": "-5%",
|
|
402
412
|
"objectFit": undefined,
|
|
403
413
|
"objectPosition": undefined,
|
|
414
|
+
"opacity": 0,
|
|
404
415
|
"position": "absolute",
|
|
405
|
-
"top":
|
|
406
|
-
"
|
|
416
|
+
"top": "-5%",
|
|
417
|
+
"transition": "opacity 500ms",
|
|
418
|
+
"width": "110%",
|
|
407
419
|
}
|
|
408
420
|
}
|
|
409
421
|
/>
|
|
@@ -480,13 +492,15 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
|
|
|
480
492
|
style={
|
|
481
493
|
Object {
|
|
482
494
|
"backgroundColor": undefined,
|
|
483
|
-
"height": "
|
|
484
|
-
"left":
|
|
495
|
+
"height": "110%",
|
|
496
|
+
"left": "-5%",
|
|
485
497
|
"objectFit": undefined,
|
|
486
498
|
"objectPosition": undefined,
|
|
499
|
+
"opacity": 1,
|
|
487
500
|
"position": "absolute",
|
|
488
|
-
"top":
|
|
489
|
-
"
|
|
501
|
+
"top": "-5%",
|
|
502
|
+
"transition": "opacity 500ms",
|
|
503
|
+
"width": "110%",
|
|
490
504
|
}
|
|
491
505
|
}
|
|
492
506
|
/>
|
|
@@ -566,13 +580,15 @@ exports[`Image layout=fixed visible renders the image 1`] = `
|
|
|
566
580
|
style={
|
|
567
581
|
Object {
|
|
568
582
|
"backgroundColor": undefined,
|
|
569
|
-
"height": "
|
|
570
|
-
"left":
|
|
583
|
+
"height": "110%",
|
|
584
|
+
"left": "-5%",
|
|
571
585
|
"objectFit": undefined,
|
|
572
586
|
"objectPosition": undefined,
|
|
587
|
+
"opacity": 1,
|
|
573
588
|
"position": "absolute",
|
|
574
|
-
"top":
|
|
575
|
-
"
|
|
589
|
+
"top": "-5%",
|
|
590
|
+
"transition": "opacity 500ms",
|
|
591
|
+
"width": "110%",
|
|
576
592
|
}
|
|
577
593
|
}
|
|
578
594
|
/>
|
|
@@ -655,13 +671,15 @@ exports[`Image layout=intrinsic not visible renders the blur-up thumb 1`] = `
|
|
|
655
671
|
style={
|
|
656
672
|
Object {
|
|
657
673
|
"backgroundColor": undefined,
|
|
658
|
-
"height": "
|
|
659
|
-
"left":
|
|
674
|
+
"height": "110%",
|
|
675
|
+
"left": "-5%",
|
|
660
676
|
"objectFit": undefined,
|
|
661
677
|
"objectPosition": undefined,
|
|
678
|
+
"opacity": 1,
|
|
662
679
|
"position": "absolute",
|
|
663
|
-
"top":
|
|
664
|
-
"
|
|
680
|
+
"top": "-5%",
|
|
681
|
+
"transition": "opacity 500ms",
|
|
682
|
+
"width": "110%",
|
|
665
683
|
}
|
|
666
684
|
}
|
|
667
685
|
/>
|
|
@@ -719,13 +737,15 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
|
|
|
719
737
|
style={
|
|
720
738
|
Object {
|
|
721
739
|
"backgroundColor": undefined,
|
|
722
|
-
"height": "
|
|
723
|
-
"left":
|
|
740
|
+
"height": "110%",
|
|
741
|
+
"left": "-5%",
|
|
724
742
|
"objectFit": undefined,
|
|
725
743
|
"objectPosition": undefined,
|
|
744
|
+
"opacity": 0,
|
|
726
745
|
"position": "absolute",
|
|
727
|
-
"top":
|
|
728
|
-
"
|
|
746
|
+
"top": "-5%",
|
|
747
|
+
"transition": "opacity 500ms",
|
|
748
|
+
"width": "110%",
|
|
729
749
|
}
|
|
730
750
|
}
|
|
731
751
|
/>
|
|
@@ -803,13 +823,15 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
|
|
|
803
823
|
style={
|
|
804
824
|
Object {
|
|
805
825
|
"backgroundColor": undefined,
|
|
806
|
-
"height": "
|
|
807
|
-
"left":
|
|
826
|
+
"height": "110%",
|
|
827
|
+
"left": "-5%",
|
|
808
828
|
"objectFit": undefined,
|
|
809
829
|
"objectPosition": undefined,
|
|
830
|
+
"opacity": 1,
|
|
810
831
|
"position": "absolute",
|
|
811
|
-
"top":
|
|
812
|
-
"
|
|
832
|
+
"top": "-5%",
|
|
833
|
+
"transition": "opacity 500ms",
|
|
834
|
+
"width": "110%",
|
|
813
835
|
}
|
|
814
836
|
}
|
|
815
837
|
/>
|
|
@@ -890,13 +912,15 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
|
|
|
890
912
|
style={
|
|
891
913
|
Object {
|
|
892
914
|
"backgroundColor": undefined,
|
|
893
|
-
"height": "
|
|
894
|
-
"left":
|
|
915
|
+
"height": "110%",
|
|
916
|
+
"left": "-5%",
|
|
895
917
|
"objectFit": undefined,
|
|
896
918
|
"objectPosition": undefined,
|
|
919
|
+
"opacity": 1,
|
|
897
920
|
"position": "absolute",
|
|
898
|
-
"top":
|
|
899
|
-
"
|
|
921
|
+
"top": "-5%",
|
|
922
|
+
"transition": "opacity 500ms",
|
|
923
|
+
"width": "110%",
|
|
900
924
|
}
|
|
901
925
|
}
|
|
902
926
|
/>
|
|
@@ -978,13 +1002,15 @@ exports[`Image layout=responsive not visible renders the blur-up thumb 1`] = `
|
|
|
978
1002
|
style={
|
|
979
1003
|
Object {
|
|
980
1004
|
"backgroundColor": undefined,
|
|
981
|
-
"height": "
|
|
982
|
-
"left":
|
|
1005
|
+
"height": "110%",
|
|
1006
|
+
"left": "-5%",
|
|
983
1007
|
"objectFit": undefined,
|
|
984
1008
|
"objectPosition": undefined,
|
|
1009
|
+
"opacity": 1,
|
|
985
1010
|
"position": "absolute",
|
|
986
|
-
"top":
|
|
987
|
-
"
|
|
1011
|
+
"top": "-5%",
|
|
1012
|
+
"transition": "opacity 500ms",
|
|
1013
|
+
"width": "110%",
|
|
988
1014
|
}
|
|
989
1015
|
}
|
|
990
1016
|
/>
|
|
@@ -1041,13 +1067,15 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
|
|
|
1041
1067
|
style={
|
|
1042
1068
|
Object {
|
|
1043
1069
|
"backgroundColor": undefined,
|
|
1044
|
-
"height": "
|
|
1045
|
-
"left":
|
|
1070
|
+
"height": "110%",
|
|
1071
|
+
"left": "-5%",
|
|
1046
1072
|
"objectFit": undefined,
|
|
1047
1073
|
"objectPosition": undefined,
|
|
1074
|
+
"opacity": 0,
|
|
1048
1075
|
"position": "absolute",
|
|
1049
|
-
"top":
|
|
1050
|
-
"
|
|
1076
|
+
"top": "-5%",
|
|
1077
|
+
"transition": "opacity 500ms",
|
|
1078
|
+
"width": "110%",
|
|
1051
1079
|
}
|
|
1052
1080
|
}
|
|
1053
1081
|
/>
|
|
@@ -1124,13 +1152,15 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
|
|
|
1124
1152
|
style={
|
|
1125
1153
|
Object {
|
|
1126
1154
|
"backgroundColor": undefined,
|
|
1127
|
-
"height": "
|
|
1128
|
-
"left":
|
|
1155
|
+
"height": "110%",
|
|
1156
|
+
"left": "-5%",
|
|
1129
1157
|
"objectFit": undefined,
|
|
1130
1158
|
"objectPosition": undefined,
|
|
1159
|
+
"opacity": 1,
|
|
1131
1160
|
"position": "absolute",
|
|
1132
|
-
"top":
|
|
1133
|
-
"
|
|
1161
|
+
"top": "-5%",
|
|
1162
|
+
"transition": "opacity 500ms",
|
|
1163
|
+
"width": "110%",
|
|
1134
1164
|
}
|
|
1135
1165
|
}
|
|
1136
1166
|
/>
|
|
@@ -1210,13 +1240,15 @@ exports[`Image layout=responsive visible renders the image 1`] = `
|
|
|
1210
1240
|
style={
|
|
1211
1241
|
Object {
|
|
1212
1242
|
"backgroundColor": undefined,
|
|
1213
|
-
"height": "
|
|
1214
|
-
"left":
|
|
1243
|
+
"height": "110%",
|
|
1244
|
+
"left": "-5%",
|
|
1215
1245
|
"objectFit": undefined,
|
|
1216
1246
|
"objectPosition": undefined,
|
|
1247
|
+
"opacity": 1,
|
|
1217
1248
|
"position": "absolute",
|
|
1218
|
-
"top":
|
|
1219
|
-
"
|
|
1249
|
+
"top": "-5%",
|
|
1250
|
+
"transition": "opacity 500ms",
|
|
1251
|
+
"width": "110%",
|
|
1220
1252
|
}
|
|
1221
1253
|
}
|
|
1222
1254
|
/>
|
package/src/Image/index.tsx
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, {
|
|
2
|
+
useState,
|
|
3
|
+
forwardRef,
|
|
4
|
+
useCallback,
|
|
5
|
+
CSSProperties,
|
|
6
|
+
useRef,
|
|
7
|
+
useEffect,
|
|
8
|
+
} from 'react';
|
|
2
9
|
import { useInView } from 'react-intersection-observer';
|
|
3
10
|
import { encode } from 'universal-base64';
|
|
4
11
|
|
|
@@ -206,11 +213,24 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
206
213
|
|
|
207
214
|
const [loaded, setLoaded] = useState(false);
|
|
208
215
|
|
|
216
|
+
const imageRef = useRef<HTMLImageElement>(null);
|
|
217
|
+
|
|
209
218
|
const handleLoad = () => {
|
|
210
219
|
onLoad?.();
|
|
211
220
|
setLoaded(true);
|
|
212
221
|
};
|
|
213
222
|
|
|
223
|
+
// https://stackoverflow.com/q/39777833/266535
|
|
224
|
+
useEffect(() => {
|
|
225
|
+
if (!imageRef.current) {
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
if (imageRef.current.complete && imageRef.current.naturalWidth) {
|
|
230
|
+
handleLoad();
|
|
231
|
+
}
|
|
232
|
+
}, []);
|
|
233
|
+
|
|
214
234
|
const [viewRef, inView] = useInView({
|
|
215
235
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
216
236
|
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
@@ -276,7 +296,17 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
276
296
|
backgroundColor: data.bgColor ?? undefined,
|
|
277
297
|
objectFit,
|
|
278
298
|
objectPosition,
|
|
279
|
-
|
|
299
|
+
transition,
|
|
300
|
+
opacity: showImage ? 0 : 1,
|
|
301
|
+
// During the opacity transition of the placeholder to the definitive version,
|
|
302
|
+
// hardware acceleration is triggered. This results in the browser trying to render the
|
|
303
|
+
// placeholder with your GPU, causing blurred edges. Solution: style the placeholder
|
|
304
|
+
// so the edges overflow the container
|
|
305
|
+
position: 'absolute',
|
|
306
|
+
left: '-5%',
|
|
307
|
+
top: '-5%',
|
|
308
|
+
width: '110%',
|
|
309
|
+
height: '110%',
|
|
280
310
|
}}
|
|
281
311
|
/>
|
|
282
312
|
) : null;
|
|
@@ -324,11 +354,12 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
324
354
|
{regularSource}
|
|
325
355
|
{data.src && (
|
|
326
356
|
<img
|
|
357
|
+
ref={imageRef}
|
|
327
358
|
src={data.src}
|
|
328
359
|
alt={data.alt ?? ''}
|
|
329
360
|
title={data.title ?? undefined}
|
|
330
361
|
onLoad={handleLoad}
|
|
331
|
-
|
|
362
|
+
fetchpriority={priority ? 'high' : undefined}
|
|
332
363
|
className={pictureClassName}
|
|
333
364
|
style={{
|
|
334
365
|
opacity: showImage ? 1 : 0,
|
|
@@ -352,9 +383,14 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
352
383
|
alt={data.alt ?? ''}
|
|
353
384
|
title={data.title ?? undefined}
|
|
354
385
|
className={pictureClassName}
|
|
355
|
-
style={{
|
|
386
|
+
style={{
|
|
387
|
+
...absolutePositioning,
|
|
388
|
+
objectFit,
|
|
389
|
+
objectPosition,
|
|
390
|
+
...pictureStyle,
|
|
391
|
+
}}
|
|
356
392
|
loading={lazyLoad ? 'lazy' : undefined}
|
|
357
|
-
|
|
393
|
+
fetchpriority={priority ? 'high' : undefined}
|
|
358
394
|
/>
|
|
359
395
|
)}
|
|
360
396
|
</picture>
|