@nocobase/app-template-default 1.0.0-beta.68 → 1.0.0-beta.70

package/client/components/data-table/view-options.tsx

@@ -0,0 +1,77 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import type { Column, Table as TableInstance } from '@tanstack/react-table';
+import { Settings2Icon } from 'lucide-react';
+import type { ReactElement, ReactNode } from 'react';
+
+import { Button } from '#components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '#components/ui/dropdown-menu';
+import { cn } from 'cn';
+
+export interface DataTableViewOptionsProps<TData> {
+  readonly table: TableInstance<TData>;
+  readonly className?: string;
+  /** Label for a column in the menu; defaults to the column id. */
+  readonly getColumnLabel?: (column: Column<TData, unknown>) => ReactNode;
+}
+
+/**
+ * A "View" menu that toggles the visibility of every hideable accessor column.
+ * Render it from the `toolbar` of `DataTable`.
+ */
+export function DataTableViewOptions<TData>({
+  table,
+  className,
+  getColumnLabel,
+}: DataTableViewOptionsProps<TData>): ReactElement {
+  const { t } = useTranslation();
+  const columns = table
+    .getAllColumns()
+    .filter(
+      (column) =>
+        typeof column.accessorFn !== 'undefined' && column.getCanHide(),
+    );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='outline'
+            size='sm'
+            className={cn('ml-auto h-8', className)}
+          />
+        }
+      >
+        <Settings2Icon />
+        {t('dataTable.view', { defaultValue: 'View' })}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end' className='w-auto min-w-40'>
+        {/* The label names this group, and Base UI throws if it sits outside one. */}
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>
+            {t('dataTable.toggleColumns', { defaultValue: 'Toggle columns' })}
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {columns.map((column) => (
+            <DropdownMenuCheckboxItem
+              key={column.id}
+              className='capitalize'
+              checked={column.getIsVisible()}
+              onCheckedChange={(checked) => column.toggleVisibility(checked)}
+            >
+              {getColumnLabel ? getColumnLabel(column) : column.id}
+            </DropdownMenuCheckboxItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/client/components/flow-diagram-css.d.ts

@@ -0,0 +1,2 @@
+/** React Flow's stylesheet is bundled by Vite; NodeNext also needs its module declaration. */
+declare module '@xyflow/react/dist/style.css';