react-datocms 6.0.6 → 7.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 +8 -8
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/cjs/SRCImage/index.js +3 -3
- package/dist/cjs/SRCImage/index.js.map +1 -1
- package/dist/esm/Image/index.js +8 -8
- package/dist/esm/Image/index.js.map +1 -1
- package/dist/esm/SRCImage/index.js +3 -3
- package/dist/esm/SRCImage/index.js.map +1 -1
- package/dist/types/Image/index.d.ts +6 -2
- package/dist/types/SRCImage/index.d.ts +9 -5
- package/package.json +1 -1
- package/src/Image/__tests__/__snapshots__/index.test.tsx.snap +29 -9
- package/src/Image/__tests__/index.test.tsx +4 -2
- package/src/Image/index.tsx +16 -10
- package/src/SRCImage/__tests__/__snapshots__/index.test.tsx.snap +16 -3
- package/src/SRCImage/__tests__/index.test.tsx +4 -2
- package/src/SRCImage/index.tsx +15 -9
package/dist/cjs/Image/index.js
CHANGED
|
@@ -35,7 +35,7 @@ const imageShowStrategy = ({ priority, loaded }) => {
|
|
|
35
35
|
}
|
|
36
36
|
return true;
|
|
37
37
|
};
|
|
38
|
-
exports.Image = (0, react_2.forwardRef)(({ className, fadeInDuration = 500, intersectionTreshold, intersectionThreshold, intersectionMargin, pictureClassName, style, pictureStyle, layout = 'intrinsic', objectFit, objectPosition, data, onLoad, usePlaceholder = true, priority = false, sizes, srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4], placeholderClassName, placeholderStyle, }, ref) => {
|
|
38
|
+
exports.Image = (0, react_2.forwardRef)(({ className, fadeInDuration = 500, intersectionTreshold, intersectionThreshold, intersectionMargin, pictureClassName, imgClassName, style, pictureStyle, imgStyle, layout = 'intrinsic', objectFit, objectPosition, data, onLoad, usePlaceholder = true, priority = false, sizes, srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4], placeholderClassName, placeholderStyle, }, ref) => {
|
|
39
39
|
var _a, _b, _c, _d, _e;
|
|
40
40
|
const imageRef = (0, react_2.useRef)(null);
|
|
41
41
|
const [loaded, handleLoad] = (0, utils_js_2.useImageLoad)(imageRef, onLoad);
|
|
@@ -62,7 +62,7 @@ exports.Image = (0, react_2.forwardRef)(({ className, fadeInDuration = 500, inte
|
|
|
62
62
|
const { width, aspectRatio } = data;
|
|
63
63
|
const height = (_a = data.height) !== null && _a !== void 0 ? _a : (aspectRatio ? width / aspectRatio : 0);
|
|
64
64
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
|
|
65
|
-
const sizer = layout !== 'fill' ? (react_1.default.createElement("img", { className:
|
|
65
|
+
const sizer = layout !== 'fill' ? (react_1.default.createElement("img", { className: imgClassName, style: Object.assign({ display: 'block', width: '100%' }, imgStyle), src: `data:image/svg+xml;base64,${(0, utils_js_2.universalBtoa)(svg)}`, "aria-hidden": "true", alt: "" })) : null;
|
|
66
66
|
return (react_1.default.createElement("div", { ref: rootRef, className: className, style: Object.assign(Object.assign({ overflow: 'hidden' }, (layout === 'fill'
|
|
67
67
|
? utils_js_2.absolutePositioning
|
|
68
68
|
: layout === 'intrinsic'
|
|
@@ -72,20 +72,20 @@ exports.Image = (0, react_2.forwardRef)(({ className, fadeInDuration = 500, inte
|
|
|
72
72
|
: { position: 'relative', width: '100%' })), style) },
|
|
73
73
|
sizer,
|
|
74
74
|
placeholder,
|
|
75
|
-
addImage && (react_1.default.createElement("picture",
|
|
75
|
+
addImage && (react_1.default.createElement("picture", { className: pictureClassName, style: pictureStyle },
|
|
76
76
|
webpSource,
|
|
77
77
|
regularSource,
|
|
78
78
|
data.src && (
|
|
79
79
|
// biome-ignore lint/a11y/useAltText: We do support the `alt` attribute
|
|
80
|
-
react_1.default.createElement("img", Object.assign({ ref: imageRef, src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: (_c = data.title) !== null && _c !== void 0 ? _c : undefined, onLoad: handleLoad }, (0, utils_js_1.priorityProp)(priority ? 'high' : undefined), { className:
|
|
81
|
-
objectPosition }),
|
|
80
|
+
react_1.default.createElement("img", Object.assign({ ref: imageRef, src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: (_c = data.title) !== null && _c !== void 0 ? _c : undefined, onLoad: handleLoad }, (0, utils_js_1.priorityProp)(priority ? 'high' : undefined), { className: imgClassName, style: Object.assign(Object.assign(Object.assign({ opacity: showImage ? 1 : 0, transition }, utils_js_2.absolutePositioning), { objectFit,
|
|
81
|
+
objectPosition }), imgStyle) }))))),
|
|
82
82
|
react_1.default.createElement("noscript", null,
|
|
83
|
-
react_1.default.createElement("picture",
|
|
83
|
+
react_1.default.createElement("picture", { className: pictureClassName, style: pictureStyle },
|
|
84
84
|
webpSource,
|
|
85
85
|
regularSource,
|
|
86
86
|
data.src && (
|
|
87
87
|
// biome-ignore lint/a11y/useAltText: We do support the `alt` attribute
|
|
88
|
-
react_1.default.createElement("img", Object.assign({ src: data.src, alt: (_d = data.alt) !== null && _d !== void 0 ? _d : '', title: (_e = data.title) !== null && _e !== void 0 ? _e : undefined, className:
|
|
89
|
-
objectPosition }),
|
|
88
|
+
react_1.default.createElement("img", Object.assign({ src: data.src, alt: (_d = data.alt) !== null && _d !== void 0 ? _d : '', title: (_e = data.title) !== null && _e !== void 0 ? _e : undefined, className: imgClassName, style: Object.assign(Object.assign(Object.assign({}, utils_js_2.absolutePositioning), { objectFit,
|
|
89
|
+
objectPosition }), imgStyle), loading: priority ? undefined : 'lazy' }, (0, utils_js_1.priorityProp)(priority ? 'high' : undefined))))))));
|
|
90
90
|
});
|
|
91
91
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;AAEb,uDAAuD;AACvD,kDAA0B;AAC1B,iCAA+D;AAC/D,mDAI8B;AAC9B,iDAA2C;AAC3C,yCAOoB;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ exports.SRCImage = void 0;
|
|
|
7
7
|
// biome-ignore lint/style/useImportType: wrong warning
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
9
|
const utils_js_1 = require("./utils.js");
|
|
10
|
-
function SRCImage({
|
|
10
|
+
function SRCImage({ pictureClassName, pictureStyle, imgClassName, imgStyle, data, usePlaceholder = true, priority = false, sizes, srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4], }) {
|
|
11
11
|
var _a, _b, _c, _d;
|
|
12
12
|
const webpSource = (0, utils_js_1.buildWebpSource)(data, sizes);
|
|
13
13
|
const regularSource = (0, utils_js_1.buildRegularSource)(data, sizes, srcSetCandidates);
|
|
@@ -33,12 +33,12 @@ function SRCImage({ className, style, data, usePlaceholder = true, priority = fa
|
|
|
33
33
|
const loadingBehaviourProps = priority
|
|
34
34
|
? (0, utils_js_1.priorityProp)(priority ? 'high' : undefined)
|
|
35
35
|
: { loading: 'lazy' };
|
|
36
|
-
return (react_1.default.createElement("picture",
|
|
36
|
+
return (react_1.default.createElement("picture", { className: pictureClassName, style: pictureStyle },
|
|
37
37
|
webpSource,
|
|
38
38
|
regularSource,
|
|
39
39
|
data.src && (
|
|
40
40
|
// biome-ignore lint/a11y/useAltText: We do with alt the best we can
|
|
41
|
-
react_1.default.createElement("img", Object.assign({ src: data.src, alt: (_c = data.alt) !== null && _c !== void 0 ? _c : '', title: (_d = data.title) !== null && _d !== void 0 ? _d : undefined }, loadingBehaviourProps, { className:
|
|
41
|
+
react_1.default.createElement("img", Object.assign({ src: data.src, alt: (_c = data.alt) !== null && _c !== void 0 ? _c : '', title: (_d = data.title) !== null && _d !== void 0 ? _d : undefined }, loadingBehaviourProps, { className: imgClassName, style: Object.assign(Object.assign(Object.assign({}, placeholderStyle), sizingStyle), imgStyle) })))));
|
|
42
42
|
}
|
|
43
43
|
exports.SRCImage = SRCImage;
|
|
44
44
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SRCImage/index.tsx"],"names":[],"mappings":";;;;;;AAAA,uDAAuD;AACvD,kDAA0B;AAE1B,yCAA+E;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SRCImage/index.tsx"],"names":[],"mappings":";;;;;;AAAA,uDAAuD;AACvD,kDAA0B;AAE1B,yCAA+E;AAqC/E,SAAgB,QAAQ,CAAC,EACvB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,cAAc,GAAG,IAAI,EACrB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,gBAAgB,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GACnC;;IAClB,MAAM,UAAU,GAAG,IAAA,0BAAe,EAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,IAAA,6BAAkB,EAAC,IAAI,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC;IAExE,MAAM,gBAAgB,GACpB,cAAc,IAAI,IAAI,CAAC,MAAM;QAC3B,CAAC,CAAC;YACE,eAAe,EAAE,QAAQ,IAAI,CAAC,MAAM,IAAI;YACxC,cAAc,EAAE,OAAO;YACvB,gBAAgB,EAAE,WAAW;YAC7B,kBAAkB,EAAE,SAAS;YAC7B,KAAK,EAAE,aAAa;SACrB;QACH,CAAC,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO;YAC9B,CAAC,CAAC,EAAE,eAAe,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE;YACtE,CAAC,CAAC,SAAS,CAAC;IAElB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,MAAM,MAAM,GACV,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7E,MAAM,WAAW,GAAG;QAClB,WAAW,EAAE,GAAG,KAAK,MAAM,MAAM,EAAE;QACnC,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,GAAG,KAAK,IAAI;QACtB,MAAM,EAAE,MAAM;KACf,CAAC;IAEF,MAAM,qBAAqB,GAAG,QAAQ;QACpC,CAAC,CAAC,IAAA,uBAAY,EAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QAC7C,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;IAExB,OAAO,CACL,2CAAS,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY;QACtD,UAAU;QACV,aAAa;QACb,IAAI,CAAC,GAAG,IAAI;QACX,oEAAoE;QACpE,qDACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,EAAE,EACnB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,IAC1B,qBAAqB,IACzB,SAAS,EAAE,YAAY,EACvB,KAAK,gDACA,gBAAgB,GAChB,WAAW,GACX,QAAQ,KAEb,CACH,CACO,CACX,CAAC;AACJ,CAAC;AAhED,4BAgEC"}
|
package/dist/esm/Image/index.js
CHANGED
|
@@ -29,7 +29,7 @@ const imageShowStrategy = ({ priority, loaded }) => {
|
|
|
29
29
|
}
|
|
30
30
|
return true;
|
|
31
31
|
};
|
|
32
|
-
export const Image = forwardRef(({ className, fadeInDuration = 500, intersectionTreshold, intersectionThreshold, intersectionMargin, pictureClassName, style, pictureStyle, layout = 'intrinsic', objectFit, objectPosition, data, onLoad, usePlaceholder = true, priority = false, sizes, srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4], placeholderClassName, placeholderStyle, }, ref) => {
|
|
32
|
+
export const Image = forwardRef(({ className, fadeInDuration = 500, intersectionTreshold, intersectionThreshold, intersectionMargin, pictureClassName, imgClassName, style, pictureStyle, imgStyle, layout = 'intrinsic', objectFit, objectPosition, data, onLoad, usePlaceholder = true, priority = false, sizes, srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4], placeholderClassName, placeholderStyle, }, ref) => {
|
|
33
33
|
var _a, _b, _c, _d, _e;
|
|
34
34
|
const imageRef = useRef(null);
|
|
35
35
|
const [loaded, handleLoad] = useImageLoad(imageRef, onLoad);
|
|
@@ -56,7 +56,7 @@ export const Image = forwardRef(({ className, fadeInDuration = 500, intersection
|
|
|
56
56
|
const { width, aspectRatio } = data;
|
|
57
57
|
const height = (_a = data.height) !== null && _a !== void 0 ? _a : (aspectRatio ? width / aspectRatio : 0);
|
|
58
58
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
|
|
59
|
-
const sizer = layout !== 'fill' ? (React.createElement("img", { className:
|
|
59
|
+
const sizer = layout !== 'fill' ? (React.createElement("img", { className: imgClassName, style: Object.assign({ display: 'block', width: '100%' }, imgStyle), src: `data:image/svg+xml;base64,${universalBtoa(svg)}`, "aria-hidden": "true", alt: "" })) : null;
|
|
60
60
|
return (React.createElement("div", { ref: rootRef, className: className, style: Object.assign(Object.assign({ overflow: 'hidden' }, (layout === 'fill'
|
|
61
61
|
? absolutePositioning
|
|
62
62
|
: layout === 'intrinsic'
|
|
@@ -66,20 +66,20 @@ export const Image = forwardRef(({ className, fadeInDuration = 500, intersection
|
|
|
66
66
|
: { position: 'relative', width: '100%' })), style) },
|
|
67
67
|
sizer,
|
|
68
68
|
placeholder,
|
|
69
|
-
addImage && (React.createElement("picture",
|
|
69
|
+
addImage && (React.createElement("picture", { className: pictureClassName, style: pictureStyle },
|
|
70
70
|
webpSource,
|
|
71
71
|
regularSource,
|
|
72
72
|
data.src && (
|
|
73
73
|
// biome-ignore lint/a11y/useAltText: We do support the `alt` attribute
|
|
74
|
-
React.createElement("img", Object.assign({ ref: imageRef, src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: (_c = data.title) !== null && _c !== void 0 ? _c : undefined, onLoad: handleLoad }, priorityProp(priority ? 'high' : undefined), { className:
|
|
75
|
-
objectPosition }),
|
|
74
|
+
React.createElement("img", Object.assign({ ref: imageRef, src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: (_c = data.title) !== null && _c !== void 0 ? _c : undefined, onLoad: handleLoad }, priorityProp(priority ? 'high' : undefined), { className: imgClassName, style: Object.assign(Object.assign(Object.assign({ opacity: showImage ? 1 : 0, transition }, absolutePositioning), { objectFit,
|
|
75
|
+
objectPosition }), imgStyle) }))))),
|
|
76
76
|
React.createElement("noscript", null,
|
|
77
|
-
React.createElement("picture",
|
|
77
|
+
React.createElement("picture", { className: pictureClassName, style: pictureStyle },
|
|
78
78
|
webpSource,
|
|
79
79
|
regularSource,
|
|
80
80
|
data.src && (
|
|
81
81
|
// biome-ignore lint/a11y/useAltText: We do support the `alt` attribute
|
|
82
|
-
React.createElement("img", Object.assign({ src: data.src, alt: (_d = data.alt) !== null && _d !== void 0 ? _d : '', title: (_e = data.title) !== null && _e !== void 0 ? _e : undefined, className:
|
|
83
|
-
objectPosition }),
|
|
82
|
+
React.createElement("img", Object.assign({ src: data.src, alt: (_d = data.alt) !== null && _d !== void 0 ? _d : '', title: (_e = data.title) !== null && _e !== void 0 ? _e : undefined, className: imgClassName, style: Object.assign(Object.assign(Object.assign({}, absolutePositioning), { objectFit,
|
|
83
|
+
objectPosition }), imgStyle), loading: priority ? undefined : 'lazy' }, priorityProp(priority ? 'high' : undefined))))))));
|
|
84
84
|
});
|
|
85
85
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,uDAAuD;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,YAAY,GACb,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EACL,mBAAmB,EACnB,+BAA+B,EAC/B,KAAK,EACL,aAAa,EACb,YAAY,EACZ,YAAY,GACb,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// biome-ignore lint/style/useImportType: wrong warning
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { buildRegularSource, buildWebpSource, priorityProp } from './utils.js';
|
|
4
|
-
export function SRCImage({
|
|
4
|
+
export function SRCImage({ pictureClassName, pictureStyle, imgClassName, imgStyle, data, usePlaceholder = true, priority = false, sizes, srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4], }) {
|
|
5
5
|
var _a, _b, _c, _d;
|
|
6
6
|
const webpSource = buildWebpSource(data, sizes);
|
|
7
7
|
const regularSource = buildRegularSource(data, sizes, srcSetCandidates);
|
|
@@ -27,11 +27,11 @@ export function SRCImage({ className, style, data, usePlaceholder = true, priori
|
|
|
27
27
|
const loadingBehaviourProps = priority
|
|
28
28
|
? priorityProp(priority ? 'high' : undefined)
|
|
29
29
|
: { loading: 'lazy' };
|
|
30
|
-
return (React.createElement("picture",
|
|
30
|
+
return (React.createElement("picture", { className: pictureClassName, style: pictureStyle },
|
|
31
31
|
webpSource,
|
|
32
32
|
regularSource,
|
|
33
33
|
data.src && (
|
|
34
34
|
// biome-ignore lint/a11y/useAltText: We do with alt the best we can
|
|
35
|
-
React.createElement("img", Object.assign({ src: data.src, alt: (_c = data.alt) !== null && _c !== void 0 ? _c : '', title: (_d = data.title) !== null && _d !== void 0 ? _d : undefined }, loadingBehaviourProps, { className:
|
|
35
|
+
React.createElement("img", Object.assign({ src: data.src, alt: (_c = data.alt) !== null && _c !== void 0 ? _c : '', title: (_d = data.title) !== null && _d !== void 0 ? _d : undefined }, loadingBehaviourProps, { className: imgClassName, style: Object.assign(Object.assign(Object.assign({}, placeholderStyle), sizingStyle), imgStyle) })))));
|
|
36
36
|
}
|
|
37
37
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SRCImage/index.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SRCImage/index.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAqC/E,MAAM,UAAU,QAAQ,CAAC,EACvB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,cAAc,GAAG,IAAI,EACrB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,gBAAgB,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GACnC;;IAClB,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,kBAAkB,CAAC,IAAI,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC;IAExE,MAAM,gBAAgB,GACpB,cAAc,IAAI,IAAI,CAAC,MAAM;QAC3B,CAAC,CAAC;YACE,eAAe,EAAE,QAAQ,IAAI,CAAC,MAAM,IAAI;YACxC,cAAc,EAAE,OAAO;YACvB,gBAAgB,EAAE,WAAW;YAC7B,kBAAkB,EAAE,SAAS;YAC7B,KAAK,EAAE,aAAa;SACrB;QACH,CAAC,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO;YAC9B,CAAC,CAAC,EAAE,eAAe,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE;YACtE,CAAC,CAAC,SAAS,CAAC;IAElB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,MAAM,MAAM,GACV,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7E,MAAM,WAAW,GAAG;QAClB,WAAW,EAAE,GAAG,KAAK,MAAM,MAAM,EAAE;QACnC,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,GAAG,KAAK,IAAI;QACtB,MAAM,EAAE,MAAM;KACf,CAAC;IAEF,MAAM,qBAAqB,GAAG,QAAQ;QACpC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QAC7C,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;IAExB,OAAO,CACL,iCAAS,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY;QACtD,UAAU;QACV,aAAa;QACb,IAAI,CAAC,GAAG,IAAI;QACX,oEAAoE;QACpE,2CACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,EAAE,EACnB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,IAC1B,qBAAqB,IACzB,SAAS,EAAE,YAAY,EACvB,KAAK,gDACA,gBAAgB,GAChB,WAAW,GACX,QAAQ,KAEb,CACH,CACO,CACX,CAAC;AACJ,CAAC"}
|
|
@@ -30,8 +30,10 @@ export type ImagePropTypes = {
|
|
|
30
30
|
data: ResponsiveImageType;
|
|
31
31
|
/** Additional CSS className for root node */
|
|
32
32
|
className?: string;
|
|
33
|
-
/** Additional CSS class for the
|
|
33
|
+
/** Additional CSS class for the `<picture />` tag */
|
|
34
34
|
pictureClassName?: string;
|
|
35
|
+
/** Additional CSS class for the image inside the `<picture />` tag */
|
|
36
|
+
imgClassName?: string;
|
|
35
37
|
/** Additional CSS class for the placeholder image */
|
|
36
38
|
placeholderClassName?: string;
|
|
37
39
|
/** Duration (in ms) of the fade-in transition effect upon image loading */
|
|
@@ -44,8 +46,10 @@ export type ImagePropTypes = {
|
|
|
44
46
|
intersectionMargin?: string;
|
|
45
47
|
/** Additional CSS rules to add to the root node */
|
|
46
48
|
style?: React.CSSProperties;
|
|
47
|
-
/** Additional CSS rules to add to the
|
|
49
|
+
/** Additional CSS rules to add to the `<picture />` tag */
|
|
48
50
|
pictureStyle?: React.CSSProperties;
|
|
51
|
+
/** Additional CSS rules to add to the image inside the `<picture />` tag */
|
|
52
|
+
imgStyle?: React.CSSProperties;
|
|
49
53
|
/** Additional CSS rules to add to the placeholder image */
|
|
50
54
|
placeholderStyle?: React.CSSProperties;
|
|
51
55
|
/**
|
|
@@ -3,10 +3,14 @@ import type { ResponsiveImageType } from '../Image';
|
|
|
3
3
|
export type SRCImagePropTypes = {
|
|
4
4
|
/** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
|
|
5
5
|
data: ResponsiveImageType;
|
|
6
|
-
/** Additional CSS className for root
|
|
7
|
-
|
|
8
|
-
/** Additional CSS rules to add to the root
|
|
9
|
-
|
|
6
|
+
/** Additional CSS className for the root <picture> tag */
|
|
7
|
+
pictureClassName?: string;
|
|
8
|
+
/** Additional CSS rules to add to the root <picture> tag */
|
|
9
|
+
pictureStyle?: React.CSSProperties;
|
|
10
|
+
/** Additional CSS className for the <img> tag */
|
|
11
|
+
imgClassName?: string;
|
|
12
|
+
/** Additional CSS rules to add to the <img> tag */
|
|
13
|
+
imgStyle?: React.CSSProperties;
|
|
10
14
|
/**
|
|
11
15
|
* When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
|
|
12
16
|
* 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.
|
|
@@ -30,4 +34,4 @@ export type SRCImagePropTypes = {
|
|
|
30
34
|
**/
|
|
31
35
|
srcSetCandidates?: number[];
|
|
32
36
|
};
|
|
33
|
-
export declare function SRCImage({
|
|
37
|
+
export declare function SRCImage({ pictureClassName, pictureStyle, imgClassName, imgStyle, data, usePlaceholder, priority, sizes, srcSetCandidates, }: SRCImagePropTypes): JSX.Element;
|
package/package.json
CHANGED
|
@@ -1748,16 +1748,22 @@ exports[`Image passing className and/or style renders correctly 1`] = `
|
|
|
1748
1748
|
"width": 750,
|
|
1749
1749
|
}
|
|
1750
1750
|
}
|
|
1751
|
+
imgClassName="img-class-name"
|
|
1752
|
+
imgStyle={
|
|
1753
|
+
{
|
|
1754
|
+
"border": "1px solid yellow",
|
|
1755
|
+
}
|
|
1756
|
+
}
|
|
1751
1757
|
pictureClassName="picture-class-name"
|
|
1752
1758
|
pictureStyle={
|
|
1753
1759
|
{
|
|
1754
|
-
"border": "1px solid
|
|
1760
|
+
"border": "1px solid pink",
|
|
1755
1761
|
}
|
|
1756
1762
|
}
|
|
1757
1763
|
placeholderClassName="placeholder-class-name"
|
|
1758
1764
|
placeholderStyle={
|
|
1759
1765
|
{
|
|
1760
|
-
"border": "1px solid green
|
|
1766
|
+
"border": "1px solid green",
|
|
1761
1767
|
}
|
|
1762
1768
|
}
|
|
1763
1769
|
style={
|
|
@@ -1781,11 +1787,11 @@ exports[`Image passing className and/or style renders correctly 1`] = `
|
|
|
1781
1787
|
<img
|
|
1782
1788
|
alt=""
|
|
1783
1789
|
aria-hidden="true"
|
|
1784
|
-
className="
|
|
1790
|
+
className="img-class-name"
|
|
1785
1791
|
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
|
|
1786
1792
|
style={
|
|
1787
1793
|
{
|
|
1788
|
-
"border": "1px solid yellow
|
|
1794
|
+
"border": "1px solid yellow",
|
|
1789
1795
|
"display": "block",
|
|
1790
1796
|
"width": "100%",
|
|
1791
1797
|
}
|
|
@@ -1798,7 +1804,7 @@ exports[`Image passing className and/or style renders correctly 1`] = `
|
|
|
1798
1804
|
src="data:image/jpeg;base64,<IMAGE-DATA>"
|
|
1799
1805
|
style={
|
|
1800
1806
|
{
|
|
1801
|
-
"border": "1px solid green
|
|
1807
|
+
"border": "1px solid green",
|
|
1802
1808
|
"height": "auto",
|
|
1803
1809
|
"left": "-5%",
|
|
1804
1810
|
"maxHeight": "none",
|
|
@@ -1813,18 +1819,25 @@ exports[`Image passing className and/or style renders correctly 1`] = `
|
|
|
1813
1819
|
}
|
|
1814
1820
|
}
|
|
1815
1821
|
/>
|
|
1816
|
-
<picture
|
|
1822
|
+
<picture
|
|
1823
|
+
className="picture-class-name"
|
|
1824
|
+
style={
|
|
1825
|
+
{
|
|
1826
|
+
"border": "1px solid pink",
|
|
1827
|
+
}
|
|
1828
|
+
}
|
|
1829
|
+
>
|
|
1817
1830
|
<source
|
|
1818
1831
|
srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
|
|
1819
1832
|
/>
|
|
1820
1833
|
<img
|
|
1821
1834
|
alt=""
|
|
1822
|
-
className="
|
|
1835
|
+
className="img-class-name"
|
|
1823
1836
|
onLoad={[Function]}
|
|
1824
1837
|
src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
|
|
1825
1838
|
style={
|
|
1826
1839
|
{
|
|
1827
|
-
"border": "1px solid yellow
|
|
1840
|
+
"border": "1px solid yellow",
|
|
1828
1841
|
"height": "100%",
|
|
1829
1842
|
"left": 0,
|
|
1830
1843
|
"maxHeight": "none",
|
|
@@ -1841,7 +1854,14 @@ exports[`Image passing className and/or style renders correctly 1`] = `
|
|
|
1841
1854
|
/>
|
|
1842
1855
|
</picture>
|
|
1843
1856
|
<noscript>
|
|
1844
|
-
<picture
|
|
1857
|
+
<picture
|
|
1858
|
+
className="picture-class-name"
|
|
1859
|
+
style={
|
|
1860
|
+
{
|
|
1861
|
+
"border": "1px solid pink",
|
|
1862
|
+
}
|
|
1863
|
+
}
|
|
1864
|
+
/>
|
|
1845
1865
|
</noscript>
|
|
1846
1866
|
</div>
|
|
1847
1867
|
</ForwardRef>
|
|
@@ -107,9 +107,11 @@ describe('Image', () => {
|
|
|
107
107
|
className="class-name"
|
|
108
108
|
style={{ border: '1px solid red' }}
|
|
109
109
|
pictureClassName="picture-class-name"
|
|
110
|
-
pictureStyle={{ border: '1px solid
|
|
110
|
+
pictureStyle={{ border: '1px solid pink' }}
|
|
111
|
+
imgClassName="img-class-name"
|
|
112
|
+
imgStyle={{ border: '1px solid yellow' }}
|
|
111
113
|
placeholderClassName="placeholder-class-name"
|
|
112
|
-
placeholderStyle={{ border: '1px solid green
|
|
114
|
+
placeholderStyle={{ border: '1px solid green' }}
|
|
113
115
|
/>,
|
|
114
116
|
);
|
|
115
117
|
mockAllIsIntersecting(true);
|
package/src/Image/index.tsx
CHANGED
|
@@ -50,8 +50,10 @@ export type ImagePropTypes = {
|
|
|
50
50
|
data: ResponsiveImageType;
|
|
51
51
|
/** Additional CSS className for root node */
|
|
52
52
|
className?: string;
|
|
53
|
-
/** Additional CSS class for the
|
|
53
|
+
/** Additional CSS class for the `<picture />` tag */
|
|
54
54
|
pictureClassName?: string;
|
|
55
|
+
/** Additional CSS class for the image inside the `<picture />` tag */
|
|
56
|
+
imgClassName?: string;
|
|
55
57
|
/** Additional CSS class for the placeholder image */
|
|
56
58
|
placeholderClassName?: string;
|
|
57
59
|
/** Duration (in ms) of the fade-in transition effect upon image loading */
|
|
@@ -64,8 +66,10 @@ export type ImagePropTypes = {
|
|
|
64
66
|
intersectionMargin?: string;
|
|
65
67
|
/** Additional CSS rules to add to the root node */
|
|
66
68
|
style?: React.CSSProperties;
|
|
67
|
-
/** Additional CSS rules to add to the
|
|
69
|
+
/** Additional CSS rules to add to the `<picture />` tag */
|
|
68
70
|
pictureStyle?: React.CSSProperties;
|
|
71
|
+
/** Additional CSS rules to add to the image inside the `<picture />` tag */
|
|
72
|
+
imgStyle?: React.CSSProperties;
|
|
69
73
|
/** Additional CSS rules to add to the placeholder image */
|
|
70
74
|
placeholderStyle?: React.CSSProperties;
|
|
71
75
|
/**
|
|
@@ -156,8 +160,10 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
156
160
|
intersectionThreshold,
|
|
157
161
|
intersectionMargin,
|
|
158
162
|
pictureClassName,
|
|
163
|
+
imgClassName,
|
|
159
164
|
style,
|
|
160
165
|
pictureStyle,
|
|
166
|
+
imgStyle,
|
|
161
167
|
layout = 'intrinsic',
|
|
162
168
|
objectFit,
|
|
163
169
|
objectPosition,
|
|
@@ -242,11 +248,11 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
242
248
|
const sizer =
|
|
243
249
|
layout !== 'fill' ? (
|
|
244
250
|
<img
|
|
245
|
-
className={
|
|
251
|
+
className={imgClassName}
|
|
246
252
|
style={{
|
|
247
253
|
display: 'block',
|
|
248
254
|
width: '100%',
|
|
249
|
-
...
|
|
255
|
+
...imgStyle,
|
|
250
256
|
}}
|
|
251
257
|
src={`data:image/svg+xml;base64,${universalBtoa(svg)}`}
|
|
252
258
|
aria-hidden="true"
|
|
@@ -273,7 +279,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
273
279
|
{sizer}
|
|
274
280
|
{placeholder}
|
|
275
281
|
{addImage && (
|
|
276
|
-
<picture>
|
|
282
|
+
<picture className={pictureClassName} style={pictureStyle}>
|
|
277
283
|
{webpSource}
|
|
278
284
|
{regularSource}
|
|
279
285
|
{data.src && (
|
|
@@ -285,21 +291,21 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
285
291
|
title={data.title ?? undefined}
|
|
286
292
|
onLoad={handleLoad}
|
|
287
293
|
{...priorityProp(priority ? 'high' : undefined)}
|
|
288
|
-
className={
|
|
294
|
+
className={imgClassName}
|
|
289
295
|
style={{
|
|
290
296
|
opacity: showImage ? 1 : 0,
|
|
291
297
|
transition,
|
|
292
298
|
...absolutePositioning,
|
|
293
299
|
objectFit,
|
|
294
300
|
objectPosition,
|
|
295
|
-
...
|
|
301
|
+
...imgStyle,
|
|
296
302
|
}}
|
|
297
303
|
/>
|
|
298
304
|
)}
|
|
299
305
|
</picture>
|
|
300
306
|
)}
|
|
301
307
|
<noscript>
|
|
302
|
-
<picture>
|
|
308
|
+
<picture className={pictureClassName} style={pictureStyle}>
|
|
303
309
|
{webpSource}
|
|
304
310
|
{regularSource}
|
|
305
311
|
{data.src && (
|
|
@@ -308,12 +314,12 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
308
314
|
src={data.src}
|
|
309
315
|
alt={data.alt ?? ''}
|
|
310
316
|
title={data.title ?? undefined}
|
|
311
|
-
className={
|
|
317
|
+
className={imgClassName}
|
|
312
318
|
style={{
|
|
313
319
|
...absolutePositioning,
|
|
314
320
|
objectFit,
|
|
315
321
|
objectPosition,
|
|
316
|
-
...
|
|
322
|
+
...imgStyle,
|
|
317
323
|
}}
|
|
318
324
|
loading={priority ? undefined : 'lazy'}
|
|
319
325
|
{...priorityProp(priority ? 'high' : undefined)}
|
|
@@ -159,7 +159,6 @@ exports[`Image minimalDataWithRelativeUrl renders correctly 1`] = `
|
|
|
159
159
|
|
|
160
160
|
exports[`Image passing className and/or style renders correctly 1`] = `
|
|
161
161
|
<SRCImage
|
|
162
|
-
className="class-name"
|
|
163
162
|
data={
|
|
164
163
|
{
|
|
165
164
|
"base64": "data:image/jpeg;base64,<IMAGE-DATA>",
|
|
@@ -168,13 +167,27 @@ exports[`Image passing className and/or style renders correctly 1`] = `
|
|
|
168
167
|
"width": 750,
|
|
169
168
|
}
|
|
170
169
|
}
|
|
171
|
-
|
|
170
|
+
imgClassName="class-name"
|
|
171
|
+
imgStyle={
|
|
172
172
|
{
|
|
173
173
|
"border": "1px solid red",
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
|
+
pictureClassName="picture-class-name"
|
|
177
|
+
pictureStyle={
|
|
178
|
+
{
|
|
179
|
+
"border": "1px solid green",
|
|
180
|
+
}
|
|
181
|
+
}
|
|
176
182
|
>
|
|
177
|
-
<picture
|
|
183
|
+
<picture
|
|
184
|
+
className="picture-class-name"
|
|
185
|
+
style={
|
|
186
|
+
{
|
|
187
|
+
"border": "1px solid green",
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
>
|
|
178
191
|
<source
|
|
179
192
|
srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
|
|
180
193
|
/>
|
|
@@ -56,8 +56,10 @@ describe('Image', () => {
|
|
|
56
56
|
const wrapper = mount(
|
|
57
57
|
<SRCImage
|
|
58
58
|
data={minimalData}
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
pictureClassName="picture-class-name"
|
|
60
|
+
pictureStyle={{ border: '1px solid green' }}
|
|
61
|
+
imgClassName="class-name"
|
|
62
|
+
imgStyle={{ border: '1px solid red' }}
|
|
61
63
|
/>,
|
|
62
64
|
);
|
|
63
65
|
expect(wrapper).toMatchSnapshot();
|
package/src/SRCImage/index.tsx
CHANGED
|
@@ -6,10 +6,14 @@ import { buildRegularSource, buildWebpSource, priorityProp } from './utils.js';
|
|
|
6
6
|
export type SRCImagePropTypes = {
|
|
7
7
|
/** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
|
|
8
8
|
data: ResponsiveImageType;
|
|
9
|
-
/** Additional CSS className for root
|
|
10
|
-
|
|
11
|
-
/** Additional CSS rules to add to the root
|
|
12
|
-
|
|
9
|
+
/** Additional CSS className for the root <picture> tag */
|
|
10
|
+
pictureClassName?: string;
|
|
11
|
+
/** Additional CSS rules to add to the root <picture> tag */
|
|
12
|
+
pictureStyle?: React.CSSProperties;
|
|
13
|
+
/** Additional CSS className for the <img> tag */
|
|
14
|
+
imgClassName?: string;
|
|
15
|
+
/** Additional CSS rules to add to the <img> tag */
|
|
16
|
+
imgStyle?: React.CSSProperties;
|
|
13
17
|
/**
|
|
14
18
|
* When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
|
|
15
19
|
* 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.
|
|
@@ -35,8 +39,10 @@ export type SRCImagePropTypes = {
|
|
|
35
39
|
};
|
|
36
40
|
|
|
37
41
|
export function SRCImage({
|
|
38
|
-
|
|
39
|
-
|
|
42
|
+
pictureClassName,
|
|
43
|
+
pictureStyle,
|
|
44
|
+
imgClassName,
|
|
45
|
+
imgStyle,
|
|
40
46
|
data,
|
|
41
47
|
usePlaceholder = true,
|
|
42
48
|
priority = false,
|
|
@@ -76,7 +82,7 @@ export function SRCImage({
|
|
|
76
82
|
: { loading: 'lazy' };
|
|
77
83
|
|
|
78
84
|
return (
|
|
79
|
-
<picture>
|
|
85
|
+
<picture className={pictureClassName} style={pictureStyle}>
|
|
80
86
|
{webpSource}
|
|
81
87
|
{regularSource}
|
|
82
88
|
{data.src && (
|
|
@@ -86,11 +92,11 @@ export function SRCImage({
|
|
|
86
92
|
alt={data.alt ?? ''}
|
|
87
93
|
title={data.title ?? undefined}
|
|
88
94
|
{...loadingBehaviourProps}
|
|
89
|
-
className={
|
|
95
|
+
className={imgClassName}
|
|
90
96
|
style={{
|
|
91
97
|
...placeholderStyle,
|
|
92
98
|
...sizingStyle,
|
|
93
|
-
...
|
|
99
|
+
...imgStyle,
|
|
94
100
|
}}
|
|
95
101
|
/>
|
|
96
102
|
)}
|