@netdata/netdata-ui
Version:
netdata UI kit
71 lines (70 loc) • 3.23 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.Checkbox = void 0;
var _react = _interopRequireDefault(require("react"));
var _typography = require("../typography");
var _icon = require("../icon");
var _box = _interopRequireDefault(require("../templates/box"));
var _flex = _interopRequireDefault(require("../templates/flex"));
var _styled = require("./styled");
var _excluded = ["checked", "disabled", "iconProps", "checkboxProps", "indeterminate", "Label", "label", "labelProps", "labelPosition", "onChange"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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; }
var Checkbox = exports.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 ? _typography.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["default"].createElement(_flex["default"], _extends({
as: "label",
position: "relative",
alignItems: "center",
gap: 1,
cursor: disabled ? "auto" : "pointer",
rowReverse: labelPosition === "right",
"data-testid": "checkbox",
disabled: disabled
}, rest, {
onClick: onClick
}), label && /*#__PURE__*/_react["default"].createElement(_typography.Text, _extends({
as: Label,
opacity: disabled ? 0.4 : 1
}, labelProps), label), /*#__PURE__*/_react["default"].createElement(_box["default"], {
width: "16px",
height: "16px"
}, /*#__PURE__*/_react["default"].createElement(_styled.HiddenCheckboxInput, _extends({
"data-testid": "checkbox-input",
ref: ref,
disabled: disabled
}, indeterminate && {
"data-indeterminate": true
}, {
"data-checked": checked
})), /*#__PURE__*/_react["default"].createElement(_styled.Checkbox, _extends({
"data-testid": "styled-checkbox",
disabled: disabled
}, checkboxProps), (!!checked || !!indeterminate) && /*#__PURE__*/_react["default"].createElement(_icon.Icon, _extends({
disabled: disabled,
name: indeterminate ? "checkmark_partial_s" : "checkmark_s",
width: "16px",
height: "16px",
color: "accent",
hoverColor: "primary"
}, iconProps)))));
};