rmc-list-view/lib/Indexed.js

m-list-view ui component for react

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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 _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _ListView = require('./ListView');

var _ListView2 = _interopRequireDefault(_ListView);

var _util = require('./util');

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

var IndexedList = function (_React$Component) {
  (0, _inherits3["default"])(IndexedList, _React$Component);

  function IndexedList(props) {
    (0, _classCallCheck3["default"])(this, IndexedList);

    var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.call(this, props));

    _initialiseProps.call(_this);

    _this.state = {
      pageSize: props.pageSize,
      _delay: false
    };
    return _this;
  }

  IndexedList.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if (this.props.dataSource !== nextProps.dataSource) {
      this.dataChange(nextProps);
    }
  };

  IndexedList.prototype.componentWillUnmount = function componentWillUnmount() {
    if (this._timer) {
      clearTimeout(this._timer);
    }
    this._hCache = null;
  };

  IndexedList.prototype.componentDidUpdate = function componentDidUpdate() {
    this.getQsInfo();
  };

  IndexedList.prototype.componentDidMount = function componentDidMount() {
    this.dataChange(this.props);
    // handle quickSearchBar
    this.getQsInfo();
  };

  IndexedList.prototype.renderQuickSearchBar = function renderQuickSearchBar(quickSearchBarTop, quickSearchBarStyle) {
    var _this2 = this;

    var _props = this.props,
        dataSource = _props.dataSource,
        prefixCls = _props.prefixCls;

    var sectionKvs = dataSource.sectionIdentities.map(function (i) {
      return {
        value: i,
        label: dataSource._getSectionHeaderData(dataSource._dataBlob, i)
      };
    });
    return _react2["default"].createElement(
      'ul',
      { ref: 'quickSearchBar',
        className: prefixCls + '-quick-search-bar', style: quickSearchBarStyle,
        onTouchStart: this.onTouchStart,
        onTouchMove: this.onTouchMove,
        onTouchEnd: this.onTouchEnd,
        onTouchCancel: this.onTouchEnd
      },
      _react2["default"].createElement(
        'li',
        { 'data-qf-target': quickSearchBarTop.value,
          onClick: function onClick() {
            return _this2.onQuickSearchTop(undefined, quickSearchBarTop.value);
          }
        },
        quickSearchBarTop.label
      ),
      sectionKvs.map(function (i) {
        return _react2["default"].createElement(
          'li',
          { key: i.value, 'data-qf-target': i.value,
            onClick: function onClick() {
              return _this2.onQuickSearch(i.value);
            }
          },
          i.label
        );
      })
    );
  };

  IndexedList.prototype.render = function render() {
    var _classNames,
        _classNames2,
        _this3 = this;

    var _state = this.state,
        _delay = _state._delay,
        pageSize = _state.pageSize;
    var _props2 = this.props,
        className = _props2.className,
        prefixCls = _props2.prefixCls,
        children = _props2.children,
        quickSearchBarTop = _props2.quickSearchBarTop,
        quickSearchBarStyle = _props2.quickSearchBarStyle,
        _props2$initialListSi = _props2.initialListSize,
        initialListSize = _props2$initialListSi === undefined ? Math.min(20, this.props.dataSource.getRowCount()) : _props2$initialListSi,
        _renderSectionHeader = _props2.renderSectionHeader,
        sectionHeaderClassName = _props2.sectionHeaderClassName,
        other = (0, _objectWithoutProperties3["default"])(_props2, ['className', 'prefixCls', 'children', 'quickSearchBarTop', 'quickSearchBarStyle', 'initialListSize', 'renderSectionHeader', 'sectionHeaderClassName']);

    var wrapCls = (0, _classnames2["default"])((_classNames = {}, (0, _defineProperty3["default"])(_classNames, className, className), (0, _defineProperty3["default"])(_classNames, prefixCls, true), _classNames));
    var qsIndicatorCls = (0, _classnames2["default"])((_classNames2 = {}, (0, _defineProperty3["default"])(_classNames2, prefixCls + '-qsindicator', true), (0, _defineProperty3["default"])(_classNames2, prefixCls + '-qsindicator-hide', !this.props.showQuickSearchIndicator || !this.state.showQuickSearchIndicator), _classNames2));
    // initialListSize={this.props.dataSource.getRowCount()}
    return _react2["default"].createElement(
      'div',
      { className: prefixCls + '-container' },
      _delay && this.props.delayActivityIndicator,
      _react2["default"].createElement(
        _ListView2["default"],
        (0, _extends3["default"])({}, other, {
          ref: 'indexedListView',
          className: wrapCls,
          initialListSize: initialListSize,
          pageSize: pageSize,
          renderSectionHeader: function renderSectionHeader(sectionData, sectionID) {
            return _react2["default"].cloneElement(_renderSectionHeader(sectionData, sectionID), {
              ref: function ref(c) {
                return _this3.sectionComponents[sectionID] = c;
              },
              className: sectionHeaderClassName || prefixCls + '-section-header'
            });
          }
        }),
        children
      ),
      this.renderQuickSearchBar(quickSearchBarTop, quickSearchBarStyle),
      _react2["default"].createElement('div', { className: qsIndicatorCls, ref: 'qsIndicator' })
    );
  };

  return IndexedList;
}(_react2["default"].Component);

IndexedList.propTypes = {
  prefixCls: _react.PropTypes.string,
  sectionHeaderClassName: _react.PropTypes.string,
  quickSearchBarTop: _react.PropTypes.object,
  onQuickSearch: _react.PropTypes.func,
  showQuickSearchIndicator: _react.PropTypes.bool
};
IndexedList.defaultProps = {
  prefixCls: 'rmc-indexed-list',
  quickSearchBarTop: { value: '#', label: '#' },
  onQuickSearch: function onQuickSearch() {},
  showQuickSearchIndicator: false,
  delayTime: 100,
  // delayActivityIndicator: <div style={{padding: 5, textAlign: 'center'}}>rendering more</div>,
  delayActivityIndicator: ''
};

