@woocommerce/components
Version:
UI components for WooCommerce.
58 lines (57 loc) • 2.63 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SummaryNumberPlaceholder = void 0;
/**
* External dependencies
*/
const element_1 = require("@wordpress/element");
const clsx_1 = __importDefault(require("clsx"));
const lodash_1 = require("lodash");
const prop_types_1 = __importDefault(require("prop-types"));
const viewport_1 = require("@wordpress/viewport");
/**
* Internal dependencies
*/
const utils_1 = require("./utils");
const SummaryNumberPlaceholder = ({ className }) => ((0, element_1.createElement)("li", { "data-testid": "summary-placeholder", className: (0, clsx_1.default)('woocommerce-summary__item-container is-placeholder', className) },
(0, element_1.createElement)("div", { className: "woocommerce-summary__item" },
(0, element_1.createElement)("div", { className: "woocommerce-summary__item-label" }),
(0, element_1.createElement)("div", { className: "woocommerce-summary__item-data" },
(0, element_1.createElement)("div", { className: "woocommerce-summary__item-value" }),
(0, element_1.createElement)("div", { className: "woocommerce-summary__item-delta" })))));
exports.SummaryNumberPlaceholder = SummaryNumberPlaceholder;
/**
* `SummaryListPlaceholder` behaves like `SummaryList` but displays placeholder summary items instead of data.
* This can be used while loading data.
*/
class SummaryListPlaceholder extends element_1.Component {
render() {
const { isDropdownBreakpoint } = this.props;
const numberOfItems = isDropdownBreakpoint
? 1
: this.props.numberOfItems;
const hasItemsClass = (0, utils_1.getHasItemsClass)(numberOfItems);
const classes = (0, clsx_1.default)('woocommerce-summary', {
[hasItemsClass]: !isDropdownBreakpoint,
'is-placeholder': true,
});
return ((0, element_1.createElement)("ul", { className: classes, "aria-hidden": "true" }, (0, lodash_1.range)(numberOfItems).map((i) => {
return (0, element_1.createElement)(exports.SummaryNumberPlaceholder, { key: i });
})));
}
}
SummaryListPlaceholder.propTypes = {
/**
* An integer with the number of summary items to display.
*/
numberOfItems: prop_types_1.default.number.isRequired,
};
SummaryListPlaceholder.defaultProps = {
numberOfRows: 5,
};
exports.default = (0, viewport_1.withViewportMatch)({
isDropdownBreakpoint: '< large',
})(SummaryListPlaceholder);