admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

2357 Refactor RecordTable to use the new scope architecture (#2407)

Browse Source 
* create RecordTableScope

* use RecordTableScope

* working on useRecordTable hook

* add RecordTableScope to company-table

* add RecordTableScope to person-table

* add filter state and sort state

* add useSetRecordTableData to useRecordTable

* wip

* add setRecordTableData to useRecordTable

* update in RecordTableEffect

* fix bug

* getting rid of unnecessary context and hooks

* remove console.log

* wip

* fix bug by creating an init effect

* fix viewbar not in scope in company and people tables

* wip

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* modified according to comments
This commit is contained in:
bosiraphael
2023-11-09 17:45:58 +01:00
committed by GitHub
parent 0d4949484c
commit 588091d3dd
93 changed files with 871 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/ui/object/record-table/components/CheckboxCell.tsx
View File

@ -5,7 +5,7 @@ import { useSetRecoilState } from 'recoil';
import { Checkbox } from '@/ui/input/components/Checkbox';
import { actionBarOpenState } from '@/ui/navigation/action-bar/states/actionBarIsOpenState';
import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected';
const StyledContainer = styled.div`
align-items: center;

15
front/src/modules/ui/object/record-table/components/RecordTable.tsx
View File

@ -10,10 +10,7 @@ import {
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus';
import { useResetTableRowSelection } from '../hooks/useResetTableRowSelection';
import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState';
import { useRecordTable } from '../hooks/useRecordTable';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { RecordTableBody } from './RecordTableBody';
@ -89,13 +86,15 @@ type RecordTableProps = {
export const RecordTable = ({ updateEntityMutation }: RecordTableProps) => {
const tableBodyRef = useRef<HTMLDivElement>(null);
const setRowSelectedState = useSetRowSelectedState();
const resetTableRowSelection = useResetTableRowSelection();
const {
leaveTableFocus,
setRowSelectedState,
resetTableRowSelection,
useMapKeyboardToSoftFocus,
} = useRecordTable();
useMapKeyboardToSoftFocus();
const leaveTableFocus = useLeaveTableFocus();
useListenClickOutside({
refs: [tableBodyRef],
callback: () => {

4
front/src/modules/ui/object/record-table/components/RecordTableCell.tsx
View File

@ -12,8 +12,8 @@ import { ColumnContext } from '../contexts/ColumnContext';
import { ColumnIndexContext } from '../contexts/ColumnIndexContext';
import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
import { RowIdContext } from '../contexts/RowIdContext';
import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
import { TableCell } from '../table-cell/components/TableCell';
import { TableCell } from '../record-table-cell/components/RecordTableCell';
import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
export const RecordTableCell = ({ cellIndex }: { cellIndex: number }) => {

26
front/src/modules/ui/object/record-table/components/RecordTableEffect.tsx
View File

@ -1,10 +1,10 @@
import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import defaults from 'lodash/defaults';
import { useRecoilValue } from 'recoil';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/OptimisticEffectDefinition';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import {
SortOrder,
useGetCompaniesQuery,
@ -13,10 +13,8 @@ import {
import { FilterDefinition } from '../../object-filter-dropdown/types/FilterDefinition';
import { SortDefinition } from '../../object-sort-dropdown/types/SortDefinition';
import { useSetRecordTableData } from '../hooks/useSetRecordTableData';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { tablefiltersWhereScopedSelector } from '../states/selectors/tablefiltersWhereScopedSelector';
import { tableSortsOrderByScopedSelector } from '../states/selectors/tableSortsOrderByScopedSelector';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { useRecordTable } from '../hooks/useRecordTable';
export const RecordTableEffect = ({
useGetRequest,
@ -35,32 +33,28 @@ export const RecordTableEffect = ({
setActionBarEntries?: () => void;
setContextMenuEntries?: () => void;
}) => {
const setRecordTableData = useSetRecordTableData();
const { setRecordTableData } = useRecordTable();
const { tableSortsOrderBySelector, tableFiltersWhereSelector } =
useRecordTableScopedStates();
const { registerOptimisticEffect } = useOptimisticEffect();
const tableSortsOrderBy = useRecoilScopedValue(
tableSortsOrderByScopedSelector,
TableRecoilScopeContext,
);
const tableSortsOrderBy = useRecoilValue(tableSortsOrderBySelector);
const sortsOrderBy = defaults(tableSortsOrderBy, [
{
createdAt: SortOrder.Desc,
},
]);
const tablefiltersWhere = useRecoilScopedValue(
tablefiltersWhereScopedSelector,
TableRecoilScopeContext,
);
const tableFiltersWhere = useRecoilValue(tableFiltersWhereSelector);
useGetRequest({
variables: { orderBy: sortsOrderBy, where: tablefiltersWhere },
variables: { orderBy: sortsOrderBy, where: tableFiltersWhere },
onCompleted: (data: any) => {
const entities = data[getRequestResultKey] ?? [];
setRecordTableData(entities);
registerOptimisticEffect({
variables: { orderBy: sortsOrderBy, where: tablefiltersWhere },
variables: { orderBy: sortsOrderBy, where: tableFiltersWhere },
definition: getRequestOptimisticEffectDefinition,
});
},

37
front/src/modules/ui/object/record-table/components/RecordTableHeader.tsx
View File

@ -1,21 +1,16 @@
import { useCallback, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilState } from 'recoil';
import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
import { IconPlus } from '@/ui/display/icon';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { useTableColumns } from '../hooks/useTableColumns';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { resizeFieldOffsetState } from '../states/resizeFieldOffsetState';
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
import { RecordTableHeaderPlusButtonContent } from './RecordTableHeaderPlusButtonContent';
@ -110,22 +105,18 @@ export const RecordTableHeader = () => {
const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
resizeFieldOffsetState,
);
const tableColumns = useRecoilScopedValue(
tableColumnsScopedState,
TableRecoilScopeContext,
);
const tableColumnsByKey = useRecoilScopedValue(
tableColumnsByKeyScopedSelector,
TableRecoilScopeContext,
);
const hiddenTableColumns = useRecoilScopedValue(
hiddenTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const {
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
} = useRecordTableScopedStates();
const tableColumns = useRecoilValue(tableColumnsState);
const tableColumnsByKey = useRecoilValue(tableColumnsByKeySelector);
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
const [initialPointerPositionX, setInitialPointerPositionX] = useState<
number | null

12
front/src/modules/ui/object/record-table/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -1,24 +1,22 @@
import { useCallback } from 'react';
import { useRecoilValue } from 'recoil';
import { IconPlus } from '@/ui/display/icon';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { useTableColumns } from '../hooks/useTableColumns';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const RecordTableHeaderPlusButtonContent = () => {
const { closeDropdown } = useDropdown();
const hiddenTableColumns = useRecoilScopedValue(
hiddenTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const { hiddenTableColumnsSelector } = useRecordTableScopedStates();
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
const { handleColumnVisibilityChange } = useTableColumns();

16
front/src/modules/ui/object/record-table/components/RecordTableRow.tsx
View File

@ -1,12 +1,10 @@
import { forwardRef } from 'react';
import styled from '@emotion/styled';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilValue } from 'recoil';
import { ColumnContext } from '../contexts/ColumnContext';
import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected';
import { CheckboxCell } from './CheckboxCell';
import { RecordTableCell } from './RecordTableCell';
@ -24,10 +22,10 @@ export const RecordTableRow = forwardRef<
HTMLTableRowElement,
RecordTableRowProps
>(({ rowId }, ref) => {
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const { visibleTableColumnsSelector } = useRecordTableScopedStates();
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
const { currentRowSelected } = useCurrentRowSelected();
return (

7
front/src/modules/ui/object/record-table/components/SelectAllCheckbox.tsx
View File

@ -1,8 +1,10 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { Checkbox } from '@/ui/input/components/Checkbox';
import { useSelectAllRows } from '../hooks/useSelectAllRows';
import { useRecordTable } from '../hooks/useRecordTable';
import { allRowsSelectedStatusSelector } from '../states/selectors/allRowsSelectedStatusSelector';
const StyledContainer = styled.div`
align-items: center;
@ -14,7 +16,8 @@ const StyledContainer = styled.div`
`;
export const SelectAllCheckbox = () => {
const { selectAllRows, allRowsSelectedStatus } = useSelectAllRows();
const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector);
const { selectAllRows } = useRecordTable();
const checked = allRowsSelectedStatus === 'all';
const indeterminate = allRowsSelectedStatus === 'some';

11
front/src/modules/ui/object/record-table/contexts/TableContext.ts
View File

@ -1,11 +0,0 @@
import { createContext } from 'react';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const TableContext = createContext<{
onColumnsChange?: (
columns: ColumnDefinition<FieldMetadata>[],
) => void | Promise<void>;
}>({});

4
front/src/modules/ui/object/record-table/hooks/useCloseCurrentTableCellInEditMode.ts → front/src/modules/ui/object/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts
View File

@ -1,7 +1,7 @@
import { useRecoilCallback } from 'recoil';
import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
export const useCloseCurrentTableCellInEditMode = () =>
useRecoilCallback(({ set, snapshot }) => {

6
front/src/modules/ui/object/record-table/hooks/useDisableSoftFocus.ts → front/src/modules/ui/object/record-table/hooks/internal/useDisableSoftFocus.ts
View File

@ -1,8 +1,8 @@
import { useRecoilCallback } from 'recoil';
import { isSoftFocusActiveState } from '../states/isSoftFocusActiveState';
import { isSoftFocusOnTableCellFamilyState } from '../states/isSoftFocusOnTableCellFamilyState';
import { softFocusPositionState } from '../states/softFocusPositionState';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { isSoftFocusOnTableCellFamilyState } from '../../states/isSoftFocusOnTableCellFamilyState';
import { softFocusPositionState } from '../../states/softFocusPositionState';
export const useDisableSoftFocus = () =>
useRecoilCallback(({ set, snapshot }) => {

4
front/src/modules/ui/object/record-table/hooks/useGetIsSomeCellInEditMode.ts → front/src/modules/ui/object/record-table/hooks/internal/useGetIsSomeCellInEditMode.ts
View File

@ -1,7 +1,7 @@
import { useRecoilCallback } from 'recoil';
import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
export const useGetIsSomeCellInEditMode = () => {
return useRecoilCallback(

4
front/src/modules/ui/object/record-table/hooks/useLeaveTableFocus.ts → front/src/modules/ui/object/record-table/hooks/internal/useLeaveTableFocus.ts
View File

@ -2,8 +2,8 @@ import { useRecoilCallback } from 'recoil';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { isSoftFocusActiveState } from '../states/isSoftFocusActiveState';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCloseCurrentTableCellInEditMode } from './useCloseCurrentTableCellInEditMode';
import { useDisableSoftFocus } from './useDisableSoftFocus';

6
front/src/modules/ui/object/record-table/hooks/useMoveEditModeToCellPosition.ts → front/src/modules/ui/object/record-table/hooks/internal/useMoveEditModeToCellPosition.ts
View File

@ -1,8 +1,8 @@
import { useRecoilCallback } from 'recoil';
import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState';
import { TableCellPosition } from '../types/TableCellPosition';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { TableCellPosition } from '../../types/TableCellPosition';
export const useMoveEditModeToTableCellPosition = () =>
useRecoilCallback(({ set, snapshot }) => {

46
front/src/modules/ui/object/record-table/hooks/internal/useRecordTableScopedStates.ts Normal file
View File

@ -0,0 +1,46 @@
import { RecordTableScopeInternalContext } from '@/ui/object/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getRecordTableScopedStates } from '../../utils/getRecordTableScopedStates';
export const useRecordTableScopedStates = (args?: {
customRecordTableScopeId?: string;
}) => {
const { customRecordTableScopeId } = args ?? {};
const scopeId = useAvailableScopeIdOrThrow(
RecordTableScopeInternalContext,
customRecordTableScopeId,
);
const {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableSortsOrderBySelector,
tableFiltersWhereSelector,
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
onEntityCountChangeState,
onColumnsChangeState,
} = getRecordTableScopedStates({
recordTableScopeId: scopeId,
});
return {
scopeId,
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableSortsOrderBySelector,
tableFiltersWhereSelector,
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
onEntityCountChangeState,
onColumnsChangeState,
};
};

4
front/src/modules/ui/object/record-table/hooks/useResetTableRowSelection.ts → front/src/modules/ui/object/record-table/hooks/internal/useResetTableRowSelection.ts
View File

@ -1,7 +1,7 @@
import { useRecoilCallback } from 'recoil';
import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
import { tableRowIdsState } from '../states/tableRowIdsState';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
import { tableRowIdsState } from '../../states/tableRowIdsState';
export const useResetTableRowSelection = () =>
useRecoilCallback(

11
front/src/modules/ui/object/record-table/hooks/useSelectAllRows.ts → front/src/modules/ui/object/record-table/hooks/internal/useSelectAllRows.ts
View File

@ -1,12 +1,10 @@
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useRecoilCallback } from 'recoil';
import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
import { allRowsSelectedStatusSelector } from '../states/selectors/allRowsSelectedStatusSelector';
import { tableRowIdsState } from '../states/tableRowIdsState';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
import { allRowsSelectedStatusSelector } from '../../states/selectors/allRowsSelectedStatusSelector';
import { tableRowIdsState } from '../../states/tableRowIdsState';
export const useSelectAllRows = () => {
const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector);
const selectAllRows = useRecoilCallback(
({ set, snapshot }) =>
() => {
@ -35,7 +33,6 @@ export const useSelectAllRows = () => {
);
return {
allRowsSelectedStatus,
selectAllRows,
};
};

20
front/src/modules/ui/object/record-table/hooks/useSetRecordTableData.ts → front/src/modules/ui/object/record-table/hooks/internal/useSetRecordTableData.ts
View File

@ -1,17 +1,21 @@
import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
import { useView } from '@/views/hooks/useView';
import { isFetchingRecordTableDataState } from '../states/isFetchingRecordTableDataState';
import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
import { tableRowIdsState } from '../states/tableRowIdsState';
import { isFetchingRecordTableDataState } from '../../states/isFetchingRecordTableDataState';
import { numberOfTableRowsState } from '../../states/numberOfTableRowsState';
import { tableRowIdsState } from '../../states/tableRowIdsState';
import { useResetTableRowSelection } from './useResetTableRowSelection';
export const useSetRecordTableData = () => {
type useSetRecordTableDataProps = {
onEntityCountChange: (entityCount: number) => void;
};
export const useSetRecordTableData = ({
onEntityCountChange,
}: useSetRecordTableDataProps) => {
const resetTableRowSelection = useResetTableRowSelection();
const { setEntityCountInCurrentView } = useView();
return useRecoilCallback(
({ set, snapshot }) =>
@ -39,9 +43,9 @@ export const useSetRecordTableData = () => {
resetTableRowSelection();
set(numberOfTableRowsState, entityIds.length);
setEntityCountInCurrentView(entityIds.length);
onEntityCountChange(entityIds.length);
set(isFetchingRecordTableDataState, false);
},
[resetTableRowSelection, setEntityCountInCurrentView],
[onEntityCountChange, resetTableRowSelection],
);
};

2
front/src/modules/ui/object/record-table/hooks/useSetRowSelectedState.ts → front/src/modules/ui/object/record-table/hooks/internal/useSetRowSelectedState.ts
View File

@ -1,6 +1,6 @@
import { useRecoilCallback } from 'recoil';
import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
export const useSetRowSelectedState = () =>
useRecoilCallback(({ set }) => (rowId: string, selected: boolean) => {

8
front/src/modules/ui/object/record-table/hooks/useSetSoftFocusPosition.ts → front/src/modules/ui/object/record-table/hooks/internal/useSetSoftFocusPosition.ts
View File

@ -1,9 +1,9 @@
import { useRecoilCallback } from 'recoil';
import { isSoftFocusActiveState } from '../states/isSoftFocusActiveState';
import { isSoftFocusOnTableCellFamilyState } from '../states/isSoftFocusOnTableCellFamilyState';
import { softFocusPositionState } from '../states/softFocusPositionState';
import { TableCellPosition } from '../types/TableCellPosition';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { isSoftFocusOnTableCellFamilyState } from '../../states/isSoftFocusOnTableCellFamilyState';
import { softFocusPositionState } from '../../states/softFocusPositionState';
import { TableCellPosition } from '../../types/TableCellPosition';
export const useSetSoftFocusPosition = () =>
useRecoilCallback(({ set, snapshot }) => {

0
front/src/modules/ui/object/record-table/hooks/useUpsertRecordTableItem.ts → front/src/modules/ui/object/record-table/hooks/internal/useUpsertRecordTableItem.ts
View File

48
front/src/modules/ui/object/record-table/hooks/useCellInputEventHandlers.ts
View File

@ -1,48 +0,0 @@
import { useCurrentTableCellEditMode } from '../table-cell/hooks/useCurrentTableCellEditMode';
import { useTableCell } from '../table-cell/hooks/useTableCell';
import { useMoveSoftFocus } from './useMoveSoftFocus';
export const useCellInputEventHandlers = <T>({
onSubmit,
onCancel,
}: {
onSubmit?: (newValue: T) => void;
onCancel?: () => void;
}) => {
const { closeTableCell: closeEditableCell } = useTableCell();
const { isCurrentTableCellInEditMode: isCurrentCellInEditMode } =
useCurrentTableCellEditMode();
const { moveRight, moveLeft, moveDown } = useMoveSoftFocus();
return {
handleClickOutside: (event: MouseEvent | TouchEvent, newValue: T) => {
if (isCurrentCellInEditMode) {
event.stopImmediatePropagation();
onSubmit?.(newValue);
closeEditableCell();
}
},
handleEscape: () => {
closeEditableCell();
onCancel?.();
},
handleEnter: (newValue: T) => {
onSubmit?.(newValue);
closeEditableCell();
moveDown();
},
handleTab: (newValue: T) => {
onSubmit?.(newValue);
closeEditableCell();
moveRight();
},
handleShiftTab: (newValue: T) => {
onSubmit?.(newValue);
closeEditableCell();
moveLeft();
},
};
};

9
front/src/modules/ui/object/record-table/hooks/useCurrentEntityId.ts
View File

@ -1,9 +0,0 @@
import { useContext } from 'react';
import { RowIdContext } from '../contexts/RowIdContext';
export const useCurrentRowEntityId = () => {
const currentEntityId = useContext(RowIdContext);
return currentEntityId;
};

62
front/src/modules/ui/object/record-table/hooks/useMapKeyboardToSoftFocus.ts
View File

@ -1,62 +0,0 @@
import { Key } from 'ts-key-enum';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { useDisableSoftFocus } from './useDisableSoftFocus';
import { useMoveSoftFocus } from './useMoveSoftFocus';
export const useMapKeyboardToSoftFocus = () => {
const { moveDown, moveLeft, moveRight, moveUp } = useMoveSoftFocus();
const disableSoftFocus = useDisableSoftFocus();
const setHotkeyScope = useSetHotkeyScope();
useScopedHotkeys(
[Key.ArrowUp, `${Key.Shift}+${Key.Enter}`],
() => {
moveUp();
},
TableHotkeyScope.TableSoftFocus,
[moveUp],
);
useScopedHotkeys(
Key.ArrowDown,
() => {
moveDown();
},
TableHotkeyScope.TableSoftFocus,
[moveDown],
);
useScopedHotkeys(
[Key.ArrowLeft, `${Key.Shift}+${Key.Tab}`],
() => {
moveLeft();
},
TableHotkeyScope.TableSoftFocus,
[moveLeft],
);
useScopedHotkeys(
[Key.ArrowRight, Key.Tab],
() => {
moveRight();
},
TableHotkeyScope.TableSoftFocus,
[moveRight],
);
useScopedHotkeys(
[Key.Escape],
() => {
setHotkeyScope(TableHotkeyScope.Table, { goto: true });
disableSoftFocus();
},
TableHotkeyScope.TableSoftFocus,
[disableSoftFocus],
);
};

159
front/src/modules/ui/object/record-table/hooks/useMoveSoftFocus.ts
View File

@ -1,159 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { numberOfTableColumnsScopedSelector } from '../states/selectors/numberOfTableColumnsScopedSelector';
import { softFocusPositionState } from '../states/softFocusPositionState';
import { useSetSoftFocusPosition } from './useSetSoftFocusPosition';
// TODO: stories
export const useMoveSoftFocus = () => {
const tableScopeId = useRecoilScopeId(TableRecoilScopeContext);
const setSoftFocusPosition = useSetSoftFocusPosition();
const moveUp = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
let newRowNumber = softFocusPosition.row - 1;
if (newRowNumber < 0) {
newRowNumber = 0;
}
setSoftFocusPosition({
...softFocusPosition,
row: newRowNumber,
});
},
[setSoftFocusPosition],
);
const moveDown = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableRows = snapshot
.getLoadable(numberOfTableRowsState)
.valueOrThrow();
let newRowNumber = softFocusPosition.row + 1;
if (newRowNumber >= numberOfTableRows) {
newRowNumber = numberOfTableRows - 1;
}
setSoftFocusPosition({
...softFocusPosition,
row: newRowNumber,
});
},
[setSoftFocusPosition],
);
const moveRight = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableColumns = snapshot
.getLoadable(numberOfTableColumnsScopedSelector(tableScopeId))
.valueOrThrow();
const numberOfTableRows = snapshot
.getLoadable(numberOfTableRowsState)
.valueOrThrow();
const currentColumnNumber = softFocusPosition.column;
const currentRowNumber = softFocusPosition.row;
const isLastRowAndLastColumn =
currentColumnNumber === numberOfTableColumns - 1 &&
currentRowNumber === numberOfTableRows - 1;
const isLastColumnButNotLastRow =
currentColumnNumber === numberOfTableColumns - 1 &&
currentRowNumber !== numberOfTableRows - 1;
const isNotLastColumn =
currentColumnNumber !== numberOfTableColumns - 1;
if (isLastRowAndLastColumn) {
return;
}
if (isNotLastColumn) {
setSoftFocusPosition({
row: currentRowNumber,
column: currentColumnNumber + 1,
});
} else if (isLastColumnButNotLastRow) {
setSoftFocusPosition({
row: currentRowNumber + 1,
column: 0,
});
}
},
[setSoftFocusPosition, tableScopeId],
);
const moveLeft = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableColumns = snapshot
.getLoadable(numberOfTableColumnsScopedSelector(tableScopeId))
.valueOrThrow();
const currentColumnNumber = softFocusPosition.column;
const currentRowNumber = softFocusPosition.row;
const isFirstRowAndFirstColumn =
currentColumnNumber === 0 && currentRowNumber === 0;
const isFirstColumnButNotFirstRow =
currentColumnNumber === 0 && currentRowNumber > 0;
const isNotFirstColumn = currentColumnNumber > 0;
if (isFirstRowAndFirstColumn) {
return;
}
if (isNotFirstColumn) {
setSoftFocusPosition({
row: currentRowNumber,
column: currentColumnNumber - 1,
});
} else if (isFirstColumnButNotFirstRow) {
setSoftFocusPosition({
row: currentRowNumber - 1,
column: numberOfTableColumns - 1,
});
}
},
[setSoftFocusPosition, tableScopeId],
);
return {
moveDown,
moveLeft,
moveRight,
moveUp,
};
};

39
front/src/modules/ui/object/record-table/hooks/useMoveViewColumns.ts
View File

@ -1,39 +0,0 @@
export const useMoveViewColumns = () => {
const handleColumnMove = <T extends { position: number }>(
direction: 'left' | 'right',
currentArrayindex: number,
targetArray: T[],
) => {
const targetArrayIndex =
direction === 'left' ? currentArrayindex - 1 : currentArrayindex + 1;
const targetArraySize = targetArray.length - 1;
if (
currentArrayindex >= 0 &&
targetArrayIndex >= 0 &&
currentArrayindex <= targetArraySize &&
targetArrayIndex <= targetArraySize
) {
const currentEntity = targetArray[currentArrayindex];
const targetEntity = targetArray[targetArrayIndex];
const newArray = [...targetArray];
newArray[currentArrayindex] = {
...targetEntity,
index: currentEntity.position,
};
newArray[targetArrayIndex] = {
...currentEntity,
index: targetEntity.position,
};
return newArray.map((column, index) => ({
...column,
position: index,
}));
}
return targetArray;
};
return { handleColumnMove };
};

316
front/src/modules/ui/object/record-table/hooks/useRecordTable.ts Normal file
View File

@ -0,0 +1,316 @@
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { RecordTableScopeInternalContext } from '@/ui/object/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
import { onColumnsChangeScopedState } from '@/ui/object/record-table/states/onColumnsChangeScopedState';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
import { onEntityCountChangeScopedState } from '../states/onEntityCountChange';
import { numberOfTableColumnsScopedSelector } from '../states/selectors/numberOfTableColumnsScopedSelector';
import { softFocusPositionState } from '../states/softFocusPositionState';
import { ColumnDefinition } from '../types/ColumnDefinition';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { useDisableSoftFocus } from './internal/useDisableSoftFocus';
import { useGetIsSomeCellInEditMode } from './internal/useGetIsSomeCellInEditMode';
import { useLeaveTableFocus } from './internal/useLeaveTableFocus';
import { useRecordTableScopedStates } from './internal/useRecordTableScopedStates';
import { useResetTableRowSelection } from './internal/useResetTableRowSelection';
import { useSelectAllRows } from './internal/useSelectAllRows';
import { useSetRecordTableData } from './internal/useSetRecordTableData';
import { useSetRowSelectedState } from './internal/useSetRowSelectedState';
import { useSetSoftFocusPosition } from './internal/useSetSoftFocusPosition';
import { useUpsertRecordTableItem } from './internal/useUpsertRecordTableItem';
type useRecordTableProps = {
recordTableScopeId?: string;
};
export const useRecordTable = (props?: useRecordTableProps) => {
const scopeId = useAvailableScopeIdOrThrow(
RecordTableScopeInternalContext,
props?.recordTableScopeId,
);
const {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableColumnsState,
} = useRecordTableScopedStates({
customRecordTableScopeId: scopeId,
});
const setAvailableTableColumns = useSetRecoilState(
availableTableColumnsState,
);
const setTableFilters = useSetRecoilState(tableFiltersState);
const setTableSorts = useSetRecoilState(tableSortsState);
const setTableColumns = useSetRecoilState(tableColumnsState);
const onColumnsChange = useRecoilCallback(
({ snapshot }) =>
(columns: ColumnDefinition<FieldMetadata>[]) => {
const onColumnsChangeState = getScopedState(
onColumnsChangeScopedState,
scopeId,
);
const onColumnsChange = getSnapshotValue(
snapshot,
onColumnsChangeState,
);
onColumnsChange?.(columns);
},
[scopeId],
);
const onEntityCountChange = useRecoilCallback(
({ snapshot }) =>
(count: number) => {
const onEntityCountChangeState = getScopedState(
onEntityCountChangeScopedState,
scopeId,
);
const onEntityCountChange = getSnapshotValue(
snapshot,
onEntityCountChangeState,
);
onEntityCountChange?.(count);
},
[scopeId],
);
const setRecordTableData = useSetRecordTableData({ onEntityCountChange });
const leaveTableFocus = useLeaveTableFocus();
const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode();
const setRowSelectedState = useSetRowSelectedState();
const resetTableRowSelection = useResetTableRowSelection();
const upsertRecordTableItem = useUpsertRecordTableItem();
const setSoftFocusPosition = useSetSoftFocusPosition();
const moveUp = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
let newRowNumber = softFocusPosition.row - 1;
if (newRowNumber < 0) {
newRowNumber = 0;
}
setSoftFocusPosition({
...softFocusPosition,
row: newRowNumber,
});
},
[setSoftFocusPosition],
);
const moveDown = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableRows = snapshot
.getLoadable(numberOfTableRowsState)
.valueOrThrow();
let newRowNumber = softFocusPosition.row + 1;
if (newRowNumber >= numberOfTableRows) {
newRowNumber = numberOfTableRows - 1;
}
setSoftFocusPosition({
...softFocusPosition,
row: newRowNumber,
});
},
[setSoftFocusPosition],
);
const moveRight = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableColumns = snapshot
.getLoadable(numberOfTableColumnsScopedSelector(scopeId))
.valueOrThrow();
const numberOfTableRows = snapshot
.getLoadable(numberOfTableRowsState)
.valueOrThrow();
const currentColumnNumber = softFocusPosition.column;
const currentRowNumber = softFocusPosition.row;
const isLastRowAndLastColumn =
currentColumnNumber === numberOfTableColumns - 1 &&
currentRowNumber === numberOfTableRows - 1;
const isLastColumnButNotLastRow =
currentColumnNumber === numberOfTableColumns - 1 &&
currentRowNumber !== numberOfTableRows - 1;
const isNotLastColumn =
currentColumnNumber !== numberOfTableColumns - 1;
if (isLastRowAndLastColumn) {
return;
}
if (isNotLastColumn) {
setSoftFocusPosition({
row: currentRowNumber,
column: currentColumnNumber + 1,
});
} else if (isLastColumnButNotLastRow) {
setSoftFocusPosition({
row: currentRowNumber + 1,
column: 0,
});
}
},
[scopeId, setSoftFocusPosition],
);
const moveLeft = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableColumns = snapshot
.getLoadable(numberOfTableColumnsScopedSelector(scopeId))
.valueOrThrow();
const currentColumnNumber = softFocusPosition.column;
const currentRowNumber = softFocusPosition.row;
const isFirstRowAndFirstColumn =
currentColumnNumber === 0 && currentRowNumber === 0;
const isFirstColumnButNotFirstRow =
currentColumnNumber === 0 && currentRowNumber > 0;
const isNotFirstColumn = currentColumnNumber > 0;
if (isFirstRowAndFirstColumn) {
return;
}
if (isNotFirstColumn) {
setSoftFocusPosition({
row: currentRowNumber,
column: currentColumnNumber - 1,
});
} else if (isFirstColumnButNotFirstRow) {
setSoftFocusPosition({
row: currentRowNumber - 1,
column: numberOfTableColumns - 1,
});
}
},
[scopeId, setSoftFocusPosition],
);
const useMapKeyboardToSoftFocus = () => {
const disableSoftFocus = useDisableSoftFocus();
const setHotkeyScope = useSetHotkeyScope();
useScopedHotkeys(
[Key.ArrowUp, `${Key.Shift}+${Key.Enter}`],
() => {
moveUp();
},
TableHotkeyScope.TableSoftFocus,
[moveUp],
);
useScopedHotkeys(
Key.ArrowDown,
() => {
moveDown();
},
TableHotkeyScope.TableSoftFocus,
[moveDown],
);
useScopedHotkeys(
[Key.ArrowLeft, `${Key.Shift}+${Key.Tab}`],
() => {
moveLeft();
},
TableHotkeyScope.TableSoftFocus,
[moveLeft],
);
useScopedHotkeys(
[Key.ArrowRight, Key.Tab],
() => {
moveRight();
},
TableHotkeyScope.TableSoftFocus,
[moveRight],
);
useScopedHotkeys(
[Key.Escape],
() => {
setHotkeyScope(TableHotkeyScope.Table, { goto: true });
disableSoftFocus();
},
TableHotkeyScope.TableSoftFocus,
[disableSoftFocus],
);
};
const { selectAllRows } = useSelectAllRows();
return {
scopeId,
onColumnsChange,
setAvailableTableColumns,
setTableFilters,
setTableSorts,
setRecordTableData,
setTableColumns,
leaveTableFocus,
getIsSomeCellInEditMode,
setRowSelectedState,
resetTableRowSelection,
upsertRecordTableItem,
moveDown,
moveLeft,
moveRight,
moveUp,
useMapKeyboardToSoftFocus,
selectAllRows,
};
};

