yylib-quick-mobile
Version:
yylib-quick-mobile
264 lines (226 loc) • 11.4 kB
JavaScript
'use strict';
var _pullToRefresh = require('antd-mobile/lib/pull-to-refresh');
var _pullToRefresh2 = _interopRequireDefault(_pullToRefresh);
var _button = require('antd-mobile/lib/button');
var _button2 = _interopRequireDefault(_button);
var _listView = require('antd-mobile/lib/list-view');
var _listView2 = _interopRequireDefault(_listView);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
require('antd-mobile/lib/pull-to-refresh/style/css');
require('antd-mobile/lib/button/style/css');
require('antd-mobile/lib/list-view/style/css');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var data = [{
img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
title: 'Meet hotel',
des: '不是所有的兼职汪都需要风吹日晒'
}, {
img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
title: 'McDonald\'s invites you',
des: '不是所有的兼职汪都需要风吹日晒'
}, {
img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
title: 'Eat the week',
des: '不是所有的兼职汪都需要风吹日晒'
}];
var NUM_ROWS = 20;
var pageIndex = 0;
function genData() {
var pIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var dataArr = [];
for (var i = 0; i < NUM_ROWS; i++) {
dataArr.push('row - ' + (pIndex * NUM_ROWS + i));
}
return dataArr;
}
var YYPullToRefresh = function (_React$Component) {
_inherits(YYPullToRefresh, _React$Component);
function YYPullToRefresh(props) {
_classCallCheck(this, YYPullToRefresh);
var _this = _possibleConstructorReturn(this, (YYPullToRefresh.__proto__ || Object.getPrototypeOf(YYPullToRefresh)).call(this, props));
_this.onRefresh = function () {
_this.setState({ refreshing: true, isLoading: true });
setTimeout(function () {
_this.rData = genData();
_this.setState({
dataSource: _this.state.dataSource.cloneWithRows(_this.rData),
refreshing: false,
isLoading: false
});
}, 600);
};
_this.onEndReached = function (event) {
if (_this.state.isLoading && !_this.state.hasMore) {
return;
}
console.log('reach end', event);
_this.setState({ isLoading: true });
setTimeout(function () {
_this.rData = [].concat(_toConsumableArray(_this.rData), _toConsumableArray(genData(++pageIndex)));
_this.setState({
dataSource: _this.state.dataSource.cloneWithRows(_this.rData),
isLoading: false
});
}, 1000);
};
var dataSource = new _listView2.default.DataSource({
rowHasChanged: function rowHasChanged(row1, row2) {
return row1 !== row2;
}
});
_this.state = {
dataSource: dataSource,
refreshing: true,
isLoading: true,
height: document.documentElement.clientHeight,
useBodyScroll: false
};
return _this;
}
_createClass(YYPullToRefresh, [{
key: 'componentDidUpdate',
value: function componentDidUpdate() {
if (this.state.useBodyScroll) {
document.body.style.overflow = 'auto';
} else {
document.body.style.overflow = 'hidden';
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
var hei = this.state.height - _reactDom2.default.findDOMNode(this.lv).offsetTop;
setTimeout(function () {
_this2.rData = genData();
_this2.setState({
dataSource: _this2.state.dataSource.cloneWithRows(genData()),
height: hei,
refreshing: false,
isLoading: false
});
}, 1500);
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var separator = function separator(sectionID, rowID) {
return _react2.default.createElement('div', {
key: sectionID + '-' + rowID,
style: {
backgroundColor: '#F5F5F9',
height: 8,
borderTop: '1px solid #ECECED',
borderBottom: '1px solid #ECECED'
} });
};
var index = data.length - 1;
var row = function row(rowData, sectionID, rowID) {
var _ref;
if (index < 0) {
index = data.length - 1;
}
var obj = data[index--];
return _react2.default.createElement(
'div',
{ key: rowID,
style: {
padding: '0 15px',
backgroundColor: 'white'
} },
_react2.default.createElement(
'div',
{ style: { height: '50px', lineHeight: '50px', color: '#888', fontSize: '18px', borderBottom: '1px solid #ddd' } },
obj.title
),
_react2.default.createElement(
'div',
{ style: (_ref = { display: '-webkit-box' }, _defineProperty(_ref, 'display', 'flex'), _defineProperty(_ref, 'padding', '15px'), _ref) },
_react2.default.createElement('img', { style: { height: '63px', width: '63px', marginRight: '15px' }, src: obj.img, alt: '' }),
_react2.default.createElement(
'div',
{ style: { display: 'inline-block' } },
_react2.default.createElement(
'div',
{ style: { marginBottom: '8px', color: '#000', fontSize: '16px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '250px' } },
obj.des,
'-',
rowData
),
_react2.default.createElement(
'div',
{ style: { fontSize: '16px' } },
_react2.default.createElement(
'span',
{ style: { fontSize: '30px', color: '#FF6E27' } },
rowID
),
' \u5143/\u4EFB\u52A1'
)
)
)
);
};
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
_button2.default,
{
style: { margin: '30px 15px' },
inline: true,
onClick: function onClick() {
return _this3.setState({ useBodyScroll: !_this3.state.useBodyScroll });
}
},
this.state.useBodyScroll ? 'useBodyScroll' : 'partial scroll'
),
_react2.default.createElement(_listView2.default, {
key: this.state.useBodyScroll ? '0' : '1',
ref: function ref(el) {
return _this3.lv = el;
},
dataSource: this.state.dataSource,
renderHeader: function renderHeader() {
return _react2.default.createElement(
'span',
null,
'Pull to refresh'
);
},
renderFooter: function renderFooter() {
return _react2.default.createElement(
'div',
{ style: { padding: 30, textAlign: 'center' } },
_this3.state.isLoading ? 'Loading...' : 'Loaded'
);
},
renderRow: row,
renderSeparator: separator,
useBodyScroll: this.state.useBodyScroll,
style: this.state.useBodyScroll ? {} : {
height: this.state.height,
border: '1px solid #ddd',
margin: '5px 0'
},
pullToRefresh: _react2.default.createElement(_pullToRefresh2.default, {
refreshing: this.state.refreshing,
onRefresh: this.onRefresh }),
onEndReached: this.onEndReached,
pageSize: 5 })
);
}
}]);
return YYPullToRefresh;
}(_react2.default.Component);
module.exports = YYPullToRefresh;