instantjob-recruiter-client/dist/components/infinite_list.js

a set of tools for creating an instantjob recruiter react client

'use strict';

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

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _list = require('components/list');

var _list2 = _interopRequireDefault(_list);

var _auto_bind = require('common/auto_bind');

var _auto_bind2 = _interopRequireDefault(_auto_bind);

var _utilities = require('common/utilities');

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

var count = 100;

var InfiniteList = function (_Component) {
  (0, _inherits3.default)(InfiniteList, _Component);

  function InfiniteList(props) {
    (0, _classCallCheck3.default)(this, InfiniteList);

    var _this = (0, _possibleConstructorReturn3.default)(this, (InfiniteList.__proto__ || (0, _getPrototypeOf2.default)(InfiniteList)).call(this, props));

    _this.state = {
      offset: -10,
      loading: false
    };
    (0, _auto_bind2.default)(_this);
    return _this;
  }

  (0, _createClass3.default)(InfiniteList, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.scroll_to_item(0);
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      if (this.should_run_after_updating) {
        this.should_run_after_updating();
        this.should_run_after_updating = false;
      }
    }
  }, {
    key: 'add_items_bottom',
    value: function add_items_bottom() {
      var _this2 = this;

      this.setState({ loading: true });
      this.should_run_after_updating = function () {
        _this2.setState(function (_ref) {
          var offset = _ref.offset;
          return { offset: offset + 1, loading: false };
        });
      };
    }
  }, {
    key: 'add_items_top',
    value: function add_items_top() {
      var _this3 = this;

      this.setState({ loading: true });
      this.should_run_after_updating = function () {
        _this3.setState(function (_ref2) {
          var offset = _ref2.offset;
          return { offset: offset - 1, loading: false };
        });
      };
    }
  }, {
    key: 'add_items_top_if_necessary',
    value: function add_items_top_if_necessary(node) {
      var _this4 = this;

      var scrollTop = node.scrollTop;
      var item_height = this.props.item_height;

      if (scrollTop < 10 * item_height) {
        this.add_items_top();
        setTimeout(function () {
          _this4.add_items_top_if_necessary(node);
        }, 50);
      }
    }
  }, {
    key: 'scroll_to_item',
    value: function scroll_to_item(index) {
      var _this5 = this;

      this.setState({ offset: index - 10 });
      this.should_run_after_updating = function () {
        return _this5.list.scroll_to(10 * _this5.props.item_height);
      };
    }
  }, {
    key: 'render_item',
    value: function render_item(index) {
      var _props = this.props,
          item_height = _props.item_height,
          render_item = _props.children;

      return _react2.default.createElement(
        'div',
        { key: index, style: { height: item_height } },
        render_item(index)
      );
    }
  }, {
    key: 'handle_scroll',
    value: function handle_scroll(node) {
      this.add_items_top_if_necessary(node);
      var _props2 = this.props,
          handle_scroll = _props2.handle_scroll,
          item_height = _props2.item_height;

      handle_scroll(node.scrollTop + this.state.offset * item_height);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this6 = this;

      var item_height = this.props.item_height;
      var _state = this.state,
          loading = _state.loading,
          offset = _state.offset;

      return _react2.default.createElement(
        _list2.default,
        {
          item_height: item_height,
          handle_scroll: this.handle_scroll,
          onInfiniteLoad: this.add_items_bottom,
          isInfiniteLoading: loading,
          ref: function ref(list) {
            return _this6.list = list;
          }
        },
        (0, _utilities.range)(offset, count + offset).map(this.render_item)
      );
    }
  }]);
  return InfiniteList;
}(_react.Component);

InfiniteList.defaultProps = {
  handle_scroll: function handle_scroll() {}
};
exports.default = InfiniteList;