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

3157 refactor scoped states to move to v3 (#3180)

Browse Source 
* renaming

* renaming

* create getDropdownScopeInjectors

* update useDropdown

* create internal hooks folder

* update record-table states to be scoped states

* update record-table selectors to be scoped selectors

* create utils scope injector

* refactor record-table wip

* refactor record-table wip

* wip

* inject scopeId in selectors

* update intenal hooks

* update intenal hooks

* update intenal hooks

* update intenal hooks

* update intenal hooks

* update intenal hooks

* update internal hooks

* update internal hooks

* update internal hooks

* update internal hooks

* update useTableColumns

* update states and hooks

* refactoring

* refactoring

* refactoring

* refactoring

* refactoring

* refactoring

* refactoring

* refactoring

* refactoring

* fix scopeId not in context

* fix lint errors

* fix error in story

* fix errors: wip

* fix errors

* fix error

* fix jest test

* fix scopeId not defined

* fix jest test

* Bug fixes

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
bosiraphael
2024-01-03 19:45:14 +01:00
committed by GitHub
parent 65250839fb
commit b0d3e6d8d3
112 changed files with 1447 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
View File

@ -20,7 +20,7 @@ export const AttachmentDropdown = ({
}: AttachmentDropdownProps) => {
const dropdownScopeId = `${scopeKey}-settings-field-active-action-dropdown`;
const { closeDropdown } = useDropdown({ dropdownScopeId });
const { closeDropdown } = useDropdown(dropdownScopeId);
const handleDownload = () => {
onDownload();

27
packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts
View File

@ -1,7 +1,8 @@
import { useRecoilCallback } from 'recoil';
import { ActivityType } from '@/activities/types/Activity';
import { selectedRowIdsSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsSelector';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import {
ActivityTargetableEntity,
@ -10,9 +11,16 @@ import {
import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer';
export const useOpenCreateActivityDrawerForSelectedRowIds = () => {
export const useOpenCreateActivityDrawerForSelectedRowIds = (
recordTableScopeId: string,
) => {
const openCreateActivityDrawer = useOpenCreateActivityDrawer();
const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector();
const { injectSelectorSnapshotValueWithRecordTableScopeId } =
useRecordTableScopedStates(recordTableScopeId);
return useRecoilCallback(
({ snapshot }) =>
(
@ -20,9 +28,12 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = () => {
entityType: ActivityTargetableEntityType,
relatedEntities?: ActivityTargetableEntity[],
) => {
const selectedRowIds = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const selectedRowIds =
injectSelectorSnapshotValueWithRecordTableScopeId(
snapshot,
selectedRowIdsScopeInjector,
);
let activityTargetableEntityArray: ActivityTargetableEntity[] =
selectedRowIds.map((id: string) => ({
type: entityType,
@ -37,6 +48,10 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = () => {
targetableEntities: activityTargetableEntityArray,
});
},
[openCreateActivityDrawer],
[
injectSelectorSnapshotValueWithRecordTableScopeId,
openCreateActivityDrawer,
selectedRowIdsScopeInjector,
],
);
};

4
packages/twenty-front/src/modules/activities/timeline/utils/__tests__/groupActivitiesByMonth.test.ts
View File

@ -13,10 +13,10 @@ describe('groupActivitiesByMonth', () => {
expect(grouped[0].items).toHaveLength(1);
expect(grouped[1].items).toHaveLength(1);
expect(grouped[0].year).toBe(2023);
expect(grouped[0].year).toBe(new Date().getFullYear());
expect(grouped[1].year).toBe(2023);
expect(grouped[0].month).toBe(11);
expect(grouped[0].month).toBe(new Date().getMonth());
expect(grouped[1].month).toBe(3);
});
});

2
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
View File

@ -23,7 +23,7 @@ export const useCommandMenu = () => {
const openCommandMenu = () => {
setIsCommandMenuOpened(true);
setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenu);
setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenuOpen);
};
const closeCommandMenu = () => {

3
packages/twenty-front/src/modules/object-record/components/RecordTableContainer.tsx
View File

@ -28,9 +28,11 @@ const StyledContainer = styled.div`
`;
export const RecordTableContainer = ({
recordTableId,
objectNamePlural,
createRecord,
}: {
recordTableId: string;
objectNamePlural: string;
createRecord: () => void;
}) => {
@ -52,7 +54,6 @@ export const RecordTableContainer = ({
const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport();
const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport();
const recordTableId = objectNamePlural ?? '';
const viewBarId = objectNamePlural ?? '';
const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({

7
packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx
View File

@ -61,6 +61,8 @@ export const RecordTablePage = () => {
await createOneObject?.({});
};
const recordTableId = objectNamePlural ?? '';
return (
<PageContainer>
<PageHeader
@ -75,12 +77,13 @@ export const RecordTablePage = () => {
<PageBody>
<StyledTableContainer>
<RecordTableContainer
recordTableId={recordTableId}
objectNamePlural={objectNamePlural}
createRecord={handleAddButtonClick}
/>
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
<RecordTableActionBar recordTableId={recordTableId} />
<RecordTableContextMenu recordTableId={recordTableId} />
</PageBody>
</PageContainer>
);

34
packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts
View File

@ -7,13 +7,17 @@ import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils
import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { isRecordTableInitialLoadingState } from '@/object-record/record-table/states/isRecordTableInitialLoadingState';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { signInBackgroundMockCompanies } from '@/sign-in-background-mock/constants/signInBackgroundMockCompanies';
import { useFindManyRecords } from './useFindManyRecords';
export const useObjectRecordTable = () => {
const { scopeId: objectNamePlural, setRecordTableData } = useRecordTable();
const {
scopeId: objectNamePlural,
setRecordTableData,
setIsRecordTableInitialLoading,
} = useRecordTable();
const currentWorkspace = useRecoilValue(currentWorkspaceState);
const { objectNameSingular } = useObjectNameSingularFromPlural({
@ -25,8 +29,26 @@ export const useObjectRecordTable = () => {
objectNameSingular,
},
);
const { tableFiltersState, tableSortsState, tableLastRowVisibleState } =
useRecordTableScopedStates();
const {
tableFiltersScopeInjector,
tableSortsScopeInjector,
tableLastRowVisibleScopeInjector,
} = getRecordTableScopeInjector();
const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
const tableFiltersState = injectStateWithRecordTableScopeId(
tableFiltersScopeInjector,
);
const tableSortsState = injectStateWithRecordTableScopeId(
tableSortsScopeInjector,
);
const tableLastRowVisibleState = injectStateWithRecordTableScopeId(
tableLastRowVisibleScopeInjector,
);
const tableFilters = useRecoilValue(tableFiltersState);
const tableSorts = useRecoilValue(tableSortsState);
@ -42,10 +64,6 @@ export const useObjectRecordTable = () => {
foundObjectMetadataItem?.fields ?? [],
);
const setIsRecordTableInitialLoading = useSetRecoilState(
isRecordTableInitialLoadingState,
);
const { records, loading, fetchMoreRecords, queryStateIdentifier } =
useFindManyRecords({
objectNameSingular,

57
packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx
View File

@ -8,9 +8,10 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje
import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState';
import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
import { useExecuteQuickActionOnOneRecord } from '@/object-record/hooks/useExecuteQuickActionOnOneRecord';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
import { selectedRowIdsSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsSelector';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import {
IconCheckbox,
IconHeart,
@ -41,12 +42,25 @@ export const useRecordTableContextMenuEntries = (
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState);
const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector();
const {
injectSelectorWithRecordTableScopeId,
injectSelectorSnapshotValueWithRecordTableScopeId,
} = useRecordTableScopedStates(scopeId);
const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId(
selectedRowIdsScopeInjector,
);
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const { scopeId: objectNamePlural, resetTableRowSelection } = useRecordTable({
const { resetTableRowSelection } = useRecordTable({
recordTableScopeId: scopeId,
});
const objectNamePlural = scopeId;
const { objectNameSingular } = useObjectNameSingularFromPlural({
objectNamePlural,
});
@ -61,9 +75,10 @@ export const useRecordTableContextMenuEntries = (
: 'Custom';
const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => {
const selectedRowIds = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const selectedRowIds = injectSelectorSnapshotValueWithRecordTableScopeId(
snapshot,
selectedRowIdsScopeInjector,
);
const selectedRowId = selectedRowIds.length === 1 ? selectedRowIds[0] : '';
@ -97,22 +112,31 @@ export const useRecordTableContextMenuEntries = (
const handleDeleteClick = useRecoilCallback(
({ snapshot }) =>
async () => {
const rowIdsToDelete = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const rowIdsToDelete =
injectSelectorSnapshotValueWithRecordTableScopeId(
snapshot,
selectedRowIdsScopeInjector,
);
resetTableRowSelection();
await deleteManyRecords(rowIdsToDelete);
},
[deleteManyRecords, resetTableRowSelection],
[
deleteManyRecords,
injectSelectorSnapshotValueWithRecordTableScopeId,
resetTableRowSelection,
selectedRowIdsScopeInjector,
],
);
const handleExecuteQuickActionOnClick = useRecoilCallback(
({ snapshot }) =>
async () => {
const rowIdsToExecuteQuickActionOn = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const rowIdsToExecuteQuickActionOn =
injectSelectorSnapshotValueWithRecordTableScopeId(
snapshot,
selectedRowIdsScopeInjector,
);
resetTableRowSelection();
await Promise.all(
@ -121,7 +145,12 @@ export const useRecordTableContextMenuEntries = (
}),
);
},
[executeQuickActionOnOneRecord, resetTableRowSelection],
[
executeQuickActionOnOneRecord,
injectSelectorSnapshotValueWithRecordTableScopeId,
resetTableRowSelection,
selectedRowIdsScopeInjector,
],
);
const dataExecuteQuickActionOnmentEnabled = useIsFeatureEnabled(
@ -129,7 +158,7 @@ export const useRecordTableContextMenuEntries = (
);
const openCreateActivityDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
useOpenCreateActivityDrawerForSelectedRowIds(scopeId);
return {
setContextMenuEntries: useCallback(() => {

4
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx
View File

@ -12,9 +12,7 @@ type AddObjectFilterFromDetailsButtonProps = {
export const AddObjectFilterFromDetailsButton = ({
filterDropdownId,
}: AddObjectFilterFromDetailsButtonProps) => {
const { toggleDropdown } = useDropdown({
dropdownScopeId: ObjectFilterDropdownId,
});
const { toggleDropdown } = useDropdown(ObjectFilterDropdownId);
const { resetFilter } = useFilterDropdown({
filterDropdownId: filterDropdownId,

6
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx
View File

@ -7,9 +7,9 @@ import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
export const MultipleFiltersButton = () => {
const { resetFilter } = useFilterDropdown();
const { isDropdownOpen, toggleDropdown } = useDropdown({
dropdownScopeId: ObjectFilterDropdownId,
});
const { isDropdownOpen, toggleDropdown } = useDropdown(
ObjectFilterDropdownId,
);
const handleClick = () => {
toggleDropdown();

4
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -42,9 +42,7 @@ export const ObjectSortDropdownButton = ({
sortDropdownId: sortDropdownId,
});
const { toggleDropdown } = useDropdown({
dropdownScopeId: ObjectSortDropdownId,
});
const { toggleDropdown } = useDropdown(ObjectSortDropdownId);
const handleButtonClick = () => {
toggleDropdown();

18
packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx
View File

@ -1,11 +1,23 @@
import React from 'react';
import { useRecoilValue } from 'recoil';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { ActionBar } from '@/ui/navigation/action-bar/components/ActionBar';
import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector';
export const RecordTableActionBar = ({
recordTableId,
}: {
recordTableId: string;
}) => {
const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector();
const { injectSelectorWithRecordTableScopeId } =
useRecordTableScopedStates(recordTableId);
const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId(
selectedRowIdsScopeInjector,
);
export const RecordTableActionBar = () => {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
return <ActionBar selectedIds={selectedRowIds} />;

11
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx
View File

@ -4,9 +4,18 @@ import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/com
import { RecordTableRow } from '@/object-record/record-table/components/RecordTableRow';
import { RowIdContext } from '@/object-record/record-table/contexts/RowIdContext';
import { RowIndexContext } from '@/object-record/record-table/contexts/RowIndexContext';
import { tableRowIdsState } from '@/object-record/record-table/states/tableRowIdsState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
export const RecordTableBody = () => {
const { tableRowIdsScopeInjector } = getRecordTableScopeInjector();
const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
const tableRowIdsState = injectStateWithRecordTableScopeId(
tableRowIdsScopeInjector,
);
const tableRowIds = useRecoilValue(tableRowIdsState);
return (

11
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx
View File

@ -3,6 +3,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
export const RecordTableBodyEffect = () => {
@ -13,7 +14,15 @@ export const RecordTableBodyEffect = () => {
queryStateIdentifier,
loading,
} = useObjectRecordTable();
const { tableLastRowVisibleState } = useRecordTableScopedStates();
const { tableLastRowVisibleScopeInjector } = getRecordTableScopeInjector();
const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
const tableLastRowVisibleState = injectStateWithRecordTableScopeId(
tableLastRowVisibleScopeInjector,
);
const [tableLastRowVisible, setTableLastRowVisible] = useRecoilState(
tableLastRowVisibleState,
);

15
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx
View File

@ -4,26 +4,21 @@ import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable';
import { StyledRow } from '@/object-record/record-table/components/RecordTableRow';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { getRecordTableScopedStates } from '@/object-record/record-table/utils/getRecordTableScopedStates';
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
export const RecordTableBodyFetchMoreLoader = () => {
const { queryStateIdentifier } = useObjectRecordTable();
const { scopeId } = useRecordTable();
const { setRecordTableLastRowVisible } = useRecordTable();
const isFetchingMoreObjects = useRecoilValue(
isFetchingMoreRecordsFamilyState(queryStateIdentifier),
);
const onLastRowVisible = useRecoilCallback(
({ set }) =>
async (inView: boolean) => {
const { tableLastRowVisibleState } = getRecordTableScopedStates({
recordTableScopeId: scopeId,
});
set(tableLastRowVisibleState, inView);
},
[scopeId],
() => async (inView: boolean) => {
setRecordTableLastRowVisible(inView);
},
[setRecordTableLastRowVisible],
);
const { ref: tbodyRef } = useInView({

19
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCell.tsx → packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx
View File

@ -2,6 +2,7 @@ import { useContext } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/contextMenuIsOpenState';
import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/contextMenuPositionState';
@ -13,17 +14,25 @@ import { ColumnContext } from '../contexts/ColumnContext';
import { ColumnIndexContext } from '../contexts/ColumnIndexContext';
import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
import { RowIdContext } from '../contexts/RowIdContext';
import { TableCell } from '../record-table-cell/components/RecordTableCell';
import { RecordTableCell } 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 }) => {
export const RecordTableCellContainer = ({
cellIndex,
}: {
cellIndex: number;
}) => {
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
const currentRowId = useContext(RowIdContext);
const { objectMetadataConfigState } = useRecordTableScopedStates();
const { objectMetadataConfigScopeInjector } = getRecordTableScopeInjector();
const objectMetadataConfig = useRecoilValue(objectMetadataConfigState);
const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
const objectMetadataConfig = useRecoilValue(
injectStateWithRecordTableScopeId(objectMetadataConfigScopeInjector),
);
const { setCurrentRowSelected } = useCurrentRowSelected();
@ -66,7 +75,7 @@ export const RecordTableCell = ({ cellIndex }: { cellIndex: number }) => {
objectMetadataConfig?.labelIdentifierFieldMetadataId,
}}
>
<TableCell customHotkeyScope={{ scope: customHotkeyScope }} />
<RecordTableCell customHotkeyScope={{ scope: customHotkeyScope }} />
</FieldContext.Provider>
</td>
</ColumnIndexContext.Provider>

15
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx
View File

@ -3,6 +3,7 @@ import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { RecordTableHeaderCell } from '@/object-record/record-table/components/RecordTableHeaderCell';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { IconPlus } from '@/ui/display/icon';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
@ -58,8 +59,18 @@ export const RecordTableHeader = ({
}: {
createRecord: () => void;
}) => {
const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
useRecordTableScopedStates();
const { hiddenTableColumnsScopeInjector, visibleTableColumnsScopeInjector } =
getRecordTableScopeInjector();
const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates();
const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId(
hiddenTableColumnsScopeInjector,
);
const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId(
visibleTableColumnsScopeInjector,
);
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);

53
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx
View File

@ -5,8 +5,8 @@ import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
import { resizeFieldOffsetState } from '@/object-record/record-table/states/resizeFieldOffsetState';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { IconPlus } from '@/ui/display/icon';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
@ -80,15 +80,38 @@ export const RecordTableHeaderCell = ({
column: ColumnDefinition<FieldMetadata>;
createRecord: () => void;
}) => {
const {
resizeFieldOffsetScopeInjector,
tableColumnsScopeInjector,
tableColumnsByKeyScopeInjector,
visibleTableColumnsScopeInjector,
} = getRecordTableScopeInjector();
const {
injectStateWithRecordTableScopeId,
injectSelectorWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
} = useRecordTableScopedStates();
const resizeFieldOffsetState = injectStateWithRecordTableScopeId(
resizeFieldOffsetScopeInjector,
);
const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
resizeFieldOffsetState,
);
const {
tableColumnsState,
tableColumnsByKeySelector,
visibleTableColumnsSelector,
} = useRecordTableScopedStates();
const tableColumnsState = injectStateWithRecordTableScopeId(
tableColumnsScopeInjector,
);
const tableColumnsByKeySelector = injectSelectorWithRecordTableScopeId(
tableColumnsByKeyScopeInjector,
);
const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId(
visibleTableColumnsScopeInjector,
);
const tableColumns = useRecoilValue(tableColumnsState);
const tableColumnsByKey = useRecoilValue(tableColumnsByKeySelector);
@ -124,10 +147,14 @@ export const RecordTableHeaderCell = ({
async () => {
if (!resizedFieldKey) return;
const resizeFieldOffset = injectSnapshotValueWithRecordTableScopeId(
snapshot,
resizeFieldOffsetScopeInjector,
);
const nextWidth = Math.round(
Math.max(
tableColumnsByKey[resizedFieldKey].size +
snapshot.getLoadable(resizeFieldOffsetState).valueOrThrow(),
tableColumnsByKey[resizedFieldKey].size + resizeFieldOffset,
COLUMN_MIN_WIDTH,
),
);
@ -146,7 +173,15 @@ export const RecordTableHeaderCell = ({
await handleColumnsChange(nextColumns);
}
},
[resizedFieldKey, tableColumnsByKey, tableColumns, handleColumnsChange],
[
resizedFieldKey,
injectSnapshotValueWithRecordTableScopeId,
resizeFieldOffsetScopeInjector,
tableColumnsByKey,
resizeFieldOffsetState,
tableColumns,
handleColumnsChange,
],
);
useTrackPointer({

9
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { IconSettings } from '@/ui/display/icon';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@ -18,7 +19,13 @@ import { ColumnDefinition } from '../types/ColumnDefinition';
export const RecordTableHeaderPlusButtonContent = () => {
const { closeDropdown } = useDropdown();
const { hiddenTableColumnsSelector } = useRecordTableScopedStates();
const { hiddenTableColumnsScopeInjector } = getRecordTableScopeInjector();
const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates();
const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId(
hiddenTableColumnsScopeInjector,
);
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);

13
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx
View File

@ -3,6 +3,8 @@ import { useInView } from 'react-intersection-observer';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { RecordTableCellContainer } from '@/object-record/record-table/components/RecordTableCellContainer';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { ColumnContext } from '../contexts/ColumnContext';
@ -10,7 +12,6 @@ import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScop
import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected';
import { CheckboxCell } from './CheckboxCell';
import { RecordTableCell } from './RecordTableCell';
export const StyledRow = styled.tr<{ selected: boolean }>`
background: ${(props) =>
@ -26,7 +27,13 @@ const StyledPlaceholder = styled.td`
`;
export const RecordTableRow = ({ rowId }: RecordTableRowProps) => {
const { visibleTableColumnsSelector } = useRecordTableScopedStates();
const { visibleTableColumnsScopeInjector } = getRecordTableScopeInjector();
const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates();
const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId(
visibleTableColumnsScopeInjector,
);
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
@ -59,7 +66,7 @@ export const RecordTableRow = ({ rowId }: RecordTableRowProps) => {
value={column}
key={column.fieldMetadataId}
>
<RecordTableCell cellIndex={columnIndex} />
<RecordTableCellContainer cellIndex={columnIndex} />
</ColumnContext.Provider>
);
})}

20
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View File

@ -7,7 +7,8 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje
import { RecordTable } from '@/object-record/record-table/components/RecordTable';
import { RecordTableFirstColumnScrollObserver } from '@/object-record/record-table/components/RecordTableFirstColumnScrollObserver';
import { RecordTableRefContextWrapper } from '@/object-record/record-table/components/RecordTableRefContext';
import { isRecordTableInitialLoadingState } from '@/object-record/record-table/states/isRecordTableInitialLoadingState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
@ -18,7 +19,6 @@ import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinit
import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
import { useRecordTable } from '../hooks/useRecordTable';
import { RecordTableScope } from '../scopes/RecordTableScope';
import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
import { RecordTableInternalEffect } from './RecordTableInternalEffect';
@ -80,6 +80,22 @@ export const RecordTableWithWrappers = ({
}: RecordTableWithWrappersProps) => {
const tableBodyRef = useRef<HTMLDivElement>(null);
const {
numberOfTableRowsScopeInjector,
isRecordTableInitialLoadingScopeInjector,
} = getRecordTableScopeInjector();
const { injectStateWithRecordTableScopeId } =
useRecordTableScopedStates(recordTableId);
const numberOfTableRowsState = injectStateWithRecordTableScopeId(
numberOfTableRowsScopeInjector,
);
const isRecordTableInitialLoadingState = injectStateWithRecordTableScopeId(
isRecordTableInitialLoadingScopeInjector,
);
const numberOfTableRows = useRecoilValue(numberOfTableRowsState);
const isRecordTableInitialLoading = useRecoilValue(

14
packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx
View File

@ -1,10 +1,11 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { Checkbox } from '@/ui/input/components/Checkbox';
import { useRecordTable } from '../hooks/useRecordTable';
import { allRowsSelectedStatusSelector } from '../states/selectors/allRowsSelectedStatusSelector';
const StyledContainer = styled.div`
align-items: center;
@ -16,7 +17,16 @@ const StyledContainer = styled.div`
`;
export const SelectAllCheckbox = () => {
const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector);
const { allRowsSelectedStatusScopeInjector } = getRecordTableScopeInjector();
const { injectSelectorWithRecordTableScopeId } = useRecordTableScopedStates();
const allRowsSelectedStatusScopedSelector =
injectSelectorWithRecordTableScopeId(allRowsSelectedStatusScopeInjector);
const allRowsSelectedStatus = useRecoilValue(
allRowsSelectedStatusScopedSelector,
);
const { selectAllRows } = useRecordTable();
const checked = allRowsSelectedStatus === 'all';

19
packages/twenty-front/src/modules/object-record/record-table/context-menu/components/RecordTableContextMenu.tsx
View File

@ -1,11 +1,24 @@
import React from 'react';
import { useRecoilValue } from 'recoil';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { ContextMenu } from '@/ui/navigation/context-menu/components/ContextMenu';
import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector';
export const RecordTableContextMenu = ({
recordTableId,
}: {
recordTableId: string;
}) => {
const { selectedRowIdsScopeInjector } = getRecordTableScopeInjector();
const { injectSelectorWithRecordTableScopeId } =
useRecordTableScopedStates(recordTableId);
const selectedRowIdsSelector = injectSelectorWithRecordTableScopeId(
selectedRowIdsScopeInjector,
);
export const RecordTableContextMenu = () => {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
return <ContextMenu selectedIds={selectedRowIds} />;
};

52
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts
View File

@ -1,18 +1,42 @@
import { useRecoilCallback } from 'recoil';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
export const useCloseCurrentTableCellInEditMode = () =>
useRecoilCallback(({ set, snapshot }) => {
return async () => {
const currentTableCellInEditModePosition = snapshot
.getLoadable(currentTableCellInEditModePositionState)
.valueOrThrow();
export const useCloseCurrentTableCellInEditMode = (
recordTableScopeId: string,
) => {
const {
currentTableCellInEditModePositionScopeInjector,
isTableCellInEditModeScopeInjector,
} = getRecordTableScopeInjector();
set(
isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
false,
);
};
}, []);
const {
injectSnapshotValueWithRecordTableScopeId,
injectFamilyStateWithRecordTableScopeId,
} = useRecordTableScopedStates(recordTableScopeId);
return useRecoilCallback(
({ set, snapshot }) => {
return async () => {
const currentTableCellInEditModePosition =
injectSnapshotValueWithRecordTableScopeId(
snapshot,
currentTableCellInEditModePositionScopeInjector,
);
const isTableCellInEditMode = injectFamilyStateWithRecordTableScopeId(
isTableCellInEditModeScopeInjector,
);
set(isTableCellInEditMode(currentTableCellInEditModePosition), false);
};
},
[
currentTableCellInEditModePositionScopeInjector,
injectFamilyStateWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
isTableCellInEditModeScopeInjector,
],
);
};

58
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useDisableSoftFocus.ts
View File

@ -1,18 +1,50 @@
import { useRecoilCallback } from 'recoil';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { isSoftFocusOnTableCellFamilyState } from '../../states/isSoftFocusOnTableCellFamilyState';
import { softFocusPositionState } from '../../states/softFocusPositionState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
export const useDisableSoftFocus = () =>
useRecoilCallback(({ set, snapshot }) => {
return () => {
const currentPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
export const useDisableSoftFocus = (recordTableScopeId: string) => {
const {
softFocusPositionScopeInjector,
isSoftFocusActiveScopeInjector,
isSoftFocusOnTableCellScopeInjector,
} = getRecordTableScopeInjector();
set(isSoftFocusActiveState, false);
const {
injectStateWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
injectFamilyStateWithRecordTableScopeId,
} = useRecordTableScopedStates(recordTableScopeId);
set(isSoftFocusOnTableCellFamilyState(currentPosition), false);
};
}, []);
return useRecoilCallback(
({ set, snapshot }) => {
return () => {
const currentPosition = injectSnapshotValueWithRecordTableScopeId(
snapshot,
softFocusPositionScopeInjector,
);
const isSoftFocusActiveState = injectStateWithRecordTableScopeId(
isSoftFocusActiveScopeInjector,
);
const isSoftFocusOnTableCellFamilyState =
injectFamilyStateWithRecordTableScopeId(
isSoftFocusOnTableCellScopeInjector,
);
set(isSoftFocusActiveState, false);
set(isSoftFocusOnTableCellFamilyState(currentPosition), false);
};
},
[
injectFamilyStateWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
injectStateWithRecordTableScopeId,
isSoftFocusActiveScopeInjector,
isSoftFocusOnTableCellScopeInjector,
softFocusPositionScopeInjector,
],
);
};

47
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode.ts
View File

@ -1,26 +1,45 @@
import { useRecoilCallback } from 'recoil';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
export const useGetIsSomeCellInEditMode = (recordTableScopeId: string) => {
const {
currentTableCellInEditModePositionScopeInjector,
isTableCellInEditModeScopeInjector,
} = getRecordTableScopeInjector();
const {
injectSnapshotValueWithRecordTableScopeId,
injectFamilySnapshotValueWithRecordTableScopeId,
} = useRecordTableScopedStates(recordTableScopeId);
export const useGetIsSomeCellInEditMode = () => {
return useRecoilCallback(
({ snapshot }) =>
() => {
const currentTableCellInEditModePosition = snapshot
.getLoadable(currentTableCellInEditModePositionState)
.valueOrThrow();
const currentTableCellInEditModePosition =
injectSnapshotValueWithRecordTableScopeId(
snapshot,
currentTableCellInEditModePositionScopeInjector,
);
const isSomeCellInEditMode = snapshot
.getLoadable(
isTableCellInEditModeFamilyState(
currentTableCellInEditModePosition,
),
)
.valueOrThrow();
const isSomeCellInEditModeFamilyState =
injectFamilySnapshotValueWithRecordTableScopeId(
snapshot,
isTableCellInEditModeScopeInjector,
);
const isSomeCellInEditMode = isSomeCellInEditModeFamilyState(
currentTableCellInEditModePosition,
);
return isSomeCellInEditMode;
},
[],
[
currentTableCellInEditModePositionScopeInjector,
injectFamilySnapshotValueWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
isTableCellInEditModeScopeInjector,
],
);
};

29
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts
View File

@ -1,23 +1,31 @@
import { useRecoilCallback } from 'recoil';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCloseCurrentTableCellInEditMode } from './useCloseCurrentTableCellInEditMode';
import { useDisableSoftFocus } from './useDisableSoftFocus';
export const useLeaveTableFocus = () => {
const disableSoftFocus = useDisableSoftFocus();
const closeCurrentCellInEditMode = useCloseCurrentTableCellInEditMode();
export const useLeaveTableFocus = (recordTableScopeId: string) => {
const disableSoftFocus = useDisableSoftFocus(recordTableScopeId);
const closeCurrentCellInEditMode =
useCloseCurrentTableCellInEditMode(recordTableScopeId);
const { isSoftFocusActiveScopeInjector } = getRecordTableScopeInjector();
const { injectSnapshotValueWithRecordTableScopeId } =
useRecordTableScopedStates(recordTableScopeId);
return useRecoilCallback(
({ snapshot }) =>
() => {
const isSoftFocusActive = snapshot
.getLoadable(isSoftFocusActiveState)
.valueOrThrow();
const isSoftFocusActive = injectSnapshotValueWithRecordTableScopeId(
snapshot,
isSoftFocusActiveScopeInjector,
);
const currentHotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState)
@ -34,6 +42,11 @@ export const useLeaveTableFocus = () => {
closeCurrentCellInEditMode();
disableSoftFocus();
},
[closeCurrentCellInEditMode, disableSoftFocus],
[
closeCurrentCellInEditMode,
disableSoftFocus,
injectSnapshotValueWithRecordTableScopeId,
isSoftFocusActiveScopeInjector,
],
);
};

68
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts
View File

@ -1,23 +1,59 @@
import { useRecoilCallback } from 'recoil';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { TableCellPosition } from '../../types/TableCellPosition';
export const useMoveEditModeToTableCellPosition = () =>
useRecoilCallback(({ set, snapshot }) => {
return (newPosition: TableCellPosition) => {
const currentTableCellInEditModePosition = snapshot
.getLoadable(currentTableCellInEditModePositionState)
.valueOrThrow();
export const useMoveEditModeToTableCellPosition = (
recordTableScopeId: string,
) => {
const {
isTableCellInEditModeScopeInjector,
currentTableCellInEditModePositionScopeInjector,
} = getRecordTableScopeInjector();
set(
isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
false,
);
const {
injectStateWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
injectFamilyStateWithRecordTableScopeId,
} = useRecordTableScopedStates(recordTableScopeId);
set(currentTableCellInEditModePositionState, newPosition);
return useRecoilCallback(
({ set, snapshot }) => {
return (newPosition: TableCellPosition) => {
const currentTableCellInEditModePosition =
injectSnapshotValueWithRecordTableScopeId(
snapshot,
currentTableCellInEditModePositionScopeInjector,
);
set(isTableCellInEditModeFamilyState(newPosition), true);
};
}, []);
const currentTableCellInEditModePositionState =
injectStateWithRecordTableScopeId(
currentTableCellInEditModePositionScopeInjector,
);
const isTableCellInEditModeFamilyState =
injectFamilyStateWithRecordTableScopeId(
isTableCellInEditModeScopeInjector,
);
set(
isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
false,
);
set(currentTableCellInEditModePositionState, newPosition);
set(isTableCellInEditModeFamilyState(newPosition), true);
};
},
[
currentTableCellInEditModePositionScopeInjector,
injectFamilyStateWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
injectStateWithRecordTableScopeId,
isTableCellInEditModeScopeInjector,
],
);
};

51
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableScopedStates.ts
View File

@ -1,46 +1,31 @@
import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { useScopedState } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState';
import { getRecordTableScopedStates } from '../../utils/getRecordTableScopedStates';
export const useRecordTableScopedStates = (args?: {
customRecordTableScopeId?: string;
}) => {
const { customRecordTableScopeId } = args ?? {};
export const useRecordTableScopedStates = (recordTableId?: string) => {
const scopeId = useAvailableScopeIdOrThrow(
RecordTableScopeInternalContext,
customRecordTableScopeId,
recordTableId,
);
const {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableColumnsState,
objectMetadataConfigState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
onEntityCountChangeState,
onColumnsChangeState,
tableLastRowVisibleState,
} = getRecordTableScopedStates({
recordTableScopeId: scopeId,
});
getScopedState,
getScopedSelector,
getScopedFamilyState,
getScopedSnapshotValue,
getScopedSelectorSnapshotValue,
getScopedFamilySnapshotValue,
} = useScopedState(scopeId);
return {
scopeId,
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableColumnsState,
objectMetadataConfigState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
onEntityCountChangeState,
onColumnsChangeState,
tableLastRowVisibleState,
injectStateWithRecordTableScopeId: getScopedState,
injectSelectorWithRecordTableScopeId: getScopedSelector,
injectFamilyStateWithRecordTableScopeId: getScopedFamilyState,
injectSelectorSnapshotValueWithRecordTableScopeId:
getScopedSelectorSnapshotValue,
injectSnapshotValueWithRecordTableScopeId: getScopedSnapshotValue,
injectFamilySnapshotValueWithRecordTableScopeId:
getScopedFamilySnapshotValue,
};
};

34
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts
View File

@ -1,19 +1,37 @@
import { useRecoilCallback } from 'recoil';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
import { tableRowIdsState } from '../../states/tableRowIdsState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
export const useResetTableRowSelection = () =>
useRecoilCallback(
export const useResetTableRowSelection = (recordTableScopeId: string) => {
const { tableRowIdsScopeInjector, isRowSelectedScopeInjector } =
getRecordTableScopeInjector();
const {
injectSnapshotValueWithRecordTableScopeId,
injectFamilyStateWithRecordTableScopeId,
} = useRecordTableScopedStates(recordTableScopeId);
return useRecoilCallback(
({ snapshot, set }) =>
() => {
const tableRowIds = snapshot
.getLoadable(tableRowIdsState)
.valueOrThrow();
const tableRowIds = injectSnapshotValueWithRecordTableScopeId(
snapshot,
tableRowIdsScopeInjector,
);
const isRowSelectedFamilyState =
injectFamilyStateWithRecordTableScopeId(isRowSelectedScopeInjector);
for (const rowId of tableRowIds) {
set(isRowSelectedFamilyState(rowId), false);
}
},
[],
[
injectFamilyStateWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
isRowSelectedScopeInjector,
tableRowIdsScopeInjector,
],
);
};

46
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts
View File

@ -1,20 +1,37 @@
import { useRecoilCallback } from 'recoil';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
import { allRowsSelectedStatusSelector } from '../../states/selectors/allRowsSelectedStatusSelector';
import { tableRowIdsState } from '../../states/tableRowIdsState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
export const useSelectAllRows = (recordTableScopeId: string) => {
const {
allRowsSelectedStatusScopeInjector,
tableRowIdsScopeInjector,
isRowSelectedScopeInjector,
} = getRecordTableScopeInjector();
const {
injectSnapshotValueWithRecordTableScopeId,
injectSelectorSnapshotValueWithRecordTableScopeId,
injectFamilyStateWithRecordTableScopeId,
} = useRecordTableScopedStates(recordTableScopeId);
export const useSelectAllRows = () => {
const selectAllRows = useRecoilCallback(
({ set, snapshot }) =>
() => {
const allRowsSelectedStatus = snapshot
.getLoadable(allRowsSelectedStatusSelector)
.valueOrThrow();
const allRowsSelectedStatus =
injectSelectorSnapshotValueWithRecordTableScopeId(
snapshot,
allRowsSelectedStatusScopeInjector,
);
const tableRowIds = snapshot
.getLoadable(tableRowIdsState)
.valueOrThrow();
const tableRowIds = injectSnapshotValueWithRecordTableScopeId(
snapshot,
tableRowIdsScopeInjector,
);
const isRowSelectedFamilyState =
injectFamilyStateWithRecordTableScopeId(isRowSelectedScopeInjector);
if (
allRowsSelectedStatus === 'none' ||
@ -29,7 +46,14 @@ export const useSelectAllRows = () => {
}
}
},
[],
[
allRowsSelectedStatusScopeInjector,
injectFamilyStateWithRecordTableScopeId,
injectSelectorSnapshotValueWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
isRowSelectedScopeInjector,
tableRowIdsScopeInjector,
],
);
return {

40
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts
View File

@ -1,25 +1,35 @@
import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
import { numberOfTableRowsState } from '@/object-record/record-table/states/numberOfTableRowsState';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { tableRowIdsState } from '../../states/tableRowIdsState';
type useSetRecordTableDataProps = {
recordTableScopeId: string;
onEntityCountChange: (entityCount: number) => void;
};
export const useSetRecordTableData = ({
recordTableScopeId,
onEntityCountChange,
}: useSetRecordTableDataProps) => {
const resetTableRowSelection = useResetTableRowSelection();
const resetTableRowSelection = useResetTableRowSelection(recordTableScopeId);
const { tableRowIdsScopeInjector, numberOfTableRowsScopeInjector } =
getRecordTableScopeInjector();
const {
injectStateWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
} = useRecordTableScopedStates(recordTableScopeId);
return useRecoilCallback(
({ set, snapshot }) =>
<T extends { id: string }>(newEntityArray: T[]) => {
for (const entity of newEntityArray) {
// TODO: refactor with scoped state later
const currentEntity = snapshot
.getLoadable(entityFieldsFamilyState(entity.id))
.valueOrThrow();
@ -28,19 +38,37 @@ export const useSetRecordTableData = ({
set(entityFieldsFamilyState(entity.id), entity);
}
}
const currentRowIds = snapshot.getLoadable(tableRowIdsState).getValue();
const currentRowIds = injectSnapshotValueWithRecordTableScopeId(
snapshot,
tableRowIdsScopeInjector,
);
const entityIds = newEntityArray.map((entity) => entity.id);
const tableRowIdsState = injectStateWithRecordTableScopeId(
tableRowIdsScopeInjector,
);
if (!isDeeplyEqual(currentRowIds, entityIds)) {
set(tableRowIdsState, entityIds);
}
resetTableRowSelection();
const numberOfTableRowsState = injectStateWithRecordTableScopeId(
numberOfTableRowsScopeInjector,
);
set(numberOfTableRowsState, entityIds.length);
onEntityCountChange(entityIds.length);
},
[onEntityCountChange, resetTableRowSelection],
[
injectSnapshotValueWithRecordTableScopeId,
injectStateWithRecordTableScopeId,
numberOfTableRowsScopeInjector,
onEntityCountChange,
resetTableRowSelection,
tableRowIdsScopeInjector,
],
);
};

17
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRowSelectedState.ts
View File

@ -1,8 +1,19 @@
import { useRecoilCallback } from 'recoil';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
export const useSetRowSelectedState = () =>
useRecoilCallback(({ set }) => (rowId: string, selected: boolean) => {
export const useSetRowSelectedState = (recordTableScopeId: string) => {
const { isRowSelectedScopeInjector } = getRecordTableScopeInjector();
const { injectFamilyStateWithRecordTableScopeId } =
useRecordTableScopedStates(recordTableScopeId);
const isRowSelectedFamilyState = injectFamilyStateWithRecordTableScopeId(
isRowSelectedScopeInjector,
);
return useRecoilCallback(({ set }) => (rowId: string, selected: boolean) => {
set(isRowSelectedFamilyState(rowId), selected);
});
};

67
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts
View File

@ -1,23 +1,60 @@
import { useRecoilCallback } from 'recoil';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { isSoftFocusOnTableCellFamilyState } from '../../states/isSoftFocusOnTableCellFamilyState';
import { softFocusPositionState } from '../../states/softFocusPositionState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { TableCellPosition } from '../../types/TableCellPosition';
export const useSetSoftFocusPosition = () =>
useRecoilCallback(({ set, snapshot }) => {
return (newPosition: TableCellPosition) => {
const currentPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
export const useSetSoftFocusPosition = (recordTableScopeId: string) => {
const {
softFocusPositionScopeInjector,
isSoftFocusActiveScopeInjector,
isSoftFocusOnTableCellScopeInjector,
} = getRecordTableScopeInjector();
set(isSoftFocusActiveState, true);
const {
injectStateWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
injectFamilyStateWithRecordTableScopeId,
} = useRecordTableScopedStates(recordTableScopeId);
set(isSoftFocusOnTableCellFamilyState(currentPosition), false);
return useRecoilCallback(
({ set, snapshot }) => {
return (newPosition: TableCellPosition) => {
const currentPosition = injectSnapshotValueWithRecordTableScopeId(
snapshot,
softFocusPositionScopeInjector,
);
set(softFocusPositionState, newPosition);
const isSoftFocusActiveState = injectStateWithRecordTableScopeId(
isSoftFocusActiveScopeInjector,
);
set(isSoftFocusOnTableCellFamilyState(newPosition), true);
};
}, []);
const isSoftFocusOnTableCellFamilyState =
injectFamilyStateWithRecordTableScopeId(
isSoftFocusOnTableCellScopeInjector,
);
const softFocusPositionState = injectStateWithRecordTableScopeId(
softFocusPositionScopeInjector,
);
set(isSoftFocusActiveState, true);
set(isSoftFocusOnTableCellFamilyState(currentPosition), false);
set(softFocusPositionState, newPosition);
set(isSoftFocusOnTableCellFamilyState(newPosition), true);
};
},
[
injectFamilyStateWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
injectStateWithRecordTableScopeId,
isSoftFocusActiveScopeInjector,
isSoftFocusOnTableCellScopeInjector,
softFocusPositionScopeInjector,
],
);
};

6
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useUpsertRecordTableItem.ts
View File

@ -3,8 +3,9 @@ import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
export const useUpsertRecordTableItem = () =>
useRecoilCallback(
// TODO: refactor with scoped state later
export const useUpsertRecordTableItem = () => {
return useRecoilCallback(
({ set, snapshot }) =>
<T extends { id: string }>(entity: T) => {
const currentEntity = snapshot
@ -17,3 +18,4 @@ export const useUpsertRecordTableItem = () =>
},
[],
);
};

193
packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
View File

@ -1,8 +1,9 @@
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { useGetIsSomeCellInEditMode } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode';
import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
import { onColumnsChangeScopedState } from '@/object-record/record-table/states/onColumnsChangeScopedState';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
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';
@ -10,10 +11,7 @@ import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getS
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 { onEntityCountChangeScopedState } from '../states/onEntityCountChangeScopedState';
import { ColumnDefinition } from '../types/ColumnDefinition';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
@ -38,43 +36,71 @@ export const useRecordTable = (props?: useRecordTableProps) => {
);
const {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableColumnsState,
objectMetadataConfigState,
onEntityCountChangeState,
} = useRecordTableScopedStates({
customRecordTableScopeId: scopeId,
});
injectStateWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
injectSelectorSnapshotValueWithRecordTableScopeId,
} = useRecordTableScopedStates(scopeId);
const {
availableTableColumnsScopeInjector,
tableFiltersScopeInjector,
tableSortsScopeInjector,
tableColumnsScopeInjector,
objectMetadataConfigScopeInjector,
onEntityCountScopeInjector,
softFocusPositionScopeInjector,
numberOfTableRowsScopeInjector,
numberOfTableColumnsScopeInjector,
onColumnsChangeScopeInjector,
isRecordTableInitialLoadingScopeInjector,
tableLastRowVisibleScopeInjector,
} = getRecordTableScopeInjector();
const setAvailableTableColumns = useSetRecoilState(
availableTableColumnsState,
injectStateWithRecordTableScopeId(availableTableColumnsScopeInjector),
);
const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState);
const setTableFilters = useSetRecoilState(tableFiltersState);
const setObjectMetadataConfig = useSetRecoilState(objectMetadataConfigState);
const setOnEntityCountChange = useSetRecoilState(
injectStateWithRecordTableScopeId(onEntityCountScopeInjector),
);
const setTableFilters = useSetRecoilState(
injectStateWithRecordTableScopeId(tableFiltersScopeInjector),
);
const setObjectMetadataConfig = useSetRecoilState(
injectStateWithRecordTableScopeId(objectMetadataConfigScopeInjector),
);
const setTableSorts = useSetRecoilState(tableSortsState);
const setTableSorts = useSetRecoilState(
injectStateWithRecordTableScopeId(tableSortsScopeInjector),
);
const setTableColumns = useSetRecoilState(tableColumnsState);
const setTableColumns = useSetRecoilState(
injectStateWithRecordTableScopeId(tableColumnsScopeInjector),
);
const setOnColumnsChange = useSetRecoilState(
injectStateWithRecordTableScopeId(onColumnsChangeScopeInjector),
);
const setIsRecordTableInitialLoading = useSetRecoilState(
injectStateWithRecordTableScopeId(isRecordTableInitialLoadingScopeInjector),
);
const setRecordTableLastRowVisible = useSetRecoilState(
injectStateWithRecordTableScopeId(tableLastRowVisibleScopeInjector),
);
const onColumnsChange = useRecoilCallback(
({ snapshot }) =>
(columns: ColumnDefinition<FieldMetadata>[]) => {
const onColumnsChangeState = getScopedStateDeprecated(
onColumnsChangeScopedState,
scopeId,
);
const onColumnsChange = getSnapshotValue(
const onColumnsChange = injectSnapshotValueWithRecordTableScopeId(
snapshot,
onColumnsChangeState,
onColumnsChangeScopeInjector,
);
onColumnsChange?.(columns);
},
[scopeId],
[injectSnapshotValueWithRecordTableScopeId, onColumnsChangeScopeInjector],
);
const onEntityCountChange = useRecoilCallback(
@ -94,24 +120,28 @@ export const useRecordTable = (props?: useRecordTableProps) => {
[scopeId],
);
const setRecordTableData = useSetRecordTableData({ onEntityCountChange });
const setRecordTableData = useSetRecordTableData({
recordTableScopeId: scopeId,
onEntityCountChange,
});
const leaveTableFocus = useLeaveTableFocus();
const leaveTableFocus = useLeaveTableFocus(scopeId);
const setRowSelectedState = useSetRowSelectedState();
const setRowSelectedState = useSetRowSelectedState(scopeId);
const resetTableRowSelection = useResetTableRowSelection();
const resetTableRowSelection = useResetTableRowSelection(scopeId);
const upsertRecordTableItem = useUpsertRecordTableItem();
const setSoftFocusPosition = useSetSoftFocusPosition();
const setSoftFocusPosition = useSetSoftFocusPosition(scopeId);
const moveUp = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const softFocusPosition = injectSnapshotValueWithRecordTableScopeId(
snapshot,
softFocusPositionScopeInjector,
);
let newRowNumber = softFocusPosition.row - 1;
@ -124,19 +154,25 @@ export const useRecordTable = (props?: useRecordTableProps) => {
row: newRowNumber,
});
},
[setSoftFocusPosition],
[
injectSnapshotValueWithRecordTableScopeId,
setSoftFocusPosition,
softFocusPositionScopeInjector,
],
);
const moveDown = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const softFocusPosition = injectSnapshotValueWithRecordTableScopeId(
snapshot,
softFocusPositionScopeInjector,
);
const numberOfTableRows = snapshot
.getLoadable(numberOfTableRowsState)
.valueOrThrow();
const numberOfTableRows = injectSnapshotValueWithRecordTableScopeId(
snapshot,
numberOfTableRowsScopeInjector,
);
let newRowNumber = softFocusPosition.row + 1;
@ -149,24 +185,32 @@ export const useRecordTable = (props?: useRecordTableProps) => {
row: newRowNumber,
});
},
[setSoftFocusPosition],
[
injectSnapshotValueWithRecordTableScopeId,
numberOfTableRowsScopeInjector,
setSoftFocusPosition,
softFocusPositionScopeInjector,
],
);
const moveRight = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const softFocusPosition = injectSnapshotValueWithRecordTableScopeId(
snapshot,
softFocusPositionScopeInjector,
);
const numberOfTableColumns = snapshot
.getLoadable(numberOfTableColumnsScopedSelector(scopeId))
.valueOrThrow();
const numberOfTableRows = snapshot
.getLoadable(numberOfTableRowsState)
.valueOrThrow();
const numberOfTableColumns =
injectSelectorSnapshotValueWithRecordTableScopeId(
snapshot,
numberOfTableColumnsScopeInjector,
);
const numberOfTableRows = injectSnapshotValueWithRecordTableScopeId(
snapshot,
numberOfTableRowsScopeInjector,
);
const currentColumnNumber = softFocusPosition.column;
const currentRowNumber = softFocusPosition.row;
@ -197,19 +241,29 @@ export const useRecordTable = (props?: useRecordTableProps) => {
});
}
},
[scopeId, setSoftFocusPosition],
[
injectSelectorSnapshotValueWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
numberOfTableColumnsScopeInjector,
numberOfTableRowsScopeInjector,
setSoftFocusPosition,
softFocusPositionScopeInjector,
],
);
const moveLeft = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const softFocusPosition = injectSnapshotValueWithRecordTableScopeId(
snapshot,
softFocusPositionScopeInjector,
);
const numberOfTableColumns = snapshot
.getLoadable(numberOfTableColumnsScopedSelector(scopeId))
.valueOrThrow();
const numberOfTableColumns =
injectSelectorSnapshotValueWithRecordTableScopeId(
snapshot,
numberOfTableColumnsScopeInjector,
);
const currentColumnNumber = softFocusPosition.column;
const currentRowNumber = softFocusPosition.row;
@ -238,11 +292,17 @@ export const useRecordTable = (props?: useRecordTableProps) => {
});
}
},
[scopeId, setSoftFocusPosition],
[
injectSelectorSnapshotValueWithRecordTableScopeId,
injectSnapshotValueWithRecordTableScopeId,
numberOfTableColumnsScopeInjector,
setSoftFocusPosition,
softFocusPositionScopeInjector,
],
);
const useMapKeyboardToSoftFocus = () => {
const disableSoftFocus = useDisableSoftFocus();
const disableSoftFocus = useDisableSoftFocus(scopeId);
const setHotkeyScope = useSetHotkeyScope();
useScopedHotkeys(
@ -295,7 +355,9 @@ export const useRecordTable = (props?: useRecordTableProps) => {
);
};
const { selectAllRows } = useSelectAllRows();
const { selectAllRows } = useSelectAllRows(scopeId);
const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode(scopeId);
return {
scopeId,
@ -317,5 +379,10 @@ export const useRecordTable = (props?: useRecordTableProps) => {
moveUp,
useMapKeyboardToSoftFocus,
selectAllRows,
setOnColumnsChange,
setIsRecordTableInitialLoading,
setRecordTableLastRowVisible,
setSoftFocusPosition,
getIsSomeCellInEditMode,
};
};

28
packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts
View File

@ -4,6 +4,7 @@ import { useRecoilValue } from 'recoil';
import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
@ -25,12 +26,27 @@ export const useTableColumns = (props?: useRecordTableProps) => {
});
const {
availableTableColumnsState,
tableColumnsState,
visibleTableColumnsSelector,
} = useRecordTableScopedStates({
customRecordTableScopeId: scopeId,
});
injectStateWithRecordTableScopeId,
injectSelectorWithRecordTableScopeId,
} = useRecordTableScopedStates(scopeId);
const {
availableTableColumnsScopeInjector,
tableColumnsScopeInjector,
visibleTableColumnsScopeInjector,
} = getRecordTableScopeInjector();
const availableTableColumnsState = injectStateWithRecordTableScopeId(
availableTableColumnsScopeInjector,
);
const tableColumnsState = injectStateWithRecordTableScopeId(
tableColumnsScopeInjector,
);
const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId(
visibleTableColumnsScopeInjector,
);
const availableTableColumns = useRecoilValue(availableTableColumnsState);

6
packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownButton.tsx
View File

@ -3,9 +3,9 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/Styl
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
export const TableOptionsDropdownButton = () => {
const { isDropdownOpen, toggleDropdown } = useDropdown({
dropdownScopeId: TableOptionsDropdownId,
});
const { isDropdownOpen, toggleDropdown } = useDropdown(
TableOptionsDropdownId,
);
return (
<StyledHeaderDropdownButton

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

@ -3,6 +3,8 @@ import { OnDragEndResponder } from '@hello-pangea/dnd';
import { useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/display/icon';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
@ -15,7 +17,6 @@ import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFiel
import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
import { useViewBar } from '@/views/hooks/useViewBar';
import { useRecordTableScopedStates } from '../../hooks/internal/useRecordTableScopedStates';
import { useTableColumns } from '../../hooks/useTableColumns';
import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
@ -41,8 +42,19 @@ export const TableOptionsDropdownContent = ({
const viewEditInputRef = useRef<HTMLInputElement>(null);
const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
useRecordTableScopedStates({ customRecordTableScopeId: recordTableId });
const { hiddenTableColumnsScopeInjector, visibleTableColumnsScopeInjector } =
getRecordTableScopeInjector();
const { injectSelectorWithRecordTableScopeId } =
useRecordTableScopedStates(recordTableId);
const hiddenTableColumnsSelector = injectSelectorWithRecordTableScopeId(
hiddenTableColumnsScopeInjector,
);
const visibleTableColumnsSelector = injectSelectorWithRecordTableScopeId(
visibleTableColumnsScopeInjector,
);
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);

2
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCell.tsx
View File

@ -8,7 +8,7 @@ import { useTableCell } from '../hooks/useTableCell';
import { TableCellContainer } from './RecordTableCellContainer';
export const TableCell = ({
export const RecordTableCell = ({
customHotkeyScope,
}: {
customHotkeyScope: HotkeyScope;

7
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
View File

@ -9,12 +9,15 @@ const StyledEditButtonContainer = styled(motion.div)`
right: 5px;
`;
type TableCellButtonProps = {
type RecordTableCellButtonProps = {
onClick?: () => void;
Icon: IconComponent;
};
export const TableCellButton = ({ onClick, Icon }: TableCellButtonProps) => (
export const RecordTableCellButton = ({
onClick,
Icon,
}: RecordTableCellButtonProps) => (
<StyledEditButtonContainer
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}

34
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
View File

@ -4,7 +4,7 @@ import styled from '@emotion/styled';
import { useGetButtonIcon } from '@/object-record/field/hooks/useGetButtonIcon';
import { useIsFieldEmpty } from '@/object-record/field/hooks/useIsFieldEmpty';
import { useIsFieldInputOnly } from '@/object-record/field/hooks/useIsFieldInputOnly';
import { useGetIsSomeCellInEditMode } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { IconArrowUpRight } from '@/ui/display/icon';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@ -17,10 +17,10 @@ import { useMoveSoftFocusToCurrentCellOnHover } from '../hooks/useMoveSoftFocusT
import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellButton } from './RecordTableCellButton';
import { TableCellDisplayMode } from './RecordTableCellDisplayMode';
import { TableCellEditMode } from './RecordTableCellEditMode';
import { TableCellSoftFocusMode } from './RecordTableCellSoftFocusMode';
import { RecordTableCellButton } from './RecordTableCellButton';
import { RecordTableCellDisplayMode } from './RecordTableCellDisplayMode';
import { RecordTableCellEditMode } from './RecordTableCellEditMode';
import { RecordTableCellSoftFocusMode } 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);
@ -116,29 +116,35 @@ export const TableCellContainer = ({
onMouseLeave={handleContainerMouseLeave}
>
{isCurrentTableCellInEditMode ? (
<TableCellEditMode
<RecordTableCellEditMode
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
>
{editModeContent}
</TableCellEditMode>
</RecordTableCellEditMode>
) : hasSoftFocus ? (
<>
{showButton && (
<TableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
<RecordTableCellButton
onClick={handleButtonClick}
Icon={buttonIcon}
/>
)}
<TableCellSoftFocusMode>
<RecordTableCellSoftFocusMode>
{editModeContentOnly ? editModeContent : nonEditModeContent}
</TableCellSoftFocusMode>
</RecordTableCellSoftFocusMode>
</>
) : (
<>
{showButton && (
<TableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
<RecordTableCellButton
onClick={handleButtonClick}
Icon={buttonIcon}
/>
)}
<TableCellDisplayMode>
<RecordTableCellDisplayMode>
{editModeContentOnly ? editModeContent : nonEditModeContent}
</TableCellDisplayMode>
</RecordTableCellDisplayMode>
</>
)}
</StyledCellBaseContainer>

2
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx
View File

@ -34,7 +34,7 @@ const StyledEditableCellDisplayModeInnerContainer = styled.div`
width: 100%;
`;
export const TableCellDisplayContainer = ({
export const RecordTableCellDisplayContainer = ({
children,
softFocus,
onClick,

8
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx
View File

@ -3,9 +3,9 @@ import { useIsFieldInputOnly } from '@/object-record/field/hooks/useIsFieldInput
import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellDisplayContainer } from './RecordTableCellDisplayContainer';
import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContainer';
export const TableCellDisplayMode = ({
export const RecordTableCellDisplayMode = ({
children,
}: React.PropsWithChildren<unknown>) => {
const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentTableCell();
@ -23,8 +23,8 @@ export const TableCellDisplayMode = ({
};
return (
<TableCellDisplayContainer onClick={handleClick}>
<RecordTableCellDisplayContainer onClick={handleClick}>
{children}
</TableCellDisplayContainer>
</RecordTableCellDisplayContainer>
);
};

7
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx
View File

@ -9,12 +9,15 @@ const StyledEditButtonContainer = styled(motion.div)`
right: 5px;
`;
type TableCellButtonProps = {
type RecordTableCellEditButtonProps = {
onClick?: () => void;
Icon: IconComponent;
};
export const TableCellButton = ({ onClick, Icon }: TableCellButtonProps) => (
export const RecordTableCellEditButton = ({
onClick,
Icon,
}: RecordTableCellEditButtonProps) => (
<StyledEditButtonContainer
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}

8
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
View File

@ -1,7 +1,7 @@
import { ReactElement } from 'react';
import styled from '@emotion/styled';
const StyledEditableCellEditModeContainer = styled.div<TableCellEditModeProps>`
const StyledEditableCellEditModeContainer = styled.div<RecordTableCellEditModeProps>`
align-items: center;
display: flex;
min-width: 200px;
@ -9,7 +9,7 @@ const StyledEditableCellEditModeContainer = styled.div<TableCellEditModeProps>`
z-index: 1;
`;
export type TableCellEditModeProps = {
export type RecordTableCellEditModeProps = {
children: ReactElement;
transparent?: boolean;
maxContentWidth?: number;
@ -18,11 +18,11 @@ export type TableCellEditModeProps = {
initialValue?: string;
};
export const TableCellEditMode = ({
export const RecordTableCellEditMode = ({
editModeHorizontalAlign,
editModeVerticalPosition,
children,
}: TableCellEditModeProps) => (
}: RecordTableCellEditModeProps) => (
<StyledEditableCellEditModeContainer
data-testid="editable-cell-edit-mode-container"
editModeHorizontalAlign={editModeHorizontalAlign}

12
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
View File

@ -9,13 +9,13 @@ import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritin
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellDisplayContainer } from './RecordTableCellDisplayContainer';
import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContainer';
type TableCellSoftFocusModeProps = PropsWithChildren<unknown>;
type RecordTableCellSoftFocusModeProps = PropsWithChildren<unknown>;
export const TableCellSoftFocusMode = ({
export const RecordTableCellSoftFocusMode = ({
children,
}: TableCellSoftFocusModeProps) => {
}: RecordTableCellSoftFocusModeProps) => {
const { openTableCell } = useTableCell();
const isFieldInputOnly = useIsFieldInputOnly();
@ -95,12 +95,12 @@ export const TableCellSoftFocusMode = ({
};
return (
<TableCellDisplayContainer
<RecordTableCellDisplayContainer
onClick={handleClick}
softFocus
scrollRef={scrollRef}
>
{children}
</TableCellDisplayContainer>
</RecordTableCellDisplayContainer>
);
};

18
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCurrentTableCellEditMode.ts
View File

@ -1,16 +1,30 @@
import { useCallback } from 'react';
import { useRecoilState } from 'recoil';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { useMoveEditModeToTableCellPosition } from '../../hooks/internal/useMoveEditModeToCellPosition';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { useCurrentTableCellPosition } from './useCurrentCellPosition';
export const useCurrentTableCellEditMode = () => {
const moveEditModeToTableCellPosition = useMoveEditModeToTableCellPosition();
const { scopeId } = useRecordTable();
const moveEditModeToTableCellPosition =
useMoveEditModeToTableCellPosition(scopeId);
const currentTableCellPosition = useCurrentTableCellPosition();
const { isTableCellInEditModeScopeInjector } = getRecordTableScopeInjector();
const { injectFamilyStateWithRecordTableScopeId } =
useRecordTableScopedStates();
const isTableCellInEditModeFamilyState =
injectFamilyStateWithRecordTableScopeId(isTableCellInEditModeScopeInjector);
const [isCurrentTableCellInEditMode] = useRecoilState(
isTableCellInEditModeFamilyState(currentTableCellPosition),
);

14
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell.ts
View File

@ -1,14 +1,24 @@
import { useRecoilValue } from 'recoil';
import { isSoftFocusOnTableCellFamilyState } from '../../states/isSoftFocusOnTableCellFamilyState';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { useCurrentTableCellPosition } from './useCurrentCellPosition';
export const useIsSoftFocusOnCurrentTableCell = () => {
const currentTableCellPosition = useCurrentTableCellPosition();
const { isSoftFocusOnTableCellScopeInjector } = getRecordTableScopeInjector();
const { injectFamilyStateWithRecordTableScopeId } =
useRecordTableScopedStates();
const isSoftFocusActiveFamilyState = injectFamilyStateWithRecordTableScopeId(
isSoftFocusOnTableCellScopeInjector,
);
const isSoftFocusOnTableCell = useRecoilValue(
isSoftFocusOnTableCellFamilyState(currentTableCellPosition),
isSoftFocusActiveFamilyState(currentTableCellPosition),
);
return isSoftFocusOnTableCell;

32
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts
View File

@ -1,9 +1,9 @@
import { useRecoilCallback } from 'recoil';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTableCell';
@ -11,12 +11,27 @@ import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTab
export const useMoveSoftFocusToCurrentCellOnHover = () => {
const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
const {
currentTableCellInEditModePositionScopeInjector,
isTableCellInEditModeScopeInjector,
} = getRecordTableScopeInjector();
const {
injectSnapshotValueWithRecordTableScopeId,
injectFamilyStateWithRecordTableScopeId,
} = useRecordTableScopedStates();
const isTableCellInEditModeFamilyState =
injectFamilyStateWithRecordTableScopeId(isTableCellInEditModeScopeInjector);
return useRecoilCallback(
({ snapshot }) =>
() => {
const currentTableCellInEditModePosition = snapshot
.getLoadable(currentTableCellInEditModePositionState)
.valueOrThrow();
const currentTableCellInEditModePosition =
injectSnapshotValueWithRecordTableScopeId(
snapshot,
currentTableCellInEditModePositionScopeInjector,
);
const isSomeCellInEditMode = snapshot.getLoadable(
isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
@ -38,6 +53,11 @@ export const useMoveSoftFocusToCurrentCellOnHover = () => {
setSoftFocusOnCurrentTableCell();
}
},
[setSoftFocusOnCurrentTableCell],
[
currentTableCellInEditModePositionScopeInjector,
injectSnapshotValueWithRecordTableScopeId,
isTableCellInEditModeFamilyState,
setSoftFocusOnCurrentTableCell,
],
);
};

22
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocusOnCurrentTableCell.ts
View File

@ -1,15 +1,24 @@
import { useRecoilCallback } from 'recoil';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useSetSoftFocusPosition } from '../../hooks/internal/useSetSoftFocusPosition';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentTableCellPosition } from './useCurrentCellPosition';
export const useSetSoftFocusOnCurrentTableCell = () => {
const setSoftFocusPosition = useSetSoftFocusPosition();
const { setSoftFocusPosition } = useRecordTable();
const { isSoftFocusActiveScopeInjector } = getRecordTableScopeInjector();
const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
const isSoftFocusActiveState = injectStateWithRecordTableScopeId(
isSoftFocusActiveScopeInjector,
);
const currentTableCellPosition = useCurrentTableCellPosition();
@ -24,6 +33,11 @@ export const useSetSoftFocusOnCurrentTableCell = () => {
setHotkeyScope(TableHotkeyScope.TableSoftFocus);
},
[setHotkeyScope, currentTableCellPosition, setSoftFocusPosition],
[
setSoftFocusPosition,
currentTableCellPosition,
isSoftFocusActiveState,
setHotkeyScope,
],
);
};

15
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTableCell.ts
View File

@ -7,6 +7,8 @@ import { useIsFieldEmpty } from '@/object-record/field/hooks/useIsFieldEmpty';
import { entityFieldInitialValueFamilyState } from '@/object-record/field/states/entityFieldInitialValueFamilyState';
import { FieldInitialValue } from '@/object-record/field/types/FieldInitialValue';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@ -23,9 +25,15 @@ const DEFAULT_CELL_SCOPE: HotkeyScope = {
};
export const useTableCell = () => {
const { objectMetadataConfigState } = useRecordTableScopedStates();
const { scopeId: recordTableScopeId } = useRecordTable();
const objectMetadataConfig = useRecoilValue(objectMetadataConfigState);
const { objectMetadataConfigScopeInjector } = getRecordTableScopeInjector();
const { injectStateWithRecordTableScopeId } = useRecordTableScopedStates();
const objectMetadataConfig = useRecoilValue(
injectStateWithRecordTableScopeId(objectMetadataConfigScopeInjector),
);
const basePathToShowPage = objectMetadataConfig?.basePathToShowPage;
@ -33,7 +41,8 @@ export const useTableCell = () => {
const setHotkeyScope = useSetHotkeyScope();
const { setDragSelectionStartEnabled } = useDragSelect();
const closeCurrentTableCellInEditMode = useCloseCurrentTableCellInEditMode();
const closeCurrentTableCellInEditMode =
useCloseCurrentTableCellInEditMode(recordTableScopeId);
const customCellHotkeyScope = useContext(CellHotkeyScopeContext);

33
packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useCurrentRowSelected.ts
View File

@ -1,13 +1,26 @@
import { useContext } from 'react';
import { useRecoilCallback, useRecoilState } from 'recoil';
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import { RowIdContext } from '../../contexts/RowIdContext';
import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
export const useCurrentRowSelected = () => {
const currentRowId = useContext(RowIdContext);
const [isRowSelected] = useRecoilState(
const { isRowSelectedScopeInjector } = getRecordTableScopeInjector();
const {
injectFamilyStateWithRecordTableScopeId,
injectFamilySnapshotValueWithRecordTableScopeId,
} = useRecordTableScopedStates();
const isRowSelectedFamilyState = injectFamilyStateWithRecordTableScopeId(
isRowSelectedScopeInjector,
);
const isRowSelected = useRecoilValue(
isRowSelectedFamilyState(currentRowId ?? ''),
);
@ -16,9 +29,10 @@ export const useCurrentRowSelected = () => {
(newSelectedState: boolean) => {
if (!currentRowId) return;
const isRowSelected = snapshot
.getLoadable(isRowSelectedFamilyState(currentRowId))
.valueOrThrow();
const isRowSelected = injectFamilySnapshotValueWithRecordTableScopeId(
snapshot,
isRowSelectedScopeInjector,
)(currentRowId);
if (newSelectedState && !isRowSelected) {
set(isRowSelectedFamilyState(currentRowId), true);
@ -26,7 +40,12 @@ export const useCurrentRowSelected = () => {
set(isRowSelectedFamilyState(currentRowId), false);
}
},
[currentRowId],
[
currentRowId,
injectFamilySnapshotValueWithRecordTableScopeId,
isRowSelectedFamilyState,
isRowSelectedScopeInjector,
],
);
return {

6
packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedFamilyState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const isRowSelectedFamilyState = atomFamily<boolean, string>({
key: 'isRowSelectedFamilyState',
default: false,
});

9
packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedScopedFamilyState.ts Normal file
View File

@ -0,0 +1,9 @@
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
export const isRowSelectedScopedFamilyState = createScopedFamilyState<
boolean,
string
>({
key: 'isRowSelectedFamilyState',
defaultValue: false,
});

8
packages/twenty-front/src/modules/object-record/record-table/scopes/RecordTableScopeInitEffect.tsx
View File

@ -1,8 +1,8 @@
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { ColumnDefinition } from '../types/ColumnDefinition';
type RecordTableScopeInitEffectProps = {
@ -13,9 +13,7 @@ type RecordTableScopeInitEffectProps = {
export const RecordTableScopeInitEffect = ({
onColumnsChange,
}: RecordTableScopeInitEffectProps) => {
const { onColumnsChangeState } = useRecordTableScopedStates();
const setOnColumnsChange = useSetRecoilState(onColumnsChangeState);
const { setOnColumnsChange } = useRecordTable();
useEffect(() => {
setOnColumnsChange(() => onColumnsChange);

12
packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionScopedState.ts Normal file
View File

@ -0,0 +1,12 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { TableCellPosition } from '../types/TableCellPosition';
export const currentTableCellInEditModePositionScopedState =
createScopedState<TableCellPosition>({
key: 'currentTableCellInEditModePositionScopedState',
defaultValue: {
row: 0,
column: 1,
},
});

11
packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionState.ts
View File

@ -1,11 +0,0 @@
import { atom } from 'recoil';
import { TableCellPosition } from '../types/TableCellPosition';
export const currentTableCellInEditModePositionState = atom<TableCellPosition>({
key: 'currentTableCellInEditModePositionState',
default: {
row: 0,
column: 1,
},
});

7
packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingScopedState.ts Normal file
View File

@ -0,0 +1,7 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isRecordTableInitialLoadingScopedState =
createScopedState<boolean>({
key: 'isRecordTableInitialLoadingScopedState',
defaultValue: true,
});

6
packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingState.ts
View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const isRecordTableInitialLoadingState = atom<boolean>({
key: 'isRecordTableInitialLoadingState',
default: true,
});

6
packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isSoftFocusActiveScopedState = createScopedState<boolean>({
key: 'isSoftFocusActiveScopedState',
defaultValue: false,
});

6
packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveState.ts
View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const isSoftFocusActiveState = atom<boolean>({
key: 'isSoftFocusActiveState',
default: false,
});

11
packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellFamilyState.ts
View File

@ -1,11 +0,0 @@
import { atomFamily } from 'recoil';
import { TableCellPosition } from '../types/TableCellPosition';
export const isSoftFocusOnTableCellFamilyState = atomFamily<
boolean,
TableCellPosition
>({
key: 'isSoftFocusOnTableCellFamilyState',
default: false,
});

11
packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellScopedFamilyState.ts Normal file
View File

@ -0,0 +1,11 @@
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
import { TableCellPosition } from '../types/TableCellPosition';
export const isSoftFocusOnTableCellScopedFamilyState = createScopedFamilyState<
boolean,
TableCellPosition
>({
key: 'isSoftFocusOnTableCellScopedFamilyState',
defaultValue: false,
});

11
packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeFamilyState.ts
View File

@ -1,11 +0,0 @@
import { atomFamily } from 'recoil';
import { TableCellPosition } from '../types/TableCellPosition';
export const isTableCellInEditModeFamilyState = atomFamily<
boolean,
TableCellPosition
>({
key: 'isTableCellInEditModeFamilyState',
default: false,
});

11
packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeScopedFamilyState.ts Normal file
View File

@ -0,0 +1,11 @@
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
import { TableCellPosition } from '../types/TableCellPosition';
export const isTableCellInEditModeScopedFamilyState = createScopedFamilyState<
boolean,
TableCellPosition
>({
key: 'isTableCellInEditModeScopedFamilyState',
defaultValue: false,
});

6
packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const numberOfTableRowsScopedState = createScopedState<number>({
key: 'numberOfTableRowsScopedState',
defaultValue: 0,
});

6
packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsState.ts
View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const numberOfTableRowsState = atom<number>({
key: 'numberOfTableRowsState',
default: 0,
});

0
packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChange.ts → packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeScopedState.ts
View File

6
packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const resizeFieldOffsetScopedState = createScopedState<number>({
key: 'resizeFieldOffsetScopedState',
defaultValue: 0,
});

6
packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetState.ts
View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const resizeFieldOffsetState = atom<number>({
key: 'resizeFieldOffsetState',
default: 0,
});

29
packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusScopedSelector.ts Normal file
View File

@ -0,0 +1,29 @@
import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus';
import { numberOfTableRowsScopedState } from '../numberOfTableRowsScopedState';
import { selectedRowIdsScopedSelector } from './selectedRowIdsScopedSelector';
export const allRowsSelectedStatusScopedSelector =
createScopedSelector<AllRowsSelectedStatus>({
key: 'allRowsSelectedStatusScopedSelector',
get:
({ scopeId }) =>
({ get }) => {
const numberOfRows = get(numberOfTableRowsScopedState({ scopeId }));
const selectedRowIds = get(selectedRowIdsScopedSelector({ scopeId }));
const numberOfSelectedRows = selectedRowIds.length;
const allRowsSelectedStatus =
numberOfSelectedRows === 0
? 'none'
: numberOfRows === numberOfSelectedRows
? 'all'
: 'some';
return allRowsSelectedStatus;
},
});

26
packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusSelector.ts
View File

@ -1,26 +0,0 @@
import { selector } from 'recoil';
import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus';
import { numberOfTableRowsState } from '../numberOfTableRowsState';
import { selectedRowIdsSelector } from './selectedRowIdsSelector';
export const allRowsSelectedStatusSelector = selector<AllRowsSelectedStatus>({
key: 'allRowsSelectedStatusSelector',
get: ({ get }) => {
const numberOfRows = get(numberOfTableRowsState);
const selectedRowIds = get(selectedRowIdsSelector);
const numberOfSelectedRows = selectedRowIds.length;
const allRowsSelectedStatus =
numberOfSelectedRows === 0
? 'none'
: numberOfRows === numberOfSelectedRows
? 'all'
: 'some';
return allRowsSelectedStatus;
},
});

6
packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsScopedSelector.ts
View File

@ -1,12 +1,12 @@
import { selectorFamily } from 'recoil';
import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
import { tableColumnsScopedState } from '../tableColumnsScopedState';
export const hiddenTableColumnsScopedSelector = selectorFamily({
export const hiddenTableColumnsScopedSelector = createScopedSelector({
key: 'hiddenTableColumnsScopedSelector',
get:
(scopeId: string) =>
({ scopeId }) =>
({ get }) => {
const columns = get(tableColumnsScopedState({ scopeId }));
const columnKeys = columns.map(({ fieldMetadataId }) => fieldMetadataId);

6
packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector.ts
View File

@ -1,11 +1,11 @@
import { selectorFamily } from 'recoil';
import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
import { tableColumnsScopedState } from '../tableColumnsScopedState';
export const numberOfTableColumnsScopedSelector = selectorFamily({
export const numberOfTableColumnsScopedSelector = createScopedSelector({
key: 'numberOfTableColumnsScopedSelector',
get:
(scopeId: string) =>
({ scopeId }) =>
({ get }) =>
get(tableColumnsScopedState({ scopeId })).length,
});

23
packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsScopedSelector.ts Normal file
View File

@ -0,0 +1,23 @@
import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
import { isRowSelectedScopedFamilyState } from '../../record-table-row/states/isRowSelectedScopedFamilyState';
import { tableRowIdsScopedState } from '../tableRowIdsScopedState';
export const selectedRowIdsScopedSelector = createScopedSelector<string[]>({
key: 'selectedRowIdsScopedSelector',
get:
({ scopeId }) =>
({ get }) => {
const rowIds = get(tableRowIdsScopedState({ scopeId }));
return rowIds.filter(
(rowId) =>
get(
isRowSelectedScopedFamilyState({
scopeId,
familyKey: rowId,
}),
) === true,
);
},
});

15
packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsSelector.ts
View File

@ -1,15 +0,0 @@
import { selector } from 'recoil';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
import { tableRowIdsState } from '../tableRowIdsState';
export const selectedRowIdsSelector = selector<string[]>({
key: 'selectedRowIdsSelector',
get: ({ get }) => {
const rowIds = get(tableRowIdsState);
return rowIds.filter(
(rowId) => get(isRowSelectedFamilyState(rowId)) === true,
);
},
});

7
packages/twenty-front/src/modules/object-record/record-table/states/selectors/tableColumnsByKeyScopedSelector.ts
View File

@ -1,14 +1,13 @@
import { selectorFamily } from 'recoil';
import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
import { ColumnDefinition } from '../../types/ColumnDefinition';
import { tableColumnsScopedState } from '../tableColumnsScopedState';
export const tableColumnsByKeyScopedSelector = selectorFamily({
export const tableColumnsByKeyScopedSelector = createScopedSelector({
key: 'tableColumnsByKeyScopedSelector',
get:
(scopeId: string) =>
({ scopeId }) =>
({ get }) =>
get(tableColumnsScopedState({ scopeId })).reduce<
Record<string, ColumnDefinition<FieldMetadata>>

6
packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsScopedSelector.ts
View File

@ -1,12 +1,12 @@
import { selectorFamily } from 'recoil';
import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
import { tableColumnsScopedState } from '../tableColumnsScopedState';
export const visibleTableColumnsScopedSelector = selectorFamily({
export const visibleTableColumnsScopedSelector = createScopedSelector({
key: 'visibleTableColumnsScopedSelector',
get:
(scopeId: string) =>
({ scopeId }) =>
({ get }) => {
const columns = get(tableColumnsScopedState({ scopeId }));
const availableColumnKeys = get(

12
packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionScopedState.ts Normal file
View File

@ -0,0 +1,12 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { TableCellPosition } from '../types/TableCellPosition';
export const softFocusPositionScopedState =
createScopedState<TableCellPosition>({
key: 'softFocusPositionScopedState',
defaultValue: {
row: 0,
column: 1,
},
});

11
packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionState.ts
View File

@ -1,11 +0,0 @@
import { atom } from 'recoil';
import { TableCellPosition } from '../types/TableCellPosition';
export const softFocusPositionState = atom<TableCellPosition>({
key: 'softFocusPositionState',
default: {
row: 0,
column: 1,
},
});

6
packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const tableRowIdsScopedState = createScopedState<string[]>({
key: 'tableRowIdsScopedState',
defaultValue: [],
});

6
packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsState.ts
View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const tableRowIdsState = atom<string[]>({
key: 'tableRowIdsState',
default: [],
});

145
packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopeInjector.ts Normal file
View File

@ -0,0 +1,145 @@
import { isRowSelectedScopedFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedScopedFamilyState';
import { currentTableCellInEditModePositionScopedState } from '@/object-record/record-table/states/currentTableCellInEditModePositionScopedState';
import { isRecordTableInitialLoadingScopedState } from '@/object-record/record-table/states/isRecordTableInitialLoadingScopedState';
import { isSoftFocusActiveScopedState } from '@/object-record/record-table/states/isSoftFocusActiveScopedState';
import { isSoftFocusOnTableCellScopedFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellScopedFamilyState';
import { isTableCellInEditModeScopedFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeScopedFamilyState';
import { numberOfTableRowsScopedState } from '@/object-record/record-table/states/numberOfTableRowsScopedState';
import { objectMetadataConfigScopedState } from '@/object-record/record-table/states/objectMetadataConfigScopedState';
import { resizeFieldOffsetScopedState } from '@/object-record/record-table/states/resizeFieldOffsetScopedState';
import { allRowsSelectedStatusScopedSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusScopedSelector';
import { numberOfTableColumnsScopedSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector';
import { selectedRowIdsScopedSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsScopedSelector';
import { softFocusPositionScopedState } from '@/object-record/record-table/states/softFocusPositionScopedState';
import { tableLastRowVisibleScopedState } from '@/object-record/record-table/states/tableLastRowVisibleScopedState';
import { tableRowIdsScopedState } from '@/object-record/record-table/states/tableRowIdsScopedState';
import { getFamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
import { getSelectorScopeInjector } from '@/ui/utilities/recoil-scope/utils/getSelectorScopeInjector';
import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
import { onColumnsChangeScopedState } from '../states/onColumnsChangeScopedState';
import { onEntityCountChangeScopedState } from '../states/onEntityCountChangeScopedState';
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import { tableFiltersScopedState } from '../states/tableFiltersScopedState';
import { tableSortsScopedState } from '../states/tableSortsScopedState';
export const getRecordTableScopeInjector = () => {
const availableTableColumnsScopeInjector = getScopeInjector(
availableTableColumnsScopedState,
);
const tableFiltersScopeInjector = getScopeInjector(tableFiltersScopedState);
const tableSortsScopeInjector = getScopeInjector(tableSortsScopedState);
const tableColumnsScopeInjector = getScopeInjector(tableColumnsScopedState);
const objectMetadataConfigScopeInjector = getScopeInjector(
objectMetadataConfigScopedState,
);
const tableColumnsByKeyScopeInjector = getSelectorScopeInjector(
tableColumnsByKeyScopedSelector,
);
const hiddenTableColumnsScopeInjector = getSelectorScopeInjector(
hiddenTableColumnsScopedSelector,
);
const visibleTableColumnsScopeInjector = getSelectorScopeInjector(
visibleTableColumnsScopedSelector,
);
const onColumnsChangeScopeInjector = getScopeInjector(
onColumnsChangeScopedState,
);
const onEntityCountScopeInjector = getScopeInjector(
onEntityCountChangeScopedState,
);
const tableLastRowVisibleScopeInjector = getScopeInjector(
tableLastRowVisibleScopedState,
);
const softFocusPositionScopeInjector = getScopeInjector(
softFocusPositionScopedState,
);
const numberOfTableRowsScopeInjector = getScopeInjector(
numberOfTableRowsScopedState,
);
const numberOfTableColumnsScopeInjector = getSelectorScopeInjector(
numberOfTableColumnsScopedSelector,
);
const currentTableCellInEditModePositionScopeInjector = getScopeInjector(
currentTableCellInEditModePositionScopedState,
);
const isTableCellInEditModeScopeInjector = getFamilyScopeInjector(
isTableCellInEditModeScopedFamilyState,
);
const isSoftFocusActiveScopeInjector = getScopeInjector(
isSoftFocusActiveScopedState,
);
const isSoftFocusOnTableCellScopeInjector = getFamilyScopeInjector(
isSoftFocusOnTableCellScopedFamilyState,
);
const tableRowIdsScopeInjector = getScopeInjector(tableRowIdsScopedState);
const isRowSelectedScopeInjector = getFamilyScopeInjector(
isRowSelectedScopedFamilyState,
);
const allRowsSelectedStatusScopeInjector = getSelectorScopeInjector(
allRowsSelectedStatusScopedSelector,
);
const selectedRowIdsScopeInjector = getSelectorScopeInjector(
selectedRowIdsScopedSelector,
);
const isRecordTableInitialLoadingScopeInjector = getScopeInjector(
isRecordTableInitialLoadingScopedState,
);
const resizeFieldOffsetScopeInjector = getScopeInjector(
resizeFieldOffsetScopedState,
);
return {
availableTableColumnsScopeInjector,
tableFiltersScopeInjector,
tableSortsScopeInjector,
tableColumnsScopeInjector,
objectMetadataConfigScopeInjector,
tableColumnsByKeyScopeInjector,
hiddenTableColumnsScopeInjector,
visibleTableColumnsScopeInjector,
onColumnsChangeScopeInjector,
onEntityCountScopeInjector,
tableLastRowVisibleScopeInjector,
softFocusPositionScopeInjector,
numberOfTableRowsScopeInjector,
numberOfTableColumnsScopeInjector,
currentTableCellInEditModePositionScopeInjector,
isTableCellInEditModeScopeInjector,
isSoftFocusActiveScopeInjector,
isSoftFocusOnTableCellScopeInjector,
tableRowIdsScopeInjector,
isRowSelectedScopeInjector,
allRowsSelectedStatusScopeInjector,
selectedRowIdsScopeInjector,
isRecordTableInitialLoadingScopeInjector,
resizeFieldOffsetScopeInjector,
};
};

82
packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopedStates.ts
View File

@ -1,82 +0,0 @@
import { objectMetadataConfigScopedState } from '@/object-record/record-table/states/objectMetadataConfigScopedState';
import { tableLastRowVisibleScopedState } from '@/object-record/record-table/states/tableLastRowVisibleScopedState';
import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
import { onColumnsChangeScopedState } from '../states/onColumnsChangeScopedState';
import { onEntityCountChangeScopedState } from '../states/onEntityCountChange';
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import { tableFiltersScopedState } from '../states/tableFiltersScopedState';
import { tableSortsScopedState } from '../states/tableSortsScopedState';
export const getRecordTableScopedStates = ({
recordTableScopeId,
}: {
recordTableScopeId: string;
}) => {
const availableTableColumnsState = getScopedStateDeprecated(
availableTableColumnsScopedState,
recordTableScopeId,
);
const tableFiltersState = getScopedStateDeprecated(
tableFiltersScopedState,
recordTableScopeId,
);
const tableSortsState = getScopedStateDeprecated(
tableSortsScopedState,
recordTableScopeId,
);
const tableColumnsState = getScopedStateDeprecated(
tableColumnsScopedState,
recordTableScopeId,
);
const objectMetadataConfigState = getScopedStateDeprecated(
objectMetadataConfigScopedState,
recordTableScopeId,
);
const tableColumnsByKeySelector =
tableColumnsByKeyScopedSelector(recordTableScopeId);
const hiddenTableColumnsSelector =
hiddenTableColumnsScopedSelector(recordTableScopeId);
const visibleTableColumnsSelector =
visibleTableColumnsScopedSelector(recordTableScopeId);
const onColumnsChangeState = getScopedStateDeprecated(
onColumnsChangeScopedState,
recordTableScopeId,
);
const onEntityCountChangeState = getScopedStateDeprecated(
onEntityCountChangeScopedState,
recordTableScopeId,
);
const tableLastRowVisibleState = getScopedStateDeprecated(
tableLastRowVisibleScopedState,
recordTableScopeId,
);
return {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableColumnsState,
objectMetadataConfigState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
onColumnsChangeState,
onEntityCountChangeState,
tableLastRowVisibleState,
};
};

6
packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx
View File

@ -14,9 +14,9 @@ import { logError } from '~/utils/logError';
export const PipelineAddButton = () => {
const { enqueueSnackBar } = useSnackBar();
const { closeDropdown, toggleDropdown } = useDropdown({
dropdownScopeId: 'add-pipeline-progress',
});
const { closeDropdown, toggleDropdown } = useDropdown(
'add-pipeline-progress',
);
const createOpportunity = useCreateOpportunity();

2
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
View File

@ -24,7 +24,7 @@ export const SettingsAccountsRowDropdownMenu = ({
const dropdownScopeId = `settings-account-row-${account.uuid}`;
const navigate = useNavigate();
const { closeDropdown } = useDropdown({ dropdownScopeId });
const { closeDropdown } = useDropdown(dropdownScopeId);
return (
<DropdownScope dropdownScopeId={dropdownScopeId}>

12
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
View File

@ -68,12 +68,12 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
return { color: `${baseScopeId}-color`, actions: `${baseScopeId}-actions` };
}, []);
const { closeDropdown: closeColorDropdown } = useDropdown({
dropdownScopeId: dropdownScopeIds.color,
});
const { closeDropdown: closeActionsDropdown } = useDropdown({
dropdownScopeId: dropdownScopeIds.actions,
});
const { closeDropdown: closeColorDropdown } = useDropdown(
dropdownScopeIds.color,
);
const { closeDropdown: closeActionsDropdown } = useDropdown(
dropdownScopeIds.actions,
);
return (
<StyledRow className={className}>

2
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
View File

@ -57,7 +57,7 @@ export const SettingsAboutSection = ({
const { getIcon } = useIcons();
const Icon = getIcon(iconKey);
const { closeDropdown } = useDropdown({ dropdownScopeId });
const { closeDropdown } = useDropdown(dropdownScopeId);
const handleEdit = () => {
onEdit();

2
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx
View File

@ -27,7 +27,7 @@ export const SettingsObjectFieldActiveActionDropdown = ({
}: SettingsObjectFieldActiveActionDropdownProps) => {
const dropdownScopeId = `${scopeKey}-settings-field-active-action-dropdown`;
const { closeDropdown } = useDropdown({ dropdownScopeId });
const { closeDropdown } = useDropdown(dropdownScopeId);
const handleEdit = () => {
onEdit();

2
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
View File

@ -20,7 +20,7 @@ export const SettingsObjectFieldDisabledActionDropdown = ({
}: SettingsObjectFieldDisabledActionDropdownProps) => {
const dropdownScopeId = `${scopeKey}-settings-field-disabled-action-dropdown`;
const { closeDropdown } = useDropdown({ dropdownScopeId });
const { closeDropdown } = useDropdown(dropdownScopeId);
const handleActivate = () => {
onActivate();

2
packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
View File

@ -22,7 +22,7 @@ export const SettingsObjectDisabledMenuDropDown = ({
}: SettingsObjectDisabledMenuDropDownProps) => {
const dropdownScopeId = `${scopeKey}-settings-object-disabled-menu-dropdown`;
const { closeDropdown } = useDropdown({ dropdownScopeId });
const { closeDropdown } = useDropdown(dropdownScopeId);
const handleActivate = () => {
onActivate();

4
packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
View File

@ -27,8 +27,8 @@ export const SignInBackgroundMockPage = () => {
<StyledTableContainer>
<SignInBackgroundMockContainer />
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
<RecordTableActionBar recordTableId="mock" />
<RecordTableContextMenu recordTableId="mock" />
</PageBody>
</PageContainer>
);

2
packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -95,7 +95,7 @@ export const IconPicker = ({
setHotkeyScopeAndMemorizePreviousScope,
} = usePreviousHotkeyScope();
const { closeDropdown } = useDropdown({ dropdownScopeId });
const { closeDropdown } = useDropdown(dropdownScopeId);
const { getIcons, getIcon } = useIcons();
const icons = getIcons();

2
packages/twenty-front/src/modules/ui/input/components/Select.tsx
View File

@ -74,7 +74,7 @@ export const Select = <Value extends string | number | null>({
const selectedOption =
options.find(({ value: key }) => key === value) || options[0];
const { closeDropdown } = useDropdown({ dropdownScopeId });
const { closeDropdown } = useDropdown(dropdownScopeId);
const selectControl = (
<StyledControlContainer disabled={disabled} fullWidth={fullWidth}>

4
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
View File

@ -75,9 +75,7 @@ export const CountryPickerDropdownButton = ({
const [selectedCountry, setSelectedCountry] = useState<Country>();
const { isDropdownOpen, closeDropdown } = useDropdown({
dropdownScopeId: 'country-picker',
});
const { isDropdownOpen, closeDropdown } = useDropdown('country-picker');
const handleChange = (countryCode: string) => {
onChange(countryCode);

31
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownScopedStates.ts Normal file
View File

@ -0,0 +1,31 @@
import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { useScopedState } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState';
type UseDropdownScopedStatesProps = {
dropdownScopeId?: string;
};
export const useDropdownScopedStates = ({
dropdownScopeId,
}: UseDropdownScopedStatesProps) => {
const scopeId = useAvailableScopeIdOrThrow(
DropdownScopeInternalContext,
dropdownScopeId,
);
const {
getScopedState,
getScopedFamilyState,
getScopedSnapshotValue,
getScopedFamilySnapshotValue,
} = useScopedState(scopeId);
return {
scopeId,
injectStateWithDropdownScopeId: getScopedState,
injectFamilyStateWithDropdownScopeId: getScopedFamilyState,
injectSnapshotValueWithDropdownScopeId: getScopedSnapshotValue,
injectFamilySnapshotValueWithDropdownScopeId: getScopedFamilySnapshotValue,
};
};

60
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
View File

@ -1,44 +1,44 @@
import { useRecoilState } from 'recoil';
import { useDropdownScopedStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownScopedStates';
import { getDropdownScopeInjectors } from '@/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { DropdownScopeInternalContext } from '../scopes/scope-internal-context/DropdownScopeInternalContext';
export const useDropdown = (dropdownId?: string) => {
const { injectStateWithDropdownScopeId, scopeId } = useDropdownScopedStates({
dropdownScopeId: dropdownId,
});
import { useDropdownStates } from './useDropdownStates';
const {
dropdownHotkeyScopeScopeInjector,
dropdownWidthScopeInjector,
isDropdownOpenScopeInjector,
} = getDropdownScopeInjectors();
type UseDropdownProps = {
dropdownScopeId?: string;
};
export const useDropdown = (props?: UseDropdownProps) => {
const {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const scopeId = useAvailableScopeIdOrThrow(
DropdownScopeInternalContext,
props?.dropdownScopeId,
const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilState(
injectStateWithDropdownScopeId(dropdownHotkeyScopeScopeInjector),
);
const {
dropdownHotkeyScope,
setDropdownHotkeyScope,
isDropdownOpen,
setIsDropdownOpen,
dropdownWidth,
setDropdownWidth,
} = useDropdownStates({
scopeId,
});
const [dropdownWidth, setDropdownWidth] = useRecoilState(
injectStateWithDropdownScopeId(dropdownWidthScopeInjector),
);
const closeDropdownButton = () => {
const [isDropdownOpen, setIsDropdownOpen] = useRecoilState(
injectStateWithDropdownScopeId(isDropdownOpenScopeInjector),
);
const closeDropdown = () => {
goBackToPreviousHotkeyScope();
setIsDropdownOpen(false);
};
const openDropdownButton = () => {
const openDropdown = () => {
setIsDropdownOpen(true);
if (dropdownHotkeyScope) {
setHotkeyScopeAndMemorizePreviousScope(
dropdownHotkeyScope.scope,
@ -47,20 +47,20 @@ export const useDropdown = (props?: UseDropdownProps) => {
}
};
const toggleDropdownButton = () => {
const toggleDropdown = () => {
if (isDropdownOpen) {
closeDropdownButton();
closeDropdown();
} else {
openDropdownButton();
openDropdown();
}
};
return {
scopeId,
isDropdownOpen: isDropdownOpen,
closeDropdown: closeDropdownButton,
toggleDropdown: toggleDropdownButton,
openDropdown: openDropdownButton,
closeDropdown,
toggleDropdown,
openDropdown,
dropdownHotkeyScope,
setDropdownHotkeyScope,
dropdownWidth,

31
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownStates.ts
View File

@ -1,31 +0,0 @@
import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
import { dropdownHotkeyScopeScopedState } from '../states/dropdownHotkeyScopeScopedState';
import { dropdownWidthScopedState } from '../states/dropdownWidthScopedState';
import { isDropdownOpenScopedState } from '../states/isDropdownOpenScopedState';
export const useDropdownStates = ({ scopeId }: { scopeId: string }) => {
const [isDropdownOpen, setIsDropdownOpen] = useRecoilScopedStateV2(
isDropdownOpenScopedState,
scopeId,
);
const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilScopedStateV2(
dropdownHotkeyScopeScopedState,
scopeId,
);
const [dropdownWidth, setDropdownWidth] = useRecoilScopedStateV2(
dropdownWidthScopedState,
scopeId,
);
return {
isDropdownOpen,
setIsDropdownOpen,
dropdownHotkeyScope,
setDropdownHotkeyScope,
dropdownWidth,
setDropdownWidth,
};
};

22
packages/twenty-front/src/modules/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors.ts Normal file
View File

@ -0,0 +1,22 @@
import { dropdownHotkeyScopeScopedState } from '@/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState';
import { dropdownWidthScopedState } from '@/ui/layout/dropdown/states/dropdownWidthScopedState';
import { isDropdownOpenScopedState } from '@/ui/layout/dropdown/states/isDropdownOpenScopedState';
import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
export const getDropdownScopeInjectors = () => {
const dropdownHotkeyScopeScopeInjector = getScopeInjector(
dropdownHotkeyScopeScopedState,
);
const dropdownWidthScopeInjector = getScopeInjector(dropdownWidthScopedState);
const isDropdownOpenScopeInjector = getScopeInjector(
isDropdownOpenScopedState,
);
return {
dropdownHotkeyScopeScopeInjector,
dropdownWidthScopeInjector,
isDropdownOpenScopeInjector,
};
};

Some files were not shown because too many files have changed in this diff Show More