@hypothesis/frontend-shared/lib/components/input/Checkbox.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/Checkbox.tsx";
import { useState } from 'preact/hooks';
import { CheckboxCheckedFilledIcon, CheckboxIcon } from '../icons';
import ToggleInput from './ToggleInput';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
 * Render a labeled checkbox input. The checkbox is styled with two icons:
 * one for the unchecked state and one for the checked state. The input itself
 * is positioned exactly on top of the icon, but is non-visible.
 */
export default function Checkbox({
  checked,
  defaultChecked = false,
  icon = CheckboxIcon,
  checkedIcon = CheckboxCheckedFilledIcon,
  onChange,
  ...rest
}) {
  // If `checked` is present, treat this as a controlled component
  const isControlled = typeof checked === 'boolean';
  // Only use this local state if checkbox is uncontrolled
  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
  const isChecked = isControlled ? checked : uncontrolledChecked;
  function handleChange(event) {
    onChange === null || onChange === void 0 || onChange.call(this, event);
    if (!isControlled) {
      setUncontrolledChecked(event.target.checked);
    }
  }
  return _jsxDEV(ToggleInput, {
    icon: icon,
    checkedIcon: checkedIcon,
    type: "checkbox",
    checked: isChecked,
    onChange: handleChange,
    ...rest
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 65,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Checkbox.js.map