react-datocms 1.6.9 → 2.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/README.md +35 -15
- package/dist/cjs/Image/__tests__/index.test.js +32 -28
- package/dist/cjs/Image/__tests__/index.test.js.map +1 -1
- package/dist/cjs/Image/index.js +27 -15
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/esm/Image/__tests__/index.test.js +36 -32
- package/dist/esm/Image/__tests__/index.test.js.map +1 -1
- package/dist/esm/Image/index.d.ts +17 -4
- package/dist/esm/Image/index.js +30 -18
- package/dist/esm/Image/index.js.map +1 -1
- package/dist/types/Image/index.d.ts +17 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -237,20 +237,40 @@ export default withQuery(query)(Page);
|
|
|
237
237
|
|
|
238
238
|
## Props
|
|
239
239
|
|
|
240
|
-
| prop | type
|
|
241
|
-
| --------------------- |
|
|
242
|
-
| data | `ResponsiveImage` object
|
|
243
|
-
|
|
|
244
|
-
|
|
|
245
|
-
|
|
|
246
|
-
|
|
|
247
|
-
|
|
|
248
|
-
|
|
|
249
|
-
|
|
|
250
|
-
|
|
|
251
|
-
|
|
|
252
|
-
| onLoad | () => void
|
|
253
|
-
| usePlaceholder | Boolean
|
|
240
|
+
| prop | type | required | description | default |
|
|
241
|
+
| --------------------- | ------------------------------------------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
|
|
242
|
+
| data | `ResponsiveImage` object | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query | |
|
|
243
|
+
| layout | 'intrinsic' \| 'fixed' \| 'responsive' \| 'fill' | :x: | The layout behavior of the image as the viewport changes size | "intrinsic" |
|
|
244
|
+
| className | string | :x: | Additional CSS className for root node | null |
|
|
245
|
+
| style | CSS properties | :x: | Additional CSS rules to add to the root node | null |
|
|
246
|
+
| pictureClassName | string | :x: | Additional CSS class for the image inside the inner `<picture />` tag | null |
|
|
247
|
+
| pictureStyle | CSS properties | :x: | Additional CSS rules to add to the image inside the inner `<picture />` tag | null |
|
|
248
|
+
| fadeInDuration | integer | :x: | Duration (in ms) of the fade-in transition effect upoad image loading | 500 |
|
|
249
|
+
| intersectionThreshold | float | :x: | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. | 0 |
|
|
250
|
+
| intersectionMargin | string | :x: | Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections. | "0px 0px 0px 0px" |
|
|
251
|
+
| lazyLoad | Boolean | :x: | Whether enable lazy loading or not | true |
|
|
252
|
+
| onLoad | () => void | :x: | Function triggered when the image has finished loading | undefined |
|
|
253
|
+
| usePlaceholder | Boolean | :x: | Whether the component should use a blurred image placeholder | true |
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
### Layout mode
|
|
257
|
+
|
|
258
|
+
With the `layout` property, you can configure the behavior of the image as the viewport changes size:
|
|
259
|
+
|
|
260
|
+
* When `intrinsic` (default behaviour), the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports.
|
|
261
|
+
* When `fixed`, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native `img` element.
|
|
262
|
+
* When `responsive`, the image will scale the dimensions down for smaller viewports and scale up for larger viewports.
|
|
263
|
+
* When `fill`, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative.
|
|
264
|
+
* This is usually paired with the `objectFit` and `objectPosition` properties.
|
|
265
|
+
* Ensure the parent element has `position: relative` in their stylesheet.
|
|
266
|
+
|
|
267
|
+
Example for `layout="fill"` (useful also for background images):
|
|
268
|
+
|
|
269
|
+
```jsx
|
|
270
|
+
<div style={{ position: 'relative', width: 200, height: 500 }}>
|
|
271
|
+
<Image data={imageData} layout="fill" objectFit="cover" objectPosition="50% 50%" />
|
|
272
|
+
</div>
|
|
273
|
+
```
|
|
254
274
|
|
|
255
275
|
### The `ResponsiveImage` object
|
|
256
276
|
|
|
@@ -655,4 +675,4 @@ Now on another terminal you can run:
|
|
|
655
675
|
npm run watch
|
|
656
676
|
```
|
|
657
677
|
|
|
658
|
-
This will re-compile the package everytime you make a change, and the example project will pick those changes instantly.
|
|
678
|
+
This will re-compile the package everytime you make a change, and the example project will pick those changes instantly.
|
|
@@ -24,41 +24,45 @@ var enzyme_1 = require("enzyme");
|
|
|
24
24
|
var index_1 = require("../index");
|
|
25
25
|
var test_utils_1 = require("react-intersection-observer/test-utils");
|
|
26
26
|
var data = {
|
|
27
|
-
alt:
|
|
27
|
+
alt: 'DatoCMS swag',
|
|
28
28
|
aspectRatio: 1.7777777777777777,
|
|
29
|
-
base64:
|
|
29
|
+
base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
|
|
30
30
|
height: 421,
|
|
31
|
-
sizes:
|
|
32
|
-
src:
|
|
33
|
-
srcSet:
|
|
34
|
-
title:
|
|
31
|
+
sizes: '(max-width: 750px) 100vw, 750px',
|
|
32
|
+
src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
|
|
33
|
+
srcSet: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w',
|
|
34
|
+
title: 'These are awesome, we know that.',
|
|
35
35
|
width: 750
|
|
36
36
|
};
|
|
37
|
-
describe(
|
|
37
|
+
describe('Image', function () {
|
|
38
38
|
// intersectionThreshold is an hack to make tests work
|
|
39
39
|
// we need the library to generate a different IntersectionObserver for each test
|
|
40
40
|
// otherwise the IntersectionObserver mocking won't work
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
41
|
+
['intrinsic', 'fixed', 'responsive', 'fill'].forEach(function (layout) {
|
|
42
|
+
describe("layout=" + layout, function () {
|
|
43
|
+
describe('not visible', function () {
|
|
44
|
+
it('renders the blur-up thumb', function () {
|
|
45
|
+
var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, layout: layout, intersectionThreshold: 0.1 }));
|
|
46
|
+
expect(wrapper).toMatchSnapshot();
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
describe('visible', function () {
|
|
50
|
+
it('renders the image', function () {
|
|
51
|
+
var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, layout: layout, intersectionThreshold: 0.2 }));
|
|
52
|
+
test_utils_1.mockAllIsIntersecting(true);
|
|
53
|
+
wrapper.update();
|
|
54
|
+
expect(wrapper).toMatchSnapshot();
|
|
55
|
+
});
|
|
56
|
+
describe('image loaded', function () {
|
|
57
|
+
it('shows the image', function () {
|
|
58
|
+
var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, layout: layout, intersectionThreshold: 0.3 }));
|
|
59
|
+
test_utils_1.mockAllIsIntersecting(true);
|
|
60
|
+
wrapper.update();
|
|
61
|
+
wrapper.find('img').last().simulate('load');
|
|
62
|
+
wrapper.update();
|
|
63
|
+
expect(wrapper).toMatchSnapshot();
|
|
64
|
+
});
|
|
65
|
+
});
|
|
62
66
|
});
|
|
63
67
|
});
|
|
64
68
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../../src/Image/__tests__/index.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,iCAA+B;AAC/B,kCAAiC;AACjC,qEAA+E;AAE/E,IAAM,IAAI,GAAG;IACX,GAAG,EAAE,cAAc;IACnB,WAAW,EAAE,kBAAkB;IAC/B,MAAM,EACJ,igBAAigB;IACngB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,iCAAiC;IACxC,GAAG,EAAE,uEAAuE;IAC5E,MAAM,EACJ,8pBAA8pB;IAChqB,KAAK,EAAE,kCAAkC;IACzC,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,QAAQ,CAAC,OAAO,EAAE;IAChB,sDAAsD;IACtD,iFAAiF;IACjF,wDAAwD;
|
|
1
|
+
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../../src/Image/__tests__/index.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,iCAA+B;AAC/B,kCAAiC;AACjC,qEAA+E;AAE/E,IAAM,IAAI,GAAG;IACX,GAAG,EAAE,cAAc;IACnB,WAAW,EAAE,kBAAkB;IAC/B,MAAM,EACJ,igBAAigB;IACngB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,iCAAiC;IACxC,GAAG,EAAE,uEAAuE;IAC5E,MAAM,EACJ,8pBAA8pB;IAChqB,KAAK,EAAE,kCAAkC;IACzC,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,QAAQ,CAAC,OAAO,EAAE;IAChB,sDAAsD;IACtD,iFAAiF;IACjF,wDAAwD;IAEvD,CAAC,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,CAAW,CAAC,OAAO,CAAC,UAAC,MAAM;QACrE,QAAQ,CAAC,YAAU,MAAQ,EAAE;YAC3B,QAAQ,CAAC,aAAa,EAAE;gBACtB,EAAE,CAAC,2BAA2B,EAAE;oBAC9B,IAAM,OAAO,GAAG,cAAK,CACnB,oBAAC,aAAK,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,GAAI,CAClE,CAAC;oBACF,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpC,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,SAAS,EAAE;gBAClB,EAAE,CAAC,mBAAmB,EAAE;oBACtB,IAAM,OAAO,GAAG,cAAK,CACnB,oBAAC,aAAK,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,GAAI,CAClE,CAAC;oBACF,kCAAqB,CAAC,IAAI,CAAC,CAAC;oBAC5B,OAAO,CAAC,MAAM,EAAE,CAAC;oBACjB,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpC,CAAC,CAAC,CAAC;gBAEH,QAAQ,CAAC,cAAc,EAAE;oBACvB,EAAE,CAAC,iBAAiB,EAAE;wBACpB,IAAM,OAAO,GAAG,cAAK,CACnB,oBAAC,aAAK,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,GAAI,CAClE,CAAC;wBACF,kCAAqB,CAAC,IAAI,CAAC,CAAC;wBAC5B,OAAO,CAAC,MAAM,EAAE,CAAC;wBACjB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;wBAC5C,OAAO,CAAC,MAAM,EAAE,CAAC;wBACjB,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpC,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/dist/cjs/Image/index.js
CHANGED
|
@@ -34,9 +34,9 @@ exports.Image = void 0;
|
|
|
34
34
|
var react_1 = __importStar(require("react"));
|
|
35
35
|
require("intersection-observer");
|
|
36
36
|
var react_intersection_observer_1 = require("react-intersection-observer");
|
|
37
|
-
var isSsr = typeof window ===
|
|
37
|
+
var isSsr = typeof window === 'undefined';
|
|
38
38
|
var universalBtoa = isSsr
|
|
39
|
-
? function (str) { return Buffer.from(str.toString(),
|
|
39
|
+
? function (str) { return Buffer.from(str.toString(), 'binary').toString('base64'); }
|
|
40
40
|
: window.btoa;
|
|
41
41
|
var isIntersectionObserverAvailable = isSsr
|
|
42
42
|
? false
|
|
@@ -69,28 +69,28 @@ var imageShowStrategy = function (_a) {
|
|
|
69
69
|
};
|
|
70
70
|
exports.Image = react_1.forwardRef(function (_a, ref) {
|
|
71
71
|
var _b;
|
|
72
|
-
var className = _a.className, _c = _a.fadeInDuration, fadeInDuration = _c === void 0 ? 500 : _c, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _d = _a.lazyLoad, lazyLoad = _d === void 0 ? true : _d, style = _a.style, pictureStyle = _a.pictureStyle,
|
|
73
|
-
var
|
|
72
|
+
var className = _a.className, _c = _a.fadeInDuration, fadeInDuration = _c === void 0 ? 500 : _c, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _d = _a.lazyLoad, lazyLoad = _d === void 0 ? true : _d, style = _a.style, pictureStyle = _a.pictureStyle, _e = _a.layout, layout = _e === void 0 ? 'intrinsic' : _e, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _f = _a.usePlaceholder, usePlaceholder = _f === void 0 ? true : _f;
|
|
73
|
+
var _g = react_1.useState(false), loaded = _g[0], setLoaded = _g[1];
|
|
74
74
|
var handleLoad = function () {
|
|
75
75
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
76
76
|
setLoaded(true);
|
|
77
77
|
};
|
|
78
|
-
var
|
|
78
|
+
var _h = react_intersection_observer_1.useInView({
|
|
79
79
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
80
|
-
rootMargin: intersectionMargin ||
|
|
80
|
+
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
81
81
|
triggerOnce: true
|
|
82
|
-
}), viewRef =
|
|
82
|
+
}), viewRef = _h[0], inView = _h[1];
|
|
83
83
|
var callbackRef = react_1.useCallback(function (_ref) {
|
|
84
84
|
viewRef(_ref);
|
|
85
85
|
if (ref)
|
|
86
86
|
ref.current = _ref;
|
|
87
87
|
}, [viewRef]);
|
|
88
88
|
var absolutePositioning = {
|
|
89
|
-
position:
|
|
89
|
+
position: 'absolute',
|
|
90
90
|
left: 0,
|
|
91
91
|
top: 0,
|
|
92
|
-
width:
|
|
93
|
-
height:
|
|
92
|
+
width: '100%',
|
|
93
|
+
height: '100%'
|
|
94
94
|
};
|
|
95
95
|
var addImage = imageAddStrategy({
|
|
96
96
|
lazyLoad: lazyLoad,
|
|
@@ -105,22 +105,34 @@ exports.Image = react_1.forwardRef(function (_a, ref) {
|
|
|
105
105
|
var webpSource = data.webpSrcSet && (react_1["default"].createElement("source", { srcSet: data.webpSrcSet, sizes: data.sizes, type: "image/webp" }));
|
|
106
106
|
var regularSource = data.srcSet && (react_1["default"].createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
|
|
107
107
|
var transition = fadeInDuration > 0 ? "opacity " + fadeInDuration + "ms" : undefined;
|
|
108
|
-
var placeholder = usePlaceholder ? (react_1["default"].createElement("
|
|
108
|
+
var placeholder = usePlaceholder ? (react_1["default"].createElement("img", { role: "presentation", src: data.base64, style: __assign({ backgroundColor: data.bgColor, opacity: showImage ? 0 : 1, transition: transition,
|
|
109
|
+
objectFit: objectFit,
|
|
110
|
+
objectPosition: objectPosition }, absolutePositioning) })) : null;
|
|
109
111
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
110
112
|
var height = data.height || width / aspectRatio;
|
|
111
113
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
|
|
112
|
-
var sizer = (react_1["default"].createElement("img", { className: pictureClassName, style:
|
|
113
|
-
|
|
114
|
+
var sizer = layout !== 'fill' ? (react_1["default"].createElement("img", { className: pictureClassName, style: {
|
|
115
|
+
display: 'block',
|
|
116
|
+
width: '100%'
|
|
117
|
+
}, src: "data:image/svg+xml;base64," + universalBtoa(svg), role: "presentation" })) : null;
|
|
118
|
+
return (react_1["default"].createElement("div", { ref: callbackRef, className: className, style: __assign(__assign({ overflow: 'hidden' }, (layout === 'fill'
|
|
119
|
+
? absolutePositioning
|
|
120
|
+
: layout === 'intrinsic'
|
|
121
|
+
? { position: 'relative', width: '100%', maxWidth: width }
|
|
122
|
+
: layout === 'fixed'
|
|
123
|
+
? { position: 'relative', width: width }
|
|
124
|
+
: { position: 'relative', width: '100%' })), style) },
|
|
114
125
|
sizer,
|
|
115
126
|
placeholder,
|
|
116
127
|
addImage && (react_1["default"].createElement("picture", null,
|
|
117
128
|
webpSource,
|
|
118
129
|
regularSource,
|
|
119
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: data.alt, title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({
|
|
130
|
+
data.src && (react_1["default"].createElement("img", { src: data.src, alt: data.alt, title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit,
|
|
131
|
+
objectPosition: objectPosition }), pictureStyle) })))),
|
|
120
132
|
react_1["default"].createElement("noscript", null,
|
|
121
133
|
react_1["default"].createElement("picture", null,
|
|
122
134
|
webpSource,
|
|
123
135
|
regularSource,
|
|
124
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b :
|
|
136
|
+
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
|
|
125
137
|
});
|
|
126
138
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,43 +1,47 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { mount } from
|
|
3
|
-
import { Image } from
|
|
4
|
-
import { mockAllIsIntersecting } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { mount } from 'enzyme';
|
|
3
|
+
import { Image } from '../index';
|
|
4
|
+
import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
|
|
5
5
|
var data = {
|
|
6
|
-
alt:
|
|
6
|
+
alt: 'DatoCMS swag',
|
|
7
7
|
aspectRatio: 1.7777777777777777,
|
|
8
|
-
base64:
|
|
8
|
+
base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
|
|
9
9
|
height: 421,
|
|
10
|
-
sizes:
|
|
11
|
-
src:
|
|
12
|
-
srcSet:
|
|
13
|
-
title:
|
|
10
|
+
sizes: '(max-width: 750px) 100vw, 750px',
|
|
11
|
+
src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
|
|
12
|
+
srcSet: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w',
|
|
13
|
+
title: 'These are awesome, we know that.',
|
|
14
14
|
width: 750
|
|
15
15
|
};
|
|
16
|
-
describe(
|
|
16
|
+
describe('Image', function () {
|
|
17
17
|
// intersectionThreshold is an hack to make tests work
|
|
18
18
|
// we need the library to generate a different IntersectionObserver for each test
|
|
19
19
|
// otherwise the IntersectionObserver mocking won't work
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
20
|
+
['intrinsic', 'fixed', 'responsive', 'fill'].forEach(function (layout) {
|
|
21
|
+
describe("layout=" + layout, function () {
|
|
22
|
+
describe('not visible', function () {
|
|
23
|
+
it('renders the blur-up thumb', function () {
|
|
24
|
+
var wrapper = mount(React.createElement(Image, { data: data, layout: layout, intersectionThreshold: 0.1 }));
|
|
25
|
+
expect(wrapper).toMatchSnapshot();
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
describe('visible', function () {
|
|
29
|
+
it('renders the image', function () {
|
|
30
|
+
var wrapper = mount(React.createElement(Image, { data: data, layout: layout, intersectionThreshold: 0.2 }));
|
|
31
|
+
mockAllIsIntersecting(true);
|
|
32
|
+
wrapper.update();
|
|
33
|
+
expect(wrapper).toMatchSnapshot();
|
|
34
|
+
});
|
|
35
|
+
describe('image loaded', function () {
|
|
36
|
+
it('shows the image', function () {
|
|
37
|
+
var wrapper = mount(React.createElement(Image, { data: data, layout: layout, intersectionThreshold: 0.3 }));
|
|
38
|
+
mockAllIsIntersecting(true);
|
|
39
|
+
wrapper.update();
|
|
40
|
+
wrapper.find('img').last().simulate('load');
|
|
41
|
+
wrapper.update();
|
|
42
|
+
expect(wrapper).toMatchSnapshot();
|
|
43
|
+
});
|
|
44
|
+
});
|
|
41
45
|
});
|
|
42
46
|
});
|
|
43
47
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../../src/Image/__tests__/index.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,IAAM,IAAI,GAAG;IACX,GAAG,EAAE,cAAc;IACnB,WAAW,EAAE,kBAAkB;IAC/B,MAAM,EACJ,igBAAigB;IACngB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,iCAAiC;IACxC,GAAG,EAAE,uEAAuE;IAC5E,MAAM,EACJ,8pBAA8pB;IAChqB,KAAK,EAAE,kCAAkC;IACzC,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,QAAQ,CAAC,OAAO,EAAE;IAChB,sDAAsD;IACtD,iFAAiF;IACjF,wDAAwD;
|
|
1
|
+
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../../src/Image/__tests__/index.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,IAAM,IAAI,GAAG;IACX,GAAG,EAAE,cAAc;IACnB,WAAW,EAAE,kBAAkB;IAC/B,MAAM,EACJ,igBAAigB;IACngB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,iCAAiC;IACxC,GAAG,EAAE,uEAAuE;IAC5E,MAAM,EACJ,8pBAA8pB;IAChqB,KAAK,EAAE,kCAAkC;IACzC,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,QAAQ,CAAC,OAAO,EAAE;IAChB,sDAAsD;IACtD,iFAAiF;IACjF,wDAAwD;IAEvD,CAAC,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,CAAW,CAAC,OAAO,CAAC,UAAC,MAAM;QACrE,QAAQ,CAAC,YAAU,MAAQ,EAAE;YAC3B,QAAQ,CAAC,aAAa,EAAE;gBACtB,EAAE,CAAC,2BAA2B,EAAE;oBAC9B,IAAM,OAAO,GAAG,KAAK,CACnB,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,GAAI,CAClE,CAAC;oBACF,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpC,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,SAAS,EAAE;gBAClB,EAAE,CAAC,mBAAmB,EAAE;oBACtB,IAAM,OAAO,GAAG,KAAK,CACnB,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,GAAI,CAClE,CAAC;oBACF,qBAAqB,CAAC,IAAI,CAAC,CAAC;oBAC5B,OAAO,CAAC,MAAM,EAAE,CAAC;oBACjB,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpC,CAAC,CAAC,CAAC;gBAEH,QAAQ,CAAC,cAAc,EAAE;oBACvB,EAAE,CAAC,iBAAiB,EAAE;wBACpB,IAAM,OAAO,GAAG,KAAK,CACnB,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,GAAI,CAClE,CAAC;wBACF,qBAAqB,CAAC,IAAI,CAAC,CAAC;wBAC5B,OAAO,CAAC,MAAM,EAAE,CAAC;wBACjB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;wBAC5C,OAAO,CAAC,MAAM,EAAE,CAAC;wBACjB,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpC,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
import 'intersection-observer';
|
|
3
3
|
export declare type ResponsiveImageType = {
|
|
4
4
|
/** The aspect ratio (width/height) of the image */
|
|
5
5
|
aspectRatio: number;
|
|
@@ -45,8 +45,21 @@ declare type ImagePropTypes = {
|
|
|
45
45
|
style?: React.CSSProperties;
|
|
46
46
|
/** Additional CSS rules to add to the image inside the `<picture />` tag */
|
|
47
47
|
pictureStyle?: React.CSSProperties;
|
|
48
|
-
/**
|
|
49
|
-
|
|
48
|
+
/**
|
|
49
|
+
* The layout behavior of the image as the viewport changes size
|
|
50
|
+
*
|
|
51
|
+
* Possible values:
|
|
52
|
+
*
|
|
53
|
+
* * `intrinsic` (default): the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
|
|
54
|
+
* * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
|
|
55
|
+
* * `responsive`: the image will scale the dimensions down for smaller viewports and scale up for larger viewports
|
|
56
|
+
* * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
|
|
57
|
+
* */
|
|
58
|
+
layout?: 'intrinsic' | 'fixed' | 'responsive' | 'fill';
|
|
59
|
+
/** Defines how the image will fit into its parent container when using layout="fill" */
|
|
60
|
+
objectFit?: CSSProperties['objectFit'];
|
|
61
|
+
/** Defines how the image is positioned within its parent element when using layout="fill". */
|
|
62
|
+
objectPosition?: CSSProperties['objectPosition'];
|
|
50
63
|
/** Triggered when the image finishes loading */
|
|
51
64
|
onLoad?(): void;
|
|
52
65
|
/** Whether the component should use a blurred image placeholder */
|
package/dist/esm/Image/index.js
CHANGED
|
@@ -9,12 +9,12 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import React, { useState, forwardRef, useCallback } from
|
|
13
|
-
import
|
|
14
|
-
import { useInView } from
|
|
15
|
-
var isSsr = typeof window ===
|
|
12
|
+
import React, { useState, forwardRef, useCallback } from 'react';
|
|
13
|
+
import 'intersection-observer';
|
|
14
|
+
import { useInView } from 'react-intersection-observer';
|
|
15
|
+
var isSsr = typeof window === 'undefined';
|
|
16
16
|
var universalBtoa = isSsr
|
|
17
|
-
? function (str) { return Buffer.from(str.toString(),
|
|
17
|
+
? function (str) { return Buffer.from(str.toString(), 'binary').toString('base64'); }
|
|
18
18
|
: window.btoa;
|
|
19
19
|
var isIntersectionObserverAvailable = isSsr
|
|
20
20
|
? false
|
|
@@ -47,28 +47,28 @@ var imageShowStrategy = function (_a) {
|
|
|
47
47
|
};
|
|
48
48
|
export var Image = forwardRef(function (_a, ref) {
|
|
49
49
|
var _b;
|
|
50
|
-
var className = _a.className, _c = _a.fadeInDuration, fadeInDuration = _c === void 0 ? 500 : _c, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _d = _a.lazyLoad, lazyLoad = _d === void 0 ? true : _d, style = _a.style, pictureStyle = _a.pictureStyle,
|
|
51
|
-
var
|
|
50
|
+
var className = _a.className, _c = _a.fadeInDuration, fadeInDuration = _c === void 0 ? 500 : _c, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _d = _a.lazyLoad, lazyLoad = _d === void 0 ? true : _d, style = _a.style, pictureStyle = _a.pictureStyle, _e = _a.layout, layout = _e === void 0 ? 'intrinsic' : _e, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _f = _a.usePlaceholder, usePlaceholder = _f === void 0 ? true : _f;
|
|
51
|
+
var _g = useState(false), loaded = _g[0], setLoaded = _g[1];
|
|
52
52
|
var handleLoad = function () {
|
|
53
53
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
54
54
|
setLoaded(true);
|
|
55
55
|
};
|
|
56
|
-
var
|
|
56
|
+
var _h = useInView({
|
|
57
57
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
58
|
-
rootMargin: intersectionMargin ||
|
|
58
|
+
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
59
59
|
triggerOnce: true
|
|
60
|
-
}), viewRef =
|
|
60
|
+
}), viewRef = _h[0], inView = _h[1];
|
|
61
61
|
var callbackRef = useCallback(function (_ref) {
|
|
62
62
|
viewRef(_ref);
|
|
63
63
|
if (ref)
|
|
64
64
|
ref.current = _ref;
|
|
65
65
|
}, [viewRef]);
|
|
66
66
|
var absolutePositioning = {
|
|
67
|
-
position:
|
|
67
|
+
position: 'absolute',
|
|
68
68
|
left: 0,
|
|
69
69
|
top: 0,
|
|
70
|
-
width:
|
|
71
|
-
height:
|
|
70
|
+
width: '100%',
|
|
71
|
+
height: '100%'
|
|
72
72
|
};
|
|
73
73
|
var addImage = imageAddStrategy({
|
|
74
74
|
lazyLoad: lazyLoad,
|
|
@@ -83,22 +83,34 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
83
83
|
var webpSource = data.webpSrcSet && (React.createElement("source", { srcSet: data.webpSrcSet, sizes: data.sizes, type: "image/webp" }));
|
|
84
84
|
var regularSource = data.srcSet && (React.createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
|
|
85
85
|
var transition = fadeInDuration > 0 ? "opacity " + fadeInDuration + "ms" : undefined;
|
|
86
|
-
var placeholder = usePlaceholder ? (React.createElement("
|
|
86
|
+
var placeholder = usePlaceholder ? (React.createElement("img", { role: "presentation", src: data.base64, style: __assign({ backgroundColor: data.bgColor, opacity: showImage ? 0 : 1, transition: transition,
|
|
87
|
+
objectFit: objectFit,
|
|
88
|
+
objectPosition: objectPosition }, absolutePositioning) })) : null;
|
|
87
89
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
88
90
|
var height = data.height || width / aspectRatio;
|
|
89
91
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
|
|
90
|
-
var sizer = (React.createElement("img", { className: pictureClassName, style:
|
|
91
|
-
|
|
92
|
+
var sizer = layout !== 'fill' ? (React.createElement("img", { className: pictureClassName, style: {
|
|
93
|
+
display: 'block',
|
|
94
|
+
width: '100%'
|
|
95
|
+
}, src: "data:image/svg+xml;base64," + universalBtoa(svg), role: "presentation" })) : null;
|
|
96
|
+
return (React.createElement("div", { ref: callbackRef, className: className, style: __assign(__assign({ overflow: 'hidden' }, (layout === 'fill'
|
|
97
|
+
? absolutePositioning
|
|
98
|
+
: layout === 'intrinsic'
|
|
99
|
+
? { position: 'relative', width: '100%', maxWidth: width }
|
|
100
|
+
: layout === 'fixed'
|
|
101
|
+
? { position: 'relative', width: width }
|
|
102
|
+
: { position: 'relative', width: '100%' })), style) },
|
|
92
103
|
sizer,
|
|
93
104
|
placeholder,
|
|
94
105
|
addImage && (React.createElement("picture", null,
|
|
95
106
|
webpSource,
|
|
96
107
|
regularSource,
|
|
97
|
-
data.src && (React.createElement("img", { src: data.src, alt: data.alt, title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({
|
|
108
|
+
data.src && (React.createElement("img", { src: data.src, alt: data.alt, title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit,
|
|
109
|
+
objectPosition: objectPosition }), pictureStyle) })))),
|
|
98
110
|
React.createElement("noscript", null,
|
|
99
111
|
React.createElement("picture", null,
|
|
100
112
|
webpSource,
|
|
101
113
|
regularSource,
|
|
102
|
-
data.src && (React.createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b :
|
|
114
|
+
data.src && (React.createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
|
|
103
115
|
});
|
|
104
116
|
//# 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,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
import 'intersection-observer';
|
|
3
3
|
export declare type ResponsiveImageType = {
|
|
4
4
|
/** The aspect ratio (width/height) of the image */
|
|
5
5
|
aspectRatio: number;
|
|
@@ -45,8 +45,21 @@ declare type ImagePropTypes = {
|
|
|
45
45
|
style?: React.CSSProperties;
|
|
46
46
|
/** Additional CSS rules to add to the image inside the `<picture />` tag */
|
|
47
47
|
pictureStyle?: React.CSSProperties;
|
|
48
|
-
/**
|
|
49
|
-
|
|
48
|
+
/**
|
|
49
|
+
* The layout behavior of the image as the viewport changes size
|
|
50
|
+
*
|
|
51
|
+
* Possible values:
|
|
52
|
+
*
|
|
53
|
+
* * `intrinsic` (default): the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
|
|
54
|
+
* * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
|
|
55
|
+
* * `responsive`: the image will scale the dimensions down for smaller viewports and scale up for larger viewports
|
|
56
|
+
* * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
|
|
57
|
+
* */
|
|
58
|
+
layout?: 'intrinsic' | 'fixed' | 'responsive' | 'fill';
|
|
59
|
+
/** Defines how the image will fit into its parent container when using layout="fill" */
|
|
60
|
+
objectFit?: CSSProperties['objectFit'];
|
|
61
|
+
/** Defines how the image is positioned within its parent element when using layout="fill". */
|
|
62
|
+
objectPosition?: CSSProperties['objectPosition'];
|
|
50
63
|
/** Triggered when the image finishes loading */
|
|
51
64
|
onLoad?(): void;
|
|
52
65
|
/** Whether the component should use a blurred image placeholder */
|