2022-01-04 12:16:09 +00:00
|
|
|
import clsx from 'clsx';
|
|
|
|
import { Menu, MenuButton, MenuList } from '@reach/menu-button';
|
|
|
|
import { PropsWithChildren, ReactNode } from 'react';
|
2022-06-23 06:32:18 +00:00
|
|
|
import { MoreVertical } from 'react-feather';
|
2022-01-04 12:16:09 +00:00
|
|
|
|
|
|
|
interface Props {
|
2022-01-23 19:48:04 +00:00
|
|
|
quickActions?: ReactNode;
|
2022-01-04 12:16:09 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export function TableSettingsMenu({
|
|
|
|
quickActions,
|
|
|
|
children,
|
|
|
|
}: PropsWithChildren<Props>) {
|
|
|
|
return (
|
|
|
|
<Menu className="setting">
|
|
|
|
{({ isExpanded }) => (
|
|
|
|
<>
|
|
|
|
<MenuButton
|
|
|
|
className={clsx('table-setting-menu-btn', {
|
|
|
|
'setting-active': isExpanded,
|
|
|
|
})}
|
|
|
|
>
|
2022-06-23 06:32:18 +00:00
|
|
|
<MoreVertical
|
|
|
|
size="13"
|
|
|
|
className="space-right"
|
|
|
|
strokeWidth="3px"
|
|
|
|
aria-hidden="true"
|
|
|
|
aria-label="Settings"
|
|
|
|
/>
|
2022-01-04 12:16:09 +00:00
|
|
|
</MenuButton>
|
|
|
|
<MenuList>
|
|
|
|
<div className="tableMenu">
|
|
|
|
<div className="menuHeader">Table settings</div>
|
|
|
|
<div className="menuContent">{children}</div>
|
|
|
|
{quickActions && (
|
|
|
|
<div>
|
|
|
|
<div className="menuHeader">Quick actions</div>
|
|
|
|
<div className="menuContent">{quickActions}</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</MenuList>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Menu>
|
|
|
|
);
|
|
|
|
}
|