[NEW] Pull to refresh RoomView (#1657)
This commit is contained in:
parent
7dffa14b77
commit
06085ebffb
|
@ -3,6 +3,7 @@ import { FlatList, InteractionManager } from 'react-native';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import orderBy from 'lodash/orderBy';
|
import orderBy from 'lodash/orderBy';
|
||||||
import { Q } from '@nozbe/watermelondb';
|
import { Q } from '@nozbe/watermelondb';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
import styles from './styles';
|
import styles from './styles';
|
||||||
import database from '../../lib/database';
|
import database from '../../lib/database';
|
||||||
|
@ -37,7 +38,8 @@ class List extends React.Component {
|
||||||
this.state = {
|
this.state = {
|
||||||
loading: true,
|
loading: true,
|
||||||
end: false,
|
end: false,
|
||||||
messages: []
|
messages: [],
|
||||||
|
refreshing: false
|
||||||
};
|
};
|
||||||
this.init();
|
this.init();
|
||||||
console.timeEnd(`${ this.constructor.name } init`);
|
console.timeEnd(`${ this.constructor.name } init`);
|
||||||
|
@ -102,7 +104,7 @@ class List extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
shouldComponentUpdate(nextProps, nextState) {
|
shouldComponentUpdate(nextProps, nextState) {
|
||||||
const { loading, end } = this.state;
|
const { loading, end, refreshing } = this.state;
|
||||||
const { theme } = this.props;
|
const { theme } = this.props;
|
||||||
if (theme !== nextProps.theme) {
|
if (theme !== nextProps.theme) {
|
||||||
return true;
|
return true;
|
||||||
|
@ -113,6 +115,9 @@ class List extends React.Component {
|
||||||
if (end !== nextState.end) {
|
if (end !== nextState.end) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
if (refreshing !== nextState.refreshing) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -153,6 +158,25 @@ class List extends React.Component {
|
||||||
}
|
}
|
||||||
}, 300)
|
}, 300)
|
||||||
|
|
||||||
|
onRefresh = () => this.setState({ refreshing: true }, async() => {
|
||||||
|
const { messages } = this.state;
|
||||||
|
const { rid, tmid } = this.props;
|
||||||
|
|
||||||
|
if (messages.length) {
|
||||||
|
try {
|
||||||
|
if (tmid) {
|
||||||
|
await RocketChat.loadThreadMessages({ tmid, rid, offset: messages.length - 1 });
|
||||||
|
} else {
|
||||||
|
await RocketChat.loadMissedMessages({ rid, lastOpen: moment().subtract(7, 'days').toDate() });
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
log(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({ refreshing: false });
|
||||||
|
})
|
||||||
|
|
||||||
// eslint-disable-next-line react/sort-comp
|
// eslint-disable-next-line react/sort-comp
|
||||||
update = () => {
|
update = () => {
|
||||||
animateNextTransition();
|
animateNextTransition();
|
||||||
|
@ -191,7 +215,7 @@ class List extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
console.count(`${ this.constructor.name }.render calls`);
|
console.count(`${ this.constructor.name }.render calls`);
|
||||||
const { rid, listRef } = this.props;
|
const { rid, listRef } = this.props;
|
||||||
const { messages } = this.state;
|
const { messages, refreshing } = this.state;
|
||||||
const { theme } = this.props;
|
const { theme } = this.props;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -213,6 +237,8 @@ class List extends React.Component {
|
||||||
maxToRenderPerBatch={5}
|
maxToRenderPerBatch={5}
|
||||||
windowSize={10}
|
windowSize={10}
|
||||||
ListFooterComponent={this.renderFooter}
|
ListFooterComponent={this.renderFooter}
|
||||||
|
onRefresh={this.onRefresh}
|
||||||
|
refreshing={refreshing}
|
||||||
{...scrollPersistTaps}
|
{...scrollPersistTaps}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
Loading…
Reference in New Issue