@woocommerce/components
Version:
UI components for WooCommerce.
91 lines (90 loc) • 3.46 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 clsx_1 = __importDefault(require("clsx"));
const prop_types_1 = __importDefault(require("prop-types"));
const react_transition_group_1 = require("react-transition-group");
const deprecated_1 = __importDefault(require("@wordpress/deprecated"));
const element_1 = require("@wordpress/element");
/**
* Internal dependencies
*/
const list_item_1 = __importDefault(require("./list-item"));
/**
* List component to display a list of items.
*
* @param {Object} props props for list
*/
function List(props) {
const { className, items, children } = props;
const listClassName = (0, clsx_1.default)('woocommerce-list', className);
(0, deprecated_1.default)('List with items prop is deprecated', {
version: '9.0.0',
hint: 'See ExperimentalList / ExperimentalListItem for the new API that will replace this component in future versions.',
});
return ((0, element_1.createElement)(react_transition_group_1.TransitionGroup, { component: "ul", className: listClassName, role: "menu" }, items.map((item, index) => {
const { className: itemClasses, href, key, onClick } = item;
const hasAction = typeof onClick === 'function' || href;
const itemClassName = (0, clsx_1.default)('woocommerce-list__item', itemClasses, {
'has-action': hasAction,
});
return ((0, element_1.createElement)(react_transition_group_1.CSSTransition, { key: key || index, timeout: 500, classNames: "woocommerce-list__item" },
(0, element_1.createElement)("li", { className: itemClassName }, children ? (children(item, index)) : ((0, element_1.createElement)(list_item_1.default, { item: item })))));
})));
}
List.propTypes = {
/**
* Additional class name to style the component.
*/
className: prop_types_1.default.string,
/**
* An array of list items.
*/
items: prop_types_1.default.arrayOf(prop_types_1.default.shape({
/**
* Content displayed after the list item text.
*/
after: prop_types_1.default.node,
/**
* Content displayed before the list item text.
*/
before: prop_types_1.default.node,
/**
* Additional class name to style the list item.
*/
className: prop_types_1.default.string,
/**
* Content displayed beneath the list item title.
*/
content: prop_types_1.default.oneOfType([
prop_types_1.default.string,
prop_types_1.default.node,
]),
/**
* Href attribute used in a Link wrapped around the item.
*/
href: prop_types_1.default.string,
/**
* Called when the list item is clicked.
*/
onClick: prop_types_1.default.func,
/**
* Target attribute used for Link wrapper.
*/
target: prop_types_1.default.string,
/**
* Title displayed for the list item.
*/
title: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
/**
* Unique key for list item.
*/
key: prop_types_1.default.string,
})),
};
exports.default = List;