mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
/**
|
|
* Copyright (c) 2021 OpenLens Authors
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
* this software and associated documentation files (the "Software"), to deal in
|
|
* the Software without restriction, including without limitation the rights to
|
|
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
* the Software, and to permit persons to whom the Software is furnished to do so,
|
|
* subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in all
|
|
* copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { createStyles, withStyles, Theme } from "@material-ui/core/styles";
|
|
import Switch, { SwitchClassKey, SwitchProps } from "@material-ui/core/Switch";
|
|
|
|
interface Styles extends Partial<Record<SwitchClassKey, string>> {
|
|
focusVisible?: string;
|
|
}
|
|
|
|
interface Props extends SwitchProps {
|
|
classes: Styles;
|
|
}
|
|
|
|
export const Switcher = withStyles((theme: Theme) =>
|
|
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 }: Props) => {
|
|
return (
|
|
<Switch
|
|
focusVisibleClassName={classes.focusVisible}
|
|
disableRipple
|
|
classes={{
|
|
root: classes.root,
|
|
switchBase: classes.switchBase,
|
|
thumb: classes.thumb,
|
|
track: classes.track,
|
|
checked: classes.checked,
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
});
|