Selaa lähdekoodia

rn,invite: add share button to add people dialog

master
Saúl Ibarra Corretgé 5 vuotta sitten
vanhempi
commit
de6c7e0117

+ 1
- 0
react/features/base/icons/svg/index.js Näytä tiedosto

64
 export { default as IconSignalLevel0 } from './signal_cellular_0.svg';
64
 export { default as IconSignalLevel0 } from './signal_cellular_0.svg';
65
 export { default as IconSignalLevel1 } from './signal_cellular_1.svg';
65
 export { default as IconSignalLevel1 } from './signal_cellular_1.svg';
66
 export { default as IconSignalLevel2 } from './signal_cellular_2.svg';
66
 export { default as IconSignalLevel2 } from './signal_cellular_2.svg';
67
+export { default as IconShare } from './share.svg';
67
 export { default as IconShareDesktop } from './share-desktop.svg';
68
 export { default as IconShareDesktop } from './share-desktop.svg';
68
 export { default as IconShareDoc } from './share-doc.svg';
69
 export { default as IconShareDoc } from './share-doc.svg';
69
 export { default as IconShareVideo } from './shared-video.svg';
70
 export { default as IconShareVideo } from './shared-video.svg';

+ 1
- 0
react/features/base/icons/svg/share.svg Näytä tiedosto

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>

+ 57
- 2
react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js Näytä tiedosto

13
     View
13
     View
14
 } from 'react-native';
14
 } from 'react-native';
15
 
15
 
16
+import { ColorSchemeRegistry } from '../../../../base/color-scheme';
16
 import { AlertDialog, openDialog } from '../../../../base/dialog';
17
 import { AlertDialog, openDialog } from '../../../../base/dialog';
17
 import { translate } from '../../../../base/i18n';
18
 import { translate } from '../../../../base/i18n';
18
-import { Icon, IconCancelSelection, IconCheck, IconClose, IconPhone, IconSearch } from '../../../../base/icons';
19
+import {
20
+    Icon,
21
+    IconCancelSelection,
22
+    IconCheck,
23
+    IconClose,
24
+    IconPhone,
25
+    IconSearch,
26
+    IconShare
27
+} from '../../../../base/icons';
19
 import {
28
 import {
20
     AvatarListItem,
29
     AvatarListItem,
21
     HeaderWithNavigation,
30
     HeaderWithNavigation,
23
     type Item
32
     type Item
24
 } from '../../../../base/react';
33
 } from '../../../../base/react';
25
 import { connect } from '../../../../base/redux';
34
 import { connect } from '../../../../base/redux';
35
+import { beginShareRoom } from '../../../../share-room';
26
 
36
 
27
 import { setAddPeopleDialogVisible } from '../../../actions.native';
37
 import { setAddPeopleDialogVisible } from '../../../actions.native';
28
 
38
 
39
 
49
 
40
 type Props = AbstractProps & {
50
 type Props = AbstractProps & {
41
 
51
 
52
+    /**
53
+     * The color schemed style of the Header.
54
+     */
55
+    _headerStyles: Object,
56
+
42
     /**
57
     /**
43
      * True if the invite dialog should be open, false otherwise.
58
      * True if the invite dialog should be open, false otherwise.
44
      */
59
      */
113
         this._onCloseAddPeopleDialog = this._onCloseAddPeopleDialog.bind(this);
128
         this._onCloseAddPeopleDialog = this._onCloseAddPeopleDialog.bind(this);
114
         this._onInvite = this._onInvite.bind(this);
129
         this._onInvite = this._onInvite.bind(this);
115
         this._onPressItem = this._onPressItem.bind(this);
130
         this._onPressItem = this._onPressItem.bind(this);
131
+        this._onShareMeeting = this._onShareMeeting.bind(this);
116
         this._onTypeQuery = this._onTypeQuery.bind(this);
132
         this._onTypeQuery = this._onTypeQuery.bind(this);
117
         this._setFieldRef = this._setFieldRef.bind(this);
133
         this._setFieldRef = this._setFieldRef.bind(this);
118
     }
134
     }
