react-datocms 1.6.5 → 1.6.9
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 +33 -11
- package/dist/cjs/Image/index.js +19 -15
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/esm/Image/index.d.ts +7 -3
- package/dist/esm/Image/index.js +20 -15
- package/dist/esm/Image/index.js.map +1 -1
- package/dist/types/Image/index.d.ts +7 -3
- package/package.json +2 -2
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
|
|
|
@@ -247,8 +247,10 @@ export default withQuery(query)(Page);
|
|
|
247
247
|
| fadeInDuration | integer | :x: | Duration (in ms) of the fade-in transition effect upoad image loading | 500 |
|
|
248
248
|
| 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 |
|
|
249
249
|
| 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" |
|
|
250
|
-
| lazyLoad | Boolean | :x: |
|
|
251
|
-
| explicitWidth | Boolean | :x: |
|
|
250
|
+
| lazyLoad | Boolean | :x: | Whether enable lazy loading or not | true |
|
|
251
|
+
| explicitWidth | Boolean | :x: | Whether the image wrapper should explicitely declare the width of the image or keep it fluid | false |
|
|
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 |
|
|
252
254
|
|
|
253
255
|
### The `ResponsiveImage` object
|
|
254
256
|
|
|
@@ -570,7 +572,6 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
570
572
|
<StructuredText
|
|
571
573
|
data={data.blogPost.content}
|
|
572
574
|
customRules={[
|
|
573
|
-
|
|
574
575
|
// Add HTML anchors to heading levels for in-page navigation
|
|
575
576
|
renderRule(isHeading, ({ node, children, key }) => {
|
|
576
577
|
const HeadingTag = `h${node.level}`;
|
|
@@ -586,7 +587,7 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
586
587
|
</HeadingTag>
|
|
587
588
|
);
|
|
588
589
|
}),
|
|
589
|
-
|
|
590
|
+
|
|
590
591
|
// Use a custom syntax highlighter component for code blocks
|
|
591
592
|
renderRule(isCode, ({ node, key }) => {
|
|
592
593
|
return (
|
|
@@ -598,14 +599,18 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
598
599
|
/>
|
|
599
600
|
);
|
|
600
601
|
}),
|
|
601
|
-
|
|
602
|
+
|
|
602
603
|
// Apply different formatting to top-level paragraphs
|
|
603
604
|
renderRule(
|
|
604
605
|
isParagraph,
|
|
605
606
|
({ adapter: { renderNode }, node, children, key, ancestors }) => {
|
|
606
607
|
if (isRoot(ancestors[0])) {
|
|
607
608
|
// If this paragraph node is a top-level one, give it a special class
|
|
608
|
-
return renderNode(
|
|
609
|
+
return renderNode(
|
|
610
|
+
'p',
|
|
611
|
+
{ key, className: 'top-level-paragraph-container-example' },
|
|
612
|
+
children,
|
|
613
|
+
);
|
|
609
614
|
} else {
|
|
610
615
|
// Proceed with default paragraph rendering...
|
|
611
616
|
// return renderNode('p', { key }, children);
|
|
@@ -613,10 +618,8 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
|
|
|
613
618
|
// Or even completely remove the paragraph and directly render the inner children:
|
|
614
619
|
return children;
|
|
615
620
|
}
|
|
616
|
-
}
|
|
617
|
-
)
|
|
618
|
-
|
|
619
|
-
|
|
621
|
+
},
|
|
622
|
+
),
|
|
620
623
|
]}
|
|
621
624
|
/>;
|
|
622
625
|
```
|
|
@@ -634,3 +637,22 @@ Note: if you override the rules for `inline_item`, `item_link` or `block` nodes,
|
|
|
634
637
|
| 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
638
|
| customRules | `Array<RenderRule>` | :x: | Customize how document is converted in JSX (use `renderRule()` to generate) | `null` |
|
|
636
639
|
| renderText | `(text: string, key: string) => ReactElement \| string \| null` | :x: | Convert a simple string text into React | `(text) => text` |
|
|
640
|
+
|
|
641
|
+
## Development
|
|
642
|
+
|
|
643
|
+
This repository contains a number of demos/examples. You can use them to locally test your changes to the package with `npm link`:
|
|
644
|
+
|
|
645
|
+
```
|
|
646
|
+
npm link
|
|
647
|
+
cd examples/images-and-seo/vanilla-react
|
|
648
|
+
npm link react-datocms
|
|
649
|
+
npm run start
|
|
650
|
+
```
|
|
651
|
+
|
|
652
|
+
Now on another terminal you can run:
|
|
653
|
+
|
|
654
|
+
```
|
|
655
|
+
npm run watch
|
|
656
|
+
```
|
|
657
|
+
|
|
658
|
+
This will re-compile the package everytime you make a change, and the example project will pick those changes instantly.
|
package/dist/cjs/Image/index.js
CHANGED
|
@@ -67,17 +67,24 @@ 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, explicitWidth = _a.explicitWidth, data = _a.data, onLoad = _a.onLoad, _e = _a.usePlaceholder, usePlaceholder = _e === void 0 ? true : _e;
|
|
73
|
+
var _f = react_1.useState(false), loaded = _f[0], setLoaded = _f[1];
|
|
74
|
+
var handleLoad = function () {
|
|
75
|
+
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
74
76
|
setLoaded(true);
|
|
75
|
-
}
|
|
76
|
-
var
|
|
77
|
+
};
|
|
78
|
+
var _g = react_intersection_observer_1.useInView({
|
|
77
79
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
78
80
|
rootMargin: intersectionMargin || "0px 0px 0px 0px",
|
|
79
81
|
triggerOnce: true
|
|
80
|
-
}),
|
|
82
|
+
}), viewRef = _g[0], inView = _g[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
89
|
position: "absolute",
|
|
83
90
|
left: 0,
|
|
@@ -97,15 +104,13 @@ 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
|
-
: undefined;
|
|
103
|
-
var placeholder = (react_1["default"].createElement("div", { style: __assign({ backgroundImage: data.base64 ? "url(" + data.base64 + ")" : undefined, backgroundColor: data.bgColor, backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: transition }, absolutePositioning) }));
|
|
107
|
+
var transition = fadeInDuration > 0 ? "opacity " + fadeInDuration + "ms" : undefined;
|
|
108
|
+
var placeholder = usePlaceholder ? (react_1["default"].createElement("div", { style: __assign({ backgroundImage: data.base64 ? "url(" + data.base64 + ")" : undefined, backgroundColor: data.bgColor, backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: transition }, absolutePositioning) })) : null;
|
|
104
109
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
105
110
|
var height = data.height || width / aspectRatio;
|
|
106
111
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
|
|
107
112
|
var sizer = (react_1["default"].createElement("img", { className: pictureClassName, style: __assign({ display: "block", width: explicitWidth ? width + "px" : "100%" }, pictureStyle), src: "data:image/svg+xml;base64," + universalBtoa(svg), role: "presentation" }));
|
|
108
|
-
return (react_1["default"].createElement("div", { ref:
|
|
113
|
+
return (react_1["default"].createElement("div", { ref: callbackRef, className: className, style: __assign({ display: explicitWidth ? "inline-block" : "block", overflow: "hidden", position: "relative" }, style) },
|
|
109
114
|
sizer,
|
|
110
115
|
placeholder,
|
|
111
116
|
addImage && (react_1["default"].createElement("picture", null,
|
|
@@ -116,7 +121,6 @@ var Image = function (_a) {
|
|
|
116
121
|
react_1["default"].createElement("picture", null,
|
|
117
122
|
webpSource,
|
|
118
123
|
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;
|
|
124
|
+
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
|
+
});
|
|
122
126
|
//# 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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"}
|
|
@@ -39,14 +39,18 @@ 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
|
-
/**
|
|
48
|
+
/** Whether the image wrapper should explicitely declare the width of the image or keep it fluid */
|
|
49
49
|
explicitWidth?: boolean;
|
|
50
|
+
/** Triggered when the image finishes loading */
|
|
51
|
+
onLoad?(): void;
|
|
52
|
+
/** Whether the component should use a blurred image placeholder */
|
|
53
|
+
usePlaceholder?: boolean;
|
|
50
54
|
};
|
|
51
|
-
export declare const Image: React.
|
|
55
|
+
export declare const Image: React.ForwardRefExoticComponent<ImagePropTypes & React.RefAttributes<HTMLDivElement>>;
|
|
52
56
|
export {};
|
package/dist/esm/Image/index.js
CHANGED
|
@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import React, {
|
|
12
|
+
import React, { useState, forwardRef, useCallback } from "react";
|
|
13
13
|
import "intersection-observer";
|
|
14
14
|
import { useInView } from "react-intersection-observer";
|
|
15
15
|
var isSsr = typeof window === "undefined";
|
|
@@ -45,17 +45,24 @@ 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, explicitWidth = _a.explicitWidth, data = _a.data, onLoad = _a.onLoad, _e = _a.usePlaceholder, usePlaceholder = _e === void 0 ? true : _e;
|
|
51
|
+
var _f = useState(false), loaded = _f[0], setLoaded = _f[1];
|
|
52
|
+
var handleLoad = function () {
|
|
53
|
+
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
52
54
|
setLoaded(true);
|
|
53
|
-
}
|
|
54
|
-
var
|
|
55
|
+
};
|
|
56
|
+
var _g = useInView({
|
|
55
57
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
56
58
|
rootMargin: intersectionMargin || "0px 0px 0px 0px",
|
|
57
59
|
triggerOnce: true
|
|
58
|
-
}),
|
|
60
|
+
}), viewRef = _g[0], inView = _g[1];
|
|
61
|
+
var callbackRef = useCallback(function (_ref) {
|
|
62
|
+
viewRef(_ref);
|
|
63
|
+
if (ref)
|
|
64
|
+
ref.current = _ref;
|
|
65
|
+
}, [viewRef]);
|
|
59
66
|
var absolutePositioning = {
|
|
60
67
|
position: "absolute",
|
|
61
68
|
left: 0,
|
|
@@ -75,15 +82,13 @@ 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
|
-
: undefined;
|
|
81
|
-
var placeholder = (React.createElement("div", { style: __assign({ backgroundImage: data.base64 ? "url(" + data.base64 + ")" : undefined, backgroundColor: data.bgColor, backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: transition }, absolutePositioning) }));
|
|
85
|
+
var transition = fadeInDuration > 0 ? "opacity " + fadeInDuration + "ms" : undefined;
|
|
86
|
+
var placeholder = usePlaceholder ? (React.createElement("div", { style: __assign({ backgroundImage: data.base64 ? "url(" + data.base64 + ")" : undefined, backgroundColor: data.bgColor, backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: transition }, absolutePositioning) })) : null;
|
|
82
87
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
83
88
|
var height = data.height || width / aspectRatio;
|
|
84
89
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
|
|
85
90
|
var sizer = (React.createElement("img", { className: pictureClassName, style: __assign({ display: "block", width: explicitWidth ? width + "px" : "100%" }, pictureStyle), src: "data:image/svg+xml;base64," + universalBtoa(svg), role: "presentation" }));
|
|
86
|
-
return (React.createElement("div", { ref:
|
|
91
|
+
return (React.createElement("div", { ref: callbackRef, className: className, style: __assign({ display: explicitWidth ? "inline-block" : "block", overflow: "hidden", position: "relative" }, style) },
|
|
87
92
|
sizer,
|
|
88
93
|
placeholder,
|
|
89
94
|
addImage && (React.createElement("picture", null,
|
|
@@ -94,6 +99,6 @@ export var Image = function (_a) {
|
|
|
94
99
|
React.createElement("picture", null,
|
|
95
100
|
webpSource,
|
|
96
101
|
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
|
-
};
|
|
102
|
+
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
|
+
});
|
|
99
104
|
//# 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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"}
|
|
@@ -39,14 +39,18 @@ 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
|
-
/**
|
|
48
|
+
/** Whether the image wrapper should explicitely declare the width of the image or keep it fluid */
|
|
49
49
|
explicitWidth?: boolean;
|
|
50
|
+
/** Triggered when the image finishes loading */
|
|
51
|
+
onLoad?(): void;
|
|
52
|
+
/** Whether the component should use a blurred image placeholder */
|
|
53
|
+
usePlaceholder?: boolean;
|
|
50
54
|
};
|
|
51
|
-
export declare const Image: React.
|
|
55
|
+
export declare const Image: React.ForwardRefExoticComponent<ImagePropTypes & React.RefAttributes<HTMLDivElement>>;
|
|
52
56
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-datocms",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.9",
|
|
4
4
|
"types": "dist/types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
]
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"datocms-listen": "^0.1.
|
|
77
|
+
"datocms-listen": "^0.1.6",
|
|
78
78
|
"datocms-structured-text-generic-html-renderer": "^1.1.0",
|
|
79
79
|
"datocms-structured-text-utils": "^1.1.0",
|
|
80
80
|
"intersection-observer": "^0.12.0",
|