pouncejs
Version:
A collection of UI components from Panther labs
63 lines (59 loc) • 2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Box from '../Box';
import useCheckboxStyles from './useCheckboxStyles';
/**
* Your bread & butter checkbox element. Nothing new here
* */
var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
var checked = _ref.checked,
label = _ref.label,
disabled = _ref.disabled,
readOnly = _ref.readOnly,
invalid = _ref.invalid,
indeterminate = _ref.indeterminate,
hidden = _ref.hidden,
rest = _objectWithoutPropertiesLoose(_ref, ["checked", "label", "disabled", "readOnly", "invalid", "indeterminate", "hidden"]);
var checkboxStyles = useCheckboxStyles({
invalid: invalid,
checked: checked,
indeterminate: indeterminate
});
if (!label && !(rest['aria-label'] || rest['aria-labelledby'])) {
console.error('The `label` prop was omitted without providing an `aria-label` or `aria-labelledby` attribute');
}
return /*#__PURE__*/React.createElement(Box, {
as: "label",
display: "inline-flex",
alignItems: "center",
cursor: "pointer",
fontSize: "medium",
fontWeight: "medium",
verticalAlign: "top",
"aria-disabled": disabled,
hidden: hidden,
"aria-hidden": hidden
}, /*#__PURE__*/React.createElement(Box, _extends({
position: "relative",
borderRadius: "circle",
p: 2
}, checkboxStyles), /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
cursor: "pointer",
position: "absolute",
opacity: 0,
type: "checkbox",
readOnly: readOnly,
"aria-readonly": readOnly,
"aria-invalid": invalid,
"aria-checked": checked,
checked: checked,
disabled: disabled
}, rest))), label && /*#__PURE__*/React.createElement(Box, {
as: "span",
userSelect: "none"
}, label));
});
export default /*#__PURE__*/React.memo(Checkbox);