feat(base/native): Switch thumb track color (#12066)

* feat(base/native): Switch thumbColor and trackColor default props

react/features/base/ui/components/native/Switch.tsx

@@ -4,6 +4,12 @@ import { Switch as NativeSwitch } from 'react-native-paper';
 
 import { SwitchProps } from '../types';
 
+import {
+    DISABLED_TRACK_COLOR,
+    ENABLED_TRACK_COLOR,
+    THUMB_COLOR
+} from './switchStyles';
+
 interface Props extends SwitchProps {
 
     /**
@@ -22,7 +28,17 @@ interface Props extends SwitchProps {
     trackColor?: Object;
 }
 
-const Switch = ({ checked, disabled, onChange, thumbColor, trackColor, style }: Props) => (
+const Switch = ({
+    checked,
+    disabled,
+    onChange,
+    thumbColor = THUMB_COLOR,
+    trackColor = {
+        true: ENABLED_TRACK_COLOR,
+        false: DISABLED_TRACK_COLOR
+    },
+    style
+}: Props) => (
     <NativeSwitch
         disabled = { disabled }
         onValueChange = { onChange }

react/features/base/ui/components/native/switchStyles.ts

@@ -0,0 +1,5 @@
+import BaseTheme from '../BaseTheme.native';
+
+export const ENABLED_TRACK_COLOR = BaseTheme.palette.action01;
+export const DISABLED_TRACK_COLOR = BaseTheme.palette.switch01Disabled;
+export const THUMB_COLOR = BaseTheme.palette.icon01;

react/features/lobby/components/native/LobbyModeSwitch.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { WithTranslation } from 'react-i18next';
-import { View } from 'react-native';
-
-import { translate } from '../../../base/i18n/functions';
-import { connect } from '../../../base/redux/functions';
-import Switch from '../../../base/ui/components/native/Switch';
-import {
-    DISABLED_TRACK_COLOR,
-    ENABLED_TRACK_COLOR,
-    THUMB_COLOR
-
-    // @ts-ignore
-} from '../../../settings/components/native/styles';
-
-// @ts-ignore
-import styles from './styles';
-
-/**
- * The type of the React {@code Component} props of {@link LobbyModeSwitch}.
- */
-interface Props extends WithTranslation {
-
-    /**
-     * True if the lobby mode is currently enabled for this conference.
-     */
-    lobbyEnabled: boolean,
-
-    /**
-     * Callback to be invoked when handling enable-disable lobby mode switch.
-     */
-    onToggleLobbyMode: (on?: boolean) => void;
-}
-
-/**
- * Component meant to Enable/Disable lobby mode.
- *
- * @returns {React$Element<any>}
- */
-function LobbyModeSwitch(
-        {
-            lobbyEnabled,
-            onToggleLobbyMode
-        }: Props) {
-
-    return (
-        <View style = { styles.lobbySwitchContainer }>
-            <Switch
-                checked = { lobbyEnabled }
-                onChange = { onToggleLobbyMode }
-                style = { styles.lobbySwitchIcon }
-                thumbColor = { THUMB_COLOR }
-                trackColor = {{
-                    true: ENABLED_TRACK_COLOR,
-                    false: DISABLED_TRACK_COLOR
-                }} />
-        </View>
-    );
-}
-
-export default translate(connect()(LobbyModeSwitch));

react/features/lobby/components/native/styles.js

@@ -235,15 +235,6 @@ export default {
         color: 'white'
     },
 
-    lobbySwitchContainer: {
-        flexDirection: 'column',
-        marginTop: BaseTheme.spacing[2]
-    },
-
-    lobbySwitchIcon: {
-        alignSelf: 'flex-end'
-    },
-
     lobbyTitle: {
         ...lobbyText
     },

react/features/polls/components/native/PollAnswer.tsx

@@ -4,7 +4,6 @@ import { Text, View } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { getLocalParticipant } from '../../../base/participants/functions';
-import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 import Button from '../../../base/ui/components/native/Button';
 import Switch from '../../../base/ui/components/native/Switch';
 import { BUTTON_TYPES } from '../../../base/ui/constants';
@@ -45,9 +44,7 @@ const PollAnswer = (props: AbstractProps) => {
                         <Switch
                             checked = { checkBoxStates[index] }
                             /* eslint-disable-next-line react/jsx-no-bind */
-                            onChange = { state => setCheckbox(index, state) }
+                            onChange = { state => setCheckbox(index, state) } />
-                            thumbColor = { BaseTheme.palette.icon01 }
-                            trackColor = {{ true: BaseTheme.palette.action01 }} />
                         <Text style = { chatStyles.switchLabel }>{answer.name}</Text>
                     </View>
                 ))}

