rn,invite: add share button to add people dialog

react/features/base/icons/svg/index.js

@@ -64,6 +64,7 @@ export { default as IconSettings } from './settings.svg';
 export { default as IconSignalLevel0 } from './signal_cellular_0.svg';
 export { default as IconSignalLevel1 } from './signal_cellular_1.svg';
 export { default as IconSignalLevel2 } from './signal_cellular_2.svg';
+export { default as IconShare } from './share.svg';
 export { default as IconShareDesktop } from './share-desktop.svg';
 export { default as IconShareDoc } from './share-doc.svg';
 export { default as IconShareVideo } from './shared-video.svg';

react/features/base/icons/svg/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><path d="M30.3 13.7L25 8.4l-5.3 5.3-1.4-1.4L25 5.6l6.7 6.7z"/><path d="M24 7h2v21h-2z"/><path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z"/></svg>

react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js

@@ -13,9 +13,18 @@ import {
     View
 } from 'react-native';
 
+import { ColorSchemeRegistry } from '../../../../base/color-scheme';
 import { AlertDialog, openDialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
-import { Icon, IconCancelSelection, IconCheck, IconClose, IconPhone, IconSearch } from '../../../../base/icons';
+import {
+    Icon,
+    IconCancelSelection,
+    IconCheck,
+    IconClose,
+    IconPhone,
+    IconSearch,
+    IconShare
+} from '../../../../base/icons';
 import {
     AvatarListItem,
     HeaderWithNavigation,
@@ -23,6 +32,7 @@ import {
     type Item
 } from '../../../../base/react';
 import { connect } from '../../../../base/redux';
+import { beginShareRoom } from '../../../../share-room';
 
 import { setAddPeopleDialogVisible } from '../../../actions.native';
 
@@ -39,6 +49,11 @@ import styles, {
 
 type Props = AbstractProps & {
 
+    /**
+     * The color schemed style of the Header.
+     */
+    _headerStyles: Object,
+
     /**
      * True if the invite dialog should be open, false otherwise.
      */
@@ -113,6 +128,7 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
         this._onCloseAddPeopleDialog = this._onCloseAddPeopleDialog.bind(this);
         this._onInvite = this._onInvite.bind(this);
         this._onPressItem = this._onPressItem.bind(this);
+        this._onShareMeeting = this._onShareMeeting.bind(this);
         this._onTypeQuery = this._onTypeQuery.bind(this);
         this._setFieldRef = this._setFieldRef.bind(this);
     }
@@ -137,7 +153,8 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
     render() {
         const {
             _addPeopleEnabled,
-            _dialOutEnabled
+            _dialOutEnabled,
+            _headerStyles
         } = this.props;
         const { inviteItems, selectableItems } = this.state;
 
@@ -206,6 +223,9 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
                                 renderItem = { this._renderItem } />
                         </View>
                     </SafeAreaView>
+                    <SafeAreaView style = { [ styles.bottomBar, _headerStyles.headerOverlay ] }>
+                        { this._renderShareMeetingButton() }
+                    </SafeAreaView>
                 </KeyboardAvoidingView>
             </SlidingView>
         );
@@ -349,6 +369,22 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
         };
     }
 
+    _onShareMeeting: () => void
+
+    /**
+     * Shows the system share sheet to share the meeting information.
+     *
+     * @returns {void}
+     */
+    _onShareMeeting() {
+        if (this.state.inviteItems.length > 0) {
+            // The use probably intended to invite people.
+            this._onInvite();
+        } else {
+            this.props.dispatch(beginShareRoom());
+        }
+    }
+
     _onTypeQuery: string => void
 
     /**
@@ -526,6 +562,24 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
         );
     }
 
+    /**
+     * Renders a button to share the meeting info.
+     *
+     * @returns {React#Element<*>}
+     */
+    _renderShareMeetingButton() {
+        const { _headerStyles } = this.props;
+
+        return (
+            <TouchableOpacity
+                onPress = { this._onShareMeeting }>
+                <Icon
+                    src = { IconShare }
+                    style = { [ _headerStyles.headerButtonText, styles.shareIcon ] } />
+            </TouchableOpacity>
+        );
+    }
+
     _setFieldRef: ?TextInput => void
 
     /**
@@ -567,6 +621,7 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
 function _mapStateToProps(state: Object) {
     return {
         ..._abstractMapStateToProps(state),
+        _headerStyles: ColorSchemeRegistry.get(state, 'Header'),
         _isVisible: state['features/invite'].inviteDialogVisible
     };
 }

react/features/invite/components/add-people-dialog/native/styles.js

@@ -23,6 +23,12 @@ export default {
         flex: 1
     },
 
+    bottomBar: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'space-around'
+    },
+
     clearButton: {
         alignItems: 'center',
         justifyContent: 'center',
@@ -124,6 +130,10 @@ export default {
         width: ICON_SIZE + 16
     },
 
+    shareIcon: {
+        fontSize: 42
+    },
+
     unselectIcon: {
         color: LIGHT_GREY,
         fontSize: 16,