woocommerce/plugins/woocommerce-admin/client/components/summary/index.js

90 lines
2.5 KiB
JavaScript

/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import { Children, cloneElement } from '@wordpress/element';
import { Dropdown, NavigableMenu } from '@wordpress/components';
import PropTypes from 'prop-types';
import { uniqueId } from 'lodash';
/**
* Internal dependencies
*/
import { isMobileViewport, isTabletViewport } from 'lib/ui';
import './style.scss';
/**
* A container element for a list of SummaryNumbers. This component handles detecting & switching to
* the mobile format on smaller screens.
*
* @return { object } -
*/
const SummaryList = ( { children, label } ) => {
if ( ! label ) {
label = __( 'Performance Indicators', 'wc-admin' );
}
const isDropdownBreakpoint = isTabletViewport() || isMobileViewport();
// We default to "one" because we can't have empty children.
const itemCount = Children.count( children ) || 1;
const hasItemsClass = itemCount < 10 ? `has-${ itemCount }-items` : 'has-10-items';
const classes = classnames( 'woocommerce-summary', {
[ hasItemsClass ]: ! isDropdownBreakpoint,
} );
const instanceId = uniqueId( 'woocommerce-summary-helptext-' );
const menu = (
<NavigableMenu
aria-label={ label }
aria-describedby={ instanceId }
orientation={ isDropdownBreakpoint ? 'vertical' : 'horizontal' }
stopNavigationEvents
>
<p id={ instanceId } className="screen-reader-text">
{ __(
'List of data points available for filtering. Use arrow keys to cycle through ' +
'the list. Click a data point for a detailed report.',
'wc-admin'
) }
</p>
<ul className={ classes }>{ children }</ul>
</NavigableMenu>
);
// On large screens, or if there are not multiple SummaryNumbers, we'll display the plain list.
if ( ! isDropdownBreakpoint || itemCount < 2 ) {
return menu;
}
const items = Children.toArray( children );
const selected = items.find( item => !! item.props.selected );
if ( ! selected ) {
return menu;
}
return (
<Dropdown
className="woocommerce-summary"
position="bottom"
headerTitle={ label }
renderToggle={ ( { isOpen, onToggle } ) => cloneElement( selected, { onToggle, isOpen } ) }
renderContent={ () => menu }
/>
);
};
SummaryList.propTypes = {
/**
* A list of `<SummaryNumber />`s
*/
children: PropTypes.node.isRequired,
/**
* An optional label of this group, read to screen reader users. Defaults to "Performance Indicators".
*/
label: PropTypes.string,
};
export default SummaryList;