refactor(advancedSearch): reorder exports and improve type definitions
refactor(types): reorganize SearchCondition and AdvancedSearchState interfaces refactor(filterPresets): streamline useFilterPresets hook and localStorage handling refactor(filtering): clean up ColumnFilterButton and ColumnFilterPopover components refactor(loading): separate GriddyLoadingOverlay from GriddyLoadingSkeleton refactor(searchHistory): enhance useSearchHistory hook with persistence refactor(index): update exports for adapters and core components refactor(rendering): improve EditableCell and TableCell components for clarity refactor(rendering): enhance TableHeader and VirtualBody components for better readability
This commit is contained in:
@@ -1,63 +1,63 @@
|
||||
import { Checkbox } from '@mantine/core'
|
||||
import { type Cell, flexRender } from '@tanstack/react-table'
|
||||
import { Checkbox } from '@mantine/core';
|
||||
import { type Cell, flexRender } from '@tanstack/react-table';
|
||||
|
||||
import { getGriddyColumn } from '../core/columnMapper'
|
||||
import { CSS, SELECTION_COLUMN_ID } from '../core/constants'
|
||||
import { useGriddyStore } from '../core/GriddyStore'
|
||||
import styles from '../styles/griddy.module.css'
|
||||
import { EditableCell } from './EditableCell'
|
||||
import { getGriddyColumn } from '../core/columnMapper';
|
||||
import { CSS, SELECTION_COLUMN_ID } from '../core/constants';
|
||||
import { useGriddyStore } from '../core/GriddyStore';
|
||||
import styles from '../styles/griddy.module.css';
|
||||
import { EditableCell } from './EditableCell';
|
||||
|
||||
interface TableCellProps<T> {
|
||||
cell: Cell<T, unknown>
|
||||
showGrouping?: boolean
|
||||
cell: Cell<T, unknown>;
|
||||
showGrouping?: boolean;
|
||||
}
|
||||
|
||||
export function TableCell<T>({ cell, showGrouping }: TableCellProps<T>) {
|
||||
const isSelectionCol = cell.column.id === SELECTION_COLUMN_ID
|
||||
const isEditing = useGriddyStore((s) => s.isEditing)
|
||||
const focusedRowIndex = useGriddyStore((s) => s.focusedRowIndex)
|
||||
const focusedColumnId = useGriddyStore((s) => s.focusedColumnId)
|
||||
const setEditing = useGriddyStore((s) => s.setEditing)
|
||||
const setFocusedColumn = useGriddyStore((s) => s.setFocusedColumn)
|
||||
const onEditCommit = useGriddyStore((s) => s.onEditCommit)
|
||||
const isSelectionCol = cell.column.id === SELECTION_COLUMN_ID;
|
||||
const isEditing = useGriddyStore((s) => s.isEditing);
|
||||
const focusedRowIndex = useGriddyStore((s) => s.focusedRowIndex);
|
||||
const focusedColumnId = useGriddyStore((s) => s.focusedColumnId);
|
||||
const setEditing = useGriddyStore((s) => s.setEditing);
|
||||
const setFocusedColumn = useGriddyStore((s) => s.setFocusedColumn);
|
||||
const onEditCommit = useGriddyStore((s) => s.onEditCommit);
|
||||
|
||||
if (isSelectionCol) {
|
||||
return <RowCheckbox cell={cell} />
|
||||
return <RowCheckbox cell={cell} />;
|
||||
}
|
||||
|
||||
const griddyColumn = getGriddyColumn(cell.column)
|
||||
const rowIndex = cell.row.index
|
||||
const columnId = cell.column.id
|
||||
const isEditable = (griddyColumn as any)?.editable ?? false
|
||||
const isFocusedCell = isEditing && focusedRowIndex === rowIndex && focusedColumnId === columnId
|
||||
const griddyColumn = getGriddyColumn(cell.column);
|
||||
const rowIndex = cell.row.index;
|
||||
const columnId = cell.column.id;
|
||||
const isEditable = (griddyColumn as any)?.editable ?? false;
|
||||
const isFocusedCell = isEditing && focusedRowIndex === rowIndex && focusedColumnId === columnId;
|
||||
|
||||
const handleCommit = async (value: unknown) => {
|
||||
if (onEditCommit) {
|
||||
await onEditCommit(cell.row.id, columnId, value)
|
||||
await onEditCommit(cell.row.id, columnId, value);
|
||||
}
|
||||
setEditing(false)
|
||||
setFocusedColumn(null)
|
||||
}
|
||||
setEditing(false);
|
||||
setFocusedColumn(null);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setEditing(false)
|
||||
setFocusedColumn(null)
|
||||
}
|
||||
setEditing(false);
|
||||
setFocusedColumn(null);
|
||||
};
|
||||
|
||||
const handleDoubleClick = () => {
|
||||
if (isEditable) {
|
||||
setEditing(true)
|
||||
setFocusedColumn(columnId)
|
||||
setEditing(true);
|
||||
setFocusedColumn(columnId);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const isPinned = cell.column.getIsPinned()
|
||||
const leftOffset = isPinned === 'left' ? cell.column.getStart('left') : undefined
|
||||
const rightOffset = isPinned === 'right' ? cell.column.getAfter('right') : undefined
|
||||
const isPinned = cell.column.getIsPinned();
|
||||
const leftOffset = isPinned === 'left' ? cell.column.getStart('left') : undefined;
|
||||
const rightOffset = isPinned === 'right' ? cell.column.getAfter('right') : undefined;
|
||||
|
||||
const isGrouped = cell.getIsGrouped()
|
||||
const isAggregated = cell.getIsAggregated()
|
||||
const isPlaceholder = cell.getIsPlaceholder()
|
||||
const isGrouped = cell.getIsGrouped();
|
||||
const isAggregated = cell.getIsAggregated();
|
||||
const isPlaceholder = cell.getIsPlaceholder();
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -65,7 +65,9 @@ export function TableCell<T>({ cell, showGrouping }: TableCellProps<T>) {
|
||||
styles[CSS.cell],
|
||||
isPinned === 'left' ? styles['griddy-cell--pinned-left'] : '',
|
||||
isPinned === 'right' ? styles['griddy-cell--pinned-right'] : '',
|
||||
].filter(Boolean).join(' ')}
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
role="gridcell"
|
||||
style={{
|
||||
@@ -80,8 +82,8 @@ export function TableCell<T>({ cell, showGrouping }: TableCellProps<T>) {
|
||||
<button
|
||||
onClick={() => cell.row.toggleExpanded()}
|
||||
style={{
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
marginRight: 4,
|
||||
padding: 0,
|
||||
@@ -102,19 +104,22 @@ export function TableCell<T>({ cell, showGrouping }: TableCellProps<T>) {
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())} ({cell.row.subRows.length})
|
||||
</>
|
||||
) : isAggregated ? (
|
||||
flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext())
|
||||
flexRender(
|
||||
cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)
|
||||
) : isPlaceholder ? null : (
|
||||
flexRender(cell.column.columnDef.cell, cell.getContext())
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function RowCheckbox<T>({ cell }: TableCellProps<T>) {
|
||||
const row = cell.row
|
||||
const isPinned = cell.column.getIsPinned()
|
||||
const leftOffset = isPinned === 'left' ? cell.column.getStart('left') : undefined
|
||||
const rightOffset = isPinned === 'right' ? cell.column.getAfter('right') : undefined
|
||||
const row = cell.row;
|
||||
const isPinned = cell.column.getIsPinned();
|
||||
const leftOffset = isPinned === 'left' ? cell.column.getStart('left') : undefined;
|
||||
const rightOffset = isPinned === 'right' ? cell.column.getAfter('right') : undefined;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -122,7 +127,9 @@ function RowCheckbox<T>({ cell }: TableCellProps<T>) {
|
||||
styles[CSS.cell],
|
||||
isPinned === 'left' ? styles['griddy-cell--pinned-left'] : '',
|
||||
isPinned === 'right' ? styles['griddy-cell--pinned-right'] : '',
|
||||
].filter(Boolean).join(' ')}
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
role="gridcell"
|
||||
style={{
|
||||
left: leftOffset !== undefined ? `${leftOffset}px` : undefined,
|
||||
@@ -141,5 +148,5 @@ function RowCheckbox<T>({ cell }: TableCellProps<T>) {
|
||||
size="xs"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user