react-in-viewport/dist/stories/common/Section.js

Track React component in viewport using Intersection Observer API

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = require("react");
var _index = require("../../index");
var _jsxRuntime = require("react/jsx-runtime");
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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 MySectionBlock = /*#__PURE__*/function (_PureComponent) {
  _inheritsLoose(MySectionBlock, _PureComponent);
  function MySectionBlock() {
    return _PureComponent.apply(this, arguments) || this;
  }
  var _proto = MySectionBlock.prototype;
  _proto.getStyle = function getStyle() {
    var _this$props = this.props,
      inViewport = _this$props.inViewport,
      enterCount = _this$props.enterCount;
    var basicStyle = {
      width: '400px',
      height: '300px',
      backgroundColor: '#217ac0',
      color: '#fff'
    };
    // Fade in only the first time we enter the viewport
    if (inViewport && enterCount === 1) {
      return _extends({}, basicStyle, {
        WebkitTransition: 'opacity 1s ease-in-out'
      });
    }
    if (!inViewport && enterCount < 1) {
      return _extends({}, basicStyle, {
        WebkitTransition: 'none',
        opacity: '0'
      });
    }
    return basicStyle;
  };
  _proto.render = function render() {
    var _this$props2 = this.props,
      enterCount = _this$props2.enterCount,
      leaveCount = _this$props2.leaveCount;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "card",
        style: this.getStyle(),
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "card__conent",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
            children: "Hello"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
            children: "Enter viewport: " + enterCount + " times"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
            children: "Leave viewport: " + leaveCount + " times"
          })]
        })
      })
    });
  };
  return MySectionBlock;
}(_react.PureComponent);
var SectionWithTransition = (0, _index.handleViewport)(MySectionBlock, {
  rootMargin: '-1.0px'
});
var _default = exports["default"] = SectionWithTransition;