46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
|
/** @format */
|
||
|
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { __ } from '@wordpress/i18n';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
import { Dashicon } from '@wordpress/components';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
|
||
|
|
const SummaryNumber = ( { context, delta, label, selected, value } ) => {
|
||
|
|
if ( ! context ) {
|
||
|
|
context = __( 'vs Previous Period', 'woo-dash' );
|
||
|
|
}
|
||
|
|
|
||
|
|
const classes = classnames( 'woocommerce-summary__item', {
|
||
|
|
'is-selected': selected,
|
||
|
|
} );
|
||
|
|
|
||
|
|
return (
|
||
|
|
<li className={ classes }>
|
||
|
|
<span className="woocommerce-summary__item-label">{ label }</span>
|
||
|
|
<span className="woocommerce-summary__item-value">{ value }</span>
|
||
|
|
{ delta && (
|
||
|
|
<span className="woocommerce-summary__item-delta">
|
||
|
|
<Dashicon
|
||
|
|
className="woocommerce-summary__item-delta-icon"
|
||
|
|
icon={ delta > 0 ? 'arrow-up-alt' : 'arrow-down-alt' }
|
||
|
|
/>
|
||
|
|
<span className="woocommerce-summary__item-delta-value">{ delta }%</span>
|
||
|
|
<span className="woocommerce-summary__item-delta-label">{ context }</span>
|
||
|
|
</span>
|
||
|
|
) }
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
SummaryNumber.propTypes = {
|
||
|
|
context: PropTypes.string,
|
||
|
|
delta: PropTypes.number,
|
||
|
|
label: PropTypes.string.isRequired,
|
||
|
|
selected: PropTypes.bool,
|
||
|
|
value: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] ).isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SummaryNumber;
|