91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
import { useCallback } from 'react';
|
|
import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
|
|
|
|
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
|
|
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
|
|
import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
|
|
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
|
import { ViewBar, type ViewBarProps } from '@/ui/view-bar/components/ViewBar';
|
|
import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
|
|
|
|
import { TableOptionsDropdown } from '../../options/components/TableOptionsDropdown';
|
|
import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
|
|
import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
|
|
import { canPersistTableColumnsScopedFamilySelector } from '../../states/selectors/canPersistTableColumnsScopedFamilySelector';
|
|
import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
|
|
import { TableOptionsDropdownKey } from '../../types/TableOptionsDropdownKey';
|
|
import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
|
|
|
|
export type TableHeaderProps<SortField> = {
|
|
onImport?: () => void;
|
|
} & Pick<
|
|
ViewBarProps<SortField>,
|
|
'availableSorts' | 'defaultViewName' | 'onViewsChange' | 'onViewSubmit'
|
|
>;
|
|
|
|
export function TableHeader<SortField>({
|
|
onImport,
|
|
onViewsChange,
|
|
onViewSubmit,
|
|
...props
|
|
}: TableHeaderProps<SortField>) {
|
|
const tableScopeId = useContextScopeId(TableRecoilScopeContext);
|
|
|
|
const currentViewId = useRecoilScopedValue(
|
|
currentViewIdScopedState,
|
|
TableRecoilScopeContext,
|
|
);
|
|
const canPersistTableColumns = useRecoilValue(
|
|
canPersistTableColumnsScopedFamilySelector([tableScopeId, currentViewId]),
|
|
);
|
|
const tableColumns = useRecoilScopedValue(
|
|
tableColumnsScopedState,
|
|
TableRecoilScopeContext,
|
|
);
|
|
const setSavedTableColumns = useSetRecoilState(
|
|
savedTableColumnsFamilyState(currentViewId),
|
|
);
|
|
|
|
const handleViewSelect = useRecoilCallback(
|
|
({ set, snapshot }) =>
|
|
async (viewId: string) => {
|
|
const savedTableColumns = await snapshot.getPromise(
|
|
savedTableColumnsFamilyState(viewId),
|
|
);
|
|
set(tableColumnsScopedState(tableScopeId), savedTableColumns);
|
|
},
|
|
[tableScopeId],
|
|
);
|
|
|
|
const handleViewSubmit = async () => {
|
|
if (canPersistTableColumns) setSavedTableColumns(tableColumns);
|
|
|
|
await onViewSubmit?.();
|
|
};
|
|
|
|
const OptionsDropdownButton = useCallback(
|
|
() => (
|
|
<TableOptionsDropdown
|
|
onImport={onImport}
|
|
onViewsChange={onViewsChange}
|
|
customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
|
|
/>
|
|
),
|
|
[onImport, onViewsChange],
|
|
);
|
|
|
|
return (
|
|
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
|
|
<ViewBar
|
|
{...props}
|
|
canPersistViewFields={canPersistTableColumns}
|
|
onViewSelect={handleViewSelect}
|
|
onViewSubmit={handleViewSubmit}
|
|
OptionsDropdownButton={OptionsDropdownButton}
|
|
optionsDropdownKey={TableOptionsDropdownKey}
|
|
scopeContext={TableRecoilScopeContext}
|
|
/>
|
|
</RecoilScope>
|
|
);
|
|
}
|