react-in-viewport
Version:
Track React component in viewport using Intersection Observer API
103 lines (102 loc) • 4.64 kB
JavaScript
;
exports.__esModule = true;
exports.Spacer = exports.PageTitle = exports.Card = exports.Block = void 0;
var _react = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
var PageTitle = exports.PageTitle = /*#__PURE__*/(0, _react.memo)(function (_ref) {
var _ref$title = _ref.title,
title = _ref$title === void 0 ? 'React In Viewport' : _ref$title,
_ref$description = _ref.description,
description = _ref$description === void 0 ? 'Wrapper component to detect if the component is in viewport using Intersection Observer API' : _ref$description;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "page__title",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h1", {
className: "page__title-main",
children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
className: "github mui-icon",
href: "https://github.com/roderickhsiao/react-in-viewport",
target: "_blank",
rel: "noopener noreferrer",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
style: {
visibility: 'hidden'
},
children: "Github"
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: "page__title-desc",
children: description
})]
});
});
PageTitle.displayName = 'PageTitle';
var Card = exports.Card = /*#__PURE__*/function (_React$PureComponent) {
_inheritsLoose(Card, _React$PureComponent);
function Card() {
return _React$PureComponent.apply(this, arguments) || this;
}
var _proto = Card.prototype;
_proto.render = function render() {
var _this$props = this.props,
titleText = _this$props.titleText,
contentNode = _this$props.contentNode;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "card",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "card__head",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
className: "card__title",
children: titleText
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "card__conent",
children: contentNode
})]
});
};
return Card;
}(_react["default"].PureComponent);
Card.displayName = 'Card';
var Block = exports.Block = function Block(props) {
var inViewport = props.inViewport,
enterCount = props.enterCount,
leaveCount = props.leaveCount,
forwardedRef = props.forwardedRef;
var color = inViewport ? '#217ac0' : '#ff9800';
var text = inViewport ? 'In viewport' : 'Not in viewport';
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Card, {
titleText: text,
contentNode: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
ref: forwardedRef,
title: "Enter viewport " + enterCount + " times, leave viewport " + leaveCount + " times",
style: {
width: '100%',
height: '300px',
background: color,
transitionDuration: '1s'
}
})
});
};
Block.displayName = 'Block';
var Spacer = exports.Spacer = function Spacer() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
height: '100vh',
padding: '20px'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
children: ["Scroll down to make component in viewport", ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
role: "img",
"aria-label": "down",
children: "\uD83D\uDC47"
}), ' ']
})
});
};
Spacer.displayName = Spacer;