var _initialiseProps = function _initialiseProps() {
  var _this4 = this;

  this.getQsInfo = function () {
    var quickSearchBar = _this4.refs.quickSearchBar;
    var height = quickSearchBar.offsetHeight;
    var hCache = [];
    [].slice.call(quickSearchBar.querySelectorAll('[data-qf-target]')).forEach(function (d) {
      hCache.push([d]);
    });
    var _avgH = height / hCache.length;
    var _top = 0;
    for (var i = 0, len = hCache.length; i < len; i++) {
      _top = i * _avgH;
      hCache[i][1] = [_top, _top + _avgH];
    }
    _this4._qsHeight = height;
    _this4._avgH = _avgH;
    _this4._hCache = hCache;
  };

  this.dataChange = function (props) {
    // delay render more
    var rowCount = props.dataSource.getRowCount();
    if (!rowCount) {
      return;
    }
    _this4.setState({
      _delay: true
    });
    if (_this4._timer) {
      clearTimeout(_this4._timer);
    }
    _this4._timer = setTimeout(function () {
      _this4.setState({
        pageSize: rowCount,
        _delay: false
      }, function () {
        return _this4.refs.indexedListView._pageInNewRows();
      });
    }, props.delayTime);
  };

  this.sectionComponents = {};

  this.onQuickSearchTop = function (sectionID, topId) {
    if (_this4.props.stickyHeader) {
      window.document.body.scrollTop = 0;
    } else {
      _reactDom2["default"].findDOMNode(_this4.refs.indexedListView.refs.listviewscroll).scrollTop = 0;
    }
    _this4.props.onQuickSearch(sectionID, topId);
  };

  this.onQuickSearch = function (sectionID) {
    var lv = _reactDom2["default"].findDOMNode(_this4.refs.indexedListView.refs.listviewscroll);
    var sec = _reactDom2["default"].findDOMNode(_this4.sectionComponents[sectionID]);
    if (_this4.props.stickyHeader) {
      // react-sticky 会把 header 设置为 fixed ，但提供了 placeholder 记忆原来位置
      var stickyComponent = _this4.refs.indexedListView.stickyRefs[sectionID];
      if (stickyComponent && stickyComponent.refs.placeholder) {
        sec = _reactDom2["default"].findDOMNode(stickyComponent.refs.placeholder);
      }
      window.document.body.scrollTop = sec.getBoundingClientRect().top - lv.getBoundingClientRect().top + (0, _util.getOffsetTop)(lv);
    } else {
      lv.scrollTop += sec.getBoundingClientRect().top - lv.getBoundingClientRect().top;
    }
    _this4.props.onQuickSearch(sectionID);
  };

  this.onTouchStart = function (e) {
    _this4._target = e.target;
    _this4._basePos = _this4.refs.quickSearchBar.getBoundingClientRect();
    document.addEventListener('touchmove', _this4._disableParent, false);
    document.body.className = document.body.className + ' ' + _this4.props.prefixCls + '-qsb-moving';
    _this4.updateIndicator(_this4._target);
  };

  this.onTouchMove = function (e) {
    e.preventDefault();
    if (_this4._target) {
      var ex = (0, _util._event)(e);
      var basePos = _this4._basePos;
      var _pos = void 0;
      if (ex.clientY >= basePos.top && ex.clientY <= basePos.top + _this4._qsHeight) {
        _pos = Math.floor((ex.clientY - basePos.top) / _this4._avgH);
        var target = void 0;
        if (_pos in _this4._hCache) {
          target = _this4._hCache[_pos][0];
        }
        if (target) {
          var overValue = target.getAttribute('data-qf-target');
          if (_this4._target !== target) {
            if (_this4.props.quickSearchBarTop.value === overValue) {
              _this4.onQuickSearchTop(undefined, overValue);
            } else {
              _this4.onQuickSearch(overValue);
            }
            _this4.updateIndicator(target);
          }
          _this4._target = target;
        }
      }
    }
  };

  this.onTouchEnd = function (e) {
    if (!_this4._target) {
      return;
    }
    document.removeEventListener('touchmove', _this4._disableParent, false);
    document.body.className = document.body.className.replace(new RegExp(_this4.props.prefixCls + '-qsb-moving', 'g'), '');
    _this4.updateIndicator(_this4._target, true);
    _this4._target = null;
  };

  this.updateIndicator = function (ele, end) {
    var el = ele;
    if (!el.getAttribute('data-qf-target')) {
      el = el.parentNode;
    }
    _this4.refs.qsIndicator.innerText = el.innerText.trim();
    _this4.setState({
      showQuickSearchIndicator: true
    });
    if (_this4._indicatorTimer) {
      clearTimeout(_this4._indicatorTimer);
    }
    _this4._indicatorTimer = setTimeout(function () {
      _this4.setState({
        showQuickSearchIndicator: false
      });
    }, 1000);

    var cls = _this4.props.prefixCls + '-quick-search-bar-over';
    // can not use setState to change className, it has a big performance issue! 
    _this4._hCache.forEach(function (d) {
      d[0].className = d[0].className.replace(cls, '');
    });
    if (!end) {
      el.className = el.className + ' ' + cls;
    }
  };

  this._disableParent = function (e) {
    e.preventDefault();
    e.stopPropagation();
  };
};

exports["default"] = IndexedList;
module.exports = exports['default'];