Use new <Switch/> inside deprecated material switcher

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/switch/form-switcher.tsx

@@ -7,6 +7,7 @@ import React from "react";
 import type { FormControlLabelProps } from "@material-ui/core/FormControlLabel";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import { makeStyles } from "@material-ui/styles";
+import { Switch } from "./switch";
 
 const useStyles = makeStyles({
   root: {
@@ -23,15 +24,12 @@ const useStyles = makeStyles({
 /**
  * @deprecated Use <Switch/> instead from "../switch.tsx".
  */
-export function FormSwitch(props: FormControlLabelProps) {
+export function FormSwitch(props: FormControlLabelProps & { children?: React.ReactNode }) {
   const classes = useStyles();
 
-  return (
+  const ClonedElement = React.cloneElement(props.control, {
-    <FormControlLabel
+    children: props.label,
-      control={props.control}
+  });
-      labelPlacement="start"
+
-      label={props.label}
+  return ClonedElement;
-      className={classes.root}
-    />
-  );
 }

src/renderer/components/switch/switcher.tsx

@@ -4,10 +4,8 @@
  */
 
 import React from "react";
-import type { Theme } from "@material-ui/core/styles";
-import { createStyles, withStyles } from "@material-ui/core/styles";
 import type { SwitchClassKey, SwitchProps } from "@material-ui/core/Switch";
-import Switch from "@material-ui/core/Switch";
+import { Switch } from "./switch";
 
 interface Styles extends Partial<Record<SwitchClassKey, string>> {
   focusVisible?: string;
@@ -15,64 +13,21 @@ interface Styles extends Partial<Record<SwitchClassKey, string>> {
 
 export interface SwitcherProps extends SwitchProps {
   classes: Styles;
+  children?: React.ReactNode;
 }
 
 /**
  * @deprecated Use <Switch/> instead from "../switch.tsx".
  */
-export const Switcher = withStyles((theme: Theme) =>
+export const Switcher = () => (({  disabled, checked, onChange, name, children }: SwitcherProps) => {
-  createStyles({
-    root: {
-      width: 40,
-      height: 24,
-      padding: 0,
-      margin: "0 0 0 8px",
-    },
-    switchBase: {
-      padding: 1,
-      paddingLeft: 4,
-      "&$checked": {
-        transform: "translateX(14px)",
-        color: "white",
-        "& + $track": {
-          backgroundColor: "#52d869",
-          opacity: 1,
-          border: "none",
-        },
-      },
-      "&$focusVisible $thumb": {
-        color: "#52d869",
-        border: "6px solid #fff",
-      },
-    },
-    thumb: {
-      width: 18,
-      height: 18,
-      marginTop: 2,
-      boxShadow: "none",
-    },
-    track: {
-      borderRadius: 26 / 2,
-      backgroundColor: "#72767b",
-      opacity: 1,
-      transition: theme.transitions.create(["background-color", "border"]),
-    },
-    checked: {},
-    focusVisible: {},
-  }),
-)(({ classes, ...props }: SwitcherProps) => {
   return (
     <Switch
-      focusVisibleClassName={classes.focusVisible}
+      disabled={disabled}
-      disableRipple
+      checked={checked}
-      classes={{
+      name={name}
-        root: classes.root,
+      onChange={(checked, event) => onChange?.(event, checked)}
-        switchBase: classes.switchBase,
+    >
-        thumb: classes.thumb,
+      {children}
-        track: classes.track,
+    </Switch>
-        checked: classes.checked,
-      }}
-      {...props}
-    />
   );
 });