mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
4a1af0f057
Bootstrap-5 Dropdown menu component GitOrigin-RevId: 8a74f2341eebf953367ab73946d72e8aa7bd3c13
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import classNames from 'classnames'
|
|
import Button from './button'
|
|
import {
|
|
Dropdown,
|
|
DropdownItem,
|
|
DropdownMenu,
|
|
DropdownToggle,
|
|
} from './dropdown-menu'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import type { SplitButtonProps } from '@/features/ui/components/types/split-button-props'
|
|
|
|
export function SplitButton({
|
|
align,
|
|
id,
|
|
items,
|
|
text,
|
|
variant,
|
|
...props
|
|
}: SplitButtonProps) {
|
|
const buttonClassName = classNames('split-button')
|
|
|
|
return (
|
|
<div>
|
|
<Dropdown align={align}>
|
|
<Button className={buttonClassName} variant={variant} {...props}>
|
|
<span className="split-button-content">{text}</span>
|
|
</Button>
|
|
<DropdownToggle
|
|
bsPrefix="dropdown-button-toggle"
|
|
id={id}
|
|
variant={variant}
|
|
{...props}
|
|
>
|
|
<MaterialIcon className="split-button-caret" type="expand_more" />
|
|
</DropdownToggle>
|
|
<DropdownMenu>
|
|
{items.map((item, index) => (
|
|
<DropdownItem key={index} eventKey={item.eventKey}>
|
|
{item.label}
|
|
</DropdownItem>
|
|
))}
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</div>
|
|
)
|
|
}
|