@woocommerce/components
Version:
UI components for WooCommerce.
85 lines (84 loc) • 3.08 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 prop_types_1 = __importDefault(require("prop-types"));
const clsx_1 = __importDefault(require("clsx"));
const element_1 = require("@wordpress/element");
/**
* Internal dependencies
*/
const timeline_item_1 = __importDefault(require("./timeline-item"));
const util_1 = require("./util");
const TimelineGroup = ({ group = { title: '', items: [] }, className = '', orderBy = 'desc', clockFormat, }) => {
const groupClassName = (0, clsx_1.default)('woocommerce-timeline-group', className);
const itemsToTimlineItem = (item, itemIndex) => {
const itemKey = group.title + '-' + itemIndex;
return ((0, element_1.createElement)(timeline_item_1.default, { key: itemKey, item: item, clockFormat: clockFormat }));
};
return ((0, element_1.createElement)("li", { className: groupClassName },
(0, element_1.createElement)("p", { className: 'woocommerce-timeline-group__title' }, group.title),
(0, element_1.createElement)("ul", null, group.items
.sort((0, util_1.sortByDateUsing)(orderBy))
.map(itemsToTimlineItem)),
(0, element_1.createElement)("hr", null)));
};
TimelineGroup.propTypes = {
/**
* Additional CSS classes.
*/
className: prop_types_1.default.string,
/**
* The group to render.
*/
group: prop_types_1.default.shape({
/**
* The group title.
*/
title: prop_types_1.default.string,
/**
* An array of list items.
*/
items: prop_types_1.default.arrayOf(prop_types_1.default.shape({
/**
* Date for the timeline item.
*/
date: prop_types_1.default.instanceOf(Date).isRequired,
/**
* Icon for the Timeline item.
*/
icon: prop_types_1.default.element.isRequired,
/**
* Headline displayed for the list item.
*/
headline: prop_types_1.default.oneOfType([
prop_types_1.default.element,
prop_types_1.default.string,
]).isRequired,
/**
* Body displayed for the list item.
*/
body: prop_types_1.default.arrayOf(prop_types_1.default.oneOfType([
prop_types_1.default.element,
prop_types_1.default.string,
])),
/**
* Allows users to toggle the timestamp on or off.
*/
hideTimestamp: prop_types_1.default.bool,
})),
}),
/**
* Defines how items should be ordered.
*/
orderBy: prop_types_1.default.oneOf(['asc', 'desc']),
/**
* The PHP clock format string used to format times, see php.net/date.
*/
clockFormat: prop_types_1.default.string,
};
exports.default = TimelineGroup;