@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
75 lines (71 loc) • 2.46 kB
JavaScript
/**
* MSKCC 2021, 2024
*/
import React__default from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { LayoutConstraint } from '../../Layout/index.js';
import { usePrefix } from '../../../internal/usePrefix.js';
function ContainedListItem(_ref) {
let {
action,
children,
className,
disabled = false,
onClick,
renderIcon: IconElement
} = _ref;
const prefix = usePrefix();
const isClickable = onClick !== undefined;
const classes = cx(`${prefix}--contained-list-item`, className, {
[`${prefix}--contained-list-item--clickable`]: isClickable,
[`${prefix}--contained-list-item--with-icon`]: IconElement,
[`${prefix}--contained-list-item--with-action`]: action
});
const content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, IconElement && /*#__PURE__*/React__default.createElement("div", {
className: `${prefix}--contained-list-item__icon`
}, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("div", null, children));
return /*#__PURE__*/React__default.createElement("li", {
className: classes
}, isClickable ? /*#__PURE__*/React__default.createElement("button", {
className: `${prefix}--contained-list-item__content`,
type: "button",
disabled: disabled,
onClick: onClick
}, content) : /*#__PURE__*/React__default.createElement("div", {
className: `${prefix}--contained-list-item__content`
}, content), action && /*#__PURE__*/React__default.createElement(LayoutConstraint, {
size: {
min: 'sm',
max: 'lg'
},
className: `${prefix}--contained-list-item__action`
}, action));
}
ContainedListItem.propTypes = {
/**
* A slot for a possible interactive element to render within the item.
*/
action: PropTypes.node,
/**
* The content of this item. Must not contain any interactive elements. Use props.action to include those.
*/
children: PropTypes.node,
/**
* Additional CSS class names.
*/
className: PropTypes.string,
/**
* Whether this item is disabled.
*/
disabled: PropTypes.bool,
/**
* Provide an optional function to be called when the item is clicked.
*/
onClick: PropTypes.func,
/**
* Provide an optional icon to render in front of the item's content.
*/
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
};
export { ContainedListItem as default };