ref: change JitsiModal to better fit to needs

react/features/app/components/AbstractApp.js

@@ -89,22 +89,10 @@ export class AbstractApp extends BaseApp<Props, *> {
         return (
             <Fragment>
                 <OverlayContainer />
-                { this._createExtraPlatformSpecificElement() }
             </Fragment>
         );
     }
 
-    /**
-     * Renders platform specific extra elements to be added alongside with the main element, if need be.
-     *
-     * NOTE: Overridden by child components.
-     *
-     * @returns {React$Element}
-     */
-    _createExtraPlatformSpecificElement() {
-        return null;
-    }
-
     _createMainElement: (React$Element<*>, Object) => ?React$Element<*>;
 
     /**

react/features/app/components/App.native.js

@@ -12,7 +12,6 @@ import { Platform } from '../../base/react';
 import '../../base/responsive-ui';
 import { updateSettings } from '../../base/settings';
 import '../../google-api';
-import { HelpView } from '../../help';
 import '../../mobile/audio-mode';
 import '../../mobile/back-button';
 import '../../mobile/background';
@@ -108,17 +107,6 @@ export class App extends AbstractApp {
         });
     }
 
-    /**
-     * Renders platform specific extra elements to be added alongside with the main element, if need be.
-     *
-     * @inheritdoc
-     */
-    _createExtraPlatformSpecificElement() {
-        return (
-            <HelpView />
-        );
-    }
-
     /**
      * Attempts to disable the use of React Native
      * {@link ExceptionsManager#handleException} on platforms and in

react/features/base/modal/actions.js

@@ -6,14 +6,16 @@ import { SET_ACTIVE_MODAL_ID } from './actionTypes';
  * Action to set the ID of the active modal (or undefined if needs to be hidden).
  *
  * @param {string} activeModalId - The new modal ID or undefined.
+ * @param {Object} modalProps - The props to pass to the modal.
  * @returns {{
  *     activeModalId: string,
  *     type: SET_ACTIVE_MODAL_ID
  * }}
  */
