45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import classNames from 'classnames';
|
|
import React from 'react';
|
|
|
|
interface Props {
|
|
className?: string;
|
|
children: JSX.Element[];
|
|
equalWidth?: boolean;
|
|
}
|
|
|
|
export function ButtonGroup(props: Props) {
|
|
// Attach props to children following this guide
|
|
// https://stackoverflow.com/a/35102287
|
|
const { className, children, equalWidth } = props;
|
|
const numChildren = children.length;
|
|
const hasChildren = Boolean(numChildren);
|
|
|
|
const firstChild = children[0];
|
|
const lastChild = children[numChildren - 1];
|
|
|
|
return (
|
|
<div className={classNames('flex', className)}>
|
|
{hasChildren &&
|
|
React.cloneElement(firstChild, {
|
|
className: classNames(
|
|
'rounded-r-none border-r-0',
|
|
equalWidth && 'flex-1',
|
|
),
|
|
})}
|
|
{numChildren > 2 &&
|
|
children.slice(1, numChildren - 1).map(child =>
|
|
React.cloneElement(child, {
|
|
className: classNames(
|
|
'rounded-r-none rounded-l-none border-r-0',
|
|
equalWidth && 'flex-1',
|
|
),
|
|
}),
|
|
)}
|
|
{hasChildren &&
|
|
React.cloneElement(lastChild, {
|
|
className: classNames('rounded-l-none', equalWidth && 'flex-1'),
|
|
})}
|
|
</div>
|
|
);
|
|
}
|