diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 2f3150d94..dacdbd39f 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -1,8 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Text, View, InteractionManager } from 'react-native'; +import { ScrollView, BorderlessButton } from 'react-native-gesture-handler'; import { connect } from 'react-redux'; import { SafeAreaView } from 'react-navigation'; +import Modal from 'react-native-modal'; import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord'; import moment from 'moment'; @@ -51,6 +53,7 @@ import { Review } from '../../utils/review'; import RoomClass from '../../lib/methods/subscriptions/room'; import { getUserSelector } from '../../selectors/login'; import { CONTAINER_TYPES } from '../../lib/methods/actions'; +import Markdown from '../../containers/markdown'; const stateAttrsUpdate = [ 'joined', @@ -62,9 +65,10 @@ const stateAttrsUpdate = [ 'loading', 'editing', 'replying', - 'reacting' + 'reacting', + 'showAnnouncementModal' ]; -const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout']; +const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout', 'announcement']; class RoomView extends React.Component { static navigationOptions = ({ navigation, screenProps }) => { @@ -173,7 +177,9 @@ class RoomView extends React.Component { editing: false, replying: !!selectedMessage, replyWithMention: false, - reacting: false + reacting: false, + showAnnouncementModal: false, + announcement: null }; if (room && room.observe) { @@ -184,7 +190,6 @@ class RoomView extends React.Component { this.messagebox = React.createRef(); this.list = React.createRef(); - this.willBlurListener = props.navigation.addListener('willBlur', () => this.mounted = false); this.mounted = false; this.sub = new RoomClass(this.rid); console.timeEnd(`${ this.constructor.name } init`); @@ -783,6 +788,56 @@ class RoomView extends React.Component { return message; } + toggleAnnouncementModal = (showModal) => { + this.setState({ showAnnouncementModal: showModal }); + } + + renderAnnouncement = () => { + const { theme } = this.props; + const { room } = this.state; + if (room.announcement) { + return ( + this.toggleAnnouncementModal(true)}> + + + ); + } else { + return null; + } + } + + renderAnnouncementModal = () => { + const { room, showAnnouncementModal } = this.state; + const { theme } = this.props; + return ( + this.toggleAnnouncementModal(false)} + onBackButtonPress={() => this.toggleAnnouncementModal(false)} + useNativeDriver + isVisible={showAnnouncementModal} + animationIn='fadeIn' + animationOut='fadeOut' + > + + {I18n.t('Announcement')} + + + + + + ); + } + renderFooter = () => { const { joined, room, selectedMessage, editing, replying, replyWithMention @@ -902,6 +957,7 @@ class RoomView extends React.Component { forceInset={{ vertical: 'never' }} > + {this.renderAnnouncement()} + {this.renderAnnouncementModal()} {this.renderFooter()} {this.renderActions()}