verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

DDP Connection badge animation changed (#533)

This commit is contained in:
Diego Mello 2018-11-16 09:07:13 -02:00 committed by GitHub
parent e9deb577e0
commit f13d7ed631
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
app/containers/ConnectionBadge.js
View File

@ -6,6 +6,7 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import I18n from '../i18n'; import I18n from '../i18n';
import debounce from '../utils/debounce';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -49,62 +50,20 @@ class ConnectionBadge extends Component {
static propTypes = { static propTypes = {
connecting: PropTypes.bool, connecting: PropTypes.bool,
connected: PropTypes.bool, connected: PropTypes.bool,
disconnected: PropTypes.bool disconnected: PropTypes.bool // eslint-disable-line
} }
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
visible: false
};
this.animatedValue = new Animated.Value(0); this.animatedValue = new Animated.Value(0);
} }
componentDidMount() { componentDidUpdate() {
const { connecting, disconnected } = this.props; this.show();
if (connecting || disconnected) {
this.animate(1);
}
this.timeout = setTimeout(() => {
const { connected } = this.props;
if (connected) {
this.timeout = setTimeout(() => {
this.animatedValue.stopAnimation();
this.animate(0);
}, 1000);
}
}, 1000);
} }
componentDidUpdate(prevProps) { // eslint-disable-next-line react/sort-comp
const { visible } = this.state; animate = debounce((toValue) => {
const { connecting, connected, disconnected } = this.props;
if ((connecting && connecting !== prevProps.connecting) || (disconnected && disconnected !== prevProps.disconnected)) {
if (!visible) {
this.animatedValue.stopAnimation();
this.animate(1);
}
} else if (connected && connected !== prevProps.connected) {
if (visible) {
if (this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout(() => {
this.animatedValue.stopAnimation();
this.animate(0);
}, 1000);
}
}
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
}
animate = (toValue) => {
Animated.timing( Animated.timing(
this.animatedValue, this.animatedValue,
{ {
@ -113,8 +72,17 @@ class ConnectionBadge extends Component {
easing: Easing.ease, easing: Easing.ease,
useNativeDriver: true useNativeDriver: true
}, },
).start(() => this.setState({ visible: toValue === 1 })); ).start(() => {
} if (toValue === 1) {
if (this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout(() => {
this.hide();
}, 1000);
}
});
}, 300);
show = () => { show = () => {
this.animate(1); this.animate(1);