react-datocms 3.1.4 → 4.0.1
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 +38 -20
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/esm/Image/index.d.ts +21 -1
- package/dist/esm/Image/index.js +38 -20
- 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/__tests__/__snapshots__/index.test.tsx.snap +12 -0
- package/src/Image/index.tsx +82 -10
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,20 +128,10 @@ 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: (_e = data.bgColor) !== null && _e !== void 0 ? _e : undefined,
|
|
108
|
-
opacity: showImage ? 0 : 1,
|
|
109
|
-
transition: transition,
|
|
110
|
-
objectFit: objectFit,
|
|
111
|
-
objectPosition: objectPosition,
|
|
112
|
-
position: 'absolute',
|
|
113
|
-
left: 0,
|
|
114
|
-
top: 0,
|
|
115
|
-
width: '100%'
|
|
116
|
-
} })) : null;
|
|
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: __assign({ backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined, opacity: showImage ? 0 : 1, transition: transition, objectFit: objectFit, objectPosition: objectPosition }, absolutePositioning) })) : null;
|
|
117
135
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
118
136
|
var height = data.height || width / aspectRatio;
|
|
119
137
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\"></svg>");
|
|
@@ -133,11 +151,11 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
133
151
|
addImage && (react_1["default"].createElement("picture", null,
|
|
134
152
|
webpSource,
|
|
135
153
|
regularSource,
|
|
136
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (
|
|
154
|
+
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
155
|
react_1["default"].createElement("noscript", null,
|
|
138
156
|
react_1["default"].createElement("picture", null,
|
|
139
157
|
webpSource,
|
|
140
158
|
regularSource,
|
|
141
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (
|
|
159
|
+
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
160
|
});
|
|
143
161
|
//# 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,20 +106,10 @@ 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: (_e = data.bgColor) !== null && _e !== void 0 ? _e : undefined,
|
|
86
|
-
opacity: showImage ? 0 : 1,
|
|
87
|
-
transition: transition,
|
|
88
|
-
objectFit: objectFit,
|
|
89
|
-
objectPosition: objectPosition,
|
|
90
|
-
position: 'absolute',
|
|
91
|
-
left: 0,
|
|
92
|
-
top: 0,
|
|
93
|
-
width: '100%'
|
|
94
|
-
} })) : null;
|
|
112
|
+
var placeholder = usePlaceholder ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: __assign({ backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined, opacity: showImage ? 0 : 1, transition: transition, objectFit: objectFit, objectPosition: objectPosition }, absolutePositioning) })) : null;
|
|
95
113
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
96
114
|
var height = data.height || width / aspectRatio;
|
|
97
115
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\"></svg>");
|
|
@@ -111,11 +129,11 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
111
129
|
addImage && (React.createElement("picture", null,
|
|
112
130
|
webpSource,
|
|
113
131
|
regularSource,
|
|
114
|
-
data.src && (React.createElement("img", { src: data.src, alt: (
|
|
132
|
+
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
133
|
React.createElement("noscript", null,
|
|
116
134
|
React.createElement("picture", null,
|
|
117
135
|
webpSource,
|
|
118
136
|
regularSource,
|
|
119
|
-
data.src && (React.createElement("img", { src: data.src, alt: (
|
|
137
|
+
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
138
|
});
|
|
121
139
|
//# 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
|
@@ -38,6 +38,7 @@ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
|
|
|
38
38
|
style={
|
|
39
39
|
Object {
|
|
40
40
|
"backgroundColor": undefined,
|
|
41
|
+
"height": "100%",
|
|
41
42
|
"left": 0,
|
|
42
43
|
"objectFit": undefined,
|
|
43
44
|
"objectPosition": undefined,
|
|
@@ -94,6 +95,7 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
|
|
|
94
95
|
style={
|
|
95
96
|
Object {
|
|
96
97
|
"backgroundColor": undefined,
|
|
98
|
+
"height": "100%",
|
|
97
99
|
"left": 0,
|
|
98
100
|
"objectFit": undefined,
|
|
99
101
|
"objectPosition": undefined,
|
|
@@ -175,6 +177,7 @@ exports[`Image layout=fill visible renders the image 1`] = `
|
|
|
175
177
|
style={
|
|
176
178
|
Object {
|
|
177
179
|
"backgroundColor": undefined,
|
|
180
|
+
"height": "100%",
|
|
178
181
|
"left": 0,
|
|
179
182
|
"objectFit": undefined,
|
|
180
183
|
"objectPosition": undefined,
|
|
@@ -264,6 +267,7 @@ exports[`Image layout=fixed not visible renders the blur-up thumb 1`] = `
|
|
|
264
267
|
style={
|
|
265
268
|
Object {
|
|
266
269
|
"backgroundColor": undefined,
|
|
270
|
+
"height": "100%",
|
|
267
271
|
"left": 0,
|
|
268
272
|
"objectFit": undefined,
|
|
269
273
|
"objectPosition": undefined,
|
|
@@ -328,6 +332,7 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
|
|
|
328
332
|
style={
|
|
329
333
|
Object {
|
|
330
334
|
"backgroundColor": undefined,
|
|
335
|
+
"height": "100%",
|
|
331
336
|
"left": 0,
|
|
332
337
|
"objectFit": undefined,
|
|
333
338
|
"objectPosition": undefined,
|
|
@@ -417,6 +422,7 @@ exports[`Image layout=fixed visible renders the image 1`] = `
|
|
|
417
422
|
style={
|
|
418
423
|
Object {
|
|
419
424
|
"backgroundColor": undefined,
|
|
425
|
+
"height": "100%",
|
|
420
426
|
"left": 0,
|
|
421
427
|
"objectFit": undefined,
|
|
422
428
|
"objectPosition": undefined,
|
|
@@ -507,6 +513,7 @@ exports[`Image layout=intrinsic not visible renders the blur-up thumb 1`] = `
|
|
|
507
513
|
style={
|
|
508
514
|
Object {
|
|
509
515
|
"backgroundColor": undefined,
|
|
516
|
+
"height": "100%",
|
|
510
517
|
"left": 0,
|
|
511
518
|
"objectFit": undefined,
|
|
512
519
|
"objectPosition": undefined,
|
|
@@ -572,6 +579,7 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
|
|
|
572
579
|
style={
|
|
573
580
|
Object {
|
|
574
581
|
"backgroundColor": undefined,
|
|
582
|
+
"height": "100%",
|
|
575
583
|
"left": 0,
|
|
576
584
|
"objectFit": undefined,
|
|
577
585
|
"objectPosition": undefined,
|
|
@@ -662,6 +670,7 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
|
|
|
662
670
|
style={
|
|
663
671
|
Object {
|
|
664
672
|
"backgroundColor": undefined,
|
|
673
|
+
"height": "100%",
|
|
665
674
|
"left": 0,
|
|
666
675
|
"objectFit": undefined,
|
|
667
676
|
"objectPosition": undefined,
|
|
@@ -751,6 +760,7 @@ exports[`Image layout=responsive not visible renders the blur-up thumb 1`] = `
|
|
|
751
760
|
style={
|
|
752
761
|
Object {
|
|
753
762
|
"backgroundColor": undefined,
|
|
763
|
+
"height": "100%",
|
|
754
764
|
"left": 0,
|
|
755
765
|
"objectFit": undefined,
|
|
756
766
|
"objectPosition": undefined,
|
|
@@ -815,6 +825,7 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
|
|
|
815
825
|
style={
|
|
816
826
|
Object {
|
|
817
827
|
"backgroundColor": undefined,
|
|
828
|
+
"height": "100%",
|
|
818
829
|
"left": 0,
|
|
819
830
|
"objectFit": undefined,
|
|
820
831
|
"objectPosition": undefined,
|
|
@@ -904,6 +915,7 @@ exports[`Image layout=responsive visible renders the image 1`] = `
|
|
|
904
915
|
style={
|
|
905
916
|
Object {
|
|
906
917
|
"backgroundColor": undefined,
|
|
918
|
+
"height": "100%",
|
|
907
919
|
"left": 0,
|
|
908
920
|
"objectFit": undefined,
|
|
909
921
|
"objectPosition": undefined,
|
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 =
|
|
@@ -204,10 +277,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
204
277
|
transition,
|
|
205
278
|
objectFit,
|
|
206
279
|
objectPosition,
|
|
207
|
-
|
|
208
|
-
left: 0,
|
|
209
|
-
top: 0,
|
|
210
|
-
width: '100%',
|
|
280
|
+
...absolutePositioning,
|
|
211
281
|
}}
|
|
212
282
|
/>
|
|
213
283
|
) : null;
|
|
@@ -259,6 +329,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
259
329
|
alt={data.alt ?? ''}
|
|
260
330
|
title={data.title ?? undefined}
|
|
261
331
|
onLoad={handleLoad}
|
|
332
|
+
fetchPriority={priority ? 'high' : undefined}
|
|
262
333
|
className={pictureClassName}
|
|
263
334
|
style={{
|
|
264
335
|
opacity: showImage ? 1 : 0,
|
|
@@ -283,7 +354,8 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
283
354
|
title={data.title ?? undefined}
|
|
284
355
|
className={pictureClassName}
|
|
285
356
|
style={{ ...absolutePositioning, ...pictureStyle }}
|
|
286
|
-
loading=
|
|
357
|
+
loading={lazyLoad ? 'lazy' : undefined}
|
|
358
|
+
fetchPriority={priority ? 'high' : undefined}
|
|
287
359
|
/>
|
|
288
360
|
)}
|
|
289
361
|
</picture>
|