umami/components/common/ButtonGroup.js

43 lines
1.1 KiB
JavaScript
Raw Normal View History

2020-08-23 07:01:14 +02:00
import React from 'react';
import PropTypes from 'prop-types';
2020-08-23 07:01:14 +02:00
import classNames from 'classnames';
import Button from './Button';
import styles from './ButtonGroup.module.css';
function ButtonGroup({ items = [], selectedItem, className, size, icon, onClick = () => {} }) {
2020-08-23 07:01:14 +02:00
return (
<div className={classNames(styles.group, className)}>
2020-09-06 02:27:01 +02:00
{items.map(item => {
const { label, value } = item;
return (
<Button
key={value}
className={classNames(styles.button, { [styles.selected]: selectedItem === value })}
size={size}
icon={icon}
onClick={() => onClick(value)}
>
{label}
</Button>
);
})}
2020-08-23 07:01:14 +02:00
</div>
);
}
ButtonGroup.propTypes = {
items: PropTypes.arrayOf(
PropTypes.shape({
label: PropTypes.node,
value: PropTypes.any.isRequired,
}),
),
selectedItem: PropTypes.any,
className: PropTypes.string,
size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
icon: PropTypes.node,
onClick: PropTypes.func,
};
export default ButtonGroup;