@wordpress/components
Version:
UI components for WordPress.
188 lines (184 loc) • 6.87 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _a11y = require("@wordpress/a11y");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _dropdownMenu = _interopRequireDefault(require("../../dropdown-menu"));
var _menuGroup = _interopRequireDefault(require("../../menu-group"));
var _menuItem = _interopRequireDefault(require("../../menu-item"));
var _hStack = require("../../h-stack");
var _heading = require("../../heading");
var _hook = require("./hook");
var _context = require("../../context");
var _styles = require("../styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const DefaultControlsGroup = ({
itemClassName,
items,
toggleItem
}) => {
if (!items.length) {
return null;
}
const resetSuffix = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ResetLabel, {
"aria-hidden": true,
children: (0, _i18n.__)('Reset')
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: items.map(([label, hasValue]) => {
if (hasValue) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuItem.default, {
className: itemClassName,
role: "menuitem",
label: (0, _i18n.sprintf)(
// translators: %s: The name of the control being reset e.g. "Padding".
(0, _i18n.__)('Reset %s'), label),
onClick: () => {
toggleItem(label);
(0, _a11y.speak)((0, _i18n.sprintf)(
// translators: %s: The name of the control being reset e.g. "Padding".
(0, _i18n.__)('%s reset to default'), label), 'assertive');
},
suffix: resetSuffix,
children: label
}, label);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuItem.default, {
icon: _icons.check,
className: itemClassName,
role: "menuitemcheckbox",
isSelected: true,
"aria-disabled": true,
children: label
}, label);
})
});
};
const OptionalControlsGroup = ({
items,
toggleItem
}) => {
if (!items.length) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: items.map(([label, isSelected]) => {
const itemLabel = isSelected ? (0, _i18n.sprintf)(
// translators: %s: The name of the control being hidden and reset e.g. "Padding".
(0, _i18n.__)('Hide and reset %s'), label) : (0, _i18n.sprintf)(
// translators: %s: The name of the control to display e.g. "Padding".
(0, _i18n._x)('Show %s', 'input control'), label);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuItem.default, {
icon: isSelected ? _icons.check : null,
isSelected: isSelected,
label: itemLabel,
onClick: () => {
if (isSelected) {
(0, _a11y.speak)((0, _i18n.sprintf)(
// translators: %s: The name of the control being reset e.g. "Padding".
(0, _i18n.__)('%s hidden and reset to default'), label), 'assertive');
} else {
(0, _a11y.speak)((0, _i18n.sprintf)(
// translators: %s: The name of the control being reset e.g. "Padding".
(0, _i18n.__)('%s is now visible'), label), 'assertive');
}
toggleItem(label);
},
role: "menuitemcheckbox",
children: label
}, label);
})
});
};
const ToolsPanelHeader = (props, forwardedRef) => {
const {
areAllOptionalControlsHidden,
defaultControlsItemClassName,
dropdownMenuClassName,
hasMenuItems,
headingClassName,
headingLevel = 2,
label: labelText,
menuItems,
resetAll,
toggleItem,
dropdownMenuProps,
...headerProps
} = (0, _hook.useToolsPanelHeader)(props);
if (!labelText) {
return null;
}
const defaultItems = Object.entries(menuItems?.default || {});
const optionalItems = Object.entries(menuItems?.optional || {});
const dropDownMenuIcon = areAllOptionalControlsHidden ? _icons.plus : _icons.moreVertical;
const dropDownMenuLabelText = (0, _i18n.sprintf)(
// translators: %s: The name of the tool e.g. "Color" or "Typography".
(0, _i18n._x)('%s options', 'Button label to reveal tool panel options'), labelText);
const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? (0, _i18n.__)('All options are currently hidden') : undefined;
const canResetAll = [...defaultItems, ...optionalItems].some(([, isSelected]) => isSelected);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
...headerProps,
ref: forwardedRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_heading.Heading, {
level: headingLevel,
className: headingClassName,
children: labelText
}), hasMenuItems && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenu.default, {
...dropdownMenuProps,
icon: dropDownMenuIcon,
label: dropDownMenuLabelText,
menuProps: {
className: dropdownMenuClassName
},
toggleProps: {
size: 'small',
description: dropdownMenuDescriptionText
},
children: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_menuGroup.default, {
label: labelText,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultControlsGroup, {
items: defaultItems,
toggleItem: toggleItem,
itemClassName: defaultControlsItemClassName
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionalControlsGroup, {
items: optionalItems,
toggleItem: toggleItem
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuGroup.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuItem.default, {
"aria-disabled": !canResetAll
// @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem,
// we should rename it and explicitly allow it as an official API. All the other Button variants
// don't make sense in a MenuItem context, and should be disallowed.
,
variant: "tertiary",
onClick: () => {
if (canResetAll) {
resetAll();
(0, _a11y.speak)((0, _i18n.__)('All options reset'), 'assertive');
}
},
children: (0, _i18n.__)('Reset all')
})
})]
})
})]
});
};
const ConnectedToolsPanelHeader = (0, _context.contextConnect)(ToolsPanelHeader, 'ToolsPanelHeader');
var _default = exports.default = ConnectedToolsPanelHeader;
//# sourceMappingURL=component.js.map