react/features/recording/components/Recording/native/StartRecordingDialogContent.tsx

@@ -22,8 +22,7 @@ import {
     DROPBOX_LOGO,
     ICON_CLOUD,
     ICON_INFO,
-    ICON_USERS,
+    ICON_USERS
-    TRACK_COLOR
     // @ts-ignore
 } from '../styles.native';
 
@@ -77,8 +76,7 @@ class StartRecordingDialogContent extends AbstractStartRecordingDialogContent<Pr
                         checked = { selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE }
                         disabled = { isValidating }
                         onChange = { this._onRecordingServiceSwitchChange }
-                        style = { styles.switch }
+                        style = { styles.switch } />
-                        trackColor = {{ false: TRACK_COLOR }} />
                 ) : null;
 
         return (
@@ -137,8 +135,7 @@ class StartRecordingDialogContent extends AbstractStartRecordingDialogContent<Pr
                     checked = { sharingSetting }
                     disabled = { isValidating }
                     onChange = { onSharingSettingChanged }
-                    style = { styles.switch }
+                    style = { styles.switch } />
-                    trackColor = {{ false: TRACK_COLOR }} />
             </View>
         );
     }
@@ -281,8 +278,7 @@ class StartRecordingDialogContent extends AbstractStartRecordingDialogContent<Pr
                     checked = { selectedRecordingService === RECORDING_TYPES.DROPBOX }
                     disabled = { isValidating }
                     onChange = { this._onDropboxSwitchChange }
-                    style = { styles.switch }
+                    style = { styles.switch } />
-                    trackColor = {{ false: TRACK_COLOR }} />
             );
         }
 

react/features/security/components/security-dialog/native/SecurityDialog.js

@@ -14,11 +14,10 @@ import { connect } from '../../../../base/redux';
 import BaseTheme from '../../../../base/ui/components/BaseTheme';
 import Button from '../../../../base/ui/components/native/Button';
 import Input from '../../../../base/ui/components/native/Input';
+import Switch from '../../../../base/ui/components/native/Switch';
 import { BUTTON_TYPES } from '../../../../base/ui/constants';
 import { isInBreakoutRoom } from '../../../../breakout-rooms/functions';
 import { toggleLobbyMode } from '../../../../lobby/actions.any';
