Thaïs
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { cloneElement } from 'react';
|
|
import { useTheme } from '@emotion/react';
|
|
|
|
import {
|
|
DropdownMenuItem,
|
|
DropdownMenuItemProps,
|
|
} from '@/ui/dropdown/components/DropdownMenuItem';
|
|
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
|
|
import { DropdownMenuSubheader } from '@/ui/dropdown/components/DropdownMenuSubheader';
|
|
import {
|
|
ViewFieldDefinition,
|
|
ViewFieldMetadata,
|
|
} from '@/ui/table/types/ViewField';
|
|
|
|
type OptionsDropdownSectionProps = {
|
|
renderActions: (
|
|
viewField: ViewFieldDefinition<ViewFieldMetadata>,
|
|
) => DropdownMenuItemProps['actions'];
|
|
title: string;
|
|
viewFields: ViewFieldDefinition<ViewFieldMetadata>[];
|
|
};
|
|
|
|
export const OptionsDropdownSection = ({
|
|
renderActions,
|
|
title,
|
|
viewFields,
|
|
}: OptionsDropdownSectionProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<>
|
|
<DropdownMenuSubheader>{title}</DropdownMenuSubheader>
|
|
<DropdownMenuItemsContainer>
|
|
{viewFields.map((viewField) => (
|
|
<DropdownMenuItem actions={renderActions(viewField)}>
|
|
{viewField.columnIcon &&
|
|
cloneElement(viewField.columnIcon, {
|
|
size: theme.icon.size.md,
|
|
})}
|
|
{viewField.columnLabel}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuItemsContainer>
|
|
</>
|
|
);
|
|
};
|