react-datocms 7.0.0 → 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/SRCImage/index.js +3 -3
- package/dist/cjs/SRCImage/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/SRCImage/index.d.ts +9 -5
- package/package.json +1 -1
- 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
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -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
|
@@ -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
|
)}
|