-import LobbyModeSwitch
-    from '../../../../lobby/components/native/LobbyModeSwitch';
 import { LOCKED_LOCALLY, LOCKED_REMOTELY } from '../../../../room-lock';
 import {
     endRoomLockRequest,
@@ -27,7 +26,6 @@ import {
 
 import styles from './styles';
 
-
 /**
  * The style of the {@link TextInput} rendered by {@code SecurityDialog}. As it
  * requests the entry of a password, {@code TextInput} automatically correcting
@@ -185,9 +183,9 @@ class SecurityDialog extends PureComponent<Props, State> {
                         <Text style = { styles.lobbyModeLabel } >
                             { t('lobby.toggleLabel') }
                         </Text>
-                        <LobbyModeSwitch
+                        <Switch
-                            lobbyEnabled = { _lobbyEnabled }
+                            checked = { _lobbyEnabled }
-                            onToggleLobbyMode = { this._onToggleLobbyMode } />
+                            onChange = { this._onToggleLobbyMode } />
                     </View>
                 </View>
             </View>

react/features/settings/components/native/SettingsView.js

@@ -35,12 +35,7 @@ import {
 
 import FormRow from './FormRow';
 import FormSectionAccordion from './FormSectionAccordion';
-import styles, {
+import styles from './styles';
-    DISABLED_TRACK_COLOR,
-    ENABLED_TRACK_COLOR,
-    THUMB_COLOR
-} from './styles';
-
 
 /**
  * Application information module.
@@ -270,23 +265,13 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                             label = 'settingsView.startWithAudioMuted'>
                             <Switch
                                 checked = { startWithAudioMuted }
-                                onChange = { this._onStartAudioMutedChange }
+                                onChange = { this._onStartAudioMutedChange } />
-                                thumbColor = { THUMB_COLOR }
-                                trackColor = {{
-                                    true: ENABLED_TRACK_COLOR,
-                                    false: DISABLED_TRACK_COLOR
-                                }} />
                         </FormRow>
                         <Divider style = { styles.fieldSeparator } />
                         <FormRow label = 'settingsView.startWithVideoMuted'>
                             <Switch
                                 checked = { startWithVideoMuted }
-                                onChange = { this._onStartVideoMutedChange }
+                                onChange = { this._onStartVideoMutedChange } />
-                                thumbColor = { THUMB_COLOR }
-                                trackColor = {{
-                                    true: ENABLED_TRACK_COLOR,
-                                    false: DISABLED_TRACK_COLOR
-                                }} />
                         </FormRow>
                     </FormSectionAccordion>
                     <FormSectionAccordion
@@ -326,12 +311,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                                     label = 'settingsView.disableCallIntegration'>
                                     <Switch
                                         checked = { disableCallIntegration }
-                                        onChange = { this._onDisableCallIntegration }
+                                        onChange = { this._onDisableCallIntegration } />
-                                        thumbColor = { THUMB_COLOR }
-                                        trackColor = {{
-                                            true: ENABLED_TRACK_COLOR,
-                                            false: DISABLED_TRACK_COLOR
-                                        }} />
                                 </FormRow>
                                 <Divider style = { styles.fieldSeparator } />
                             </>
@@ -340,12 +320,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                             label = 'settingsView.disableP2P'>
                             <Switch
                                 checked = { disableP2P }
-                                onChange = { this._onDisableP2P }
+                                onChange = { this._onDisableP2P } />
-                                thumbColor = { THUMB_COLOR }
-                                trackColor = {{
-                                    true: ENABLED_TRACK_COLOR,
-                                    false: DISABLED_TRACK_COLOR
-                                }} />
                         </FormRow>
                         <Divider style = { styles.fieldSeparator } />
                         {AppInfo.GOOGLE_SERVICES_ENABLED && (
@@ -354,12 +329,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                                 label = 'settingsView.disableCrashReporting'>
                                 <Switch
                                     checked = { disableCrashReporting }
-                                    onChange = { this._onDisableCrashReporting }
+                                    onChange = { this._onDisableCrashReporting } />
-                                    thumbColor = { THUMB_COLOR }
-                                    trackColor = {{
-                                        true: ENABLED_TRACK_COLOR,
-                                        false: DISABLED_TRACK_COLOR
-                                    }} />
                             </FormRow>
                         )}
                     </FormSectionAccordion>

react/features/settings/components/native/styles.js

@@ -3,9 +3,6 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 export const ANDROID_UNDERLINE_COLOR = 'transparent';
 export const PLACEHOLDER_COLOR = BaseTheme.palette.focus01;
-export const ENABLED_TRACK_COLOR = BaseTheme.palette.action01;
-export const DISABLED_TRACK_COLOR = BaseTheme.palette.switch01Disabled;
-export const THUMB_COLOR = BaseTheme.palette.field02;
 
 const TEXT_SIZE = 14;