react-datocms 1.6.6 → 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 +63 -21
- 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 +39 -23
- 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 +23 -6
- package/dist/esm/Image/index.js +42 -25
- package/dist/esm/Image/index.js.map +1 -1
- package/dist/types/Image/index.d.ts +23 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
|
|
|
6
6
|
|
|
7
7
|
<br /><br />
|
|
8
8
|
<a href="https://www.datocms.com/">
|
|
9
|
-
|
|
9
|
+
<img src="https://www.datocms.com/images/full_logo.svg" height="60">
|
|
10
10
|
</a>
|
|
11
11
|
<br /><br />
|
|
12
12
|
|
|
@@ -237,18 +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
|
-
|
|
|
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
|
+
```
|
|
252
274
|
|
|
253
275
|
### The `ResponsiveImage` object
|
|
254
276
|
|
|
@@ -570,7 +592,6 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
570
592
|
<StructuredText
|
|
571
593
|
data={data.blogPost.content}
|
|
572
594
|
customRules={[
|
|
573
|
-
|
|
574
595
|
// Add HTML anchors to heading levels for in-page navigation
|
|
575
596
|
renderRule(isHeading, ({ node, children, key }) => {
|
|
576
597
|
const HeadingTag = `h${node.level}`;
|
|
@@ -586,7 +607,7 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
586
607
|
</HeadingTag>
|
|
587
608
|
);
|
|
588
609
|
}),
|
|
589
|
-
|
|
610
|
+
|
|
590
611
|
// Use a custom syntax highlighter component for code blocks
|
|
591
612
|
renderRule(isCode, ({ node, key }) => {
|
|
592
613
|
return (
|
|
@@ -598,14 +619,18 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
598
619
|
/>
|
|
599
620
|
);
|
|
600
621
|
}),
|
|
601
|
-
|
|
622
|
+
|
|
602
623
|
// Apply different formatting to top-level paragraphs
|
|
603
624
|
renderRule(
|
|
604
625
|
isParagraph,
|
|
605
626
|
({ adapter: { renderNode }, node, children, key, ancestors }) => {
|
|
606
627
|
if (isRoot(ancestors[0])) {
|
|
607
628
|
// If this paragraph node is a top-level one, give it a special class
|
|
608
|
-
return renderNode(
|
|
629
|
+
return renderNode(
|
|
630
|
+
'p',
|
|
631
|
+
{ key, className: 'top-level-paragraph-container-example' },
|
|
632
|
+
children,
|
|
633
|
+
);
|
|
609
634
|
} else {
|
|
610
635
|
// Proceed with default paragraph rendering...
|
|
611
636
|
// return renderNode('p', { key }, children);
|
|
@@ -613,10 +638,8 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
613
638
|
// Or even completely remove the paragraph and directly render the inner children:
|
|
614
639
|
return children;
|
|
615
640
|
}
|
|
616
|
-
}
|
|
617
|
-
)
|
|
618
|
-
|
|
619
|
-
|
|
641
|
+
},
|
|
642
|
+
),
|
|
620
643
|
]}
|
|
621
644
|
/>;
|
|
622
645
|
```
|
|
@@ -634,3 +657,22 @@ Note: if you override the rules for `inline_item`, `item_link` or `block` nodes,
|
|
|
634
657
|
| metaTransformer | `({ node, meta }) => Object \| null` | :x: | Transform `link` and `itemLink` meta property into HTML props | [See function](https://github.com/datocms/structured-text/blob/main/packages/generic-html-renderer/src/index.ts#L61) |
|
|
635
658
|
| customRules | `Array<RenderRule>` | :x: | Customize how document is converted in JSX (use `renderRule()` to generate) | `null` |
|
|
636
659
|
| renderText | `(text: string, key: string) => ReactElement \| string \| null` | :x: | Convert a simple string text into React | `(text) => text` |
|
|
660
|
+
|
|
661
|
+
## Development
|
|
662
|
+
|
|
663
|
+
This repository contains a number of demos/examples. You can use them to locally test your changes to the package with `npm link`:
|
|
664
|
+
|
|
665
|
+
```
|
|
666
|
+
npm link
|
|
667
|
+
cd examples/images-and-seo/vanilla-react
|
|
668
|
+
npm link react-datocms
|
|
669
|
+
npm run start
|
|
670
|
+
```
|
|
671
|
+
|
|
672
|
+
Now on another terminal you can run:
|
|
673
|
+
|
|
674
|
+
```
|
|
675
|
+
npm run watch
|
|
676
|
+
```
|
|
677
|
+
|
|
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
|
|
@@ -67,23 +67,30 @@ var imageShowStrategy = function (_a) {
|
|
|
67
67
|
}
|
|
68
68
|
return true;
|
|
69
69
|
};
|
|
70
|
-
|
|
71
|
-
var
|
|
72
|
-
var _c =
|
|
73
|
-
var
|
|
70
|
+
exports.Image = react_1.forwardRef(function (_a, ref) {
|
|
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, _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
|
+
var handleLoad = function () {
|
|
75
|
+
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
74
76
|
setLoaded(true);
|
|
75
|
-
}
|
|
76
|
-
var
|
|
77
|
+
};
|
|
78
|
+
var _h = react_intersection_observer_1.useInView({
|
|
77
79
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
78
|
-
rootMargin: intersectionMargin ||
|
|
80
|
+
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
79
81
|
triggerOnce: true
|
|
80
|
-
}),
|
|
82
|
+
}), viewRef = _h[0], inView = _h[1];
|
|
83
|
+
var callbackRef = react_1.useCallback(function (_ref) {
|
|
84
|
+
viewRef(_ref);
|
|
85
|
+
if (ref)
|
|
86
|
+
ref.current = _ref;
|
|
87
|
+
}, [viewRef]);
|
|
81
88
|
var absolutePositioning = {
|
|
82
|
-
position:
|
|
89
|
+
position: 'absolute',
|
|
83
90
|
left: 0,
|
|
84
91
|
top: 0,
|
|
85
|
-
width:
|
|
86
|
-
height:
|
|
92
|
+
width: '100%',
|
|
93
|
+
height: '100%'
|
|
87
94
|
};
|
|
88
95
|
var addImage = imageAddStrategy({
|
|
89
96
|
lazyLoad: lazyLoad,
|
|
@@ -97,26 +104,35 @@ var Image = function (_a) {
|
|
|
97
104
|
});
|
|
98
105
|
var webpSource = data.webpSrcSet && (react_1["default"].createElement("source", { srcSet: data.webpSrcSet, sizes: data.sizes, type: "image/webp" }));
|
|
99
106
|
var regularSource = data.srcSet && (react_1["default"].createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
|
|
100
|
-
var transition =
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
107
|
+
var transition = fadeInDuration > 0 ? "opacity " + fadeInDuration + "ms" : undefined;
|
|
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;
|
|
104
111
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
105
112
|
var height = data.height || width / aspectRatio;
|
|
106
113
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
|
|
107
|
-
var sizer = (react_1["default"].createElement("img", { className: pictureClassName, style:
|
|
108
|
-
|
|
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) },
|
|
109
125
|
sizer,
|
|
110
126
|
placeholder,
|
|
111
127
|
addImage && (react_1["default"].createElement("picture", null,
|
|
112
128
|
webpSource,
|
|
113
129
|
regularSource,
|
|
114
|
-
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) })))),
|
|
115
132
|
react_1["default"].createElement("noscript", null,
|
|
116
133
|
react_1["default"].createElement("picture", null,
|
|
117
134
|
webpSource,
|
|
118
135
|
regularSource,
|
|
119
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: data.alt, title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
|
|
120
|
-
};
|
|
121
|
-
exports.Image = Image;
|
|
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" }))))));
|
|
137
|
+
});
|
|
122
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;
|
|
@@ -39,14 +39,31 @@ declare type ImagePropTypes = {
|
|
|
39
39
|
intersectionThreshold?: number;
|
|
40
40
|
/** 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 */
|
|
41
41
|
intersectionMargin?: string;
|
|
42
|
-
/**
|
|
42
|
+
/** Whether enable lazy loading or not */
|
|
43
43
|
lazyLoad?: boolean;
|
|
44
44
|
/** Additional CSS rules to add to the root node */
|
|
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'];
|
|
63
|
+
/** Triggered when the image finishes loading */
|
|
64
|
+
onLoad?(): void;
|
|
65
|
+
/** Whether the component should use a blurred image placeholder */
|
|
66
|
+
usePlaceholder?: boolean;
|
|
50
67
|
};
|
|
51
|
-
export declare const Image: React.
|
|
68
|
+
export declare const Image: React.ForwardRefExoticComponent<ImagePropTypes & React.RefAttributes<HTMLDivElement>>;
|
|
52
69
|
export {};
|
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, {
|
|
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
|
|
@@ -45,23 +45,30 @@ var imageShowStrategy = function (_a) {
|
|
|
45
45
|
}
|
|
46
46
|
return true;
|
|
47
47
|
};
|
|
48
|
-
export var Image = function (_a) {
|
|
49
|
-
var
|
|
50
|
-
var _c =
|
|
51
|
-
var
|
|
48
|
+
export var Image = forwardRef(function (_a, ref) {
|
|
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, _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
|
+
var handleLoad = function () {
|
|
53
|
+
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
52
54
|
setLoaded(true);
|
|
53
|
-
}
|
|
54
|
-
var
|
|
55
|
+
};
|
|
56
|
+
var _h = useInView({
|
|
55
57
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
56
|
-
rootMargin: intersectionMargin ||
|
|
58
|
+
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
57
59
|
triggerOnce: true
|
|
58
|
-
}),
|
|
60
|
+
}), viewRef = _h[0], inView = _h[1];
|
|
61
|
+
var callbackRef = useCallback(function (_ref) {
|
|
62
|
+
viewRef(_ref);
|
|
63
|
+
if (ref)
|
|
64
|
+
ref.current = _ref;
|
|
65
|
+
}, [viewRef]);
|
|
59
66
|
var absolutePositioning = {
|
|
60
|
-
position:
|
|
67
|
+
position: 'absolute',
|
|
61
68
|
left: 0,
|
|
62
69
|
top: 0,
|
|
63
|
-
width:
|
|
64
|
-
height:
|
|
70
|
+
width: '100%',
|
|
71
|
+
height: '100%'
|
|
65
72
|
};
|
|
66
73
|
var addImage = imageAddStrategy({
|
|
67
74
|
lazyLoad: lazyLoad,
|
|
@@ -75,25 +82,35 @@ export var Image = function (_a) {
|
|
|
75
82
|
});
|
|
76
83
|
var webpSource = data.webpSrcSet && (React.createElement("source", { srcSet: data.webpSrcSet, sizes: data.sizes, type: "image/webp" }));
|
|
77
84
|
var regularSource = data.srcSet && (React.createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
|
|
78
|
-
var transition =
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
85
|
+
var transition = fadeInDuration > 0 ? "opacity " + fadeInDuration + "ms" : undefined;
|
|
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;
|
|
82
89
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
83
90
|
var height = data.height || width / aspectRatio;
|
|
84
91
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
|
|
85
|
-
var sizer = (React.createElement("img", { className: pictureClassName, style:
|
|
86
|
-
|
|
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) },
|
|
87
103
|
sizer,
|
|
88
104
|
placeholder,
|
|
89
105
|
addImage && (React.createElement("picture", null,
|
|
90
106
|
webpSource,
|
|
91
107
|
regularSource,
|
|
92
|
-
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) })))),
|
|
93
110
|
React.createElement("noscript", null,
|
|
94
111
|
React.createElement("picture", null,
|
|
95
112
|
webpSource,
|
|
96
113
|
regularSource,
|
|
97
|
-
data.src && (React.createElement("img", { src: data.src, alt: data.alt, title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
|
|
98
|
-
};
|
|
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" }))))));
|
|
115
|
+
});
|
|
99
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,
|
|
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;
|
|
@@ -39,14 +39,31 @@ declare type ImagePropTypes = {
|
|
|
39
39
|
intersectionThreshold?: number;
|
|
40
40
|
/** 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 */
|
|
41
41
|
intersectionMargin?: string;
|
|
42
|
-
/**
|
|
42
|
+
/** Whether enable lazy loading or not */
|
|
43
43
|
lazyLoad?: boolean;
|
|
44
44
|
/** Additional CSS rules to add to the root node */
|
|
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'];
|
|
63
|
+
/** Triggered when the image finishes loading */
|
|
64
|
+
onLoad?(): void;
|
|
65
|
+
/** Whether the component should use a blurred image placeholder */
|
|
66
|
+
usePlaceholder?: boolean;
|
|
50
67
|
};
|
|
51
|
-
export declare const Image: React.
|
|
68
|
+
export declare const Image: React.ForwardRefExoticComponent<ImagePropTypes & React.RefAttributes<HTMLDivElement>>;
|
|
52
69
|
export {};
|