diff --git a/app/containers/MessageActions.js b/app/containers/MessageActions.js index a3f7cbd1..68e69889 100644 --- a/app/containers/MessageActions.js +++ b/app/containers/MessageActions.js @@ -21,6 +21,8 @@ import I18n from '../i18n'; import log from '../utils/log'; import Navigation from '../lib/Navigation'; import { getMessageTranslation } from './message/utils'; +import { LISTENER } from './Toast'; +import EventEmitter from '../utils/events'; @connect( state => ({ @@ -48,7 +50,6 @@ export default class MessageActions extends React.Component { actionsHide: PropTypes.func.isRequired, room: PropTypes.object.isRequired, actionMessage: PropTypes.object, - toast: PropTypes.element, user: PropTypes.object, deleteRequest: PropTypes.func.isRequired, editInit: PropTypes.func.isRequired, @@ -275,9 +276,9 @@ export default class MessageActions extends React.Component { } handleCopy = async() => { - const { actionMessage, toast } = this.props; + const { actionMessage } = this.props; await Clipboard.setString(actionMessage.msg); - toast.show(I18n.t('Copied_to_clipboard')); + EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') }); } handleShare = async() => { @@ -294,10 +295,10 @@ export default class MessageActions extends React.Component { } handlePermalink = async() => { - const { actionMessage, toast } = this.props; + const { actionMessage } = this.props; const permalink = await this.getPermalink(actionMessage); Clipboard.setString(permalink); - toast.show(I18n.t('Permalink_copied_to_clipboard')); + EventEmitter.emit(LISTENER, { message: I18n.t('Permalink_copied_to_clipboard') }); } handlePin = () => { diff --git a/app/containers/Toast.js b/app/containers/Toast.js new file mode 100644 index 00000000..90cb6302 --- /dev/null +++ b/app/containers/Toast.js @@ -0,0 +1,53 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import EasyToast from 'react-native-easy-toast'; + +import { COLOR_TOAST, COLOR_WHITE } from '../constants/colors'; +import sharedStyles from '../views/Styles'; +import EventEmitter from '../utils/events'; + +const styles = StyleSheet.create({ + toast: { + backgroundColor: COLOR_TOAST, + maxWidth: 300, + padding: 10 + }, + text: { + ...sharedStyles.textRegular, + color: COLOR_WHITE, + fontSize: 14, + textAlign: 'center' + } +}); + +export const LISTENER = 'Toast'; + +export default class Toast extends React.Component { + componentDidMount() { + EventEmitter.addEventListener(LISTENER, this.showToast); + } + + shouldComponentUpdate() { + return false; + } + + componentWillUnmount() { + EventEmitter.removeListener(LISTENER); + } + + showToast = ({ message }) => { + this.toast.show(message, 1000); + } + + render() { + return ( + this.toast = toast} + position='center' + style={styles.toast} + textStyle={styles.text} + opacity={0.9} + /> + ); + } +} diff --git a/app/index.js b/app/index.js index 5d2b44ba..7b30aa8b 100644 --- a/app/index.js +++ b/app/index.js @@ -16,6 +16,7 @@ import { initializePushNotifications, onNotification } from './notifications/pus import store from './lib/createStore'; import NotificationBadge from './notifications/inApp'; import { defaultHeader, onNavigationStateChange } from './utils/navigation'; +import Toast from './containers/Toast'; useScreens(); @@ -231,6 +232,7 @@ class CustomInsideStack extends React.Component { + ); } diff --git a/app/utils/info.js b/app/utils/info.js index b2612cfb..62564122 100644 --- a/app/utils/info.js +++ b/app/utils/info.js @@ -1,32 +1,3 @@ -import React from 'react'; -import { Alert, StyleSheet } from 'react-native'; -import EasyToast from 'react-native-easy-toast'; +import { Alert } from 'react-native'; -import { COLOR_TOAST, COLOR_WHITE } from '../constants/colors'; -import { isNotch } from './deviceInfo'; -import sharedStyles from '../views/Styles'; - -const styles = StyleSheet.create({ - toast: { - backgroundColor: COLOR_TOAST - }, - text: { - ...sharedStyles.textRegular, - color: COLOR_WHITE, - fontSize: 14 - } -}); - -const positionValue = isNotch ? 230 : 200; - -export const Toast = React.forwardRef((props, ref) => ( - -)); export const showErrorAlert = (message, title, onPress = () => {}) => Alert.alert(title, message, [{ text: 'OK', onPress }], { cancelable: true }); diff --git a/app/views/ProfileView/index.js b/app/views/ProfileView/index.js index 0b11876e..12cae650 100644 --- a/app/views/ProfileView/index.js +++ b/app/views/ProfileView/index.js @@ -13,7 +13,9 @@ import KeyboardView from '../../presentation/KeyboardView'; import sharedStyles from '../Styles'; import styles from './styles'; import scrollPersistTaps from '../../utils/scrollPersistTaps'; -import { showErrorAlert, Toast } from '../../utils/info'; +import { showErrorAlert } from '../../utils/info'; +import { LISTENER } from '../../containers/Toast'; +import EventEmitter from '../../utils/events'; import RocketChat from '../../lib/rocketchat'; import RCTextInput from '../../containers/TextInput'; import log from '../../utils/log'; @@ -222,7 +224,7 @@ export default class ProfileView extends React.Component { setUser({ ...params }); } this.setState({ saving: false, showPasswordAlert: false }); - this.toast.show(I18n.t('Profile_saved_successfully')); + EventEmitter.emit(LISTENER, { message: I18n.t('Profile_saved_successfully') }); this.init(); } } catch (e) { @@ -235,7 +237,7 @@ export default class ProfileView extends React.Component { try { const { user } = this.props; await RocketChat.resetAvatar(user.id); - this.toast.show(I18n.t('Avatar_changed_successfully')); + EventEmitter.emit(LISTENER, { message: I18n.t('Avatar_changed_successfully') }); this.init(); } catch (e) { this.handleError(e, 'resetAvatar', 'changing_avatar'); @@ -386,7 +388,6 @@ export default class ProfileView extends React.Component { keyboardVerticalOffset={128} > - this.toast = toast} /> {I18n.t('DELETE')} - this.toast = toast} /> diff --git a/app/views/RoomMembersView/index.js b/app/views/RoomMembersView/index.js index 52bf0147..55d91bd4 100644 --- a/app/views/RoomMembersView/index.js +++ b/app/views/RoomMembersView/index.js @@ -12,7 +12,8 @@ import UserItem from '../../presentation/UserItem'; import scrollPersistTaps from '../../utils/scrollPersistTaps'; import RocketChat from '../../lib/rocketchat'; import database, { safeAddListener } from '../../lib/realm'; -import { Toast } from '../../utils/info'; +import { LISTENER } from '../../containers/Toast'; +import EventEmitter from '../../utils/events'; import log from '../../utils/log'; import I18n from '../../i18n'; import SearchBox from '../../containers/SearchBox'; @@ -232,7 +233,7 @@ export default class RoomMembersView extends React.Component { const { rid, userLongPressed } = this.state; try { await RocketChat.toggleMuteUserInRoom(rid, userLongPressed.username, !userLongPressed.muted); - this.toast.show(I18n.t('User_has_been_key', { key: userLongPressed.muted ? I18n.t('unmuted') : I18n.t('muted') })); + EventEmitter.emit(LISTENER, { message: I18n.t('User_has_been_key', { key: userLongPressed.muted ? I18n.t('unmuted') : I18n.t('muted') }) }); } catch (e) { log('err_handle_mute', e); } @@ -299,7 +300,6 @@ export default class RoomMembersView extends React.Component { windowSize={10} {...scrollPersistTaps} /> - this.toast = toast} /> ); } diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 1dc669c6..42a9ae9a 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -41,7 +41,7 @@ import debounce from '../../utils/debounce'; import buildMessage from '../../lib/methods/helpers/buildMessage'; import FileModal from '../../containers/FileModal'; import ReactionsModal from '../../containers/ReactionsModal'; -import { Toast } from '../../utils/info'; +import { LISTENER } from '../../containers/Toast'; import { isReadOnly, isBlocked } from '../../utils/room'; @connect(state => ({ @@ -472,7 +472,7 @@ export default class RoomView extends React.Component { toggleFollowThread = async(isFollowingThread) => { try { await RocketChat.toggleFollowMessage(this.tmid, !isFollowingThread); - this.toast.show(isFollowingThread ? 'Unfollowed thread' : 'Following thread'); + EventEmitter.emit(LISTENER, { message: isFollowingThread ? 'Unfollowed thread' : 'Following thread' }); } catch (e) { log('err_toggle_follow_thread', e); } @@ -600,7 +600,7 @@ export default class RoomView extends React.Component { return ( {room._id && showActions - ? + ? : null } {showErrorActions ? : null} @@ -638,7 +638,6 @@ export default class RoomView extends React.Component { user={user} baseUrl={baseUrl} /> - this.toast = toast} /> ); }