/
OverflowMenu.js
136 lines (118 loc) · 3.84 KB
/
OverflowMenu.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
// @flow
import React, { Component } from 'react';
import { Platform } from 'react-native';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
import {
BottomSheet,
hideDialog
} from '../../../base/dialog';
import { connect } from '../../../base/redux';
import { StyleType } from '../../../base/styles';
import { InfoDialogButton, InviteButton } from '../../../invite';
import { AudioRouteButton } from '../../../mobile/audio-mode';
import { LiveStreamButton, RecordButton } from '../../../recording';
import { RoomLockButton } from '../../../room-lock';
import { ClosedCaptionButton } from '../../../subtitles';
import { TileViewButton } from '../../../video-layout';
import AudioOnlyButton from './AudioOnlyButton';
import RaiseHandButton from './RaiseHandButton';
import ToggleCameraButton from './ToggleCameraButton';
declare var __DEV__;
/**
* The type of the React {@code Component} props of {@link OverflowMenu}.
*/
type Props = {
/**
* The color-schemed stylesheet of the dialog feature.
*/
_bottomSheetStyles: StyleType,
/**
* Used for hiding the dialog when the selection was completed.
*/
dispatch: Function
};
/**
* The exported React {@code Component}. We need it to execute
* {@link hideDialog}.
*
* XXX It does not break our coding style rule to not utilize globals for state,
* because it is merely another name for {@code export}'s {@code default}.
*/
let OverflowMenu_; // eslint-disable-line prefer-const
/**
* Implements a React {@code Component} with some extra actions in addition to
* those in the toolbar.
*/
class OverflowMenu extends Component<Props> {
/**
* Initializes a new {@code OverflowMenu} instance.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
// Bind event handlers so they are only bound once per instance.
this._onCancel = this._onCancel.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const buttonProps = {
afterClick: this._onCancel,
showLabel: true,
styles: this.props._bottomSheetStyles
};
return (
<BottomSheet onCancel = { this._onCancel }>
<AudioRouteButton { ...buttonProps } />
<ToggleCameraButton { ...buttonProps } />
<AudioOnlyButton { ...buttonProps } />
<RoomLockButton { ...buttonProps } />
<ClosedCaptionButton { ...buttonProps } />
{
// Apple rejected our app because they claim requiring a
// Dropbox account for recording is not acceptable.
// Ddisable it until we can find a way around it.
(__DEV__ || Platform.OS !== 'ios')
&& <RecordButton { ...buttonProps } />
}
<LiveStreamButton { ...buttonProps } />
<TileViewButton { ...buttonProps } />
<InviteButton { ...buttonProps } />
<InfoDialogButton { ...buttonProps } />
<RaiseHandButton { ...buttonProps } />
</BottomSheet>
);
}
_onCancel: () => void;
/**
* Hides this {@code OverflowMenu}.
*
* @private
* @returns {void}
*/
_onCancel() {
this.props.dispatch(hideDialog(OverflowMenu_));
}
}
/**
* Function that maps parts of Redux state tree into component props.
*
* @param {Object} state - Redux state.
* @private
* @returns {{
* _bottomSheetStyles: StyleType
* }}
*/
function _mapStateToProps(state) {
return {
_bottomSheetStyles:
ColorSchemeRegistry.get(state, 'BottomSheet')
};
}
OverflowMenu_ = connect(_mapStateToProps)(OverflowMenu);
export default OverflowMenu_;