41
front/src/modules/ui/object/record-table/hooks/useTableColumns.ts
View File

@ -1,42 +1,35 @@
import { useCallback, useContext } from 'react';
import { useSetRecoilState } from 'recoil';
import { useCallback } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { useMoveViewColumns } from '@/ui/object/record-table/hooks/useMoveViewColumns';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
import { useView } from '@/views/hooks/useView';
import { TableContext } from '../contexts/TableContext';
import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { savedTableColumnsFamilyState } from '../states/savedTableColumnsFamilyState';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const useTableColumns = () => {
const { onColumnsChange } = useContext(TableContext);
import { useRecordTableScopedStates } from './internal/useRecordTableScopedStates';
const [availableTableColumns] = useRecoilScopedState(
availableTableColumnsScopedState,
TableRecoilScopeContext,
);
export const useTableColumns = () => {
const { onColumnsChange, setTableColumns } = useRecordTable();
const {
availableTableColumnsState,
tableColumnsState,
visibleTableColumnsSelector,
} = useRecordTableScopedStates();
const availableTableColumns = useRecoilValue(availableTableColumnsState);
const { currentViewId } = useView();
const setSavedTableColumns = useSetRecoilState(
savedTableColumnsFamilyState(currentViewId),
);
const [tableColumns, setTableColumns] = useRecoilScopedState(
tableColumnsScopedState,
TableRecoilScopeContext,
);
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const tableColumns = useRecoilValue(tableColumnsState);
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
const { handleColumnMove } = useMoveViewColumns();
const handleColumnsChange = useCallback(

33
front/src/modules/ui/object/record-table/hooks/useUpsertRecordTableItems.ts
View File

@ -1,33 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
export const useUpsertRecordTableItems = () =>
useRecoilCallback(
({ set, snapshot }) =>
<T extends { id: string }>(entities: T[]) => {
// Create a map of new entities for quick lookup.
const newEntityMap = new Map(
entities.map((entity) => [entity.id, entity]),
);
// Filter out entities that are already the same in the state.
const entitiesToUpdate = entities.filter((entity) => {
const currentEntity = snapshot
.getLoadable(entityFieldsFamilyState(entity.id))
.valueMaybe();
return (
!currentEntity ||
JSON.stringify(currentEntity) !==
JSON.stringify(newEntityMap.get(entity.id))
);
});
// Batch set state for the filtered entities.
for (const entity of entitiesToUpdate) {
set(entityFieldsFamilyState(entity.id), entity);
}
},
[],
);

3
front/src/modules/ui/object/record-table/hooks/useUpsertTableRowId.ts
View File

@ -2,6 +2,9 @@ import { useRecoilCallback } from 'recoil';
import { tableRowIdsState } from '../states/tableRowIdsState';
// Used only in company table and people table
// Remove after refactoring
export const useUpsertTableRowId = () =>
useRecoilCallback(
({ set, snapshot }) =>

17
front/src/modules/ui/object/record-table/hooks/useUpsertTableRowIds.ts
View File

@ -1,17 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { tableRowIdsState } from '../states/tableRowIdsState';
export const useUpsertTableRowIds = () =>
useRecoilCallback(
({ set, snapshot }) =>
(rowIds: string[]) => {
const currentRowIds = snapshot
.getLoadable(tableRowIdsState)
.valueOrThrow();
const uniqueRowIds = Array.from(new Set([...rowIds, ...currentRowIds]));
set(tableRowIdsState, uniqueRowIds);
},
[],
);

18
front/src/modules/ui/object/record-table/options/components/TableOptionsDropdownContent.tsx
View File

@ -11,15 +11,12 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
import { useView } from '@/views/hooks/useView';
import { useRecordTableScopedStates } from '../../hooks/internal/useRecordTableScopedStates';
import { useTableColumns } from '../../hooks/useTableColumns';
import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
import { hiddenTableColumnsScopedSelector } from '../../states/selectors/hiddenTableColumnsScopedSelector';
import { visibleTableColumnsScopedSelector } from '../../states/selectors/visibleTableColumnsScopedSelector';
import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
type TableOptionsMenu = 'fields';
@ -43,14 +40,11 @@ export const TableOptionsDropdownContent = ({
const viewEditInputRef = useRef<HTMLInputElement>(null);
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const hiddenTableColumns = useRecoilScopedValue(
hiddenTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
useRecordTableScopedStates();
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
const { handleColumnVisibilityChange, handleColumnReorder } =
useTableColumns();

6
front/src/modules/ui/object/record-table/table-cell/components/TableCell.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCell.tsx
View File

@ -3,10 +3,10 @@ import { FieldInput } from '@/ui/object/field/components/FieldInput';
import { FieldInputEvent } from '@/ui/object/field/types/FieldInputEvent';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useMoveSoftFocus } from '../../hooks/useMoveSoftFocus';
import { useRecordTable } from '../../hooks/useRecordTable';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellContainer } from './TableCellContainer';
import { TableCellContainer } from './RecordTableCellContainer';
export const TableCell = ({
customHotkeyScope,
@ -15,7 +15,7 @@ export const TableCell = ({
}) => {
const { closeTableCell } = useTableCell();
const { moveLeft, moveRight, moveDown } = useMoveSoftFocus();
const { moveLeft, moveRight, moveDown } = useRecordTable();
const handleEnter: FieldInputEvent = (persistField) => {
persistField();

0
front/src/modules/ui/object/record-table/table-cell/components/TableCellButton.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellButton.tsx
View File

14
front/src/modules/ui/object/record-table/table-cell/components/TableCellContainer.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellContainer.tsx
View File

@ -9,18 +9,18 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
import { useGetIsSomeCellInEditMode } from '../../hooks/useGetIsSomeCellInEditMode';
import { useMoveSoftFocusToCurrentCellOnHover } from '../../hooks/useMoveSoftFocusToCurrentCellOnHover';
import { useRecordTable } from '../../hooks/useRecordTable';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentTableCellEditMode } from '../hooks/useCurrentTableCellEditMode';
import { useIsSoftFocusOnCurrentTableCell } from '../hooks/useIsSoftFocusOnCurrentTableCell';
import { useMoveSoftFocusToCurrentCellOnHover } from '../hooks/useMoveSoftFocusToCurrentCellOnHover';
import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellButton } from './TableCellButton';
import { TableCellDisplayMode } from './TableCellDisplayMode';
import { TableCellEditMode } from './TableCellEditMode';
import { TableCellSoftFocusMode } from './TableCellSoftFocusMode';
import { TableCellButton } from './RecordTableCellButton';
import { TableCellDisplayMode } from './RecordTableCellDisplayMode';
import { TableCellEditMode } from './RecordTableCellEditMode';
import { TableCellSoftFocusMode } from './RecordTableCellSoftFocusMode';
const StyledCellBaseContainer = styled.div`
align-items: center;
@ -57,7 +57,7 @@ export const TableCellContainer = ({
}: TableCellContainerProps) => {
const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode();
const { getIsSomeCellInEditMode } = useRecordTable();
const [isHovered, setIsHovered] = useState(false);

0
front/src/modules/ui/object/record-table/table-cell/components/TableCellDisplayContainer.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx
View File

2
front/src/modules/ui/object/record-table/table-cell/components/TableCellDisplayMode.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx
View File

@ -3,7 +3,7 @@ import { useIsFieldInputOnly } from '@/ui/object/field/hooks/useIsFieldInputOnly
import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellDisplayContainer } from './TableCellDisplayContainer';
import { TableCellDisplayContainer } from './RecordTableCellDisplayContainer';
export const TableCellDisplayMode = ({
children,

0
front/src/modules/ui/object/record-table/table-cell/components/TableCellEditButton.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellEditButton.tsx
View File

0
front/src/modules/ui/object/record-table/table-cell/components/TableCellEditMode.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
View File

2
front/src/modules/ui/object/record-table/table-cell/components/TableCellSoftFocusMode.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
View File

@ -9,7 +9,7 @@ import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritin
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellDisplayContainer } from './TableCellDisplayContainer';
import { TableCellDisplayContainer } from './RecordTableCellDisplayContainer';
type TableCellSoftFocusModeProps = PropsWithChildren<unknown>;

0
front/src/modules/ui/object/record-table/table-cell/hooks/useCurrentCellPosition.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useCurrentCellPosition.ts
View File

2
front/src/modules/ui/object/record-table/table-cell/hooks/useCurrentTableCellEditMode.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useCurrentTableCellEditMode.ts
View File

@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { useRecoilState } from 'recoil';
import { useMoveEditModeToTableCellPosition } from '../../hooks/useMoveEditModeToCellPosition';
import { useMoveEditModeToTableCellPosition } from '../../hooks/internal/useMoveEditModeToCellPosition';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { useCurrentTableCellPosition } from './useCurrentCellPosition';

0
front/src/modules/ui/object/record-table/table-cell/hooks/useIsSoftFocusOnCurrentTableCell.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell.ts
View File

9
front/src/modules/ui/object/record-table/hooks/useMoveSoftFocusToCurrentCellOnHover.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts
View File

@ -2,10 +2,11 @@ import { useRecoilCallback } from 'recoil';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState';
import { useSetSoftFocusOnCurrentTableCell } from '../table-cell/hooks/useSetSoftFocusOnCurrentTableCell';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTableCell';
export const useMoveSoftFocusToCurrentCellOnHover = () => {
const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();

2
front/src/modules/ui/object/record-table/table-cell/hooks/useSetSoftFocusOnCurrentTableCell.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useSetSoftFocusOnCurrentTableCell.ts
View File

@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useSetSoftFocusPosition } from '../../hooks/useSetSoftFocusPosition';
import { useSetSoftFocusPosition } from '../../hooks/internal/useSetSoftFocusPosition';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';

2
front/src/modules/ui/object/record-table/table-cell/hooks/useTableCell.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useTableCell.ts
View File

@ -12,7 +12,7 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
import { useCloseCurrentTableCellInEditMode } from '../../hooks/useCloseCurrentTableCellInEditMode';
import { useCloseCurrentTableCellInEditMode } from '../../hooks/internal/useCloseCurrentTableCellInEditMode';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentTableCellEditMode } from './useCurrentTableCellEditMode';

0
front/src/modules/ui/object/record-table/table-cell/states/isCreateModeScopedState.ts → front/src/modules/ui/object/record-table/record-table-cell/states/isCreateModeScopedState.ts
View File

2
front/src/modules/ui/object/record-table/hooks/useCurrentRowSelected.ts → front/src/modules/ui/object/record-table/record-table-row/hooks/useCurrentRowSelected.ts
View File

@ -1,7 +1,7 @@
import { useContext } from 'react';
import { useRecoilCallback, useRecoilState } from 'recoil';
import { RowIdContext } from '../contexts/RowIdContext';
import { RowIdContext } from '../../contexts/RowIdContext';
import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
export const useCurrentRowSelected = () => {

0
front/src/modules/ui/object/record-table/states/isRowSelectedFamilyState.ts → front/src/modules/ui/object/record-table/record-table-row/states/isRowSelectedFamilyState.ts
View File

37
front/src/modules/ui/object/record-table/scopes/RecordTableScope.tsx Normal file
View File

@ -0,0 +1,37 @@
import { ReactNode } from 'react';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { ColumnDefinition } from '../types/ColumnDefinition';
import { RecordTableScopeInternalContext } from './scope-internal-context/RecordTableScopeInternalContext';
import { RecordTableScopeInitEffect } from './RecordTableScopeInitEffect';
type RecordTableScopeProps = {
children: ReactNode;
recordTableScopeId: string;
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
onEntityCountChange: (entityCount: number) => void;
};
export const RecordTableScope = ({
children,
recordTableScopeId,
onColumnsChange,
onEntityCountChange,
}: RecordTableScopeProps) => {
return (
<RecordTableScopeInternalContext.Provider
value={{
scopeId: recordTableScopeId,
onColumnsChange,
onEntityCountChange,
}}
>
<RecordTableScopeInitEffect
onColumnsChange={onColumnsChange}
onEntityCountChange={onEntityCountChange}
/>
{children}
</RecordTableScopeInternalContext.Provider>
);
};

34
front/src/modules/ui/object/record-table/scopes/RecordTableScopeInitEffect.tsx Normal file
View File

@ -0,0 +1,34 @@
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { ColumnDefinition } from '../types/ColumnDefinition';
type RecordTableScopeInitEffectProps = {
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
onEntityCountChange?: (count: number) => void | Promise<void>;
};
export const RecordTableScopeInitEffect = ({
onColumnsChange,
onEntityCountChange,
}: RecordTableScopeInitEffectProps) => {
const { onColumnsChangeState, onEntityCountChangeState } =
useRecordTableScopedStates();
const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState);
const setOnColumnsChange = useSetRecoilState(onColumnsChangeState);
useEffect(() => {
setOnEntityCountChange(() => onEntityCountChange);
setOnColumnsChange(() => onColumnsChange);
}, [
onColumnsChange,
onEntityCountChange,
setOnColumnsChange,
setOnEntityCountChange,
]);
return <></>;
};

13
front/src/modules/ui/object/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts Normal file
View File

@ -0,0 +1,13 @@
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
import { ColumnDefinition } from '../../types/ColumnDefinition';
type RecordTableScopeInternalContextProps = ScopedStateKey & {
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
onEntityCountChange: (entityCount: number) => void;
};
export const RecordTableScopeInternalContext =
createScopeInternalContext<RecordTableScopeInternalContextProps>();

10
front/src/modules/ui/object/record-table/states/availableTableColumnsScopedState.ts
View File

@ -1,13 +1,11 @@
import { atomFamily } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const availableTableColumnsScopedState = atomFamily<
ColumnDefinition<FieldMetadata>[],
string
export const availableTableColumnsScopedState = createScopedState<
ColumnDefinition<FieldMetadata>[]
>({
key: 'availableTableColumnsScopedState',
default: [],
defaultValue: [],
});

11
front/src/modules/ui/object/record-table/states/onColumnsChangeScopedState.ts Normal file
View File

@ -0,0 +1,11 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const onColumnsChangeScopedState = createScopedState<
((columns: ColumnDefinition<FieldMetadata>[]) => void) | undefined
>({
key: 'onColumnsChangeScopedState',
defaultValue: undefined,
});

8
front/src/modules/ui/object/record-table/states/onEntityCountChange.ts Normal file
View File

@ -0,0 +1,8 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const onEntityCountChangeScopedState = createScopedState<
((entityCount: number) => void) | undefined
>({
key: 'onEntityCountChangeScopedState',
defaultValue: undefined,
});

3
front/src/modules/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext.ts
View File

@ -1,3 +0,0 @@
import { createContext } from 'react';
export const TableRecoilScopeContext = createContext<string | null>(null);

4
front/src/modules/ui/object/record-table/states/selectors/hiddenTableColumnsScopedSelector.ts
View File

@ -8,10 +8,10 @@ export const hiddenTableColumnsScopedSelector = selectorFamily({
get:
(scopeId: string) =>
({ get }) => {
const columns = get(tableColumnsScopedState(scopeId));
const columns = get(tableColumnsScopedState({ scopeId }));
const columnKeys = columns.map(({ fieldId }) => fieldId);
const otherAvailableColumns = get(
availableTableColumnsScopedState(scopeId),
availableTableColumnsScopedState({ scopeId }),
).filter(({ fieldId }) => !columnKeys.includes(fieldId));
return [

2
front/src/modules/ui/object/record-table/states/selectors/numberOfTableColumnsScopedSelector.ts
View File

@ -7,5 +7,5 @@ export const numberOfTableColumnsScopedSelector = selectorFamily({
get:
(scopeId: string) =>
({ get }) =>
get(tableColumnsScopedState(scopeId)).length,
get(tableColumnsScopedState({ scopeId })).length,
});

2
front/src/modules/ui/object/record-table/states/selectors/selectedRowIdsSelector.ts
View File

@ -1,6 +1,6 @@
import { selector } from 'recoil';
import { isRowSelectedFamilyState } from '../isRowSelectedFamilyState';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
import { tableRowIdsState } from '../tableRowIdsState';
export const selectedRowIdsSelector = selector<string[]>({

2
front/src/modules/ui/object/record-table/states/selectors/tableColumnsByKeyScopedSelector.ts
View File

@ -10,7 +10,7 @@ export const tableColumnsByKeyScopedSelector = selectorFamily({
get:
(scopeId: string) =>
({ get }) =>
get(tableColumnsScopedState(scopeId)).reduce<
get(tableColumnsScopedState({ scopeId })).reduce<
Record<string, ColumnDefinition<FieldMetadata>>
>((result, column) => ({ ...result, [column.fieldId]: column }), {}),
});

4
front/src/modules/ui/object/record-table/states/selectors/tableSortsOrderByScopedSelector.ts
View File

@ -10,7 +10,9 @@ export const tableSortsOrderByScopedSelector = selectorFamily({
get:
(scopeId: string) =>
({ get }) => {
const orderBy = reduceSortsToOrderBy(get(tableSortsScopedState(scopeId)));
const orderBy = reduceSortsToOrderBy(
get(tableSortsScopedState({ scopeId })),
);
return orderBy.length ? orderBy : [{ createdAt: SortOrder.Desc }];
},
});

6
front/src/modules/ui/object/record-table/states/selectors/tablefiltersWhereScopedSelector.ts
View File

@ -3,11 +3,13 @@ import { selectorFamily } from 'recoil';
import { turnFilterIntoWhereClause } from '../../../object-filter-dropdown/utils/turnFilterIntoWhereClause';
import { tableFiltersScopedState } from '../tableFiltersScopedState';
export const tablefiltersWhereScopedSelector = selectorFamily({
export const tableFiltersWhereScopedSelector = selectorFamily({
key: 'tablefiltersWhereScopedSelector',
get:
(scopeId: string) =>
({ get }) => ({
AND: get(tableFiltersScopedState(scopeId)).map(turnFilterIntoWhereClause),
AND: get(tableFiltersScopedState({ scopeId })).map(
turnFilterIntoWhereClause,
),
}),
});

4
front/src/modules/ui/object/record-table/states/selectors/visibleTableColumnsScopedSelector.ts
View File

@ -8,9 +8,9 @@ export const visibleTableColumnsScopedSelector = selectorFamily({
get:
(scopeId: string) =>
({ get }) => {
const columns = get(tableColumnsScopedState(scopeId));
const columns = get(tableColumnsScopedState({ scopeId }));
const availableColumnKeys = get(
availableTableColumnsScopedState(scopeId),
availableTableColumnsScopedState({ scopeId }),
).map(({ fieldId }) => fieldId);
return [...columns]

10
front/src/modules/ui/object/record-table/states/tableColumnsScopedState.ts
View File

@ -1,13 +1,11 @@
import { atomFamily } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const tableColumnsScopedState = atomFamily<
ColumnDefinition<FieldMetadata>[],
string
export const tableColumnsScopedState = createScopedState<
ColumnDefinition<FieldMetadata>[]
>({
key: 'tableColumnsScopedState',
default: [],
defaultValue: [],
});

6
front/src/modules/ui/object/record-table/states/tableFiltersScopedState.ts
View File

@ -1,8 +1,8 @@
import { atomFamily } from 'recoil';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { Filter } from '../../object-filter-dropdown/types/Filter';
export const tableFiltersScopedState = atomFamily<Filter[], string>({
export const tableFiltersScopedState = createScopedState<Filter[]>({
key: 'tableFiltersScopedState',
default: [],
defaultValue: [],
});

6
front/src/modules/ui/object/record-table/states/tableSortsScopedState.ts
View File

@ -1,8 +1,8 @@
import { atomFamily } from 'recoil';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { Sort } from '../../object-sort-dropdown/types/Sort';
export const tableSortsScopedState = atomFamily<Sort[], string>({
export const tableSortsScopedState = createScopedState<Sort[]>({
key: 'tableSortsScopedState',
default: [],
defaultValue: [],
});

79
front/src/modules/ui/object/record-table/utils/getRecordTableScopedStates.ts Normal file
View File

@ -0,0 +1,79 @@
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
import { onColumnsChangeScopedState } from '../states/onColumnsChangeScopedState';
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
import { tableFiltersWhereScopedSelector } from '../states/selectors/tablefiltersWhereScopedSelector';
import { tableSortsOrderByScopedSelector } from '../states/selectors/tableSortsOrderByScopedSelector';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import { tableFiltersScopedState } from '../states/tableFiltersScopedState';
import { tableSortsScopedState } from '../states/tableSortsScopedState';
import { onEntityCountChangeScopedState } from './../states/onEntityCountChange';
export const getRecordTableScopedStates = ({
recordTableScopeId,
}: {
recordTableScopeId: string;
}) => {
const availableTableColumnsState = getScopedState(
availableTableColumnsScopedState,
recordTableScopeId,
);
const tableFiltersState = getScopedState(
tableFiltersScopedState,
recordTableScopeId,
);
const tableSortsState = getScopedState(
tableSortsScopedState,
recordTableScopeId,
);
const tableSortsOrderBySelector =
tableSortsOrderByScopedSelector(recordTableScopeId);
const tableFiltersWhereSelector =
tableFiltersWhereScopedSelector(recordTableScopeId);
const tableColumnsState = getScopedState(
tableColumnsScopedState,
recordTableScopeId,
);
const tableColumnsByKeySelector =
tableColumnsByKeyScopedSelector(recordTableScopeId);
const hiddenTableColumnsSelector =
hiddenTableColumnsScopedSelector(recordTableScopeId);
const visibleTableColumnsSelector =
visibleTableColumnsScopedSelector(recordTableScopeId);
const onColumnsChangeState = getScopedState(
onColumnsChangeScopedState,
recordTableScopeId,
);
const onEntityCountChangeState = getScopedState(
onEntityCountChangeScopedState,
recordTableScopeId,
);
return {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableSortsOrderBySelector,
tableFiltersWhereSelector,
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
onColumnsChangeState,
onEntityCountChangeState,
};
};