react-datocms 3.1.4 → 4.0.0
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 +39 -11
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/esm/Image/index.d.ts +21 -1
- package/dist/esm/Image/index.js +39 -11
- package/dist/esm/Image/index.js.map +1 -1
- package/dist/types/Image/index.d.ts +21 -1
- package/package.json +1 -1
- package/src/Image/index.tsx +81 -6
package/dist/cjs/Image/index.js
CHANGED
|
@@ -64,20 +64,48 @@ var imageShowStrategy = function (_a) {
|
|
|
64
64
|
}
|
|
65
65
|
return true;
|
|
66
66
|
};
|
|
67
|
+
var buildSrcSet = function (src, width, candidateMultipliers) {
|
|
68
|
+
if (!src || !width) {
|
|
69
|
+
return undefined;
|
|
70
|
+
}
|
|
71
|
+
return candidateMultipliers
|
|
72
|
+
.map(function (multiplier) {
|
|
73
|
+
var url = new URL(src);
|
|
74
|
+
if (multiplier !== 1) {
|
|
75
|
+
url.searchParams.set('dpr', "".concat(multiplier));
|
|
76
|
+
var maxH = url.searchParams.get('max-h');
|
|
77
|
+
var maxW = url.searchParams.get('max-w');
|
|
78
|
+
if (maxH) {
|
|
79
|
+
url.searchParams.set('max-h', "".concat(Math.floor(parseInt(maxH) * multiplier)));
|
|
80
|
+
}
|
|
81
|
+
if (maxW) {
|
|
82
|
+
url.searchParams.set('max-w', "".concat(Math.floor(parseInt(maxW) * multiplier)));
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
var finalWidth = Math.floor(width * multiplier);
|
|
86
|
+
if (finalWidth < 50) {
|
|
87
|
+
return null;
|
|
88
|
+
}
|
|
89
|
+
return "".concat(url.toString(), " ").concat(finalWidth, "w");
|
|
90
|
+
})
|
|
91
|
+
.filter(Boolean)
|
|
92
|
+
.join(',');
|
|
93
|
+
};
|
|
67
94
|
exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
|
|
68
|
-
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
69
|
-
var className = _a.className,
|
|
70
|
-
var
|
|
95
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
96
|
+
var className = _a.className, _l = _a.fadeInDuration, fadeInDuration = _l === void 0 ? 500 : _l, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _m = _a.lazyLoad, rawLazyLoad = _m === void 0 ? true : _m, style = _a.style, pictureStyle = _a.pictureStyle, _o = _a.layout, layout = _o === void 0 ? 'intrinsic' : _o, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _p = _a.usePlaceholder, usePlaceholder = _p === void 0 ? true : _p, _q = _a.priority, priority = _q === void 0 ? false : _q, sizes = _a.sizes, _r = _a.srcSetCandidates, srcSetCandidates = _r === void 0 ? [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] : _r;
|
|
97
|
+
var lazyLoad = priority ? false : rawLazyLoad;
|
|
98
|
+
var _s = (0, react_1.useState)(false), loaded = _s[0], setLoaded = _s[1];
|
|
71
99
|
var handleLoad = function () {
|
|
72
100
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
73
101
|
setLoaded(true);
|
|
74
102
|
};
|
|
75
|
-
var
|
|
103
|
+
var _t = (0, react_intersection_observer_1.useInView)({
|
|
76
104
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
77
105
|
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
78
106
|
triggerOnce: true,
|
|
79
107
|
fallbackInView: true
|
|
80
|
-
}), viewRef =
|
|
108
|
+
}), viewRef = _t[0], inView = _t[1];
|
|
81
109
|
var callbackRef = (0, react_1.useCallback)(function (_ref) {
|
|
82
110
|
viewRef(_ref);
|
|
83
111
|
if (ref)
|
|
@@ -100,11 +128,11 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
100
128
|
inView: inView,
|
|
101
129
|
loaded: loaded
|
|
102
130
|
});
|
|
103
|
-
var webpSource = data.webpSrcSet && (react_1["default"].createElement("source", { srcSet: data.webpSrcSet, sizes: (_b = data.sizes) !== null && _b !== void 0 ? _b : undefined, type: "image/webp" }));
|
|
104
|
-
var regularSource =
|
|
131
|
+
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
|
+
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 }));
|
|
105
133
|
var transition = fadeInDuration > 0 ? "opacity ".concat(fadeInDuration, "ms") : undefined;
|
|
106
|
-
var placeholder = usePlaceholder ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (
|
|
107
|
-
backgroundColor: (
|
|
134
|
+
var placeholder = usePlaceholder ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: {
|
|
135
|
+
backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined,
|
|
108
136
|
opacity: showImage ? 0 : 1,
|
|
109
137
|
transition: transition,
|
|
110
138
|
objectFit: objectFit,
|
|
@@ -133,11 +161,11 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
133
161
|
addImage && (react_1["default"].createElement("picture", null,
|
|
134
162
|
webpSource,
|
|
135
163
|
regularSource,
|
|
136
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (
|
|
164
|
+
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_g = data.alt) !== null && _g !== void 0 ? _g : '', title: (_h = data.title) !== null && _h !== void 0 ? _h : 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) })))),
|
|
137
165
|
react_1["default"].createElement("noscript", null,
|
|
138
166
|
react_1["default"].createElement("picture", null,
|
|
139
167
|
webpSource,
|
|
140
168
|
regularSource,
|
|
141
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (
|
|
169
|
+
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_j = data.alt) !== null && _j !== void 0 ? _j : '', title: (_k = data.title) !== null && _k !== void 0 ? _k : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchPriority: priority ? 'high' : undefined }))))));
|
|
142
170
|
});
|
|
143
171
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgF;AAChF,2EAAwD;AACxD,qDAA0C;AAE1C,IAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAE5C,IAAM,+BAA+B,GAAG,KAAK;IAC3C,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,CAAC,CAAE,MAAc,CAAC,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -54,7 +54,7 @@ export declare type ImagePropTypes = {
|
|
|
54
54
|
* * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
|
|
55
55
|
* * `responsive`: the image will scale the dimensions down for smaller viewports and scale up for larger viewports
|
|
56
56
|
* * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
|
|
57
|
-
|
|
57
|
+
**/
|
|
58
58
|
layout?: 'intrinsic' | 'fixed' | 'responsive' | 'fill';
|
|
59
59
|
/** Defines how the image will fit into its parent container when using layout="fill" */
|
|
60
60
|
objectFit?: CSSProperties['objectFit'];
|
|
@@ -64,6 +64,26 @@ export declare type ImagePropTypes = {
|
|
|
64
64
|
onLoad?(): void;
|
|
65
65
|
/** Whether the component should use a blurred image placeholder */
|
|
66
66
|
usePlaceholder?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* The HTML5 `sizes` attribute for the image
|
|
69
|
+
*
|
|
70
|
+
* Learn more about srcset and sizes:
|
|
71
|
+
* -> https://web.dev/learn/design/responsive-images/#sizes
|
|
72
|
+
* -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
|
|
73
|
+
**/
|
|
74
|
+
sizes?: HTMLImageElement['sizes'];
|
|
75
|
+
/**
|
|
76
|
+
* When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
|
|
77
|
+
* You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
|
|
78
|
+
* Should only be used when the image is visible above the fold.
|
|
79
|
+
**/
|
|
80
|
+
priority?: boolean;
|
|
81
|
+
/**
|
|
82
|
+
* If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
|
|
83
|
+
*
|
|
84
|
+
* Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
|
|
85
|
+
**/
|
|
86
|
+
srcSetCandidates?: number[];
|
|
67
87
|
};
|
|
68
88
|
export declare const Image: React.ForwardRefExoticComponent<ImagePropTypes & React.RefAttributes<HTMLDivElement>>;
|
|
69
89
|
export {};
|
package/dist/esm/Image/index.js
CHANGED
|
@@ -42,20 +42,48 @@ var imageShowStrategy = function (_a) {
|
|
|
42
42
|
}
|
|
43
43
|
return true;
|
|
44
44
|
};
|
|
45
|
+
var buildSrcSet = function (src, width, candidateMultipliers) {
|
|
46
|
+
if (!src || !width) {
|
|
47
|
+
return undefined;
|
|
48
|
+
}
|
|
49
|
+
return candidateMultipliers
|
|
50
|
+
.map(function (multiplier) {
|
|
51
|
+
var url = new URL(src);
|
|
52
|
+
if (multiplier !== 1) {
|
|
53
|
+
url.searchParams.set('dpr', "".concat(multiplier));
|
|
54
|
+
var maxH = url.searchParams.get('max-h');
|
|
55
|
+
var maxW = url.searchParams.get('max-w');
|
|
56
|
+
if (maxH) {
|
|
57
|
+
url.searchParams.set('max-h', "".concat(Math.floor(parseInt(maxH) * multiplier)));
|
|
58
|
+
}
|
|
59
|
+
if (maxW) {
|
|
60
|
+
url.searchParams.set('max-w', "".concat(Math.floor(parseInt(maxW) * multiplier)));
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
var finalWidth = Math.floor(width * multiplier);
|
|
64
|
+
if (finalWidth < 50) {
|
|
65
|
+
return null;
|
|
66
|
+
}
|
|
67
|
+
return "".concat(url.toString(), " ").concat(finalWidth, "w");
|
|
68
|
+
})
|
|
69
|
+
.filter(Boolean)
|
|
70
|
+
.join(',');
|
|
71
|
+
};
|
|
45
72
|
export var Image = forwardRef(function (_a, ref) {
|
|
46
|
-
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
47
|
-
var className = _a.className,
|
|
48
|
-
var
|
|
73
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
74
|
+
var className = _a.className, _l = _a.fadeInDuration, fadeInDuration = _l === void 0 ? 500 : _l, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _m = _a.lazyLoad, rawLazyLoad = _m === void 0 ? true : _m, style = _a.style, pictureStyle = _a.pictureStyle, _o = _a.layout, layout = _o === void 0 ? 'intrinsic' : _o, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _p = _a.usePlaceholder, usePlaceholder = _p === void 0 ? true : _p, _q = _a.priority, priority = _q === void 0 ? false : _q, sizes = _a.sizes, _r = _a.srcSetCandidates, srcSetCandidates = _r === void 0 ? [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] : _r;
|
|
75
|
+
var lazyLoad = priority ? false : rawLazyLoad;
|
|
76
|
+
var _s = useState(false), loaded = _s[0], setLoaded = _s[1];
|
|
49
77
|
var handleLoad = function () {
|
|
50
78
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
51
79
|
setLoaded(true);
|
|
52
80
|
};
|
|
53
|
-
var
|
|
81
|
+
var _t = useInView({
|
|
54
82
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
55
83
|
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
56
84
|
triggerOnce: true,
|
|
57
85
|
fallbackInView: true
|
|
58
|
-
}), viewRef =
|
|
86
|
+
}), viewRef = _t[0], inView = _t[1];
|
|
59
87
|
var callbackRef = useCallback(function (_ref) {
|
|
60
88
|
viewRef(_ref);
|
|
61
89
|
if (ref)
|
|
@@ -78,11 +106,11 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
78
106
|
inView: inView,
|
|
79
107
|
loaded: loaded
|
|
80
108
|
});
|
|
81
|
-
var webpSource = data.webpSrcSet && (React.createElement("source", { srcSet: data.webpSrcSet, sizes: (_b = data.sizes) !== null && _b !== void 0 ? _b : undefined, type: "image/webp" }));
|
|
82
|
-
var regularSource =
|
|
109
|
+
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
|
+
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 }));
|
|
83
111
|
var transition = fadeInDuration > 0 ? "opacity ".concat(fadeInDuration, "ms") : undefined;
|
|
84
|
-
var placeholder = usePlaceholder ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (
|
|
85
|
-
backgroundColor: (
|
|
112
|
+
var placeholder = usePlaceholder ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: {
|
|
113
|
+
backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined,
|
|
86
114
|
opacity: showImage ? 0 : 1,
|
|
87
115
|
transition: transition,
|
|
88
116
|
objectFit: objectFit,
|
|
@@ -111,11 +139,11 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
111
139
|
addImage && (React.createElement("picture", null,
|
|
112
140
|
webpSource,
|
|
113
141
|
regularSource,
|
|
114
|
-
data.src && (React.createElement("img", { src: data.src, alt: (
|
|
142
|
+
data.src && (React.createElement("img", { src: data.src, alt: (_g = data.alt) !== null && _g !== void 0 ? _g : '', title: (_h = data.title) !== null && _h !== void 0 ? _h : 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) })))),
|
|
115
143
|
React.createElement("noscript", null,
|
|
116
144
|
React.createElement("picture", null,
|
|
117
145
|
webpSource,
|
|
118
146
|
regularSource,
|
|
119
|
-
data.src && (React.createElement("img", { src: data.src, alt: (
|
|
147
|
+
data.src && (React.createElement("img", { src: data.src, alt: (_j = data.alt) !== null && _j !== void 0 ? _j : '', title: (_k = data.title) !== null && _k !== void 0 ? _k : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchPriority: priority ? 'high' : undefined }))))));
|
|
120
148
|
});
|
|
121
149
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAiB,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAE5C,IAAM,+BAA+B,GAAG,KAAK;IAC3C,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,CAAC,CAAE,MAAc,CAAC,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -54,7 +54,7 @@ export declare type ImagePropTypes = {
|
|
|
54
54
|
* * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
|
|
55
55
|
* * `responsive`: the image will scale the dimensions down for smaller viewports and scale up for larger viewports
|
|
56
56
|
* * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
|
|
57
|
-
|
|
57
|
+
**/
|
|
58
58
|
layout?: 'intrinsic' | 'fixed' | 'responsive' | 'fill';
|
|
59
59
|
/** Defines how the image will fit into its parent container when using layout="fill" */
|
|
60
60
|
objectFit?: CSSProperties['objectFit'];
|
|
@@ -64,6 +64,26 @@ export declare type ImagePropTypes = {
|
|
|
64
64
|
onLoad?(): void;
|
|
65
65
|
/** Whether the component should use a blurred image placeholder */
|
|
66
66
|
usePlaceholder?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* The HTML5 `sizes` attribute for the image
|
|
69
|
+
*
|
|
70
|
+
* Learn more about srcset and sizes:
|
|
71
|
+
* -> https://web.dev/learn/design/responsive-images/#sizes
|
|
72
|
+
* -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
|
|
73
|
+
**/
|
|
74
|
+
sizes?: HTMLImageElement['sizes'];
|
|
75
|
+
/**
|
|
76
|
+
* When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
|
|
77
|
+
* You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
|
|
78
|
+
* Should only be used when the image is visible above the fold.
|
|
79
|
+
**/
|
|
80
|
+
priority?: boolean;
|
|
81
|
+
/**
|
|
82
|
+
* If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
|
|
83
|
+
*
|
|
84
|
+
* Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
|
|
85
|
+
**/
|
|
86
|
+
srcSetCandidates?: number[];
|
|
67
87
|
};
|
|
68
88
|
export declare const Image: React.ForwardRefExoticComponent<ImagePropTypes & React.RefAttributes<HTMLDivElement>>;
|
|
69
89
|
export {};
|
package/package.json
CHANGED
package/src/Image/index.tsx
CHANGED
|
@@ -65,7 +65,7 @@ export type ImagePropTypes = {
|
|
|
65
65
|
* * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
|
|
66
66
|
* * `responsive`: the image will scale the dimensions down for smaller viewports and scale up for larger viewports
|
|
67
67
|
* * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
|
|
68
|
-
|
|
68
|
+
**/
|
|
69
69
|
layout?: 'intrinsic' | 'fixed' | 'responsive' | 'fill';
|
|
70
70
|
/** Defines how the image will fit into its parent container when using layout="fill" */
|
|
71
71
|
objectFit?: CSSProperties['objectFit'];
|
|
@@ -75,6 +75,26 @@ export type ImagePropTypes = {
|
|
|
75
75
|
onLoad?(): void;
|
|
76
76
|
/** Whether the component should use a blurred image placeholder */
|
|
77
77
|
usePlaceholder?: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* The HTML5 `sizes` attribute for the image
|
|
80
|
+
*
|
|
81
|
+
* Learn more about srcset and sizes:
|
|
82
|
+
* -> https://web.dev/learn/design/responsive-images/#sizes
|
|
83
|
+
* -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
|
|
84
|
+
**/
|
|
85
|
+
sizes?: HTMLImageElement['sizes'];
|
|
86
|
+
/**
|
|
87
|
+
* When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
|
|
88
|
+
* You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
|
|
89
|
+
* Should only be used when the image is visible above the fold.
|
|
90
|
+
**/
|
|
91
|
+
priority?: boolean;
|
|
92
|
+
/**
|
|
93
|
+
* If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
|
|
94
|
+
*
|
|
95
|
+
* Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
|
|
96
|
+
**/
|
|
97
|
+
srcSetCandidates?: number[];
|
|
78
98
|
};
|
|
79
99
|
|
|
80
100
|
type State = {
|
|
@@ -115,6 +135,49 @@ const imageShowStrategy = ({ lazyLoad, loaded }: State) => {
|
|
|
115
135
|
return true;
|
|
116
136
|
};
|
|
117
137
|
|
|
138
|
+
const buildSrcSet = (
|
|
139
|
+
src: string | null | undefined,
|
|
140
|
+
width: number | undefined,
|
|
141
|
+
candidateMultipliers: number[],
|
|
142
|
+
) => {
|
|
143
|
+
if (!src || !width) {
|
|
144
|
+
return undefined;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
return candidateMultipliers
|
|
148
|
+
.map((multiplier) => {
|
|
149
|
+
const url = new URL(src);
|
|
150
|
+
|
|
151
|
+
if (multiplier !== 1) {
|
|
152
|
+
url.searchParams.set('dpr', `${multiplier}`);
|
|
153
|
+
const maxH = url.searchParams.get('max-h');
|
|
154
|
+
const maxW = url.searchParams.get('max-w');
|
|
155
|
+
if (maxH) {
|
|
156
|
+
url.searchParams.set(
|
|
157
|
+
'max-h',
|
|
158
|
+
`${Math.floor(parseInt(maxH) * multiplier)}`,
|
|
159
|
+
);
|
|
160
|
+
}
|
|
161
|
+
if (maxW) {
|
|
162
|
+
url.searchParams.set(
|
|
163
|
+
'max-w',
|
|
164
|
+
`${Math.floor(parseInt(maxW) * multiplier)}`,
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
const finalWidth = Math.floor(width * multiplier);
|
|
170
|
+
|
|
171
|
+
if (finalWidth < 50) {
|
|
172
|
+
return null;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
return `${url.toString()} ${finalWidth}w`;
|
|
176
|
+
})
|
|
177
|
+
.filter(Boolean)
|
|
178
|
+
.join(',');
|
|
179
|
+
};
|
|
180
|
+
|
|
118
181
|
export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
119
182
|
(
|
|
120
183
|
{
|
|
@@ -124,7 +187,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
124
187
|
intersectionThreshold,
|
|
125
188
|
intersectionMargin,
|
|
126
189
|
pictureClassName,
|
|
127
|
-
lazyLoad = true,
|
|
190
|
+
lazyLoad: rawLazyLoad = true,
|
|
128
191
|
style,
|
|
129
192
|
pictureStyle,
|
|
130
193
|
layout = 'intrinsic',
|
|
@@ -133,9 +196,14 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
133
196
|
data,
|
|
134
197
|
onLoad,
|
|
135
198
|
usePlaceholder = true,
|
|
199
|
+
priority = false,
|
|
200
|
+
sizes,
|
|
201
|
+
srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
|
|
136
202
|
},
|
|
137
203
|
ref,
|
|
138
204
|
) => {
|
|
205
|
+
const lazyLoad = priority ? false : rawLazyLoad;
|
|
206
|
+
|
|
139
207
|
const [loaded, setLoaded] = useState(false);
|
|
140
208
|
|
|
141
209
|
const handleLoad = () => {
|
|
@@ -180,13 +248,18 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
180
248
|
const webpSource = data.webpSrcSet && (
|
|
181
249
|
<source
|
|
182
250
|
srcSet={data.webpSrcSet}
|
|
183
|
-
sizes={data.sizes ?? undefined}
|
|
251
|
+
sizes={sizes ?? data.sizes ?? undefined}
|
|
184
252
|
type="image/webp"
|
|
185
253
|
/>
|
|
186
254
|
);
|
|
187
255
|
|
|
188
|
-
const regularSource =
|
|
189
|
-
<source
|
|
256
|
+
const regularSource = (
|
|
257
|
+
<source
|
|
258
|
+
srcSet={
|
|
259
|
+
data.srcSet ?? buildSrcSet(data.src, data.width, srcSetCandidates)
|
|
260
|
+
}
|
|
261
|
+
sizes={sizes ?? data.sizes ?? undefined}
|
|
262
|
+
/>
|
|
190
263
|
);
|
|
191
264
|
|
|
192
265
|
const transition =
|
|
@@ -259,6 +332,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
259
332
|
alt={data.alt ?? ''}
|
|
260
333
|
title={data.title ?? undefined}
|
|
261
334
|
onLoad={handleLoad}
|
|
335
|
+
fetchPriority={priority ? 'high' : undefined}
|
|
262
336
|
className={pictureClassName}
|
|
263
337
|
style={{
|
|
264
338
|
opacity: showImage ? 1 : 0,
|
|
@@ -283,7 +357,8 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
283
357
|
title={data.title ?? undefined}
|
|
284
358
|
className={pictureClassName}
|
|
285
359
|
style={{ ...absolutePositioning, ...pictureStyle }}
|
|
286
|
-
loading=
|
|
360
|
+
loading={lazyLoad ? 'lazy' : undefined}
|
|
361
|
+
fetchPriority={priority ? 'high' : undefined}
|
|
287
362
|
/>
|
|
288
363
|
)}
|
|
289
364
|
</picture>
|