2023-05-19 23:14:55 +02:00
|
|
|
import React from "@modules/react";
|
2019-06-30 05:09:48 +02:00
|
|
|
|
2023-03-07 01:17:28 +01:00
|
|
|
const {useState, useCallback} = React;
|
2019-06-30 05:09:48 +02:00
|
|
|
|
|
|
|
|
2024-02-22 06:06:30 +01:00
|
|
|
export default function Switch({id, checked: initialValue, disabled, onChange, internalState = true}) {
|
2023-03-07 01:17:28 +01:00
|
|
|
const [checked, setChecked] = useState(initialValue);
|
|
|
|
const change = useCallback(() => {
|
|
|
|
onChange?.(!checked);
|
|
|
|
setChecked(!checked);
|
2023-03-20 03:23:11 +01:00
|
|
|
}, [checked, onChange]);
|
2023-03-07 01:17:28 +01:00
|
|
|
|
2024-02-22 06:06:30 +01:00
|
|
|
const isChecked = internalState ? checked : initialValue;
|
2023-03-07 01:17:28 +01:00
|
|
|
const enabledClass = disabled ? " bd-switch-disabled" : "";
|
2024-02-22 06:06:30 +01:00
|
|
|
const checkedClass = isChecked ? " bd-switch-checked" : "";
|
2023-03-07 01:17:28 +01:00
|
|
|
return <div className={`bd-switch` + enabledClass + checkedClass}>
|
2024-02-22 06:06:30 +01:00
|
|
|
<input id={id} type="checkbox" disabled={disabled} checked={isChecked} onChange={change} />
|
2023-03-07 01:17:28 +01:00
|
|
|
<div className="bd-switch-body">
|
|
|
|
<svg className="bd-switch-slider" viewBox="0 0 28 20" preserveAspectRatio="xMinYMid meet">
|
|
|
|
<rect className="bd-switch-handle" fill="white" x="4" y="0" height="20" width="20" rx="10"></rect>
|
|
|
|
<svg className="bd-switch-symbol" viewBox="0 0 20 20" fill="none">
|
|
|
|
<path></path>
|
|
|
|
<path></path>
|
2021-04-16 00:08:00 +02:00
|
|
|
</svg>
|
2023-03-07 01:17:28 +01:00
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
</div>;
|
2019-06-30 05:09:48 +02:00
|
|
|
}
|