tsp-component
Version:
提供多端和react版本的UI组件
285 lines (284 loc) • 10.8 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import * as React from 'react';
import classNames from 'classnames';
import assign from 'object-assign';
import Hammer from 'react-hammerjs';
var prefix = 'tsp-component-ListView';
var distance = 1000;
var ListView = (function (_super) {
__extends(ListView, _super);
function ListView(props, state) {
var _this = _super.call(this, props, state) || this;
_this.state = {
render: []
};
_this.data = [];
_this.sourceData = [];
_this.throttle = true;
_this.onTouchmove = _this.onTouchmove.bind(_this);
_this.success = _this.success.bind(_this);
_this.timeoutCallback = _this.timeoutCallback.bind(_this);
return _this;
}
Object.defineProperty(ListView.prototype, "dataKey", {
get: function () {
return this.props.dataKey ? this.props.dataKey : ListView.dataKey;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ListView.prototype, "pageKey", {
get: function () {
return this.props.pageKey ? this.props.pageKey : ListView.pageKey;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ListView.prototype, "pageSizeKey", {
get: function () {
return this.props.pageSizeKey ? this.props.pageSizeKey : ListView.pageSizeKey;
},
enumerable: true,
configurable: true
});
ListView.prototype.componentWillUnmount = function () {
this.elem.removeEventListener('touchmove', this.onTouchmove);
clearTimeout(this.timeoutInstance);
clearTimeout(this.throttleTimeoutInstance);
};
ListView.prototype.componentDidMount = function () {
var _this = this;
this.elem = this.refs.elem;
this.loadingElem = this.refs.loading;
if (this.props.scrollContainerId) {
this.scrollContainerElem = document.getElementById(this.props.scrollContainerId);
}
this.page = this.props.params.params[this.pageKey];
this.pageSize = this.props.params.params[this.pageSizeKey];
this.setState({ render: this.props.loadingView });
this.elem.addEventListener('touchmove', this.onTouchmove);
if (this.props.delay) {
this.timeoutInstance = setTimeout(function () {
_this.request();
}, this.props.delay);
}
else {
this.request();
}
};
ListView.prototype.componentWillReceiveProps = function (nextProps) {
if (nextProps.reloadId !== this.props.reloadId) {
this.page = nextProps.pageStart;
this.data = [];
this.sourceData = [];
this.status = 'loading';
this.setState({ render: nextProps.loadingView });
this.request(nextProps.params);
}
if (this.props.refreshId !== nextProps.refreshId) {
this.setState({
render: this.dataRender(nextProps)
});
}
};
ListView.prototype.onTouchmove = function (e) {
var _this = this;
if (this.status !== 'complete' || !this.loadingOver) {
return;
}
if (this.throttle) {
this.throttle = false;
}
else {
return;
}
var offsetTop;
var scrollHeight;
if (this.props.scrollContainerId) {
offsetTop = this.scrollContainerElem.offsetTop;
scrollHeight = this.scrollContainerElem.offsetHeight;
}
else {
offsetTop = document.body.scrollTop;
scrollHeight = document.body.scrollHeight;
}
this.throttleTimeoutInstance = setTimeout(function () {
_this.throttle = true;
}, 250);
if (scrollHeight - offsetTop > distance) {
return;
}
else {
this.request();
}
};
ListView.prototype.request = function (sendParams) {
var _this = this;
if (sendParams === void 0) { sendParams = this.props.params; }
var requestParams = assign({}, sendParams.params, (_a = {},
_a[this.pageKey] = this.page,
_a));
var params = assign({}, sendParams, {
params: requestParams,
success: this.success,
timeoutCallback: this.timeoutCallback,
});
this.loadingOver = false;
this.props.request(params);
this.timeoutInstance = setTimeout(function () {
if (!_this.loadingOver) {
_this.status = 'loading';
if (_this.data.length) {
_this.loadingElem.style.display = 'block';
}
else {
_this.setState({ render: _this.props.loadingView });
}
}
}, 300);
var _a;
};
ListView.prototype.success = function (data, status) {
if (status) {
var temp = void 0;
var firstKey = this.dataKey[0];
var secondKey = this.dataKey[1];
var tempData = firstKey && secondKey && this.sourceData ? this.sourceData[secondKey] : undefined;
if (tempData) {
this.sourceData = assign({}, this.sourceData, data, (_a = {},
_a[secondKey] = this.sourceData[secondKey].concat(data[firstKey][secondKey]),
_a));
}
else {
if (firstKey && secondKey) {
this.sourceData = data[firstKey];
}
else {
this.sourceData = this.sourceData ? this.sourceData.concat(data[firstKey]) : data[firstKey];
}
}
for (var i = 0; i < this.dataKey.length; i++) {
if (i === 0) {
temp = data[this.dataKey[0]];
}
else if (i === 1) {
temp = data[this.dataKey[0]][this.dataKey[1]];
}
}
this.data = this.data.concat(temp);
if (temp.length) {
this.status = 'complete';
}
else if (this.data.length && temp.length < this.pageSize) {
this.status = 'over';
}
else if (!this.data.length && !temp.length) {
this.status = 'empty';
}
else {
this.status = 'fail';
}
}
else {
this.status = 'fail';
}
this.page++;
this.loadingElem.style.display = 'none';
this.loadingOver = true;
this.setStateRender();
var _a;
};
ListView.prototype.setStateRender = function () {
var length = this.data.length;
var temp = [];
if (this.status === 'complete') {
temp = this.dataRender();
}
else if (this.status === 'empty') {
temp = this.props.emptyView;
}
else if (this.status === 'over') {
temp = this.state.render;
}
else if (!length && this.status === 'fail') {
temp = this.timeoutView();
}
else if (this.status === 'timeout') {
temp = this.timeoutView();
}
this.setState({
render: temp
});
};
ListView.prototype.timeoutView = function () {
var _this = this;
return (React.createElement(Hammer, { onTap: function () { return _this.request(); } }, this.props.timeoutView));
};
ListView.prototype.dataRender = function (props) {
if (props === void 0) { props = this.props; }
var length = this.data.length;
var temp = [];
var i = 0;
for (i; i < length; i++) {
if (props.filter) {
if (props.filter(this.data[i])) {
temp.push(props.rowRender(this.data[i], i, this.data));
}
}
else {
temp.push(props.rowRender(this.data[i], i, this.data));
}
}
return temp;
};
ListView.prototype.timeoutCallback = function () {
var length = this.data.length;
if (!length) {
this.status = 'timeout';
this.setState({
render: this.timeoutView()
});
}
else {
this.loadingOver = true;
this.status = 'complete';
}
this.loadingElem.style.display = 'none';
};
ListView.prototype.render = function () {
var successExtendsViewShowStauts = this.status === 'complete' || this.status === 'over';
var completeExtendsViewShowStauts = this.status !== 'timeout';
return (React.createElement("div", { className: classNames((_a = {},
_a[prefix] = true,
_a[this.props.className] = this.props.className,
_a)), ref: "elem" },
successExtendsViewShowStauts && this.props.successBeforeView ? this.props.successBeforeView(this.sourceData) : null,
completeExtendsViewShowStauts && this.props.completeBeforeView ? this.props.completeBeforeView(this.sourceData) : null,
this.status === 'complete' ? (this.state.render.map(function (value) { return value; })) : (this.state.render),
React.createElement("div", { className: prefix + "-loading", ref: "loading" }),
successExtendsViewShowStauts && this.props.successAfterView ? this.props.successAfterView(this.sourceData) : null));
var _a;
};
ListView.defaultProps = {
request: function () { return null; },
params: undefined,
rowRender: function () { return null; },
emptyView: null,
failView: null,
timeoutView: null,
loadingView: null,
pageStart: 1,
dataKey: ['result']
};
return ListView;
}(React.Component));
export default ListView;