@woocommerce/components
Version:
UI components for WooCommerce.
98 lines (97 loc) • 3.58 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.handleKeyDown = handleKeyDown;
/**
* External dependencies
*/
const element_1 = require("@wordpress/element");
const keycodes_1 = require("@wordpress/keycodes");
const prop_types_1 = __importDefault(require("prop-types"));
/**
* Internal dependencies
*/
const link_1 = __importDefault(require("../link"));
function handleKeyDown(event, onClick) {
if (typeof onClick === 'function' && event.keyCode === keycodes_1.ENTER) {
onClick();
}
}
function getItemLinkType(item) {
const { href, linkType } = item;
if (linkType) {
return linkType;
}
return href ? 'external' : null;
}
/**
* List component to display a list of items.
*
* @param {Object} props props for list item
*/
function ListItem(props) {
const { item } = props;
const { before, title, after, content, onClick, href, target, listItemTag, } = item;
const hasAction = typeof onClick === 'function' || href;
const InnerTag = href ? link_1.default : 'div';
const innerTagProps = {
className: 'woocommerce-list__item-inner',
onClick: typeof onClick === 'function' ? onClick : null,
'aria-disabled': hasAction ? 'false' : null,
tabIndex: hasAction ? '0' : null,
role: hasAction ? 'menuitem' : null,
onKeyDown: (e) => (hasAction ? handleKeyDown(e, onClick) : null),
target: href ? target : null,
type: getItemLinkType(item),
href,
'data-list-item-tag': listItemTag,
};
return ((0, element_1.createElement)(InnerTag, { ...innerTagProps },
before && ((0, element_1.createElement)("div", { className: "woocommerce-list__item-before" }, before)),
(0, element_1.createElement)("div", { className: "woocommerce-list__item-text" },
(0, element_1.createElement)("span", { className: "woocommerce-list__item-title" }, title),
content && ((0, element_1.createElement)("span", { className: "woocommerce-list__item-content" }, content))),
after && ((0, element_1.createElement)("div", { className: "woocommerce-list__item-after" }, after))));
}
ListItem.propTypes = {
/**
* An array of list items.
*/
item: 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]),
}).isRequired,
};
exports.default = ListItem;