You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
386 lines
13 KiB
386 lines
13 KiB
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
|
|
|
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
|
|
|
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
|
|
|
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 _propTypes = require('prop-types');
|
|
|
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
|
|
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 }; }
|
|
|
|
function setDocumentScrollTop(val) {
|
|
window.document.body.scrollTop = val; // chrome61 is invalid
|
|
window.document.documentElement.scrollTop = val;
|
|
}
|
|
|
|
/* eslint react/prop-types: 0 */
|
|
|
|
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, (IndexedList.__proto__ || Object.getPrototypeOf(IndexedList)).call(this, props));
|
|
|
|
_initialiseProps.call(_this);
|
|
|
|
_this.state = {
|
|
pageSize: props.pageSize,
|
|
_delay: false
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
(0, _createClass3['default'])(IndexedList, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
this.dataChange(this.props);
|
|
// handle quickSearchBar
|
|
this.getQsInfo();
|
|
}
|
|
}, {
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
if (this.props.dataSource !== nextProps.dataSource) {
|
|
this.dataChange(nextProps);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate() {
|
|
this.getQsInfo();
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
if (this._timer) {
|
|
clearTimeout(this._timer);
|
|
}
|
|
this._hCache = null;
|
|
}
|
|
}, {
|
|
key: 'renderQuickSearchBar',
|
|
value: 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: function ref(el) {
|
|
return _this2.quickSearchBarRef = el;
|
|
},
|
|
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
|
|
);
|
|
})
|
|
);
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this3 = this,
|
|
_classNames;
|
|
|
|
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,
|
|
showQuickSearchIndicator = _props2.showQuickSearchIndicator,
|
|
_renderSectionHeader = _props2.renderSectionHeader,
|
|
sectionHeaderClassName = _props2.sectionHeaderClassName,
|
|
other = (0, _objectWithoutProperties3['default'])(_props2, ['className', 'prefixCls', 'children', 'quickSearchBarTop', 'quickSearchBarStyle', 'initialListSize', 'showQuickSearchIndicator', 'renderSectionHeader', 'sectionHeaderClassName']);
|
|
|
|
// 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: function ref(el) {
|
|
return _this3.indexedListViewRef = el;
|
|
},
|
|
className: (0, _classnames2['default'])(prefixCls, className),
|
|
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),
|
|
showQuickSearchIndicator ? _react2['default'].createElement('div', { className: (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-qsindicator', true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-qsindicator-hide', !showQuickSearchIndicator || !this.state.showQuickSearchIndicator), _classNames)), ref: function ref(el) {
|
|
return _this3.qsIndicatorRef = el;
|
|
}
|
|
}) : null
|
|
);
|
|
}
|
|
}]);
|
|
return IndexedList;
|
|
}(_react2['default'].Component);
|
|
|
|
IndexedList.propTypes = (0, _extends3['default'])({}, _ListView2['default'].propTypes, {
|
|
children: _propTypes2['default'].any,
|
|
prefixCls: _propTypes2['default'].string,
|
|
className: _propTypes2['default'].string,
|
|
sectionHeaderClassName: _propTypes2['default'].string,
|
|
quickSearchBarTop: _propTypes2['default'].object,
|
|
quickSearchBarStyle: _propTypes2['default'].object,
|
|
onQuickSearch: _propTypes2['default'].func,
|
|
showQuickSearchIndicator: _propTypes2['default'].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.onQuickSearchTop = function (sectionID, topId) {
|
|
if (_this4.props.useBodyScroll) {
|
|
setDocumentScrollTop(0);
|
|
} else {
|
|
_reactDom2['default'].findDOMNode(_this4.indexedListViewRef.ListViewRef).scrollTop = 0;
|
|
}
|
|
_this4.props.onQuickSearch(sectionID, topId);
|
|
};
|
|
|
|
this.onQuickSearch = function (sectionID) {
|
|
var lv = _reactDom2['default'].findDOMNode(_this4.indexedListViewRef.ListViewRef);
|
|
var sec = _reactDom2['default'].findDOMNode(_this4.sectionComponents[sectionID]);
|
|
if (_this4.props.useBodyScroll) {
|
|
setDocumentScrollTop(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.quickSearchBarRef.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 () {
|
|
if (!_this4._target) {
|
|
return;
|
|
}
|
|
document.removeEventListener('touchmove', _this4._disableParent, false);
|
|
document.body.className = document.body.className.replace(new RegExp('\\s*' + _this4.props.prefixCls + '-qsb-moving', 'g'), '');
|
|
_this4.updateIndicator(_this4._target, true);
|
|
_this4._target = null;
|
|
};
|
|
|
|
this.getQsInfo = function () {
|
|
var quickSearchBar = _this4.quickSearchBarRef;
|
|
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.sectionComponents = {};
|
|
|
|
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.indexedListViewRef._pageInNewRows();
|
|
});
|
|
}, props.delayTime);
|
|
};
|
|
|
|
this.updateIndicator = function (ele, end) {
|
|
var el = ele;
|
|
if (!el.getAttribute('data-qf-target')) {
|
|
el = el.parentNode;
|
|
}
|
|
if (_this4.props.showQuickSearchIndicator) {
|
|
_this4.qsIndicatorRef.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']; |