ref(ui-components) Improve native and web Switch (#12061)

Bring Switch component more in line
Convert some files to TS

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ColorValue } from 'react-native';
+import { Switch as NativeSwitch } from 'react-native-paper';
+
+import { SwitchProps } from '../types';
+
+interface Props extends SwitchProps {
+
+    /**
+     * Custom styles for the switch.
+     */
+    style?: Object;
+
+    /**
+     * Color of the switch button.
+     */
+    thumbColor?: ColorValue;
+
+    /**
+     * Color of the switch background.
+     */
+    trackColor?: Object;
+}
+
+const Switch = ({ checked, disabled, onChange, thumbColor, trackColor, style }: Props) => (
+    <NativeSwitch
+        disabled = { disabled }
+        onValueChange = { onChange }
+        style = { style }
+        thumbColor = { thumbColor }
+        trackColor = { trackColor }
+        value = { checked } />
+);
+
+export default Switch;

react/features/base/ui/components/types.ts

@@ -77,3 +77,21 @@ export interface InputProps {
      */
     value: string | number;
 }
+
+export interface SwitchProps {
+
+    /**
+     * Whether or not the toggle is on.
+     */
+    checked: boolean;
+
+    /**
+     * Whether or not the toggle is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * Toggle change callback.
+     */
+    onChange: (on?: boolean) => void;
+}

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

@@ -3,28 +3,14 @@ import clsx from 'clsx';
 import React, { useCallback } from 'react';
 
 import { isMobileBrowser } from '../../../environment/utils';
+import { SwitchProps } from '../types';
 
-interface SwitchProps {
-
-    /**
-     * Whether or not the toggle is on.
-     */
-    checked: boolean;
-
-    /**
-     * Whether or not the toggle is disabled.
-     */
-    disabled?: boolean;
+interface Props extends SwitchProps {
 
     /**
      * Id of the toggle.
      */
     id?: string;
-
-    /**
-     * Toggle change callback.
-     */
-    onChange: (on?: boolean) => void;
 }
 
 const useStyles = makeStyles((theme: any) => {
@@ -92,7 +78,7 @@ const useStyles = makeStyles((theme: any) => {
     };
 });
 
-const Switch = ({ id, checked, disabled, onChange }: SwitchProps) => {
+const Switch = ({ id, checked, disabled, onChange }: Props) => {
     const styles = useStyles();
     const isMobile = isMobileBrowser();