@lyra/components/lib/utilities/ScrollContainer.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ScrollContainer = require('./styles/ScrollContainer.css');

var _ScrollContainer2 = _interopRequireDefault(_ScrollContainer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class ScrollContainer extends _react2.default.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleScroll = event => {
      this.props.onScroll(event);
    }, this.setScrollContainerElement = element => {
      this._scrollContainerElement = element;
    }, _temp;
  }

  getChildContext() {
    return {
      getScrollContainer: () => this._scrollContainerElement
    };
  }

  componentDidMount() {
    this._scrollContainerElement.addEventListener('scroll', this.handleScroll, {
      passive: true
    });
  }

  componentWillUnmount() {
    this._scrollContainerElement.removeEventListener('scroll', this.handleScroll, { passive: true });
  }

  render() {
    return _react2.default.createElement(
      'div',
      {
        ref: this.setScrollContainerElement,
        className: `${_ScrollContainer2.default.scrollContainer} ${this.props.className}`
      },
      this.props.children
    );
  }
}
exports.default = ScrollContainer;
ScrollContainer.propTypes = {
  className: _propTypes2.default.string,
  children: _propTypes2.default.node,
  onScroll: _propTypes2.default.func
};
ScrollContainer.defaultProps = {
  className: '',
  onScroll: () => {}
};
ScrollContainer.defaultProps = {
  className: ''
};
ScrollContainer.childContextTypes = {
  getScrollContainer: _propTypes2.default.func
};