react-virtualized-sectionlist/dist/umd/index.js

React SectionList component based in react-virtualized List

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['exports', 'babel-runtime/helpers/extends', 'babel-runtime/helpers/objectWithoutProperties', 'babel-runtime/core-js/object/get-prototype-of', 'babel-runtime/helpers/classCallCheck', 'babel-runtime/helpers/createClass', 'babel-runtime/helpers/possibleConstructorReturn', 'babel-runtime/helpers/inherits', 'react', 'react-virtualized'], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require('babel-runtime/helpers/extends'), require('babel-runtime/helpers/objectWithoutProperties'), require('babel-runtime/core-js/object/get-prototype-of'), require('babel-runtime/helpers/classCallCheck'), require('babel-runtime/helpers/createClass'), require('babel-runtime/helpers/possibleConstructorReturn'), require('babel-runtime/helpers/inherits'), require('react'), require('react-virtualized'));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global._extends, global.objectWithoutProperties, global.getPrototypeOf, global.classCallCheck, global.createClass, global.possibleConstructorReturn, global.inherits, global.react, global.reactVirtualized);
    global.index = mod.exports;
  }
})(this, function (exports, _extends2, _objectWithoutProperties2, _getPrototypeOf, _classCallCheck2, _createClass2, _possibleConstructorReturn2, _inherits2, _react, _reactVirtualized) {
  'use strict';

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

  var _extends3 = _interopRequireDefault(_extends2);

  var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

  var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

  var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

  var _createClass3 = _interopRequireDefault(_createClass2);

  var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

  var _inherits3 = _interopRequireDefault(_inherits2);

  var _react2 = _interopRequireDefault(_react);

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

  var SectionList = function (_PureComponent) {
    (0, _inherits3.default)(SectionList, _PureComponent);

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

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

      _this._captureRef = function (ref) {
        _this._listRef = ref;
      };

      _this.getListRef = _this.getListRef.bind(_this);
      _this._rowHeight = _this._rowHeight.bind(_this);
      _this._renderItem = _this._renderItem.bind(_this);

      _this.state = _this._computeState(props);
      return _this;
    }

    (0, _createClass3.default)(SectionList, [{
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        this.setState(this._computeState(nextProps));
      }
    }, {
      key: '_computeState',
      value: function _computeState(props) {
        var itemCount = props.sections.reduce(function (v, section) {
          return v + section.data.length + 1; // Add one for the section header.
        }, 0);

        var sectionHeaderRenderer = props.sectionHeaderRenderer,
            sectionHeaderHeight = props.sectionHeaderHeight,
            rowRenderer = props.rowRenderer,
            rowHeight = props.rowHeight,
            childProps = (0, _objectWithoutProperties3.default)(props, ['sectionHeaderRenderer', 'sectionHeaderHeight', 'rowRenderer', 'rowHeight']);


        return {
          childProps: (0, _extends3.default)({}, childProps, {
            rowCount: itemCount,
            rowHeight: this._rowHeight,
            rowRenderer: this._renderItem
          })
        };
      }
    }, {
      key: '_rowHeight',
      value: function _rowHeight(_ref) {
        var index = _ref.index;

        var info = subExtractor(this.props.sections, index);
        if (!info) {
          return 0;
        }

        if (!!info.header) {
          if (!!this.props.sectionHeaderRenderer) {
            if (!!this.props.sectionHeaderHeight) {
              return typeof this.props.sectionHeaderHeight === "function" ? this.props.sectionHeaderHeight({ index: index }) : +this.props.sectionHeaderHeight;
            }
          } else {
            return 0;
          }
        }

        return typeof this.props.rowHeight === "function" ? this.props.rowHeight({ index: index }) : +this.props.rowHeight;
      }
    }, {
      key: '_renderItem',
      value: function _renderItem(_ref2) {
        var key = _ref2.key,
            index = _ref2.index,
            isScrolling = _ref2.isScrolling,
            isVisible = _ref2.isVisible,
            style = _ref2.style,
            parent = _ref2.parent;

        var info = subExtractor(this.props.sections, index);
        if (!!info) {
          if (!!info.header) {
            if (!!this.props.sectionHeaderRenderer) {
              return this.props.sectionHeaderRenderer({
                key: key,
                title: info.section.title || null,
                sectionIndex: info.sectionIndex,
                isScrolling: isScrolling,
                isVisible: isVisible,
                parent: parent,
                style: style
              });
            }
          } else {
            return this.props.rowRenderer({
              key: key,
              item: info.section.data[info.index],
              sectionIndex: info.sectionIndex,
              rowIndex: info.index,
              isScrolling: isScrolling,
              isVisible: isVisible,
              parent: parent,
              style: style
            });
          }
        }

        return null;
      }
    }, {
      key: 'getListRef',
      value: function getListRef() {
        return this._listRef;
      }
    }, {
      key: 'render',
      value: function render() {
        return _react2.default.createElement(_reactVirtualized.List, (0, _extends3.default)({}, this.state.childProps, { ref: this._captureRef }));
      }
    }]);
    return SectionList;
  }(_react.PureComponent);

  SectionList.defaultProps = (0, _extends3.default)({}, _reactVirtualized.List.defaultProps, {
    sections: []
  });
  exports.default = SectionList;


  function subExtractor() {
    var sections = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
    var index = arguments[1];

    var itemIndex = index;
    for (var ii = 0; ii < sections.length; ii++) {
      var section = sections[ii];
      itemIndex -= 1; // The section adds an item for the header
      if (itemIndex >= section.data.length) {
        itemIndex -= section.data.length;
      } else if (itemIndex === -1) {
        return {
          section: section,
          sectionIndex: ii,
          index: null,
          header: true
        };
      } else {
        return {
          section: section,
          sectionIndex: ii,
          index: itemIndex,
          header: false
        };
      }
    }
  };
});