52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import React, { FC } from 'react';
|
|
import './ToggleButton.scss';
|
|
|
|
interface IToggleButtonProps {
|
|
id: string
|
|
text: string
|
|
type?: TOGGLE_TYPE
|
|
title: string
|
|
checked: boolean
|
|
onChange: React.ChangeEventHandler<HTMLInputElement>
|
|
}
|
|
|
|
export enum TOGGLE_TYPE {
|
|
MATERIAL,
|
|
IOS
|
|
}
|
|
|
|
export const ToggleButton: FC<IToggleButtonProps> = (props) => {
|
|
const id = `toggle-${props.id}`;
|
|
const type = props.type ?? TOGGLE_TYPE.MATERIAL;
|
|
let classLine = 'line w-10 h-4 bg-gray-400 rounded-full shadow-inner';
|
|
let classDot = 'dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition';
|
|
if (type === TOGGLE_TYPE.IOS) {
|
|
classLine = 'line block bg-gray-600 w-14 h-8 rounded-full';
|
|
classDot = 'dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition';
|
|
}
|
|
|
|
return (
|
|
<div title={props.title}>
|
|
<div className="flex items-center justify-center w-full mb-12">
|
|
<label
|
|
htmlFor={id}
|
|
className="flex items-center cursor-pointer"
|
|
>
|
|
<div className="relative">
|
|
<input
|
|
id={id}
|
|
type="checkbox"
|
|
onChange={props.onChange}
|
|
checked={props.checked}
|
|
className="sr-only" />
|
|
<div className={classLine}></div>
|
|
<div className={classDot}></div>
|
|
</div>
|
|
<div className="ml-3 text-gray-700 font-medium">
|
|
{ props.text }
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|