diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js index c8d04e340..a96e515c3 100644 --- a/react/features/base/icons/svg/index.js +++ b/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'; diff --git a/react/features/base/icons/svg/share.svg b/react/features/base/icons/svg/share.svg new file mode 100644 index 000000000..82edd5f6a --- /dev/null +++ b/react/features/base/icons/svg/share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js b/react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js index 7b9500ed8..28e70e6f6 100644 --- a/react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js +++ b/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 { 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 { render() { const { _addPeopleEnabled, - _dialOutEnabled + _dialOutEnabled, + _headerStyles } = this.props; const { inviteItems, selectableItems } = this.state; @@ -206,6 +223,9 @@ class AddPeopleDialog extends AbstractAddPeopleDialog { renderItem = { this._renderItem } /> + + { this._renderShareMeetingButton() } + ); @@ -349,6 +369,22 @@ class AddPeopleDialog extends AbstractAddPeopleDialog { }; } + _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 { ); } + /** + * Renders a button to share the meeting info. + * + * @returns {React#Element<*>} + */ + _renderShareMeetingButton() { + const { _headerStyles } = this.props; + + return ( + + + + ); + } + _setFieldRef: ?TextInput => void /** @@ -567,6 +621,7 @@ class AddPeopleDialog extends AbstractAddPeopleDialog { function _mapStateToProps(state: Object) { return { ..._abstractMapStateToProps(state), + _headerStyles: ColorSchemeRegistry.get(state, 'Header'), _isVisible: state['features/invite'].inviteDialogVisible }; } diff --git a/react/features/invite/components/add-people-dialog/native/styles.js b/react/features/invite/components/add-people-dialog/native/styles.js index 48ea2f32d..c255fecb6 100644 --- a/react/features/invite/components/add-people-dialog/native/styles.js +++ b/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,