@kineticdata/react/lib/components/common/Scroller.js

A React library for the Kinetic Platform

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Scroller = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
var _react = require("react");
var Scroller = exports.Scroller = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(Scroller, _Component);
  var _super = (0, _createSuper2["default"])(Scroller);
  function Scroller(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, Scroller);
    _this = _super.call(this, props);
    _this.parent = /*#__PURE__*/(0, _react.createRef)();
    _this.child = /*#__PURE__*/(0, _react.createRef)();
    _this.lastTop = 0;
    return _this;
  }
  (0, _createClass2["default"])(Scroller, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.scroll();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState, snapshot) {
      this.scroll();
    }
  }, {
    key: "scroll",
    value: function scroll() {
      var parent = this.parent.current;
      var child = this.child.current;
      if (child) {
        // in case the parent has an offsetTop we need to subtract that from the
        // child's for the calculations below
        var childTop = child.offsetTop - parent.offsetTop;
        // when scrolling down...
        if (childTop > this.lastTop) {
          // check to see if the bottom of the child element is below the bottom
          // of the scrollable parent
          if (childTop + child.clientHeight > parent.scrollTop + parent.clientHeight) {
            // scroll the child into view (passing false which aligns by bottom)
            child.scrollIntoView(false);
          }
        }
        // when scrolling up...
        else if (childTop < this.lastTop) {
          // check to see if the top of the child element is above the top of the
          // scrollable parent
          if (childTop < parent.scrollTop) {
            // scroll the child into view (passing true which aligns by top)
            child.scrollIntoView(true);
          }
        }
        this.lastTop = child.offsetTop;
      }
    }
  }, {
    key: "render",
    value: function render() {
      return this.props.children({
        parentRef: this.parent,
        childRef: this.child
      });
    }
  }]);
  return Scroller;
}(_react.Component);