@netdata/netdata-ui/dist/es6/components/checkbox/checkbox.js

netdata UI kit

var _excluded = ["checked", "disabled", "iconProps", "checkboxProps", "indeterminate", "Label", "label", "labelProps", "labelPosition", "onChange"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React from "react";
import { Text } from "../typography";
import { Icon } from "../icon";
import Box from "../templates/box";
import Flex from "../templates/flex";
import { HiddenCheckboxInput, Checkbox as StyledCheckbox } from "./styled";
export var Checkbox = function Checkbox(_ref, ref) {
  var checked = _ref.checked,
    disabled = _ref.disabled,
    iconProps = _ref.iconProps,
    _ref$checkboxProps = _ref.checkboxProps,
    checkboxProps = _ref$checkboxProps === void 0 ? {} : _ref$checkboxProps,
    indeterminate = _ref.indeterminate,
    _ref$Label = _ref.Label,
    Label = _ref$Label === void 0 ? Text : _ref$Label,
    label = _ref.label,
    labelProps = _ref.labelProps,
    _ref$labelPosition = _ref.labelPosition,
    labelPosition = _ref$labelPosition === void 0 ? "right" : _ref$labelPosition,
    onChange = _ref.onChange,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  var onClick = function onClick(e) {
    e.preventDefault();
    if (disabled) return;
    onChange == null || onChange(!checked, e);
  };
  return /*#__PURE__*/React.createElement(Flex, _extends({
    as: "label",
    position: "relative",
    alignItems: "center",
    gap: 1,
    cursor: disabled ? "auto" : "pointer",
    rowReverse: labelPosition === "left",
    "data-testid": "checkbox",
    disabled: disabled
  }, rest, {
    onClick: onClick
  }), /*#__PURE__*/React.createElement(Box, {
    width: "16px",
    height: "16px"
  }, /*#__PURE__*/React.createElement(HiddenCheckboxInput, _extends({
    "data-testid": "checkbox-input",
    ref: ref,
    disabled: disabled
  }, indeterminate && {
    "data-indeterminate": true
  }, {
    "data-checked": checked
  })), /*#__PURE__*/React.createElement(StyledCheckbox, _extends({
    "data-testid": "styled-checkbox",
    disabled: disabled
  }, checkboxProps), (!!checked || !!indeterminate) && /*#__PURE__*/React.createElement(Icon, _extends({
    disabled: disabled,
    name: indeterminate ? "checkmark_partial_s" : "checkmark_s",
    width: "16px",
    height: "16px",
    color: "accent",
    hoverColor: "primary"
  }, iconProps)))), label && /*#__PURE__*/React.createElement(Text, _extends({
    as: Label,
    opacity: disabled ? 0.4 : 1
  }, labelProps), label));
};