61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import { mapToCssModules, tagPropType } from './utils';
|
|
|
|
const propTypes = {
|
|
/** Add custom class */
|
|
className: PropTypes.string,
|
|
/** Change underlying component's CSS base class name */
|
|
cssModule: PropTypes.object,
|
|
/** Remove borders to make the list appear flush */
|
|
flush: PropTypes.bool,
|
|
/** Make the list horizontal instead of vertical */
|
|
horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
|
/** Add number to the ListItems */
|
|
numbered: PropTypes.bool,
|
|
/** Set a custom element for this component */
|
|
tag: tagPropType,
|
|
};
|
|
|
|
const getHorizontalClass = (horizontal) => {
|
|
if (horizontal === false) {
|
|
return false;
|
|
}
|
|
if (horizontal === true || horizontal === 'xs') {
|
|
return 'list-group-horizontal';
|
|
}
|
|
return `list-group-horizontal-${horizontal}`;
|
|
};
|
|
|
|
function ListGroup(props) {
|
|
const {
|
|
className,
|
|
cssModule,
|
|
tag: Tag = 'ul',
|
|
flush,
|
|
horizontal = false,
|
|
numbered = false,
|
|
...attributes
|
|
} = props;
|
|
const classes = mapToCssModules(
|
|
classNames(
|
|
className,
|
|
'list-group',
|
|
// list-group-horizontal cannot currently be mixed with list-group-flush
|
|
// we only try to apply horizontal classes if flush is false
|
|
flush ? 'list-group-flush' : getHorizontalClass(horizontal),
|
|
{
|
|
'list-group-numbered': numbered,
|
|
},
|
|
),
|
|
cssModule,
|
|
);
|
|
|
|
return <Tag {...attributes} className={classes} />;
|
|
}
|
|
|
|
ListGroup.propTypes = propTypes;
|
|
|
|
export default ListGroup;
|