ref: change Chat to JitsiModal

react/features/chat/components/native/Chat.js

@@ -1,18 +1,18 @@
 // @flow
 
 import React from 'react';
-import { KeyboardAvoidingView, SafeAreaView } from 'react-native';
+import { KeyboardAvoidingView } from 'react-native';
 
-import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { translate } from '../../../base/i18n';
-import { HeaderWithNavigation, SlidingView } from '../../../base/react';
+import { JitsiModal } from '../../../base/modal';
 import { connect } from '../../../base/redux';
-import { StyleType } from '../../../base/styles';
+
+import { CHAT_VIEW_MODAL_ID } from '../../constants';
 
 import AbstractChat, {
     _mapDispatchToProps,
-    _mapStateToProps as _abstractMapStateToProps,
+    _mapStateToProps,
-    type Props as AbstractProps
+    type Props
 } from '../AbstractChat';
 
 import ChatInputBar from './ChatInputBar';
@@ -20,88 +20,31 @@ import MessageContainer from './MessageContainer';
 import MessageRecipient from './MessageRecipient';
 import styles from './styles';
 
-type Props = AbstractProps & {
-
-    /**
-     * The color-schemed stylesheet of the feature.
-     */
-    _styles: StyleType
-};
-
 /**
  * Implements a React native component that renders the chat window (modal) of
  * the mobile client.
  */
 class Chat extends AbstractChat<Props> {
-    /**
-     * Instantiates a new instance.
-     *
-     * @inheritdoc
-     */
-    constructor(props: Props) {
-        super(props);
-
-        this._onClose = this._onClose.bind(this);
-    }
-
     /**
      * Implements React's {@link Component#render()}.
      *
      * @inheritdoc
      */
     render() {
-        const { _styles } = this.props;
-
         return (
-            <SlidingView
+            <JitsiModal
-                onHide = { this._onClose }
+                headerLabelKey = 'chat.title'
-                position = 'bottom'
+                modalId = { CHAT_VIEW_MODAL_ID }>
-                show = { this.props._isOpen } >
                 <KeyboardAvoidingView
                     behavior = 'padding'
                     style = { styles.chatContainer }>
-                    <HeaderWithNavigation
+                    <MessageContainer messages = { this.props._messages } />
-                        headerLabelKey = 'chat.title'
+                    <MessageRecipient />
-                        onPressBack = { this._onClose } />
+                    <ChatInputBar onSend = { this.props._onSendMessage } />
-                    <SafeAreaView style = { _styles.backdrop }>
-                        <MessageContainer messages = { this.props._messages } />
-                        <MessageRecipient />
-                        <ChatInputBar onSend = { this.props._onSendMessage } />
-                    </SafeAreaView>
                 </KeyboardAvoidingView>
-            </SlidingView>
+            </JitsiModal>
         );
     }
-
-    _onClose: () => boolean
-
-    /**
-     * Closes the chat window.
-     *
-     * @returns {boolean}
-     */
-    _onClose() {
-        if (this.props._isOpen) {
-            this.props._onToggleChat();
-
-            return true;
-        }
-
-        return false;
-    }
-}
-
-/**
- * Maps part of the redux state to the props of this component.
- *
- * @param {Object} state - The Redux state.
- * @returns {Props}
- */
-function _mapStateToProps(state) {
-    return {
-        ..._abstractMapStateToProps(state),
-        _styles: ColorSchemeRegistry.get(state, 'Chat')
-    };
 }
 
 export default translate(connect(_mapStateToProps, _mapDispatchToProps)(Chat));

react/features/chat/components/native/ChatButton.js

@@ -1,6 +1,7 @@
 // @flow
 
 import { IconChat, IconChatUnread } from '../../../base/icons';
+import { setActiveModalId } from '../../../base/modal';
 import { getLocalParticipant } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import {
@@ -9,7 +10,7 @@ import {
 } from '../../../base/toolbox';
 import { openDisplayNamePrompt } from '../../../display-name';
 
-import { toggleChat } from '../../actions';
+import { CHAT_VIEW_MODAL_ID } from '../../constants';
 import { getUnreadCount } from '../../functions';
 
 type Props = AbstractButtonProps & {
@@ -93,7 +94,7 @@ function _mapDispatchToProps(dispatch: Function) {
          * @returns {void}
          */
         _displayChat() {
-            dispatch(toggleChat());
+            dispatch(setActiveModalId(CHAT_VIEW_MODAL_ID));
         },
 
         /**

react/features/chat/components/native/ChatInputBar.js

@@ -5,7 +5,6 @@ import { TextInput, TouchableOpacity, View } from 'react-native';
 
 import { translate } from '../../../base/i18n';
 import { Icon, IconChatSend } from '../../../base/icons';
-import { Platform } from '../../../base/react';
 
 import styles from './styles';
 
@@ -136,7 +135,7 @@ class ChatInputBar extends Component<Props, State> {
      */
     _onFocused(focused) {
         return () => {
-            Platform.OS === 'android' && this.setState({
+            this.setState({
                 addPadding: focused
             });
         };

react/features/chat/constants.js

@@ -1,5 +1,7 @@
 // @flow
 
+export const CHAT_VIEW_MODAL_ID = 'chatView';
+
 /**
  * The audio ID of the audio element for which the {@link playAudio} action is
  * triggered when new chat message is received.

react/features/chat/reducer.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { SET_ACTIVE_MODAL_ID } from '../base/modal';
 import { ReducerRegistry } from '../base/redux';
 
 import {
@@ -8,6 +9,7 @@ import {
     SET_PRIVATE_MESSAGE_RECIPIENT,
     TOGGLE_CHAT
 } from './actionTypes';
+import { CHAT_VIEW_MODAL_ID } from './constants';
 
 const DEFAULT_STATE = {
     isOpen: false,
@@ -56,6 +58,12 @@ ReducerRegistry.register('features/chat', (state = DEFAULT_STATE, action) => {
             messages: []
         };
 
+    case SET_ACTIVE_MODAL_ID:
+        if (action.activeModalId === CHAT_VIEW_MODAL_ID) {
+            return updateChatState(state);
+        }
+
+        break;
     case SET_PRIVATE_MESSAGE_RECIPIENT:
         return {
             ...state,
@@ -64,14 +72,24 @@ ReducerRegistry.register('features/chat', (state = DEFAULT_STATE, action) => {
         };
 
     case TOGGLE_CHAT:
-        return {
+        return updateChatState(state);
-            ...state,
-            isOpen: !state.isOpen,
-            lastReadMessage: state.messages[
-                navigator.product === 'ReactNative' ? 0 : state.messages.length - 1],
-            privateMessageRecipient: state.isOpen ? undefined : state.privateMessageRecipient
-        };
     }
 
     return state;
 });
+
+/**
+ * Updates the chat status on opening the chat view.
+ *
+ * @param {Object} state - The Redux state of the feature.
+ * @returns {Object}
+ */
+function updateChatState(state) {
+    return {
+        ...state,
+        isOpen: !state.isOpen,
+        lastReadMessage: state.messages[
+            navigator.product === 'ReactNative' ? 0 : state.messages.length - 1],
+        privateMessageRecipient: state.isOpen ? undefined : state.privateMessageRecipient
+    };
+}