verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Chore: Migrate containers/Toast to hooks (#4309)

This commit is contained in:
Gleidson Daniel Silva 2022-06-22 09:32:57 -03:00 committed by GitHub
parent 5f248ebeb5
commit a5a5c52058
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
app/containers/Toast.tsx
View File

@ -1,11 +1,10 @@
import React from 'react'; import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native'; import { StyleSheet } from 'react-native';
import EasyToast from 'react-native-easy-toast'; import EasyToast from 'react-native-easy-toast';
import { themes } from '../lib/constants';
import sharedStyles from '../views/Styles';
import EventEmitter from '../lib/methods/helpers/events'; import EventEmitter from '../lib/methods/helpers/events';
import { TSupportedThemes, withTheme } from '../theme'; import { useTheme } from '../theme';
import sharedStyles from '../views/Styles';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
toast: { toast: {
@ -21,54 +20,37 @@ const styles = StyleSheet.create({
export const LISTENER = 'Toast'; export const LISTENER = 'Toast';
interface IToastProps { let listener: Function;
theme?: TSupportedThemes; let toast: EasyToast | null | undefined;
}
class Toast extends React.Component<IToastProps, any> { const Toast = (): React.ReactElement => {
private listener?: Function; const { colors } = useTheme();
private toast: EasyToast | null | undefined; useEffect(() => {
listener = EventEmitter.addEventListener(LISTENER, showToast);
return () => {
EventEmitter.removeListener(LISTENER, listener);
};
}, []);
componentDidMount() { const getToastRef = (newToast: EasyToast | null) => (toast = newToast);
this.listener = EventEmitter.addEventListener(LISTENER, this.showToast);
}
shouldComponentUpdate(nextProps: any) { const showToast = ({ message }: { message: string }) => {
const { theme } = this.props; if (toast && toast.show) {
if (nextProps.theme !== theme) { toast.show(message, 1000);
return true;
}
return false;
}
componentWillUnmount() {
if (this.listener) {
EventEmitter.removeListener(LISTENER, this.listener);
}
}
getToastRef = (toast: EasyToast | null) => (this.toast = toast);
showToast = ({ message }: { message: string }) => {
if (this.toast && this.toast.show) {
this.toast.show(message, 1000);
} }
}; };
render() { return (
const { theme } = this.props; <EasyToast
return ( ref={getToastRef}
<EasyToast // @ts-ignore
ref={this.getToastRef} position='center'
// @ts-ignore style={[styles.toast, { backgroundColor: colors.toastBackground }]}
position='center' textStyle={[styles.text, { color: colors.buttonText }]}
style={[styles.toast, { backgroundColor: themes[theme!].toastBackground }]} opacity={0.9}
textStyle={[styles.text, { color: themes[theme!].buttonText }]} />
opacity={0.9} );
/> };
);
}
}
export default withTheme(Toast); export default Toast;