@grafana/ui
Version:
Grafana Components Library
239 lines (232 loc) • 7.55 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var mixins = require('../../themes/mixins.cjs');
var FieldContext = require('./FieldContext.cjs');
var Label = require('./Label.cjs');
function _interopNamespaceCompat(e) {
if (e && typeof e === 'object' && 'default' in e) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
"use strict";
const Checkbox = React__namespace.forwardRef(
({
label,
description,
value,
htmlValue,
onChange,
disabled: disabledProp,
className,
indeterminate,
invalid: invalidProp,
id: idProp,
...inputProps
}, ref) => {
const handleOnChange = React.useCallback(
(e) => {
if (onChange) {
onChange(e);
}
},
[onChange]
);
const fieldContext = FieldContext.useFieldContext();
const id = idProp != null ? idProp : fieldContext.id;
const invalid = invalidProp != null ? invalidProp : fieldContext.invalid;
const disabled = disabledProp != null ? disabledProp : fieldContext.disabled;
const styles = ThemeContext.useStyles2(getCheckboxStyles, invalid);
return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: css.cx(styles.wrapper, className), children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.checkboxWrapper, children: [
/* @__PURE__ */ jsxRuntime.jsx(
"input",
{
type: "checkbox",
className: css.cx(styles.input, indeterminate && styles.inputIndeterminate),
checked: value,
disabled,
onChange: handleOnChange,
value: htmlValue,
"aria-invalid": !!invalid,
id,
...inputProps,
ref: (element) => {
if (element && indeterminate) {
element.indeterminate = true;
}
if (ref) {
if (typeof ref === "function") {
ref(element);
} else {
ref.current = element;
}
}
}
}
),
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.checkmark })
] }),
label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: label }),
description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.description, children: description })
] });
}
);
const getCheckboxStyles = (theme, invalid = false) => {
const labelStyles = Label.getLabelStyles(theme);
const checkboxSize = 2;
const labelPadding = 1;
const getBorderColor = (color) => {
return invalid ? theme.colors.error.border : color;
};
return {
wrapper: css.css({
display: "inline-grid",
alignItems: "center",
columnGap: theme.spacing(labelPadding),
// gridAutoRows is needed to prevent https://github.com/grafana/grafana/issues/68570 in safari
gridAutoRows: "max-content",
position: "relative",
verticalAlign: "middle"
}),
input: css.css({
position: "absolute",
zIndex: 1,
top: 0,
left: 0,
width: "100% !important",
// global styles unset this
height: "100%",
opacity: 0,
"&:focus + span, &:focus-visible + span": mixins.getFocusStyles(theme),
"&:focus:not(:focus-visible) + span": mixins.getMouseFocusStyles(theme),
/**
* Using adjacent sibling selector to style checked state.
* Primarily to limit the classes necessary to use when these classes will be used
* for angular components styling
* */
"&:checked + span": {
background: theme.colors.accent.main,
border: `1px solid ${getBorderColor(theme.colors.accent.main)}`,
"&:hover": {
background: theme.colors.accent.shade
},
"&:after": {
content: '""',
position: "absolute",
zIndex: 2,
left: theme.spacing(0.5),
top: 0,
width: theme.spacing(0.75),
height: theme.spacing(1.5),
border: `solid ${theme.colors.accent.contrastText}`,
borderWidth: "0 3px 3px 0",
transform: "rotate(45deg)"
}
},
"&:disabled + span": {
backgroundColor: theme.colors.action.disabledBackground,
cursor: "not-allowed",
border: `1px solid ${getBorderColor(theme.colors.action.disabledBackground)}`,
"&:hover": {
backgroundColor: theme.colors.action.disabledBackground
},
"&:after": {
borderColor: theme.colors.action.disabledText
}
}
}),
inputIndeterminate: css.css({
"&:indeterminate + span": {
border: `1px solid ${getBorderColor(theme.colors.accent.main)}`,
background: theme.colors.accent.main,
"&:hover": {
background: theme.colors.accent.shade
},
"&:after": {
content: '""',
position: "absolute",
zIndex: 2,
left: "2px",
right: "2px",
top: "calc(50% - 1.5px)",
height: "3px",
border: `1.5px solid ${theme.colors.accent.contrastText}`,
backgroundColor: theme.colors.accent.contrastText,
width: "auto",
transform: "none"
}
},
"&:disabled[aria-checked='mixed'] + span": {
backgroundColor: theme.colors.action.disabledBackground,
border: `1px solid ${getBorderColor(theme.colors.error.transparent)}`,
"&:after": {
borderColor: theme.colors.action.disabledText
}
}
}),
checkboxWrapper: css.css({
display: "flex",
alignItems: "center",
gridColumnStart: 1,
gridRowStart: 1
}),
checkmark: css.css({
position: "relative",
zIndex: 2,
display: "inline-block",
width: theme.spacing(checkboxSize),
height: theme.spacing(checkboxSize),
borderRadius: theme.shape.radius.sm,
background: theme.components.input.background,
border: `1px solid ${getBorderColor(theme.components.input.borderColor)}`,
"&:hover": {
cursor: "pointer",
borderColor: getBorderColor(theme.components.input.borderHover)
}
}),
label: css.cx(
labelStyles.label,
css.css({
gridColumnStart: 2,
gridRowStart: 1,
position: "relative",
zIndex: 2,
cursor: "pointer",
maxWidth: "fit-content",
lineHeight: theme.typography.bodySmall.lineHeight,
marginBottom: 0
})
),
description: css.cx(
labelStyles.description,
css.css({
gridColumnStart: 2,
gridRowStart: 2,
lineHeight: theme.typography.bodySmall.lineHeight,
marginTop: 0,
// Enable interacting with description when checkbox is disabled
zIndex: 1
})
)
};
};
Checkbox.displayName = "Checkbox";
exports.Checkbox = Checkbox;
//# sourceMappingURL=Checkbox.cjs.map