@woocommerce/components/build/summary/index.js

UI components for WooCommerce.

"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 i18n_1 = require("@wordpress/i18n");
const element_1 = require("@wordpress/element");
const components_1 = require("@wordpress/components");
const prop_types_1 = __importDefault(require("prop-types"));
const viewport_1 = require("@wordpress/viewport");
/**
 * Internal dependencies
 */
const menu_1 = __importDefault(require("./menu"));
/**
 * A container element for a list of SummaryNumbers. This component handles detecting & switching to
 * the mobile format on smaller screens.
 *
 * @param {Object} props
 * @param {Node}   props.children
 * @param {string} props.isDropdownBreakpoint
 * @param {string} props.label
 * @return {Object} -
 */
const SummaryList = ({ children, isDropdownBreakpoint, label = (0, i18n_1.__)('Performance Indicators', 'woocommerce'), }) => {
    const items = children({});
    // We default to "one" because we can't have empty children.
    const itemCount = element_1.Children.count(items) || 1;
    const orientation = isDropdownBreakpoint ? 'vertical' : 'horizontal';
    const summaryMenu = ((0, element_1.createElement)(menu_1.default, { label: label, orientation: orientation, itemCount: itemCount, items: items }));
    // On large screens, or if there are not multiple SummaryNumbers, we'll display the plain list.
    if (!isDropdownBreakpoint || itemCount < 2) {
        return summaryMenu;
    }
    const selected = items.find((item) => !!item.props.selected);
    if (!selected) {
        return summaryMenu;
    }
    return ((0, element_1.createElement)(components_1.Dropdown, { className: "woocommerce-summary", popoverProps: {
            placement: 'bottom',
        }, headerTitle: label, renderToggle: ({ isOpen, onToggle }) => (0, element_1.cloneElement)(selected, { onToggle, isOpen }), renderContent: (renderContentArgs) => ((0, element_1.createElement)(menu_1.default, { label: label, orientation: orientation, itemCount: itemCount, items: children(renderContentArgs) })) }));
};
SummaryList.propTypes = {
    /**
     * A function returning a list of `<SummaryNumber />`s
     */
    children: prop_types_1.default.func.isRequired,
    /**
     * An optional label of this group, read to screen reader users.
     */
    label: prop_types_1.default.string,
};
exports.default = (0, viewport_1.withViewportMatch)({
    isDropdownBreakpoint: '< large',
})(SummaryList);