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

Add onClick event

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-12-25 20:38:06 +03:00
parent 8c09e3c486
commit 347b70018d
2 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,19 +22,25 @@
/* Based on switch component from https://github.com/argyleink/gui-challenges */
.Switch {
--thumb: hsl(0 0% 5%);
--thumb-highlight: hsl(0 0% 100% / 25%);
--track-inactive: hsl(80 0% 35%);
--track-active: hsl(85 75% 60%);
--thumb-size: 2rem;
--thumb: hsl(0 0% 100%);
--thumb-highlight: hsl(0 0% 0% / 25%);
--thumb-highlight: hsl(0 0% 100% / 25%);
--track-size: calc(var(--thumb-size) * 2);
--track-padding: 2px;
--track-inactive: hsl(80 0% 80%);
--track-active: rgb(85, 70%, 40%);
--track-inactive: hsl(80 0% 35%);
--track-active: hsl(110, 60%, 60%);
--thumb-color: var(--thumb);
--thumb-color-highlight: var(--thumb-highlight);
--track-color-inactive: var(--track-inactive);
--track-color-active: var(--track-active);
/* TODO: change vars for light theme
--thumb-highlight
--track-active
--track-inactive
*/
display: flex;
align-items: center;
@ -42,6 +48,8 @@
justify-content: space-between;
cursor: pointer;
user-select: none;
color: var(--textColorAccent);
font-weight: 500;
& > input {
--thumb-position: 0%;

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

@ -21,18 +21,27 @@
import styles from "./switch.module.scss";
import React, { DetailedHTMLProps, InputHTMLAttributes } from "react";
import React, { DetailedHTMLProps, InputHTMLAttributes } from "react";
interface Props extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
onClick?: () => void;
}
export function Switch(props: Props) {
export function Switch({ children, ...settings }: Props) {
const id = `switch-${Date.now()}`;
const onClick = () => {
if (settings.disabled) {
return;
}
settings.onClick?.();
};
return (
<label htmlFor={id} className={styles.Switch}>
{props.children}
<input type="checkbox" role="switch" id={id} {...props}/>
<label htmlFor={id} className={styles.Switch} onClick={onClick}>
{children}
<input type="checkbox" role="switch" id={id} {...settings} readOnly/>
</label>
);
}