hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Cleaning up

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-12-27 15:48:17 +03:00
parent c16d2aa6da
commit 7af2ad29ff
2 changed files with 13 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderer/components/switch/switch.module.scss
View File

@ -29,6 +29,11 @@
--track-color-inactive: hsl(80 0% 35%); --track-color-inactive: hsl(80 0% 35%);
--track-color-active: hsl(110, 60%, 60%); --track-color-active: hsl(110, 60%, 60%);
--thumb-position: 0%;
--thumb-transition-duration: .25s;
--hover-highlight-size: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2ch; gap: 2ch;
@ -39,9 +44,6 @@
font-weight: 500; font-weight: 500;
& > input { & > input {
--thumb-position: 0%;
--thumb-transition-duration: .25s;
padding: var(--track-padding); padding: var(--track-padding);
background: var(--track-color-inactive); background: var(--track-color-inactive);
inline-size: var(--track-size); inline-size: var(--track-size);
@ -62,8 +64,6 @@
transition: background-color .25s ease; transition: background-color .25s ease;
&::before { &::before {
--highlight-size: 0;
content: ""; content: "";
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;
@ -71,7 +71,7 @@
inline-size: var(--thumb-size); inline-size: var(--thumb-size);
block-size: var(--thumb-size); block-size: var(--thumb-size);
background: var(--thumb-color); background: var(--thumb-color);
box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight); box-shadow: 0 0 0 var(--hover-highlight-size) var(--thumb-color-highlight);
border-radius: 50%; border-radius: 50%;
transform: translateX(var(--thumb-position)); transform: translateX(var(--thumb-position));
transition: transition:
@ -80,7 +80,7 @@
} }
&:not(:disabled):hover::before { &:not(:disabled):hover::before {
--highlight-size: .5rem; --hover-highlight-size: .5rem;
} }
&:checked { &:checked {

27
src/renderer/components/switch/switch.tsx
View File

@ -21,33 +21,18 @@
import styles from "./switch.module.scss"; import styles from "./switch.module.scss";
import React, { DetailedHTMLProps, InputHTMLAttributes } from "react"; import React from "react";
import { cssNames } from "../../utils"; import { cssNames } from "../../utils";
interface Props extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> { interface Props extends React.HTMLProps<HTMLInputElement> {
onClick?: () => void; onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
} }
export function Switch({ children, onClick, ...settings }: Props) { export function Switch({ children, disabled, ...props }: Props) {
const id = `switch-${Date.now()}`;
const onLabelClick = () => {
if (settings.disabled || !onClick) {
return;
}
onClick();
};
return ( return (
<label <label className={cssNames(styles.Switch, { [styles.disabled]: disabled })} data-testid="switch">
htmlFor={id}
className={cssNames(styles.Switch, { [styles.disabled]: settings.disabled })}
onClick={onLabelClick}
data-testid="switch"
>
{children} {children}
<input type="checkbox" role="switch" id={id} {...settings}/> <input type="checkbox" role="switch" disabled={disabled} {...props}/>
</label> </label>
); );
} }