106 lines
4.1 KiB
JavaScript
106 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import withRouter from './platforms/web/router/withRouter';
|
|
import PullToRefresh from './platforms/web/PullToRefresh';
|
|
import { createComponent as createReactComponent } from './page.react';
|
|
const DEFAULT_REACH_BOTTOM_DISTANCE = 50;
|
|
export function createComponent(option, features) {
|
|
const BaseComponent = createReactComponent(option, features);
|
|
class Component extends BaseComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.handleResize = this.handleResize.bind(this);
|
|
this.scrollEvent = this.scrollEvent.bind(this);
|
|
}
|
|
scrollEvent = () => {
|
|
this.checkReachBottom();
|
|
};
|
|
handleResize() {
|
|
const resizeOption = {
|
|
size: {
|
|
windowHeight: window.innerHeight,
|
|
windowWidth: window.innerWidth,
|
|
},
|
|
};
|
|
const { resize } = this.oakOption.lifetimes || {};
|
|
resize && resize.call(this, resizeOption);
|
|
}
|
|
registerResize() {
|
|
window.addEventListener('resize', this.handleResize);
|
|
}
|
|
unregisterResize() {
|
|
window.removeEventListener('resize', this.handleResize);
|
|
}
|
|
registerPageScroll() {
|
|
window.addEventListener('scroll', this.scrollEvent);
|
|
}
|
|
unregisterPageScroll() {
|
|
window.removeEventListener('scroll', this.scrollEvent);
|
|
}
|
|
checkReachBottom() {
|
|
if (!this.supportPullDownRefresh()) {
|
|
return;
|
|
}
|
|
const isCurrentReachBottom = document.body.scrollHeight -
|
|
(window.innerHeight + window.scrollY) <=
|
|
DEFAULT_REACH_BOTTOM_DISTANCE;
|
|
if (!this.isReachBottom && isCurrentReachBottom && option.isList) {
|
|
this.isReachBottom = true;
|
|
// 执行触底事件
|
|
this.loadMore();
|
|
return;
|
|
}
|
|
this.isReachBottom = isCurrentReachBottom;
|
|
}
|
|
async componentDidMount() {
|
|
this.registerResize();
|
|
this.registerPageScroll();
|
|
await super.componentDidMount();
|
|
}
|
|
componentWillUnmount() {
|
|
this.unregisterResize();
|
|
this.unregisterPageScroll();
|
|
super.componentWillUnmount();
|
|
}
|
|
render() {
|
|
const { oakPullDownRefreshLoading } = this.state;
|
|
const Render = super.render();
|
|
if (this.supportPullDownRefresh()) {
|
|
return (<PullToRefresh onRefresh={async () => {
|
|
try {
|
|
this.setState({
|
|
oakPullDownRefreshLoading: true,
|
|
});
|
|
await this.refresh();
|
|
this.setState({
|
|
oakPullDownRefreshLoading: false,
|
|
});
|
|
}
|
|
catch (err) {
|
|
this.setState({
|
|
oakPullDownRefreshLoading: false,
|
|
});
|
|
throw err;
|
|
}
|
|
}} refreshing={oakPullDownRefreshLoading} distanceToRefresh={DEFAULT_REACH_BOTTOM_DISTANCE} indicator={{
|
|
activate: this.t('common::ptrActivate', {
|
|
'#oakModule': 'oak-frontend-base',
|
|
}),
|
|
deactivate: this.t('common::ptrDeactivate', {
|
|
'#oakModule': 'oak-frontend-base',
|
|
}),
|
|
release: this.t('common::ptrRelease', {
|
|
'#oakModule': 'oak-frontend-base',
|
|
}),
|
|
finish: this.t('common::ptrFinish', {
|
|
'#oakModule': 'oak-frontend-base',
|
|
}),
|
|
}}>
|
|
{Render}
|
|
</PullToRefresh>);
|
|
}
|
|
return Render;
|
|
}
|
|
}
|
|
return withRouter(Component, option);
|
|
}
|