react-in-viewport
Version:
Track React component in viewport using Intersection Observer API
110 lines (109 loc) • 4.43 kB
JavaScript
;
exports.__esModule = true;
exports["default"] = exports.FunctionalComponentLazyloadImage = exports.FunctionalComponentLazyloadIframe = exports.ClassComponentLazyloadImage = exports.ClassComponentLazyloadIframe = void 0;
var _themeComponent = require("../common/themeComponent");
var _Iframe = _interopRequireDefault(require("../common/Iframe"));
var _IframeFunctional = _interopRequireDefault(require("../common/IframeFunctional"));
var _Image = _interopRequireDefault(require("../common/Image"));
var _ImageFunctional = _interopRequireDefault(require("../common/ImageFunctional"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var _default = exports["default"] = {
title: 'Lazy Media',
component: _themeComponent.Card,
decorators: [function (Story) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_themeComponent.PageTitle, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_themeComponent.Spacer, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
padding: '20px',
maxWidth: '400px'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {})
})]
});
}]
};
var ClassComponentLazyloadImage = exports.ClassComponentLazyloadImage = function ClassComponentLazyloadImage() {
var imageArray = [{
src: 'https://s-media-cache-ak0.pinimg.com/originals/cf/31/83/cf31837a53dc1cdb13880ac38c66d70d.jpg',
ratio: '508/397'
}, {
src: 'http://cdn1-www.dogtime.com/assets/uploads/gallery/english-bulldog-puppies/english-bulldog-9.jpg',
ratio: '1'
}, {
src: 'https://i2-prod.mirror.co.uk/incoming/article4482806.ece/ALTERNATES/s615/PAY-Stolen-Lilac-Puppy.jpg',
ratio: '615/409'
}];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_themeComponent.Card, {
titleText: "Lazyload Image",
contentNode: imageArray.map(function (image) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
src: image.src,
ratio: image.ratio
}, image.src);
})
});
};
var ClassComponentLazyloadIframe = exports.ClassComponentLazyloadIframe = function ClassComponentLazyloadIframe() {
var iframeArray = [{
src: 'https://www.youtube.com/embed/hTcBnxxuAls',
ratio: '560/315'
}, {
src: 'https://www.youtube.com/embed/M8AlxrwhY30',
ratio: '560/315'
}, {
src: 'https://www.youtube.com/embed/q31tGyBJhRY',
ratio: '560/315'
}];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_themeComponent.Card, {
titleText: "Lazyload Iframe",
contentNode: iframeArray.map(function (iframe) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iframe["default"], {
src: iframe.src,
ratio: iframe.ratio
}, iframe.src);
})
});
};
var FunctionalComponentLazyloadImage = exports.FunctionalComponentLazyloadImage = function FunctionalComponentLazyloadImage() {
var imageArray = [{
src: 'https://s-media-cache-ak0.pinimg.com/originals/cf/31/83/cf31837a53dc1cdb13880ac38c66d70d.jpg',
ratio: '508/397'
}, {
src: 'http://cdn1-www.dogtime.com/assets/uploads/gallery/english-bulldog-puppies/english-bulldog-9.jpg',
ratio: '1'
}, {
src: 'https://i2-prod.mirror.co.uk/incoming/article4482806.ece/ALTERNATES/s615/PAY-Stolen-Lilac-Puppy.jpg',
ratio: '615/409'
}];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_themeComponent.Card, {
titleText: "Lazyload Image",
contentNode: imageArray.map(function (image) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageFunctional["default"], {
src: image.src,
ratio: image.ratio
}, image.src);
})
});
};
var FunctionalComponentLazyloadIframe = exports.FunctionalComponentLazyloadIframe = function FunctionalComponentLazyloadIframe() {
var iframeArray = [{
src: 'https://www.youtube.com/embed/hTcBnxxuAls',
ratio: '560/315'
}, {
src: 'https://www.youtube.com/embed/M8AlxrwhY30',
ratio: '560/315'
}, {
src: 'https://www.youtube.com/embed/q31tGyBJhRY',
ratio: '560/315'
}];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_themeComponent.Card, {
titleText: "Lazyload Iframe",
contentNode: iframeArray.map(function (iframe) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IframeFunctional["default"], {
src: iframe.src,
ratio: iframe.ratio
}, iframe.src);
})
});
};