feat: show/hide table columns (#1078)

Closes #813
2023-08-04 19:44:46 +02:00
parent 417ca3d131
commit c6bec40c90
20 changed files with 434 additions and 147 deletions
@@ -0,0 +1,46 @@
+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>
+    </>
+  );
+};