@wordpress/components
Version:
UI components for WordPress.
130 lines (124 loc) • 4.22 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CheckboxControl = CheckboxControl;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _icons = require("@wordpress/icons");
var _baseControl = _interopRequireDefault(require("../base-control"));
var _hStack = require("../h-stack");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Checkboxes allow the user to select one or more items from a set.
*
* ```jsx
* import { CheckboxControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const MyCheckboxControl = () => {
* const [ isChecked, setChecked ] = useState( true );
* return (
* <CheckboxControl
* __nextHasNoMarginBottom
* label="Is author"
* help="Is the user a author or not?"
* checked={ isChecked }
* onChange={ setChecked }
* />
* );
* };
* ```
*/
function CheckboxControl(props) {
const {
__nextHasNoMarginBottom,
label,
className,
heading,
checked,
indeterminate,
help,
id: idProp,
onChange,
...additionalProps
} = props;
if (heading) {
(0, _deprecated.default)('`heading` prop in `CheckboxControl`', {
alternative: 'a separate element to implement a heading',
since: '5.8'
});
}
const [showCheckedIcon, setShowCheckedIcon] = (0, _element.useState)(false);
const [showIndeterminateIcon, setShowIndeterminateIcon] = (0, _element.useState)(false);
// Run the following callback every time the `ref` (and the additional
// dependencies) change.
const ref = (0, _compose.useRefEffect)(node => {
if (!node) {
return;
}
// It cannot be set using an HTML attribute.
node.indeterminate = !!indeterminate;
setShowCheckedIcon(node.matches(':checked'));
setShowIndeterminateIcon(node.matches(':indeterminate'));
}, [checked, indeterminate]);
const id = (0, _compose.useInstanceId)(CheckboxControl, 'inspector-checkbox-control', idProp);
const onChangeValue = event => onChange(event.target.checked);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default, {
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
__associatedWPComponentName: "CheckboxControl",
label: heading,
id: id,
help: help && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "components-checkbox-control__help",
children: help
}),
className: (0, _clsx.default)('components-checkbox-control', className),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
spacing: 0,
justify: "start",
alignment: "top",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
className: "components-checkbox-control__input-container",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
ref: ref,
id: id,
className: "components-checkbox-control__input",
type: "checkbox",
value: "1",
onChange: onChangeValue,
checked: checked,
"aria-describedby": !!help ? id + '__help' : undefined,
...additionalProps
}), showIndeterminateIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.reset,
className: "components-checkbox-control__indeterminate",
role: "presentation"
}) : null, showCheckedIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.check,
className: "components-checkbox-control__checked",
role: "presentation"
}) : null]
}), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
className: "components-checkbox-control__label",
htmlFor: id,
children: label
})]
})
});
}
var _default = exports.default = CheckboxControl;
//# sourceMappingURL=index.js.map