@wordpress/interface
Version:
Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.
65 lines (62 loc) • 2.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ComplementaryAreaToggle;
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _plugins = require("@wordpress/plugins");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Whether the role supports checked state.
*
* @param {import('react').AriaRole} role Role.
* @return {boolean} Whether the role supports checked state.
* @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked
*/function roleSupportsCheckedState(role) {
return ['checkbox', 'option', 'radio', 'switch', 'menuitemcheckbox', 'menuitemradio', 'treeitem'].includes(role);
}
function ComplementaryAreaToggle({
as = _components.Button,
scope,
identifier: identifierProp,
icon: iconProp,
selectedIcon,
name,
shortcut,
...props
}) {
const ComponentToUse = as;
const context = (0, _plugins.usePluginContext)();
const icon = iconProp || context.icon;
const identifier = identifierProp || `${context.name}/${name}`;
const isSelected = (0, _data.useSelect)(select => select(_store.store).getActiveComplementaryArea(scope) === identifier, [identifier, scope]);
const {
enableComplementaryArea,
disableComplementaryArea
} = (0, _data.useDispatch)(_store.store);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentToUse, {
icon: selectedIcon && isSelected ? selectedIcon : icon,
"aria-controls": identifier.replace('/', ':')
// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
,
"aria-checked": roleSupportsCheckedState(props.role) ? isSelected : undefined,
onClick: () => {
if (isSelected) {
disableComplementaryArea(scope);
} else {
enableComplementaryArea(scope, identifier);
}
},
shortcut: shortcut,
...props
});
}
//# sourceMappingURL=index.js.map