@woocommerce/components
Version:
UI components for WooCommerce.
49 lines (48 loc) • 1.99 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* External dependencies
*/
const components_1 = require("@wordpress/components");
const i18n_1 = require("@wordpress/i18n");
const clsx_1 = __importDefault(require("clsx"));
const lodash_1 = require("lodash");
const prop_types_1 = __importDefault(require("prop-types"));
const element_1 = require("@wordpress/element");
/**
* Internal dependencies
*/
const utils_1 = require("./utils");
const Menu = ({ label, orientation, itemCount, items }) => {
const instanceId = (0, lodash_1.uniqueId)('woocommerce-summary-helptext-');
const hasItemsClass = (0, utils_1.getHasItemsClass)(itemCount);
const classes = (0, clsx_1.default)('woocommerce-summary', {
[hasItemsClass]: orientation === 'horizontal',
});
return ((0, element_1.createElement)(components_1.NavigableMenu, { "aria-label": label, "aria-describedby": instanceId, orientation: orientation, stopNavigationEvents: true },
(0, element_1.createElement)("p", { id: instanceId, className: "screen-reader-text" }, (0, i18n_1.__)('List of data points available for filtering. Use arrow keys to cycle through ' +
'the list. Click a data point for a detailed report.', 'woocommerce')),
(0, element_1.createElement)("ul", { className: classes }, items)));
};
Menu.propTypes = {
/**
* An optional label of this group, read to screen reader users.
*/
label: prop_types_1.default.string,
/**
* Item layout orientation.
*/
orientation: prop_types_1.default.oneOf(['vertical', 'horizontal']).isRequired,
/**
* A list of `<SummaryNumber />`s.
*/
items: prop_types_1.default.node.isRequired,
/**
* Number of items.
*/
itemCount: prop_types_1.default.number.isRequired,
};
exports.default = Menu;