@activecollab/components
Version:
ActiveCollab Components
70 lines • 2.12 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useState, useCallback, useEffect } from "react";
import classnames from "classnames";
import CheckboxIcon from "./CheckboxIcon";
import { StyledCheckbox, StyledInput, StyledLabel } from "./Styles";
/**
* Checkbox component
*/
export const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
className,
hover,
id = "checkbox",
mixed = false,
checked,
onChange,
disabled,
...rest
} = _ref;
const [indeterminate, setIndeterminate] = useState(mixed && !checked);
const [initialChecked, setInitialChecked] = useState(checked);
const handleChange = useCallback(e => {
typeof onChange === "function" && onChange(e);
setInitialChecked(prev => !prev);
setIndeterminate(false);
}, [onChange]);
useEffect(() => {
if (checked !== initialChecked) {
setInitialChecked(checked);
setIndeterminate(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [checked]);
useEffect(() => {
if (mixed !== indeterminate && !checked) {
setIndeterminate(mixed);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [mixed]);
return /*#__PURE__*/React.createElement(StyledCheckbox, {
className: classnames("c-checkbox", {
"c-checkbox__hover": hover,
"c-checkbox__controlled": typeof hover === "boolean"
}, className),
hover: hover,
tabIndex: -1,
mixed: indeterminate,
$disabled: disabled
}, /*#__PURE__*/React.createElement(StyledInput, _extends({
role: "checkbox",
id: id,
className: "c-checkbox--input",
type: "checkbox",
ref: ref
}, rest, {
checked: initialChecked,
onChange: handleChange,
disabled: disabled
})), /*#__PURE__*/React.createElement(StyledLabel, {
htmlFor: id,
className: "c-checkbox--label"
}, /*#__PURE__*/React.createElement(CheckboxIcon, {
"data-testid": "checkbox-icon",
height: 16,
width: 16,
mixed: indeterminate
})));
});
Checkbox.displayName = "Checkbox";
//# sourceMappingURL=Checkbox.js.map