@wordpress/components
Version:
UI components for WordPress.
95 lines (94 loc) • 3.14 kB
JavaScript
// packages/components/src/checkbox-control/index.tsx
import clsx from "clsx";
import { useState } from "@wordpress/element";
import { useInstanceId, useRefEffect } from "@wordpress/compose";
import deprecated from "@wordpress/deprecated";
import { Icon, check, reset } from "@wordpress/icons";
import BaseControl from "../base-control";
import { HStack } from "../h-stack";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function CheckboxControl(props) {
const {
__nextHasNoMarginBottom,
label,
className,
heading,
checked,
indeterminate,
help,
id: idProp,
onChange,
onClick,
...additionalProps
} = props;
if (heading) {
deprecated("`heading` prop in `CheckboxControl`", {
alternative: "a separate element to implement a heading",
since: "5.8"
});
}
const [showCheckedIcon, setShowCheckedIcon] = useState(false);
const [showIndeterminateIcon, setShowIndeterminateIcon] = useState(false);
const ref = useRefEffect((node) => {
if (!node) {
return;
}
node.indeterminate = !!indeterminate;
setShowCheckedIcon(node.matches(":checked"));
setShowIndeterminateIcon(node.matches(":indeterminate"));
}, [checked, indeterminate]);
const id = useInstanceId(CheckboxControl, "inspector-checkbox-control", idProp);
const onChangeValue = (event) => onChange(event.target.checked);
return /* @__PURE__ */ _jsx(BaseControl, {
__nextHasNoMarginBottom,
__associatedWPComponentName: "CheckboxControl",
label: heading,
id,
help: help && /* @__PURE__ */ _jsx("span", {
className: "components-checkbox-control__help",
children: help
}),
className: clsx("components-checkbox-control", className),
children: /* @__PURE__ */ _jsxs(HStack, {
spacing: 0,
justify: "start",
alignment: "top",
children: [/* @__PURE__ */ _jsxs("span", {
className: "components-checkbox-control__input-container",
children: [/* @__PURE__ */ _jsx("input", {
ref,
id,
className: "components-checkbox-control__input",
type: "checkbox",
value: "1",
onChange: onChangeValue,
checked,
"aria-describedby": !!help ? id + "__help" : void 0,
onClick: (event) => {
event.currentTarget.focus();
onClick?.(event);
},
...additionalProps
}), showIndeterminateIcon ? /* @__PURE__ */ _jsx(Icon, {
icon: reset,
className: "components-checkbox-control__indeterminate",
role: "presentation"
}) : null, showCheckedIcon ? /* @__PURE__ */ _jsx(Icon, {
icon: check,
className: "components-checkbox-control__checked",
role: "presentation"
}) : null]
}), label && /* @__PURE__ */ _jsx("label", {
className: "components-checkbox-control__label",
htmlFor: id,
children: label
})]
})
});
}
var checkbox_control_default = CheckboxControl;
export {
CheckboxControl,
checkbox_control_default as default
};
//# sourceMappingURL=index.js.map