react-datocms 1.6.8 → 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
CHANGED
|
@@ -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
|
|
package/dist/cjs/Image/index.js
CHANGED
|
@@ -67,18 +67,24 @@ var imageShowStrategy = function (_a) {
|
|
|
67
67
|
}
|
|
68
68
|
return true;
|
|
69
69
|
};
|
|
70
|
-
|
|
71
|
-
var _b
|
|
72
|
-
var className = _a.className,
|
|
73
|
-
var
|
|
74
|
-
var handleLoad =
|
|
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();
|
|
75
76
|
setLoaded(true);
|
|
76
|
-
}
|
|
77
|
-
var
|
|
77
|
+
};
|
|
78
|
+
var _g = react_intersection_observer_1.useInView({
|
|
78
79
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
79
80
|
rootMargin: intersectionMargin || "0px 0px 0px 0px",
|
|
80
81
|
triggerOnce: true
|
|
81
|
-
}),
|
|
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]);
|
|
82
88
|
var absolutePositioning = {
|
|
83
89
|
position: "absolute",
|
|
84
90
|
left: 0,
|
|
@@ -98,26 +104,23 @@ var Image = function (_a) {
|
|
|
98
104
|
});
|
|
99
105
|
var webpSource = data.webpSrcSet && (react_1["default"].createElement("source", { srcSet: data.webpSrcSet, sizes: data.sizes, type: "image/webp" }));
|
|
100
106
|
var regularSource = data.srcSet && (react_1["default"].createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
|
|
101
|
-
var transition =
|
|
102
|
-
|
|
103
|
-
: undefined;
|
|
104
|
-
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;
|
|
105
109
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
106
110
|
var height = data.height || width / aspectRatio;
|
|
107
111
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
|
|
108
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" }));
|
|
109
|
-
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) },
|
|
110
114
|
sizer,
|
|
111
115
|
placeholder,
|
|
112
116
|
addImage && (react_1["default"].createElement("picture", null,
|
|
113
117
|
webpSource,
|
|
114
118
|
regularSource,
|
|
115
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt:
|
|
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({}, absolutePositioning), pictureStyle), { opacity: showImage ? 1 : 0, transition: transition }) })))),
|
|
116
120
|
react_1["default"].createElement("noscript", null,
|
|
117
121
|
react_1["default"].createElement("picture", null,
|
|
118
122
|
webpSource,
|
|
119
123
|
regularSource,
|
|
120
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (
|
|
121
|
-
};
|
|
122
|
-
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
|
+
});
|
|
123
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,18 +45,24 @@ var imageShowStrategy = function (_a) {
|
|
|
45
45
|
}
|
|
46
46
|
return true;
|
|
47
47
|
};
|
|
48
|
-
export var Image = function (_a) {
|
|
49
|
-
var _b
|
|
50
|
-
var className = _a.className,
|
|
51
|
-
var
|
|
52
|
-
var handleLoad =
|
|
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();
|
|
53
54
|
setLoaded(true);
|
|
54
|
-
}
|
|
55
|
-
var
|
|
55
|
+
};
|
|
56
|
+
var _g = useInView({
|
|
56
57
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
57
58
|
rootMargin: intersectionMargin || "0px 0px 0px 0px",
|
|
58
59
|
triggerOnce: true
|
|
59
|
-
}),
|
|
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]);
|
|
60
66
|
var absolutePositioning = {
|
|
61
67
|
position: "absolute",
|
|
62
68
|
left: 0,
|
|
@@ -76,25 +82,23 @@ export var Image = function (_a) {
|
|
|
76
82
|
});
|
|
77
83
|
var webpSource = data.webpSrcSet && (React.createElement("source", { srcSet: data.webpSrcSet, sizes: data.sizes, type: "image/webp" }));
|
|
78
84
|
var regularSource = data.srcSet && (React.createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
|
|
79
|
-
var transition =
|
|
80
|
-
|
|
81
|
-
: undefined;
|
|
82
|
-
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;
|
|
83
87
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
84
88
|
var height = data.height || width / aspectRatio;
|
|
85
89
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
|
|
86
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" }));
|
|
87
|
-
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) },
|
|
88
92
|
sizer,
|
|
89
93
|
placeholder,
|
|
90
94
|
addImage && (React.createElement("picture", null,
|
|
91
95
|
webpSource,
|
|
92
96
|
regularSource,
|
|
93
|
-
data.src && (React.createElement("img", { src: data.src, alt:
|
|
97
|
+
data.src && (React.createElement("img", { src: data.src, alt: data.alt, title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), pictureStyle), { opacity: showImage ? 1 : 0, transition: transition }) })))),
|
|
94
98
|
React.createElement("noscript", null,
|
|
95
99
|
React.createElement("picture", null,
|
|
96
100
|
webpSource,
|
|
97
101
|
regularSource,
|
|
98
|
-
data.src && (React.createElement("img", { src: data.src, alt: (
|
|
99
|
-
};
|
|
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
|
+
});
|
|
100
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 {};
|