-export function setActiveModalId(activeModalId: ?string) {
+export function setActiveModalId(activeModalId: ?string, modalProps: Object = {}) {
     return {
         activeModalId,
+        modalProps,
         type: SET_ACTIVE_MODAL_ID
     };
 }

react/features/base/modal/components/JitsiModal.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import { SafeAreaView, View } from 'react-native';
+import { KeyboardAvoidingView, SafeAreaView } from 'react-native';
 
 import { ColorSchemeRegistry } from '../../color-scheme';
 import { HeaderWithNavigation, SlidingView } from '../../react';
@@ -40,9 +40,16 @@ type Props = {
     dispatch: Function,
 
     /**
-     * The i18n label key of the header title.
+     * Optional function that renders a footer component, if needed.
      */
-    headerLabelKey: string,
+    footerComponent?: Function,
+
+    /**
+     * Props to be passed over to the header.
+     *
+     * See {@code HeaderWithNavigation} for more details.
+     */
+    headerProps: Object,
 
     /**
      * The ID of the modal that is being rendered. This is used to show/hide the modal.
@@ -58,7 +65,12 @@ type Props = {
      * The position from where the modal should be opened. This is derived from the
      * props of the {@code SlidingView} with the same name.
      */
-    position?: string
+    position?: string,
+
+    /**
+     * Additional style to be appended to the View containing the content of the modal.
+     */
+    style?: StyleType
 };
 
 /**
@@ -87,25 +99,28 @@ class JitsiModal extends PureComponent<Props> {
      * @inheritdoc
      */
     render() {
-        const { _headerStyles, _show, _styles, children, headerLabelKey, position } = this.props;
+        const { _headerStyles, _show, _styles, children, footerComponent, headerProps, position, style } = this.props;
 
         return (
             <SlidingView
                 onHide = { this._onRequestClose }
                 position = { position }
                 show = { _show }>
-                <View
+                <KeyboardAvoidingView
+                    behavior = 'padding'
                     style = { [
                         _headerStyles.page,
-                        _styles.page
+                        _styles.page,
+                        style
                     ] }>
                     <HeaderWithNavigation
-                        headerLabelKey = { headerLabelKey }
+                        { ...headerProps }
                         onPressBack = { this._onRequestClose } />
                     <SafeAreaView style = { styles.safeArea }>
                         { children }
                     </SafeAreaView>
-                </View>
+                    { footerComponent && footerComponent() }
+                </KeyboardAvoidingView>
             </SlidingView>
         );
     }
@@ -119,14 +134,15 @@ class JitsiModal extends PureComponent<Props> {
      */
     _onRequestClose() {
         const { _show, dispatch, onClose } = this.props;
+        let shouldCloseModal = true;
 
         if (_show) {
             if (typeof onClose === 'function') {
-                onClose();
+                shouldCloseModal = onClose();
             }
-            dispatch(setActiveModalId());
+            shouldCloseModal && dispatch(setActiveModalId());
 
-            return true;
+            return shouldCloseModal;
         }
 
         return false;

react/features/base/modal/components/styles.js

@@ -10,6 +10,7 @@ export default {
 
 ColorSchemeRegistry.register('Modal', {
     page: {
+        alignItems: 'stretch',
         backgroundColor: schemeColor('background')
     }
 });

react/features/base/modal/reducer.js

@@ -9,7 +9,8 @@ ReducerRegistry.register('features/base/modal', (state = {}, action) => {
     case SET_ACTIVE_MODAL_ID:
         return {
             ...state,
-            activeModalId: action.activeModalId
+            activeModalId: action.activeModalId,
+            modalProps: action.modalProps
         };
     }
 

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

@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react';
-import { KeyboardAvoidingView } from 'react-native';
 
 import { translate } from '../../../base/i18n';
 import { JitsiModal } from '../../../base/modal';
@@ -18,7 +17,6 @@ import AbstractChat, {
 import ChatInputBar from './ChatInputBar';
 import MessageContainer from './MessageContainer';
 import MessageRecipient from './MessageRecipient';
-import styles from './styles';
 
 /**
  * Implements a React native component that renders the chat window (modal) of
@@ -33,15 +31,13 @@ class Chat extends AbstractChat<Props> {
     render() {
         return (
             <JitsiModal
-                headerLabelKey = 'chat.title'
+                headerProps = {{
+                    headerLabelKey: 'chat.title'
+                }}
                 modalId = { CHAT_VIEW_MODAL_ID }>
-                <KeyboardAvoidingView
-                    behavior = 'padding'
-                    style = { styles.chatContainer }>
                 <MessageContainer messages = { this.props._messages } />
                 <MessageRecipient />
                 <ChatInputBar onSend = { this.props._onSendMessage } />
-                </KeyboardAvoidingView>
             </JitsiModal>
         );
     }

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

@@ -23,12 +23,6 @@ export default {
         width: 32
     },
 
-    chatContainer: {
-        alignItems: 'stretch',
-        flex: 1,
-        flexDirection: 'column'
-    },
-
     chatLink: {
         color: ColorPalette.blue
     },

react/features/conference/components/native/Conference.js

@@ -213,6 +213,19 @@ class Conference extends AbstractConference<Props, *> {
         return true;
     }
 
+    /**
+     * Renders JitsiModals that are supposed to be on the conference screen.
+     *
+     * @returns {Array<ReactElement>}
+     */
+    _renderConferenceModals() {
+        return [
+            <AddPeopleDialog key = 'addPeopleDialog' />,
+            <Chat key = 'chat' />,
+            <SharedDocument key = 'sharedDocument' />
+        ];
+    }
+
     /**
      * Renders the conference notification badge if the feature is enabled.
      *
@@ -252,10 +265,6 @@ class Conference extends AbstractConference<Props, *> {
 
         return (
             <>
-                <AddPeopleDialog />
-                <Chat />
-                <SharedDocument />
-
                 {/*
                   * The LargeVideo is the lowermost stacking layer.
                   */
@@ -335,6 +344,8 @@ class Conference extends AbstractConference<Props, *> {
                 <TestConnectionInfo />
 
                 { this._renderConferenceNotification() }
+
+                { this._renderConferenceModals() }
             </>
         );
     }

react/features/conference/middleware.js

@@ -10,6 +10,7 @@ import {
     setPreferredReceiverVideoQuality
 } from '../base/conference';
 import { hideDialog, isDialogOpen } from '../base/dialog';
+import { setActiveModalId } from '../base/modal';
 import { pinParticipant } from '../base/participants';
 import { SET_REDUCED_UI } from '../base/responsive-ui';
 import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
@@ -84,5 +85,8 @@ StateListenerRegistry.register(
                 // dialog we might have open.
                 dispatch(hideDialog());
             }
+
+            // We want to close all modals.
+            dispatch(setActiveModalId());
         }
     });

react/features/help/components/HelpView.js

@@ -31,7 +31,9 @@ class HelpView extends PureComponent<Props> {
     render() {
         return (
             <JitsiModal
-                headerLabelKey = 'helpView.header'
+                headerProps = {{
+                    headerLabelKey: 'helpView.header'
+                }}
                 modalId = { HELP_VIEW_MODAL_ID }>
                 <WebView source = {{ uri: this.props._url }} />
             </JitsiModal>

react/features/welcome/components/WelcomePage.native.js

@@ -22,6 +22,7 @@ import {
     createDesiredLocalTracks,
     destroyLocalTracks
 } from '../../base/tracks';
+import { HelpView } from '../../help';
 import { DialInSummary } from '../../invite';
 import { SettingsView } from '../../settings';
 
@@ -288,10 +289,9 @@ class WelcomePage extends AbstractWelcomePage {
                         </View>
                     </SafeAreaView>
                     <WelcomePageLists disabled = { this.state._fieldFocused } />
-                    <SettingsView />
-                    <DialInSummary />
                 </View>
                 <WelcomePageSideBar />
+                { this._renderWelcomePageModals() }
             </LocalVideoTrackUnderlay>
         );
     }
@@ -312,6 +312,19 @@ class WelcomePage extends AbstractWelcomePage {
             </View>
         );
     }
+
+    /**
+     * Renders JitsiModals that are supposed to be on the welcome page.
+     *
+     * @returns {Array<ReactElement>}
+     */
+    _renderWelcomePageModals() {
+        return [
+            <HelpView key = 'helpView' />,
+            <DialInSummary key = 'dialInSummary' />,
+            <SettingsView key = 'settings' />
+        ];
+    }
 }
 
 /**