react-datocms 3.0.0 → 3.0.4
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 +3 -2
- package/dist/cjs/Image/index.js +20 -13
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/esm/Image/index.js +20 -13
- package/dist/esm/Image/index.js.map +1 -1
- package/package.json +7 -6
package/README.md
CHANGED
|
@@ -15,8 +15,8 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
|
|
|
15
15
|
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
16
16
|
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
17
17
|
|
|
18
|
-
- [Demos](#demos)
|
|
19
|
-
- [Installation](#installation)
|
|
18
|
+
- [Demos](#demos)
|
|
19
|
+
- [Installation](#installation)
|
|
20
20
|
- [Live real-time updates](#live-real-time-updates)
|
|
21
21
|
- [Reference](#reference)
|
|
22
22
|
- [Initialization options](#initialization-options)
|
|
@@ -25,6 +25,7 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
|
|
|
25
25
|
- [Example](#example)
|
|
26
26
|
- [Progressive/responsive image](#progressiveresponsive-image)
|
|
27
27
|
- [Out-of-the-box features](#out-of-the-box-features)
|
|
28
|
+
- [Intersection Observer](#intersection-observer)
|
|
28
29
|
- [Usage](#usage)
|
|
29
30
|
- [Example](#example-1)
|
|
30
31
|
- [Props](#props)
|
package/dist/cjs/Image/index.js
CHANGED
|
@@ -33,10 +33,8 @@ exports.__esModule = true;
|
|
|
33
33
|
exports.Image = void 0;
|
|
34
34
|
var react_1 = __importStar(require("react"));
|
|
35
35
|
var react_intersection_observer_1 = require("react-intersection-observer");
|
|
36
|
+
var universal_base64_1 = require("universal-base64");
|
|
36
37
|
var isSsr = typeof window === 'undefined';
|
|
37
|
-
var universalBtoa = isSsr
|
|
38
|
-
? function (str) { return Buffer.from(str.toString(), 'binary').toString('base64'); }
|
|
39
|
-
: window.btoa;
|
|
40
38
|
var isIntersectionObserverAvailable = isSsr
|
|
41
39
|
? false
|
|
42
40
|
: !!window.IntersectionObserver;
|
|
@@ -67,19 +65,19 @@ var imageShowStrategy = function (_a) {
|
|
|
67
65
|
return true;
|
|
68
66
|
};
|
|
69
67
|
exports.Image = react_1.forwardRef(function (_a, ref) {
|
|
70
|
-
var _b;
|
|
71
|
-
var className = _a.className,
|
|
72
|
-
var
|
|
68
|
+
var _b, _c;
|
|
69
|
+
var className = _a.className, _d = _a.fadeInDuration, fadeInDuration = _d === void 0 ? 500 : _d, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _e = _a.lazyLoad, lazyLoad = _e === void 0 ? true : _e, style = _a.style, pictureStyle = _a.pictureStyle, _f = _a.layout, layout = _f === void 0 ? 'intrinsic' : _f, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _g = _a.usePlaceholder, usePlaceholder = _g === void 0 ? true : _g;
|
|
70
|
+
var _h = react_1.useState(false), loaded = _h[0], setLoaded = _h[1];
|
|
73
71
|
var handleLoad = function () {
|
|
74
72
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
75
73
|
setLoaded(true);
|
|
76
74
|
};
|
|
77
|
-
var
|
|
75
|
+
var _j = react_intersection_observer_1.useInView({
|
|
78
76
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
79
77
|
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
80
78
|
triggerOnce: true,
|
|
81
79
|
fallbackInView: true
|
|
82
|
-
}), viewRef =
|
|
80
|
+
}), viewRef = _j[0], inView = _j[1];
|
|
83
81
|
var callbackRef = react_1.useCallback(function (_ref) {
|
|
84
82
|
viewRef(_ref);
|
|
85
83
|
if (ref)
|
|
@@ -105,16 +103,25 @@ exports.Image = react_1.forwardRef(function (_a, ref) {
|
|
|
105
103
|
var webpSource = data.webpSrcSet && (react_1["default"].createElement("source", { srcSet: data.webpSrcSet, sizes: data.sizes, type: "image/webp" }));
|
|
106
104
|
var regularSource = data.srcSet && (react_1["default"].createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
|
|
107
105
|
var transition = fadeInDuration > 0 ? "opacity " + fadeInDuration + "ms" : undefined;
|
|
108
|
-
var placeholder = usePlaceholder ? (react_1["default"].createElement("img", { role: "presentation", src: data.base64, style:
|
|
106
|
+
var placeholder = usePlaceholder ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", src: data.base64, style: {
|
|
107
|
+
backgroundColor: data.bgColor,
|
|
108
|
+
opacity: showImage ? 0 : 1,
|
|
109
|
+
transition: transition,
|
|
109
110
|
objectFit: objectFit,
|
|
110
|
-
objectPosition: objectPosition
|
|
111
|
+
objectPosition: objectPosition,
|
|
112
|
+
willChange: 'opacity',
|
|
113
|
+
position: 'absolute',
|
|
114
|
+
left: 0,
|
|
115
|
+
top: 0,
|
|
116
|
+
width: '100%'
|
|
117
|
+
} })) : null;
|
|
111
118
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
112
119
|
var height = data.height || width / aspectRatio;
|
|
113
120
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
|
|
114
121
|
var sizer = layout !== 'fill' ? (react_1["default"].createElement("img", { className: pictureClassName, style: {
|
|
115
122
|
display: 'block',
|
|
116
123
|
width: '100%'
|
|
117
|
-
}, src: "data:image/svg+xml;base64," +
|
|
124
|
+
}, src: "data:image/svg+xml;base64," + universal_base64_1.encode(svg), role: "presentation" })) : null;
|
|
118
125
|
return (react_1["default"].createElement("div", { ref: callbackRef, className: className, style: __assign(__assign({ overflow: 'hidden' }, (layout === 'fill'
|
|
119
126
|
? absolutePositioning
|
|
120
127
|
: layout === 'intrinsic'
|
|
@@ -127,12 +134,12 @@ exports.Image = react_1.forwardRef(function (_a, ref) {
|
|
|
127
134
|
addImage && (react_1["default"].createElement("picture", null,
|
|
128
135
|
webpSource,
|
|
129
136
|
regularSource,
|
|
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,
|
|
137
|
+
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit,
|
|
131
138
|
objectPosition: objectPosition }), pictureStyle) })))),
|
|
132
139
|
react_1["default"].createElement("noscript", null,
|
|
133
140
|
react_1["default"].createElement("picture", null,
|
|
134
141
|
webpSource,
|
|
135
142
|
regularSource,
|
|
136
|
-
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (
|
|
143
|
+
data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_c = data.alt) !== null && _c !== void 0 ? _c : '', title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
|
|
137
144
|
});
|
|
138
145
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgF;AAChF,2EAAwD;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgF;AAChF,2EAAwD;AACxD,qDAA0C;AAE1C,IAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAE5C,IAAM,+BAA+B,GAAG,KAAK;IAC3C,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,CAAC,CAAE,MAAc,CAAC,oBAAoB,CAAC;AA2E3C,IAAM,gBAAgB,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA;IAClD,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,IAAI,MAAM,CAAC;KACzB;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,EAA2B;QAAzB,QAAQ,cAAA,EAAE,MAAM,YAAA;IAC3C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,kBAAU,CAC7B,UACE,EAgBC,EACD,GAAG;;QAhBD,SAAS,eAAA,EACT,sBAAoB,EAApB,cAAc,mBAAG,GAAG,KAAA,EACpB,oBAAoB,0BAAA,EACpB,qBAAqB,2BAAA,EACrB,kBAAkB,wBAAA,EAClB,gBAAgB,sBAAA,EAChB,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,cAAoB,EAApB,MAAM,mBAAG,WAAW,KAAA,EACpB,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,sBAAqB,EAArB,cAAc,mBAAG,IAAI,KAAA;IAIjB,IAAA,KAAsB,gBAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAE5C,IAAM,UAAU,GAAG;QACjB,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACX,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEI,IAAA,KAAoB,uCAAS,CAAC;QAClC,SAAS,EAAE,qBAAqB,IAAI,oBAAoB,IAAI,CAAC;QAC7D,UAAU,EAAE,kBAAkB,IAAI,iBAAiB;QACnD,WAAW,EAAE,IAAI;QACjB,cAAc,EAAE,IAAI;KACrB,CAAC,EALK,OAAO,QAAA,EAAE,MAAM,QAKpB,CAAC;IAEH,IAAM,WAAW,GAAG,mBAAW,CAC7B,UAAC,IAAoB;QACnB,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,IAAI,GAAG;YAAG,GAA8C,CAAC,OAAO,GAAG,IAAI,CAAC;IAC1E,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,IAAM,mBAAmB,GAAwB;QAC/C,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf,CAAC;IAEF,IAAM,QAAQ,GAAG,gBAAgB,CAAC;QAChC,QAAQ,UAAA;QACR,MAAM,QAAA;QACN,MAAM,QAAA;KACP,CAAC,CAAC;IACH,IAAM,SAAS,GAAG,iBAAiB,CAAC;QAClC,QAAQ,UAAA;QACR,MAAM,QAAA;QACN,MAAM,QAAA;KACP,CAAC,CAAC;IAEH,IAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,CACpC,6CAAQ,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,GAAG,CACzE,CAAC;IAEF,IAAM,aAAa,GAAG,IAAI,CAAC,MAAM,IAAI,CACnC,6CAAQ,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CACnD,CAAC;IAEF,IAAM,UAAU,GACd,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,aAAW,cAAc,OAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAEjE,IAAM,WAAW,GAAG,cAAc,CAAC,CAAC,CAAC,CACnC,0CACE,IAAI,EAAC,cAAc,iBACP,MAAM,EAClB,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,KAAK,EAAE;YACL,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1B,UAAU,YAAA;YACV,SAAS,WAAA;YACT,cAAc,gBAAA;YACd,UAAU,EAAE,SAAS;YACrB,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,MAAM;SACd,GACD,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAED,IAAA,KAAK,GAAkB,IAAI,MAAtB,EAAE,WAAW,GAAK,IAAI,YAAT,CAAU;IACpC,IAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,WAAW,CAAC;IAElD,IAAM,GAAG,GAAG,uDAAkD,KAAK,oBAAa,MAAM,cAAU,CAAC;IAEjG,IAAM,KAAK,GACT,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAClB,0CACE,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,MAAM;SACd,EACD,GAAG,EAAE,+BAA6B,yBAAM,CAAC,GAAG,CAAG,EAC/C,IAAI,EAAC,cAAc,GACnB,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAEX,OAAO,CACL,0CACE,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,sBACH,QAAQ,EAAE,QAAQ,IACf,CAAC,MAAM,KAAK,MAAM;YACnB,CAAC,CAAC,mBAAmB;YACrB,CAAC,CAAC,MAAM,KAAK,WAAW;gBACxB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE;gBAC1D,CAAC,CAAC,MAAM,KAAK,OAAO;oBACpB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,OAAA,EAAE;oBACjC,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GACzC,KAAK;QAGT,KAAK;QACL,WAAW;QACX,QAAQ,IAAI,CACX;YACG,UAAU;YACV,aAAa;YACb,IAAI,CAAC,GAAG,IAAI,CACX,0CACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,EAAE,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,+BACH,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC1B,UAAU,YAAA,IACP,mBAAmB,KACtB,SAAS,WAAA;oBACT,cAAc,gBAAA,KACX,YAAY,IAEjB,CACH,CACO,CACX;QACD;YACE;gBACG,UAAU;gBACV,aAAa;gBACb,IAAI,CAAC,GAAG,IAAI,CACX,0CACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,EAAE,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,wBAAO,mBAAmB,GAAK,YAAY,GAChD,OAAO,EAAC,MAAM,GACd,CACH,CACO,CACD,CACP,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
|
package/dist/esm/Image/index.js
CHANGED
|
@@ -11,10 +11,8 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import React, { useState, forwardRef, useCallback } from 'react';
|
|
13
13
|
import { useInView } from 'react-intersection-observer';
|
|
14
|
+
import { encode } from 'universal-base64';
|
|
14
15
|
var isSsr = typeof window === 'undefined';
|
|
15
|
-
var universalBtoa = isSsr
|
|
16
|
-
? function (str) { return Buffer.from(str.toString(), 'binary').toString('base64'); }
|
|
17
|
-
: window.btoa;
|
|
18
16
|
var isIntersectionObserverAvailable = isSsr
|
|
19
17
|
? false
|
|
20
18
|
: !!window.IntersectionObserver;
|
|
@@ -45,19 +43,19 @@ var imageShowStrategy = function (_a) {
|
|
|
45
43
|
return true;
|
|
46
44
|
};
|
|
47
45
|
export var Image = forwardRef(function (_a, ref) {
|
|
48
|
-
var _b;
|
|
49
|
-
var className = _a.className,
|
|
50
|
-
var
|
|
46
|
+
var _b, _c;
|
|
47
|
+
var className = _a.className, _d = _a.fadeInDuration, fadeInDuration = _d === void 0 ? 500 : _d, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _e = _a.lazyLoad, lazyLoad = _e === void 0 ? true : _e, style = _a.style, pictureStyle = _a.pictureStyle, _f = _a.layout, layout = _f === void 0 ? 'intrinsic' : _f, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _g = _a.usePlaceholder, usePlaceholder = _g === void 0 ? true : _g;
|
|
48
|
+
var _h = useState(false), loaded = _h[0], setLoaded = _h[1];
|
|
51
49
|
var handleLoad = function () {
|
|
52
50
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
53
51
|
setLoaded(true);
|
|
54
52
|
};
|
|
55
|
-
var
|
|
53
|
+
var _j = useInView({
|
|
56
54
|
threshold: intersectionThreshold || intersectionTreshold || 0,
|
|
57
55
|
rootMargin: intersectionMargin || '0px 0px 0px 0px',
|
|
58
56
|
triggerOnce: true,
|
|
59
57
|
fallbackInView: true
|
|
60
|
-
}), viewRef =
|
|
58
|
+
}), viewRef = _j[0], inView = _j[1];
|
|
61
59
|
var callbackRef = useCallback(function (_ref) {
|
|
62
60
|
viewRef(_ref);
|
|
63
61
|
if (ref)
|
|
@@ -83,16 +81,25 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
83
81
|
var webpSource = data.webpSrcSet && (React.createElement("source", { srcSet: data.webpSrcSet, sizes: data.sizes, type: "image/webp" }));
|
|
84
82
|
var regularSource = data.srcSet && (React.createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
|
|
85
83
|
var transition = fadeInDuration > 0 ? "opacity " + fadeInDuration + "ms" : undefined;
|
|
86
|
-
var placeholder = usePlaceholder ? (React.createElement("img", { role: "presentation", src: data.base64, style:
|
|
84
|
+
var placeholder = usePlaceholder ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", src: data.base64, style: {
|
|
85
|
+
backgroundColor: data.bgColor,
|
|
86
|
+
opacity: showImage ? 0 : 1,
|
|
87
|
+
transition: transition,
|
|
87
88
|
objectFit: objectFit,
|
|
88
|
-
objectPosition: objectPosition
|
|
89
|
+
objectPosition: objectPosition,
|
|
90
|
+
willChange: 'opacity',
|
|
91
|
+
position: 'absolute',
|
|
92
|
+
left: 0,
|
|
93
|
+
top: 0,
|
|
94
|
+
width: '100%'
|
|
95
|
+
} })) : null;
|
|
89
96
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
90
97
|
var height = data.height || width / aspectRatio;
|
|
91
98
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
|
|
92
99
|
var sizer = layout !== 'fill' ? (React.createElement("img", { className: pictureClassName, style: {
|
|
93
100
|
display: 'block',
|
|
94
101
|
width: '100%'
|
|
95
|
-
}, src: "data:image/svg+xml;base64," +
|
|
102
|
+
}, src: "data:image/svg+xml;base64," + encode(svg), role: "presentation" })) : null;
|
|
96
103
|
return (React.createElement("div", { ref: callbackRef, className: className, style: __assign(__assign({ overflow: 'hidden' }, (layout === 'fill'
|
|
97
104
|
? absolutePositioning
|
|
98
105
|
: layout === 'intrinsic'
|
|
@@ -105,12 +112,12 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
105
112
|
addImage && (React.createElement("picture", null,
|
|
106
113
|
webpSource,
|
|
107
114
|
regularSource,
|
|
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,
|
|
115
|
+
data.src && (React.createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit,
|
|
109
116
|
objectPosition: objectPosition }), pictureStyle) })))),
|
|
110
117
|
React.createElement("noscript", null,
|
|
111
118
|
React.createElement("picture", null,
|
|
112
119
|
webpSource,
|
|
113
120
|
regularSource,
|
|
114
|
-
data.src && (React.createElement("img", { src: data.src, alt: (
|
|
121
|
+
data.src && (React.createElement("img", { src: data.src, alt: (_c = data.alt) !== null && _c !== void 0 ? _c : '', title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
|
|
115
122
|
});
|
|
116
123
|
//# 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,EAAiB,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-datocms",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.4",
|
|
4
4
|
"types": "dist/types/index.d.ts",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"doctoc": "^2.0.0",
|
|
28
28
|
"enzyme": "^3.11.0",
|
|
29
29
|
"enzyme-to-json": "^3.6.2",
|
|
30
|
+
"intersection-observer": "^0.12.0",
|
|
30
31
|
"jest": "^26.6.3",
|
|
31
32
|
"np": "^7.5.0",
|
|
32
33
|
"raf": "^3.4.1",
|
|
@@ -34,8 +35,7 @@
|
|
|
34
35
|
"react-dom": "^17.0.2",
|
|
35
36
|
"rimraf": "^3.0.2",
|
|
36
37
|
"ts-jest": "^26.5.5",
|
|
37
|
-
"typescript": "^4.2.4"
|
|
38
|
-
"intersection-observer": "^0.12.0"
|
|
38
|
+
"typescript": "^4.2.4"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"build": "rimraf dist && tsc && tsc --project ./tsconfig.esnext.json",
|
|
@@ -75,10 +75,11 @@
|
|
|
75
75
|
]
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
-
"datocms-listen": "^0.1.
|
|
79
|
-
"datocms-structured-text-generic-html-renderer": "^
|
|
80
|
-
"datocms-structured-text-utils": "^
|
|
78
|
+
"datocms-listen": "^0.1.7",
|
|
79
|
+
"datocms-structured-text-generic-html-renderer": "^2.0.0",
|
|
80
|
+
"datocms-structured-text-utils": "^2.0.0",
|
|
81
81
|
"react-intersection-observer": "^8.33.1",
|
|
82
|
+
"universal-base64": "^2.1.0",
|
|
82
83
|
"use-deep-compare-effect": "^1.6.1"
|
|
83
84
|
}
|
|
84
85
|
}
|