137
     render() {
153
     render() {
138
         const {
154
         const {
139
             _addPeopleEnabled,
155
             _addPeopleEnabled,
140
-            _dialOutEnabled
156
+            _dialOutEnabled,
157
+            _headerStyles
141
         } = this.props;
158
         } = this.props;
142
         const { inviteItems, selectableItems } = this.state;
159
         const { inviteItems, selectableItems } = this.state;
143
 
160
 
206
                                 renderItem = { this._renderItem } />
223
                                 renderItem = { this._renderItem } />
207
                         </View>
224
                         </View>
208
                     </SafeAreaView>
225
                     </SafeAreaView>
226
+                    <SafeAreaView style = { [ styles.bottomBar, _headerStyles.headerOverlay ] }>
227
+                        { this._renderShareMeetingButton() }
228
+                    </SafeAreaView>
209
                 </KeyboardAvoidingView>
229
                 </KeyboardAvoidingView>
210
             </SlidingView>
230
             </SlidingView>
211
         );
231
         );
349
         };
369
         };
350
     }
370
     }
351
 
371
 
372
+    _onShareMeeting: () => void
373
+
374
+    /**
375
+     * Shows the system share sheet to share the meeting information.
376
+     *
377
+     * @returns {void}
378
+     */
379
+    _onShareMeeting() {
380
+        if (this.state.inviteItems.length > 0) {
381
+            // The use probably intended to invite people.
382
+            this._onInvite();
383
+        } else {
384
+            this.props.dispatch(beginShareRoom());
385
+        }
386
+    }
387
+
352
     _onTypeQuery: string => void
388
     _onTypeQuery: string => void
353
 
389
 
354
     /**
390
     /**
526
         );
562
         );
527
     }
563
     }
528
 
564
 
565
+    /**
566
+     * Renders a button to share the meeting info.
567
+     *
568
+     * @returns {React#Element<*>}
569
+     */
570
+    _renderShareMeetingButton() {
571
+        const { _headerStyles } = this.props;
572
+
573
+        return (
574
+            <TouchableOpacity
575
+                onPress = { this._onShareMeeting }>
576
+                <Icon
577
+                    src = { IconShare }
578
+                    style = { [ _headerStyles.headerButtonText, styles.shareIcon ] } />
579
+            </TouchableOpacity>
580
+        );
581
+    }
582
+
529
     _setFieldRef: ?TextInput => void
583
     _setFieldRef: ?TextInput => void
530
 
584
 
531
     /**
585
     /**
567
 function _mapStateToProps(state: Object) {
621
 function _mapStateToProps(state: Object) {
568
     return {
622
     return {
569
         ..._abstractMapStateToProps(state),
623
         ..._abstractMapStateToProps(state),
624
+        _headerStyles: ColorSchemeRegistry.get(state, 'Header'),
570
         _isVisible: state['features/invite'].inviteDialogVisible
625
         _isVisible: state['features/invite'].inviteDialogVisible
571
     };
626
     };
572
 }
627
 }

+ 10
- 0
react/features/invite/components/add-people-dialog/native/styles.js Näytä tiedosto

23
         flex: 1
23
         flex: 1
24
     },
24
     },
25
 
25
 
26
+    bottomBar: {
27
+        alignItems: 'center',
28
+        flexDirection: 'row',
29
+        justifyContent: 'space-around'
30
+    },
31
+
26
     clearButton: {
32
     clearButton: {
27
         alignItems: 'center',
33
         alignItems: 'center',
28
         justifyContent: 'center',
34
         justifyContent: 'center',
124
         width: ICON_SIZE + 16
130
         width: ICON_SIZE + 16
125
     },
131
     },
126
 
132
 
133
+    shareIcon: {
134
+        fontSize: 42
135
+    },
136
+
127
     unselectIcon: {
137
     unselectIcon: {
128
         color: LIGHT_GREY,
138
         color: LIGHT_GREY,
129
         fontSize: 16,
139
         fontSize: 16,

Loading…
Peruuta
Tallenna