ref: SharedDocument to JitsiModal

react/features/etherpad/components/native/SharedDocument.js

@@ -1,16 +1,18 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import { SafeAreaView, View } from 'react-native';
+import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import type { Dispatch } from 'redux';
 
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { translate } from '../../../base/i18n';
-import { HeaderWithNavigation, LoadingIndicator, SlidingView } from '../../../base/react';
+import { JitsiModal } from '../../../base/modal';
+import { LoadingIndicator } from '../../../base/react';
 import { connect } from '../../../base/redux';
 
 import { toggleDocument } from '../../actions';
+import { SHARE_DOCUMENT_VIEW_ID } from '../../constants';
 import { getSharedDocumentUrl } from '../../functions';
 
 import styles, { INDICATOR_COLOR } from './styles';
@@ -69,42 +71,24 @@ class SharedDocument extends PureComponent<Props> {
      * @inheritdoc
      */
     render() {
-        const { _documentUrl, _isOpen } = this.props;
-        const webViewStyles = this._getWebViewStyles();
+        const { _documentUrl } = this.props;
 
         return (
-            <SlidingView
-                onHide = { this._onClose }
-                position = 'bottom'
-                show = { _isOpen } >
-                <View style = { styles.webViewWrapper }>
-                    <HeaderWithNavigation
-                        headerLabelKey = 'documentSharing.title'
-                        onPressBack = { this._onClose } />
-                    <SafeAreaView style = { webViewStyles }>
-                        <WebView
-                            onError = { this._onError }
-                            renderLoading = { this._renderLoading }
-                            source = {{ uri: _documentUrl }}
-                            startInLoadingState = { true } />
-                    </SafeAreaView>
-                </View>
-            </SlidingView>
+            <JitsiModal
+                headerProps = {{
+                    headerLabelKey: 'documentSharing.title'
+                }}
+                modalId = { SHARE_DOCUMENT_VIEW_ID }
+                style = { styles.webView }>
+                <WebView
+                    onError = { this._onError }
+                    renderLoading = { this._renderLoading }
+                    source = {{ uri: _documentUrl }}
+                    startInLoadingState = { true } />
+            </JitsiModal>
         );
     }
 
-    /**
-     * Computes the styles required for the WebView component.
-     *
-     * @returns {Object}
-     */
-    _getWebViewStyles() {
-        return {
-            ...styles.webView,
-            backgroundColor: this.props._headerStyles.screenHeader.backgroundColor
-        };
-    }
-
     _onClose: () => boolean
 
     /**

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

@@ -14,11 +14,6 @@ export default {
     },
 
     webView: {
-        flex: 1
-    },
-
-    webViewWrapper: {
-        flex: 1,
-        flexDirection: 'column'
+        backgroundColor: 'rgb(242, 242, 242)'
     }
 };

react/features/etherpad/constants.js

@@ -0,0 +1,4 @@
+/**
+ * Modal view ID of the SharedDocument view.
+ */
+export const SHARE_DOCUMENT_VIEW_ID = 'SHARE_DOCUMENT_VIEW_ID';

react/features/etherpad/index.js

@@ -1,6 +1,7 @@
 export * from './actions';
 export * from './actionTypes';
 export * from './components';
+export * from './constants';
 export * from './functions';
 
 import './middleware';

react/features/etherpad/middleware.js

@@ -1,11 +1,13 @@
 // @flow
 
 import { getCurrentConference } from '../base/conference';
+import { setActiveModalId } from '../base/modal';
 import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
 import UIEvents from '../../../service/UI/UIEvents';
 
 import { TOGGLE_DOCUMENT_EDITING } from './actionTypes';
 import { setDocumentEditingState, setDocumentUrl } from './actions';
+import { SHARE_DOCUMENT_VIEW_ID } from './constants';
 
 declare var APP: Object;
 
@@ -23,9 +25,15 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
     switch (action.type) {
     case TOGGLE_DOCUMENT_EDITING: {
         if (typeof APP === 'undefined') {
-            const { editing } = getState()['features/etherpad'];
+            const editing = !getState()['features/etherpad'].editing;
 
-            dispatch(setDocumentEditingState(!editing));
+            dispatch(setDocumentEditingState(editing));
+
+            if (editing) {
+                dispatch(setActiveModalId(SHARE_DOCUMENT_VIEW_ID));
+            } else if (getState()['features/base/modal'].activeModalId === SHARE_DOCUMENT_VIEW_ID) {
+                dispatch(setActiveModalId(undefined));
+            }
         } else {
             APP.UI.emitEvent(UIEvents.ETHERPAD_CLICKED);
         }