| 1 |
import React, { useEffect, useRef, useState } from "react"; |
| 2 |
|
| 3 |
/** |
| 4 |
* Toggle control component. |
| 5 |
* |
| 6 |
* @class |
| 7 |
* @param {Object} props component properties |
| 8 |
* @param {boolean} props.status control status |
| 9 |
* @param {boolean} props.name control name |
| 10 |
* @param {boolean} props.disabled control disabled status |
| 11 |
* @param {Function} props.onStatusChange status changed callback |
| 12 |
*/ |
| 13 |
function ToggleControl({ |
| 14 |
status, |
| 15 |
name, |
| 16 |
onStatusChange = () => {}, |
| 17 |
disabled = false, |
| 18 |
}) { |
| 19 |
/** |
| 20 |
* Click handler for toggle component. |
| 21 |
*/ |
| 22 |
const clickHandler = () => { |
| 23 |
if (!disabled) { |
| 24 |
onStatusChange(!status, name); |
| 25 |
} |
| 26 |
}; |
| 27 |
|
| 28 |
return ( |
| 29 |
<div |
| 30 |
onClick={clickHandler} |
| 31 |
className={"tableberg-toggle-control"} |
| 32 |
data-enabled={JSON.stringify(disabled || status)} |
| 33 |
role={"button"} |
| 34 |
> |
| 35 |
<div className={"knob"}></div> |
| 36 |
</div> |
| 37 |
); |
| 38 |
} |
| 39 |
|
| 40 |
/** |
| 41 |
* @module ToggleControl |
| 42 |
*/ |
| 43 |
export default ToggleControl; |
| 44 |
|
