37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
|
|
import classes from "./classes.module.scss";
|
|
import Typography, { ETypo, ETypoColor } from "../Typography";
|
|
|
|
type IProps = {
|
|
onChange?: (checked: boolean) => void;
|
|
checked?: boolean;
|
|
label: string;
|
|
disabled?: boolean;
|
|
};
|
|
export default function Switch({ onChange, checked, label, disabled }: IProps) {
|
|
const [isChecked, setIsChecked] = useState<boolean>(checked ? checked : false);
|
|
|
|
useEffect(() => {
|
|
setIsChecked(checked ? checked : false);
|
|
}, [checked]);
|
|
|
|
const handleChange = useCallback(() => {
|
|
setIsChecked(!isChecked);
|
|
onChange?.(!isChecked);
|
|
}, [isChecked, onChange]);
|
|
|
|
return (
|
|
<div className={classes["root"]}>
|
|
<div className={disabled ? classes["disabled"] : classes["root"]} onClick={disabled ? () => {} : handleChange}>
|
|
<div className={classes["switch-container"]} data-checked={isChecked.toString()}>
|
|
<div className={classes["round"]} />
|
|
</div>
|
|
</div>
|
|
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
|
{label}
|
|
</Typography>
|
|
</div>
|
|
);
|
|
}
|