Browse Source

fix: device selection colour scheme support

j8
Bettenbuk Zoltan 6 years ago
parent
commit
700051f809

+ 23
- 4
react/features/mobile/audio-mode/components/AudioRoutePickerDialog.js View File

4
 import React, { Component } from 'react';
4
 import React, { Component } from 'react';
5
 import { NativeModules, Text, TouchableHighlight, View } from 'react-native';
5
 import { NativeModules, Text, TouchableHighlight, View } from 'react-native';
6
 
6
 
7
+import { ColorSchemeRegistry } from '../../../base/color-scheme';
7
 import { hideDialog, BottomSheet } from '../../../base/dialog';
8
 import { hideDialog, BottomSheet } from '../../../base/dialog';
8
 import { translate } from '../../../base/i18n';
9
 import { translate } from '../../../base/i18n';
9
 import { Icon } from '../../../base/font-icons';
10
 import { Icon } from '../../../base/font-icons';
10
 import { connect } from '../../../base/redux';
11
 import { connect } from '../../../base/redux';
11
-import { ColorPalette } from '../../../base/styles';
12
+import { ColorPalette, type StyleType } from '../../../base/styles';
12
 
13
 
13
 import styles from './styles';
14
 import styles from './styles';
14
 
15
 
44
  */
45
  */
45
 type Props = {
46
 type Props = {
46
 
47
 
48
+    /**
49
+     * Style of the bottom sheet feature.
50
+     */
51
+    _bottomSheetStyles: StyleType,
52
+
47
     /**
53
     /**
48
      * Used for hiding the dialog when the selection was completed.
54
      * Used for hiding the dialog when the selection was completed.
49
      */
55
      */
203
      * @returns {ReactElement}
209
      * @returns {ReactElement}
204
      */
210
      */
205
     _renderDevice(device: Device) {
211
     _renderDevice(device: Device) {
212
+        const { _bottomSheetStyles } = this.props;
206
         const { iconName, selected, text } = device;
213
         const { iconName, selected, text } = device;
207
         const selectedStyle = selected ? styles.selectedText : {};
214
         const selectedStyle = selected ? styles.selectedText : {};
208
 
215
 
214
                 <View style = { styles.deviceRow } >
221
                 <View style = { styles.deviceRow } >
215
                     <Icon
222
                     <Icon
216
                         name = { iconName }
223
                         name = { iconName }
217
-                        style = { [ styles.deviceIcon, selectedStyle ] } />
218
-                    <Text style = { [ styles.deviceText, selectedStyle ] } >
224
+                        style = { [ styles.deviceIcon, _bottomSheetStyles.iconStyle, selectedStyle ] } />
225
+                    <Text style = { [ styles.deviceText, _bottomSheetStyles.labelStyle, selectedStyle ] } >
219
                         { text }
226
                         { text }
220
                     </Text>
227
                     </Text>
221
                 </View>
228
                 </View>
244
     }
251
     }
245
 }
252
 }
246
 
253
 
254
+/**
255
+ * Maps part of the Redux state to the props of this component.
256
+ *
257
+ * @param {Object} state - The Redux state.
258
+ * @returns {Object}
259
+ */
260
+function _mapStateToProps(state) {
261
+    return {
262
+        _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet')
263
+    };
264
+}
265
+
247
 // Only export the dialog if we have support for getting / setting audio devices
266
 // Only export the dialog if we have support for getting / setting audio devices
248
 // in AudioMode.
267
 // in AudioMode.
249
 if (AudioMode.getAudioDevices && AudioMode.setAudioDevice) {
268
 if (AudioMode.getAudioDevices && AudioMode.setAudioDevice) {
250
-    AudioRoutePickerDialog_ = translate(connect()(AudioRoutePickerDialog));
269
+    AudioRoutePickerDialog_ = translate(connect(_mapStateToProps)(AudioRoutePickerDialog));
251
 }
270
 }
252
 
271
 
253
 export default AudioRoutePickerDialog_;
272
 export default AudioRoutePickerDialog_;

Loading…
Cancel
Save