@woocommerce/components
Version:
UI components for WooCommerce.
172 lines (171 loc) • 8.47 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 chevron_down_1 = __importDefault(require("gridicons/dist/chevron-down"));
const lodash_1 = require("lodash");
const prop_types_1 = __importDefault(require("prop-types"));
const element_1 = require("@wordpress/element");
const icons_1 = require("@wordpress/icons");
/**
* Internal dependencies
*/
const link_1 = __importDefault(require("../link"));
const experimental_1 = require("../experimental");
/**
* A component to show a value, label, and optionally a change percentage and children node. Can also act as a link to a specific report focus.
*
* @param {Object} props
* @param {Node} props.children
* @param {number} props.delta Change percentage. Float precision is rendered as given.
* @param {string} props.href
* @param {string} props.hrefType
* @param {boolean} props.isOpen
* @param {string} props.label
* @param {string} props.labelTooltipText
* @param {Function} props.onToggle
* @param {string} props.prevLabel
* @param {number|string} props.prevValue
* @param {boolean} props.reverseTrend
* @param {boolean} props.selected
* @param {number|string} props.value
* @param {Function} props.onLinkClickCallback
* @return {Object} -
*/
const SummaryNumber = ({ children, delta, href = '', hrefType = 'wc-admin', isOpen = false, label, labelTooltipText, onToggle, prevLabel = (0, i18n_1.__)('Previous period:', 'woocommerce'), prevValue, reverseTrend = false, selected = false, value, onLinkClickCallback = lodash_1.noop, }) => {
const liClasses = (0, clsx_1.default)('woocommerce-summary__item-container', {
'is-dropdown-button': onToggle,
'is-dropdown-expanded': isOpen,
});
const classes = (0, clsx_1.default)('woocommerce-summary__item', {
'is-selected': selected,
'is-good-trend': reverseTrend ? delta < 0 : delta > 0,
'is-bad-trend': reverseTrend ? delta > 0 : delta < 0,
});
let screenReaderLabel = delta > 0
? // eslint-disable-next-line @wordpress/valid-sprintf -- false positive from %%
(0, i18n_1.sprintf)(
/* translators: percentage change upwards */
(0, i18n_1.__)('Up %f%% from %s', 'woocommerce'), delta, prevLabel)
: // eslint-disable-next-line @wordpress/valid-sprintf -- false positive from %%
(0, i18n_1.sprintf)(
/* translators: percentage change downwards */
(0, i18n_1.__)('Down %f%% from %s', 'woocommerce'), Math.abs(delta), prevLabel);
if (!delta) {
screenReaderLabel = (0, i18n_1.sprintf)(
/* translators: previous value */
(0, i18n_1.__)('No change from %s', 'woocommerce'), prevLabel);
}
let Container;
const containerProps = {
className: classes,
'aria-current': selected ? 'page' : null,
};
if (onToggle || href) {
const isButton = !!onToggle;
Container = isButton ? components_1.Button : link_1.default;
if (isButton) {
containerProps.onClick = onToggle;
containerProps['aria-expanded'] = isOpen;
}
else {
containerProps.href = href;
containerProps.role = 'menuitem';
containerProps.onClick = onLinkClickCallback;
containerProps.type = hrefType;
}
}
else {
Container = 'div';
}
return ((0, element_1.createElement)("li", { className: liClasses },
(0, element_1.createElement)(Container, { ...containerProps },
(0, element_1.createElement)("div", { className: "woocommerce-summary__item-label" },
(0, element_1.createElement)(experimental_1.Text, { variant: "body.small", size: "14", lineHeight: "20px" }, label),
labelTooltipText && ((0, element_1.createElement)(components_1.Tooltip, { text: labelTooltipText, position: "top center" },
(0, element_1.createElement)("div", { className: "woocommerce-summary__info-tooltip" },
(0, element_1.createElement)(icons_1.Icon, { width: 20, height: 20, icon: icons_1.info }))))),
(0, element_1.createElement)("div", { className: "woocommerce-summary__item-data" },
(0, element_1.createElement)("div", { className: "woocommerce-summary__item-value" },
(0, element_1.createElement)(experimental_1.Text, { variant: "title.small", size: "20", lineHeight: "28px" }, !(0, lodash_1.isNil)(value)
? value
: (0, i18n_1.__)('N/A', 'woocommerce'))),
(0, element_1.createElement)(components_1.Tooltip, { text: !(0, lodash_1.isNil)(prevValue)
? `${prevLabel} ${prevValue}`
: (0, i18n_1.__)('N/A', 'woocommerce'), position: "top center" },
(0, element_1.createElement)("div", { className: "woocommerce-summary__item-delta", role: "presentation", "aria-label": screenReaderLabel },
(0, element_1.createElement)(experimental_1.Text, { variant: "caption", size: "12", lineHeight: "16px" }, !(0, lodash_1.isNil)(delta)
? // eslint-disable-next-line @wordpress/valid-sprintf -- false positive from %%
(0, i18n_1.sprintf)(
/* translators: percentage change */
(0, i18n_1.__)('%f%%', 'woocommerce'), delta)
: (0, i18n_1.__)('N/A', 'woocommerce'))))),
onToggle ? ((0, element_1.createElement)(chevron_down_1.default, { className: "woocommerce-summary__toggle", size: 24 })) : null,
children)));
};
SummaryNumber.propTypes = {
/**
* A number to represent the percentage change since the last comparison period - positive numbers will show
* a green up arrow, negative numbers will show a red down arrow, and zero will show a flat right arrow.
* If omitted, no change value will display.
*/
delta: prop_types_1.default.number,
/**
* An internal link to the report focused on this number.
*/
href: prop_types_1.default.string,
/**
* The type of the link
*/
hrefType: prop_types_1.default.oneOf(['wp-admin', 'wc-admin', 'external']),
/**
* Boolean describing whether the menu list is open. Only applies in mobile view,
* and only applies to the toggle-able item (first in the list).
*/
isOpen: prop_types_1.default.bool,
/**
* A string description of this value, ex "Revenue", or "New Customers"
*/
label: prop_types_1.default.string.isRequired,
/**
* A string that will displayed via a Tooltip next to the label
*/
labelTooltipText: prop_types_1.default.string,
/**
* A function used to switch the given SummaryNumber to a button, and called on click.
*/
onToggle: prop_types_1.default.func,
/**
* A string description of the previous value's timeframe, ex "Previous year:".
*/
prevLabel: prop_types_1.default.string,
/**
* A string or number value to display - a string is allowed so we can accept currency formatting.
* If omitted, this section won't display.
*/
prevValue: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
/**
* A boolean used to indicate that a negative delta is "good", and should be styled like a positive (and vice-versa).
*/
reverseTrend: prop_types_1.default.bool,
/**
* A boolean used to show a highlight style on this number.
*/
selected: prop_types_1.default.bool,
/**
* A string or number value to display - a string is allowed so we can accept currency formatting.
*/
value: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
/**
* A function to be called after a SummaryNumber, rendered as a link, is clicked.
*/
onLinkClickCallback: prop_types_1.default.func,
};
exports.default = SummaryNumber;