@activecollab/components/dist/esm/components/Checkbox/Checkbox.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["className", "hover", "id", "mixed", "checked", "onChange", "disabled"];
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 = _ref.className,
    hover = _ref.hover,
    _ref$id = _ref.id,
    id = _ref$id === void 0 ? "checkbox" : _ref$id,
    _ref$mixed = _ref.mixed,
    mixed = _ref$mixed === void 0 ? false : _ref$mixed,
    checked = _ref.checked,
    onChange = _ref.onChange,
    disabled = _ref.disabled,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  const _useState = useState(mixed && !checked),
    indeterminate = _useState[0],
    setIndeterminate = _useState[1];
  const _useState2 = useState(checked),
    initialChecked = _useState2[0],
    setInitialChecked = _useState2[1];
  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