@adecore/database 0.17.0-beta.2 → 0.18.0

package/src/table/TableToolbar.tsx

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import clsx from 'clsx';
 import {
     ChevronsLeft,
@@ -16,7 +16,7 @@ import {
     Undo2
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button, Icon, IconButton, Menu } from '@adecore/ui';
+import { Button, ButtonGroup, Icon, IconButton, Menu, Separator } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import type { Engine, FileFormat } from '../protocol/index.ts';
 import { CommandField } from './CommandField.tsx';
@@ -35,13 +35,14 @@ export interface TransferMenu {
 const EXPORT_FORMATS: readonly FileFormat[] = ['csv', 'tsv', 'json', 'sql'];
 
 export interface TableToolbarProps {
+    /* The app's own content before the command field, such as where the table is, with a separator after it and after the field. */
+    start?: ReactNode;
     refreshing: boolean;
     /* Why rows cannot be added, changed or deleted, or `null` when they can. */
     readOnlyReason: string | null;
     hasSelection: boolean;
     /* Whether any selected row has a change to take back. */
     canRevertSelection: boolean;
-    valuePanelOpen: boolean;
     /* The record view replaces the grid with the focused row as a list of fields. */
     recordViewOpen?: boolean;
     transfer?: TransferMenu;
@@ -62,7 +63,6 @@ export interface TableToolbarProps {
     onDeleteRows(): void;
     onCloneRows(): void;
     onRevertRows(): void;
-    onToggleValuePanel(): void;
     onToggleRecordView?(): void;
     onPageSizeChange(size: number): void;
     onFirstPage(): void;
@@ -76,11 +76,11 @@ export interface TableToolbarProps {
 
 /* The command field for filtering, sorting and jumping to a column, refresh, add row, the submit of pending changes, and a menu of the rest. */
 export function TableToolbar({
+    start,
     refreshing,
     readOnlyReason,
     hasSelection,
     canRevertSelection,
-    valuePanelOpen,
     recordViewOpen = false,
     transfer,
     pendingCount,
@@ -98,7 +98,6 @@ export function TableToolbar({
     onDeleteRows,
     onCloneRows,
     onRevertRows,
-    onToggleValuePanel,
     onToggleRecordView,
     onPageSizeChange,
     onFirstPage,
@@ -110,11 +109,19 @@ export function TableToolbar({
 }: TableToolbarProps) {
     const { t } = useTranslation('database');
     const readOnly = readOnlyReason !== null;
+    const hasStart = start !== undefined && start !== null && start !== false;
     const tooltipOf = (label: string): string => (readOnly ? t('table.unavailable', { action: label, reason: readOnlyReason }) : label);
 
     return (
         <div ref={ref} className={clsx('flex shrink-0 items-center gap-2 border-b border-border px-3 py-2', className)}>
+            {hasStart && (
+                <>
+                    {start}
+                    <Separator />
+                </>
+            )}
             <CommandField chips={chips} columns={columns} engine={engine} inputRef={commandRef} onChipsChange={onChipsChange} onJumpToColumn={onJumpToColumn} />
+            {hasStart && <Separator />}
             {pendingCount > 0 && (
                 <>
                     <Button variant="primary" size="sm" disabled={submitting} onClick={onSubmit}>
@@ -125,93 +132,101 @@ export function TableToolbar({
                     </Button>
                 </>
             )}
-            <IconButton icon={RefreshCw} size="sm" label={t('table.refresh')} busy={refreshing} onClick={onRefresh} />
-            <IconButton
-                icon={Plus}
-                size="sm"
-                label={t('table.addRow')}
-                tooltip={tooltipOf(t('table.addRow'))}
-                aria-disabled={readOnly || undefined}
-                onClick={() => !readOnly && onAddRow()}
-            />
-            <Menu.Root>
-                <IconButton icon={Ellipsis} size="sm" label={t('table.more')} render={<Menu.Trigger />} />
-                <Menu.Popup align="end">
-                    <Menu.SubmenuRoot>
-                        <Menu.SubmenuTrigger>
-                            <Icon icon={Rows3} size={14} />
-                            {t('table.pageSize')}
-                        </Menu.SubmenuTrigger>
-                        <Menu.Popup>
-                            <Menu.RadioGroup value={String(pageSize)} onValueChange={(value) => onPageSizeChange(Number(value))}>
-                                {PAGE_SIZES.map((size) => (
-                                    <Menu.RadioItem key={size} value={String(size)}>
-                                        {t('table.perPage', { size: formatNumber(size) })}
-                                    </Menu.RadioItem>
-                                ))}
-                            </Menu.RadioGroup>
-                        </Menu.Popup>
-                    </Menu.SubmenuRoot>
-                    <Menu.Item disabled={!bounds.hasPrevious} onClick={onFirstPage}>
-                        <Icon icon={ChevronsLeft} size={14} />
-                        {t('table.firstPage')}
-                    </Menu.Item>
-                    <Menu.Item disabled={!bounds.hasNext} onClick={onLastPage}>
-                        <Icon icon={ChevronsRight} size={14} />
-                        {t('table.lastPage')}
-                        {!bounds.exact && <Menu.Hint>{t('table.lastPageCounts')}</Menu.Hint>}
-                    </Menu.Item>
-                    <Menu.Separator />
-                    {onToggleRecordView !== undefined && (
-                        <Menu.CheckboxItem checked={recordViewOpen} onCheckedChange={onToggleRecordView}>
-                            <Icon icon={TableProperties} size={14} />
-                            {t('table.recordView')}
-                        </Menu.CheckboxItem>
-                    )}
-                    <Menu.CheckboxItem checked={valuePanelOpen} onCheckedChange={onToggleValuePanel}>
-                        <Icon icon={PanelRight} size={14} />
-                        {t('table.valuePanel')}
-                    </Menu.CheckboxItem>
-                    <Menu.Separator />
-                    {readOnly && <Menu.Label>{readOnlyReason}</Menu.Label>}
-                    <Menu.Item disabled={readOnly || !hasSelection} onClick={onCloneRows}>
-                        <Icon icon={CopyPlus} size={14} />
-                        {t('table.cloneRows')}
-                    </Menu.Item>
-                    <Menu.Item disabled={!canRevertSelection} onClick={onRevertRows}>
-                        <Icon icon={Undo2} size={14} />
-                        {t('table.revertRows')}
-                    </Menu.Item>
-                    <Menu.Item disabled={readOnly || !hasSelection} onClick={onDeleteRows}>
-                        <Icon icon={Trash2} size={14} />
-                        {t('table.deleteRows')}
-                    </Menu.Item>
-                    {transfer !== undefined && (
-                        <>
-                            <Menu.Separator />
-                            <Menu.SubmenuRoot>
-                                <Menu.SubmenuTrigger disabled={transfer.busy}>
-                                    <Icon icon={Download} size={14} />
-                                    {t('table.export.label')}
-                                </Menu.SubmenuTrigger>
-                                <Menu.Popup>
-                                    {EXPORT_FORMATS.map((format) => (
-                                        <Menu.Item key={format} onClick={() => transfer.onExport(format)}>
-                                            {t('table.export.as', { format: format.toUpperCase() })}
-                                        </Menu.Item>
+            <ButtonGroup>
+                <IconButton icon={RefreshCw} size="sm" label={t('table.refresh')} busy={refreshing} onClick={onRefresh} />
+                <IconButton
+                    icon={Plus}
+                    size="sm"
+                    label={t('table.addRow')}
+                    tooltip={tooltipOf(t('table.addRow'))}
+                    aria-disabled={readOnly || undefined}
+                    onClick={() => !readOnly && onAddRow()}
+                />
+                {onToggleRecordView !== undefined && (
+                    <IconButton
+                        icon={PanelRight}
+                        size="sm"
+                        label={t('table.recordView')}
+                        aria-pressed={recordViewOpen}
+                        active={recordViewOpen}
+                        onClick={onToggleRecordView}
+                    />
+                )}
+                <Menu.Root>
+                    <IconButton icon={Ellipsis} size="sm" label={t('table.more')} render={<Menu.Trigger />} />
+                    <Menu.Popup align="end">
+                        <Menu.SubmenuRoot>
+                            <Menu.SubmenuTrigger>
+                                <Icon icon={Rows3} size={14} />
+                                {t('table.pageSize')}
+                            </Menu.SubmenuTrigger>
+                            <Menu.Popup>
+                                <Menu.RadioGroup value={String(pageSize)} onValueChange={(value) => onPageSizeChange(Number(value))}>
+                                    {PAGE_SIZES.map((size) => (
+                                        <Menu.RadioItem key={size} value={String(size)}>
+                                            {t('table.perPage', { size: formatNumber(size) })}
+                                        </Menu.RadioItem>
                                     ))}
-                                </Menu.Popup>
-                            </Menu.SubmenuRoot>
-                            {transfer.onImport !== undefined && (
-                                <Menu.Item onClick={transfer.onImport}>
-                                    <Icon icon={FileInput} size={14} />
-                                    {t('table.import.menu')}
-                                </Menu.Item>
-                            )}
-                        </>
-                    )}
-                </Menu.Popup>
-            </Menu.Root>
+                                </Menu.RadioGroup>
+                            </Menu.Popup>
+                        </Menu.SubmenuRoot>
+                        <Menu.Item disabled={!bounds.hasPrevious} onClick={onFirstPage}>
+                            <Icon icon={ChevronsLeft} size={14} />
+                            {t('table.firstPage')}
+                        </Menu.Item>
+                        <Menu.Item disabled={!bounds.hasNext} onClick={onLastPage}>
+                            <Icon icon={ChevronsRight} size={14} />
+                            {t('table.lastPage')}
+                            {!bounds.exact && <Menu.Hint>{t('table.lastPageCounts')}</Menu.Hint>}
+                        </Menu.Item>
+                        <Menu.Separator />
+                        {onToggleRecordView !== undefined && (
+                            <Menu.CheckboxItem checked={recordViewOpen} onCheckedChange={onToggleRecordView}>
+                                <Icon icon={TableProperties} size={14} />
+                                {t('table.recordView')}
+                            </Menu.CheckboxItem>
+                        )}
+                        <Menu.Separator />
+                        {readOnly && <Menu.Label>{readOnlyReason}</Menu.Label>}
+                        <Menu.Item disabled={readOnly || !hasSelection} onClick={onCloneRows}>
+                            <Icon icon={CopyPlus} size={14} />
+                            {t('table.cloneRows')}
+                        </Menu.Item>
+                        <Menu.Item disabled={!canRevertSelection} onClick={onRevertRows}>
+                            <Icon icon={Undo2} size={14} />
+                            {t('table.revertRows')}
+                        </Menu.Item>
+                        <Menu.Item disabled={readOnly || !hasSelection} onClick={onDeleteRows}>
+                            <Icon icon={Trash2} size={14} />
+                            {t('table.deleteRows')}
+                        </Menu.Item>
+                        {transfer !== undefined && (
+                            <>
+                                <Menu.Separator />
+                                <Menu.SubmenuRoot>
+                                    <Menu.SubmenuTrigger disabled={transfer.busy}>
+                                        <Icon icon={Download} size={14} />
+                                        {t('table.export.label')}
+                                    </Menu.SubmenuTrigger>
+                                    <Menu.Popup>
+                                        {EXPORT_FORMATS.map((format) => (
+                                            <Menu.Item key={format} onClick={() => transfer.onExport(format)}>
+                                                {t('table.export.as', { format: format.toUpperCase() })}
+                                            </Menu.Item>
+                                        ))}
+                                    </Menu.Popup>
+                                </Menu.SubmenuRoot>
+                                {transfer.onImport !== undefined && (
+                                    <Menu.Item onClick={transfer.onImport}>
+                                        <Icon icon={FileInput} size={14} />
+                                        {t('table.import.menu')}
+                                    </Menu.Item>
+                                )}
+                            </>
+                        )}
+                    </Menu.Popup>
+                </Menu.Root>
+            </ButtonGroup>
         </div>
     );
 }