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

Refacto scroll + Aggregate queries for view groups (#9089)

Browse Source 
Closes https://github.com/twentyhq/private-issues/issues/217.

Refactoring scroll not to cause table-wide re-render when opening a
dropdown (triggering a scroll lock) in the table.
This commit is contained in:
Marie
2024-12-16 17:58:57 +01:00
committed by GitHub
parent c90d2fd5cc
commit 311b5f64c4
47 changed files with 374 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/twenty-front/src/hooks/useScrollRestoration.ts
View File

@ -1,9 +1,10 @@
import { useEffect } from 'react';
import { useLocation, useNavigation } from 'react-router-dom';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useNavigation } from 'react-router-dom';
import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScrollbarsState';
import { scrollPositionState } from '@/ui/utilities/scroll/states/scrollPositionState';
import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isDefined } from '~/utils/isDefined';
/**
@ -13,23 +14,24 @@ import { isDefined } from '~/utils/isDefined';
* not share the same scroll position.
*/
export const useScrollRestoration = (viewportHeight?: number) => {
const key = `scroll-position-${useLocation().key}`;
const { state } = useNavigation();
const [scrollPosition, setScrollPosition] = useRecoilState(
scrollPositionState(key),
const [scrollTop, setScrollTop] = useRecoilComponentStateV2(
scrollWrapperScrollTopComponentState,
);
const overlayScrollbars = useRecoilValue(overlayScrollbarsState);
const overlayScrollbars = useRecoilComponentValueV2(
scrollWrapperInstanceComponentState,
);
const scrollWrapper = overlayScrollbars?.elements().viewport;
const skip = isDefined(viewportHeight) && scrollPosition > viewportHeight;
const skip = isDefined(viewportHeight) && scrollTop > viewportHeight;
useEffect(() => {
if (state === 'loading') {
setScrollPosition(scrollWrapper?.scrollTop ?? 0);
setScrollTop(scrollWrapper?.scrollTop ?? 0);
} else if (state === 'idle' && isDefined(scrollWrapper) && !skip) {
scrollWrapper.scrollTo({ top: scrollPosition });
scrollWrapper.scrollTo({ top: scrollTop });
}
}, [key, state, scrollWrapper, skip, scrollPosition, setScrollPosition]);
}, [state, scrollWrapper, skip, scrollTop, setScrollTop]);
};

11
packages/twenty-front/src/hooks/useScrollToPosition.ts
View File

@ -1,19 +1,24 @@
import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScrollbarsState';
import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useRecoilCallback } from 'recoil';
export const useScrollToPosition = () => {
const scrollWrapperInstanceState = useRecoilComponentCallbackStateV2(
scrollWrapperInstanceComponentState,
);
const scrollToPosition = useRecoilCallback(
({ snapshot }) =>
(scrollPositionInPx: number) => {
const overlayScrollbars = snapshot
.getLoadable(overlayScrollbarsState)
.getLoadable(scrollWrapperInstanceState)
.getValue();
const scrollWrapper = overlayScrollbars?.elements().viewport;
scrollWrapper?.scrollTo({ top: scrollPositionInPx });
},
[],
[scrollWrapperInstanceState],
);
return { scrollToPosition };

5
packages/twenty-front/src/modules/activities/timeline-activities/components/EventList.tsx
View File

@ -44,7 +44,10 @@ export const EventList = ({ events, targetableObject }: EventListProps) => {
const groupedEvents = groupEventsByMonth(filteredEvents);
return (
<ScrollWrapper contextProviderName="eventList">
<ScrollWrapper
contextProviderName="eventList"
componentInstanceId={`scroll-wrapper-event-list-${targetableObject.id}`}
>
<StyledTimelineContainer>
{groupedEvents.map((group, index) => (
<EventsGroup

5
packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
View File

@ -610,7 +610,10 @@ export const CommandMenu = () => {
setCommandMenuSearch={setCommandMenuSearch}
/>
<StyledList>
<ScrollWrapper contextProviderName="commandMenu">
<ScrollWrapper
contextProviderName="commandMenu"
componentInstanceId={`scroll-wrapper-command-menu`}
>
<StyledInnerList isMobile={isMobile}>
<SelectableList
selectableListId="command-menu-list"

3
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
View File

@ -58,7 +58,8 @@ export const MainNavigationDrawerItems = () => {
)}
<ScrollWrapper
contextProviderName="navigationDrawer"
enableXScroll={false}
componentInstanceId={`scroll-wrapper-navigation-drawer`}
defaultEnableXScroll={false}
scrollHide={true}
>
<NavigationDrawerOpenedSection />

5
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
View File

@ -194,7 +194,10 @@ export const RecordBoard = () => {
<RecordBoardComponentInstanceContext.Provider
value={{ instanceId: recordBoardId }}
>
<ScrollWrapper contextProviderName="recordBoard">
<ScrollWrapper
contextProviderName="recordBoard"
componentInstanceId={`scroll-wrapper-record-board-${recordBoardId}`}
>
<RecordBoardStickyHeaderEffect />
<StyledContainerContainer>
<RecordBoardHeader />

8
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardStickyHeaderEffect.tsx
View File

@ -1,9 +1,11 @@
import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useEffect } from 'react';
import { useScrollTopValue } from '@/ui/utilities/scroll/hooks/useScrollTopValue';
export const RecordBoardStickyHeaderEffect = () => {
const scrollTop = useScrollTopValue('recordBoard');
const scrollTop = useRecoilComponentValueV2(
scrollWrapperScrollTopComponentState,
);
// TODO: move this outside because it might cause way too many re-renders for other hooks
useEffect(() => {

37
packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupFilter.ts Normal file
View File

@ -0,0 +1,37 @@
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { useCurrentRecordGroupDefinition } from '@/object-record/record-group/hooks/useCurrentRecordGroupDefinition';
import { useMemo } from 'react';
import { isDefined } from 'twenty-ui';
export const useRecordGroupFilter = (fields: FieldMetadataItem[]) => {
const currentRecordGroupDefinition = useCurrentRecordGroupDefinition();
const recordGroupFilter = useMemo(() => {
if (isDefined(currentRecordGroupDefinition)) {
const fieldMetadataItem = fields.find(
(fieldMetadataItem) =>
fieldMetadataItem.id === currentRecordGroupDefinition.fieldMetadataId,
);
if (!fieldMetadataItem) {
throw new Error(
`Field metadata item with id ${currentRecordGroupDefinition.fieldMetadataId} not found`,
);
}
if (!isDefined(currentRecordGroupDefinition.value)) {
return { [fieldMetadataItem.name]: { is: 'NULL' } };
}
return {
[fieldMetadataItem.name]: {
eq: currentRecordGroupDefinition.value,
},
};
}
return {};
}, [currentRecordGroupDefinition, fields]);
return { recordGroupFilter };
};

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

@ -2,12 +2,11 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
import { useCurrentRecordGroupDefinition } from '@/object-record/record-group/hooks/useCurrentRecordGroupDefinition';
import { useRecordGroupFilter } from '@/object-record/record-group/hooks/useRecordGroupFilter';
import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useMemo } from 'react';
import { isDefined } from 'twenty-ui';
export const useFindManyRecordIndexTableParams = (
objectNameSingular: string,
@ -17,6 +16,10 @@ export const useFindManyRecordIndexTableParams = (
objectNameSingular,
});
const { recordGroupFilter } = useRecordGroupFilter(
objectMetadataItem?.fields,
);
const currentRecordGroupDefinition = useCurrentRecordGroupDefinition();
const tableViewFilterGroups = useRecoilComponentValueV2(
@ -38,33 +41,6 @@ export const useFindManyRecordIndexTableParams = (
tableViewFilterGroups,
);
const recordGroupFilter = useMemo(() => {
if (isDefined(currentRecordGroupDefinition)) {
const fieldMetadataItem = objectMetadataItem?.fields.find(
(fieldMetadataItem) =>
fieldMetadataItem.id === currentRecordGroupDefinition.fieldMetadataId,
);
if (!fieldMetadataItem) {
throw new Error(
`Field metadata item with id ${currentRecordGroupDefinition.fieldMetadataId} not found`,
);
}
if (!isDefined(currentRecordGroupDefinition.value)) {
return { [fieldMetadataItem.name]: { is: 'NULL' } };
}
return {
[fieldMetadataItem.name]: {
eq: currentRecordGroupDefinition.value,
},
};
}
return {};
}, [objectMetadataItem.fields, currentRecordGroupDefinition]);
const orderBy = turnSortsIntoOrderBy(objectMetadataItem, tableSorts);
return {

4
packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
View File

@ -96,7 +96,9 @@ export const RecordTable = () => {
<RecordTableRecordGroupsBody />
)}
<RecordTableStickyEffect />
{isAggregateQueryEnabled && <RecordTableFooter />}
{isAggregateQueryEnabled && !hasRecordGroups && (
<RecordTableFooter />
)}
</StyledTable>
<DragSelect
dragSelectable={tableBodyRef}

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

@ -1,6 +1,7 @@
import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { RecordTableFooter } from '@/object-record/record-table/record-table-footer/components/RecordTableFooter';
import { RecordTablePendingRecordGroupRow } from '@/object-record/record-table/record-table-row/components/RecordTablePendingRecordGroupRow';
import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
import { RecordTableRecordGroupSectionAddNew } from '@/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew';
@ -8,10 +9,14 @@ import { RecordTableRecordGroupSectionLoadMore } from '@/object-record/record-ta
import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState';
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useMemo } from 'react';
import { isDefined } from '~/utils/isDefined';
export const RecordTableRecordGroupRows = () => {
const isAggregateQueryEnabled = useIsFeatureEnabled(
'IS_AGGREGATE_QUERY_ENABLED',
);
const currentRecordGroupId = useCurrentRecordGroupId();
const allRecordIds = useRecoilComponentValueV2(
@ -57,8 +62,14 @@ export const RecordTableRecordGroupRows = () => {
);
})}
<RecordTablePendingRecordGroupRow />
<RecordTableRecordGroupSectionLoadMore />
<RecordTableRecordGroupSectionAddNew />
{isAggregateQueryEnabled && (
<RecordTableFooter
key={currentRecordGroupId}
currentRecordGroupId={currentRecordGroupId}
/>
)}
<RecordTableRecordGroupSectionLoadMore />
</>
);
};

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

@ -1,12 +1,15 @@
import { useEffect } from 'react';
import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
import { useScrollLeftValue } from '@/ui/utilities/scroll/hooks/useScrollLeftValue';
import { useScrollTopValue } from '@/ui/utilities/scroll/hooks/useScrollTopValue';
import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState';
import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
export const RecordTableStickyEffect = () => {
const scrollTop = useScrollTopValue('recordTableWithWrappers');
const scrollTop = useRecoilComponentValueV2(
scrollWrapperScrollTopComponentState,
);
useEffect(() => {
if (scrollTop > 0) {
@ -20,7 +23,9 @@ export const RecordTableStickyEffect = () => {
}
}, [scrollTop]);
const scrollLeft = useScrollLeftValue('recordTableWithWrappers');
const scrollLeft = useRecoilComponentValueV2(
scrollWrapperScrollLeftComponentState,
);
const setIsRecordTableScrolledLeft = useSetRecoilComponentStateV2(
isRecordTableScrolledLeftComponentState,

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

@ -10,8 +10,6 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useSaveCurrentViewFields } from '@/views/hooks/useSaveCurrentViewFields';
import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField';
import { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
import { useRecordTable } from '../hooks/useRecordTable';
@ -50,11 +48,6 @@ export const RecordTableWithWrappers = ({
recordTableId,
viewBarId,
}: RecordTableWithWrappersProps) => {
const isScrollEnabledForRecordTable = useRecoilComponentValueV2(
isScrollEnabledForRecordTableState,
recordTableId,
);
const { resetTableRowSelection, selectAllRows, setHasUserSelectedAllRows } =
useRecordTable({
recordTableId,
@ -109,9 +102,8 @@ export const RecordTableWithWrappers = ({
>
<EntityDeleteContext.Provider value={deleteOneRecord}>
<ScrollWrapper
enableXScroll={isScrollEnabledForRecordTable.enableXScroll}
enableYScroll={isScrollEnabledForRecordTable.enableYScroll}
contextProviderName="recordTableWithWrappers"
componentInstanceId={`record-table-scroll-${recordTableId}`}
>
<RecordUpdateContext.Provider value={updateRecordMutation}>
<StyledTableWithHeader>

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

@ -53,6 +53,11 @@ export const useRecordTable = (props?: useRecordTableProps) => {
recordTableId,
);
const tableColumnsState = useRecoilComponentCallbackStateV2(
tableColumnsComponentState,
recordTableId,
);
const setAvailableTableColumns = useRecoilCallback(
({ snapshot, set }) =>
(columns: ColumnDefinition<FieldMetadata>[]) => {
@ -69,6 +74,19 @@ export const useRecordTable = (props?: useRecordTableProps) => {
[availableTableColumnsState],
);
const setTableColumns = useRecoilCallback(
({ snapshot, set }) =>
(columns: ColumnDefinition<FieldMetadata>[]) => {
const tableColumns = getSnapshotValue(snapshot, tableColumnsState);
if (isDeeplyEqual(tableColumns, columns)) {
return;
}
set(tableColumnsState, columns);
},
[tableColumnsState],
);
const setOnEntityCountChange = useSetRecoilComponentStateV2(
onEntityCountChangeComponentState,
recordTableId,
@ -89,11 +107,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
recordTableId,
);
const setTableColumns = useSetRecoilComponentStateV2(
tableColumnsComponentState,
recordTableId,
);
const setOnColumnsChange = useSetRecoilComponentStateV2(
onColumnsChangeComponentState,
recordTableId,

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

@ -6,13 +6,15 @@ import { RecordTableTd } from '@/object-record/record-table/record-table-cell/co
import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected';
import { Checkbox } from 'twenty-ui';
export const TABLE_CELL_CHECKBOX_MIN_WIDTH = '24px';
const StyledContainer = styled.div`
align-items: center;
cursor: pointer;
display: flex;
height: 32px;
justify-content: center;
min-width: 24px;
min-width: ${TABLE_CELL_CHECKBOX_MIN_WIDTH};
`;
export const RecordTableCellCheckbox = () => {

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

@ -6,12 +6,14 @@ import { RecordTableTd } from '@/object-record/record-table/record-table-cell/co
import { css } from '@emotion/react';
import { IconListViewGrip } from 'twenty-ui';
export const TABLE_CELL_GRIP_WIDTH = '16px';
const StyledContainer = styled.div<{ isPendingRow?: boolean }>`
height: 32px;
width: ${TABLE_CELL_GRIP_WIDTH};
border-color: transparent;
cursor: grab;
display: flex;
height: 32px;
width: 16px;
${({ isPendingRow }) =>
!isPendingRow
? css`

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

@ -50,8 +50,10 @@ export const RecordTableColumnFooterAggregateValue = ({
dropdownId,
aggregateValue,
aggregateLabel,
isFirstCell,
}: {
dropdownId: string;
isFirstCell: boolean;
aggregateValue?: string | number | null;
aggregateLabel?: string;
}) => {
@ -66,13 +68,13 @@ export const RecordTableColumnFooterAggregateValue = ({
onMouseLeave={() => setIsHovered(false)}
>
<StyledCell>
{isHovered || isDefined(aggregateValue) ? (
{isHovered || isDefined(aggregateValue) || isFirstCell ? (
<>
<StyledText id={sanitizedId}>
{aggregateValue ?? 'Calculate'}
</StyledText>
<StyledIcon fontWeight={'light'} size={theme.icon.size.sm} />
{aggregateValue && isDefined(aggregateLabel) && (
{isDefined(aggregateValue) && isDefined(aggregateLabel) && (
<AppTooltip
anchorSelect={`#${sanitizedId}`}
content={aggregateLabel}

5
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnFooterDropdown.tsx
View File

@ -16,10 +16,12 @@ import { MenuItem } from 'twenty-ui';
export const RecordTableColumnFooterDropdown = ({
column,
dropdownId,
}: {
column: ColumnDefinition<FieldMetadata>;
dropdownId: string;
}) => {
const { closeDropdown } = useDropdown(column.fieldMetadataId + '-footer');
const { closeDropdown } = useDropdown(dropdownId);
const { objectMetadataItem } = useRecordTableContextOrThrow();
const { currentViewWithSavedFiltersAndSorts } = useGetCurrentView();
@ -67,6 +69,7 @@ export const RecordTableColumnFooterDropdown = ({
key={aggregation}
onClick={() => {
handleAggregationChange(aggregation);
closeDropdown();
}}
text={getAggregateOperationLabel(aggregation)}
/>

51
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnFooterWithDropdown.tsx
View File

@ -2,53 +2,44 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
import { RecordTableColumnFooterAggregateValue } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnFooterAggregateValue';
import { RecordTableColumnFooterDropdown } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnFooterDropdown';
import { useAggregateRecordsForRecordTableColumnFooter } from '@/object-record/record-table/record-table-footer/hooks/useAggregateRecordsForRecordTableColumnFooter';
import { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import styled from '@emotion/styled';
import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
import { useCallback } from 'react';
type RecordTableColumnFooterWithDropdownProps = {
column: ColumnDefinition<FieldMetadata>;
isFirstCell: boolean;
currentRecordGroupId?: string;
};
const StyledDropdown = styled(Dropdown)`
display: flex;
flex: 1;
z-index: ${({ theme }) => theme.lastLayerZIndex};
transition: opacity 150ms ease-in-out;
`;
export const RecordTableColumnFooterWithDropdown = ({
column,
currentRecordGroupId,
isFirstCell,
}: RecordTableColumnFooterWithDropdownProps) => {
const setIsScrollEnabledForRecordTable = useSetRecoilComponentStateV2(
isScrollEnabledForRecordTableState,
);
const { toggleScrollXWrapper, toggleScrollYWrapper } =
useToggleScrollWrapper();
const handleDropdownOpen = useCallback(() => {
setIsScrollEnabledForRecordTable({
enableXScroll: false,
enableYScroll: false,
});
}, [setIsScrollEnabledForRecordTable]);
toggleScrollXWrapper(false);
toggleScrollYWrapper(false);
}, [toggleScrollXWrapper, toggleScrollYWrapper]);
const handleDropdownClose = useCallback(() => {
setIsScrollEnabledForRecordTable({
enableXScroll: true,
enableYScroll: true,
});
}, [setIsScrollEnabledForRecordTable]);
toggleScrollXWrapper(true);
toggleScrollYWrapper(true);
}, [toggleScrollXWrapper, toggleScrollYWrapper]);
const { aggregateValue, aggregateLabel } =
useAggregateRecordsForRecordTableColumnFooter(column.fieldMetadataId);
const dropdownId = column.fieldMetadataId + '-footer';
const dropdownId = currentRecordGroupId
? `${column.fieldMetadataId}-footer-${currentRecordGroupId}`
: `${column.fieldMetadataId}-footer`;
return (
<StyledDropdown
<Dropdown
onOpen={handleDropdownOpen}
onClose={handleDropdownClose}
dropdownId={dropdownId}
@ -57,9 +48,15 @@ export const RecordTableColumnFooterWithDropdown = ({
aggregateLabel={aggregateLabel}
aggregateValue={aggregateValue}
dropdownId={dropdownId}
isFirstCell={isFirstCell}
/>
}
dropdownComponents={
<RecordTableColumnFooterDropdown
column={column}
dropdownId={dropdownId}
/>
}
dropdownComponents={<RecordTableColumnFooterDropdown column={column} />}
dropdownOffset={{ x: -1 }}
dropdownPlacement="bottom-start"
dropdownHotkeyScope={{ scope: dropdownId }}

24
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableFooter.tsx
View File

@ -1,6 +1,8 @@
import styled from '@emotion/styled';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { TABLE_CELL_CHECKBOX_MIN_WIDTH } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
import { TABLE_CELL_GRIP_WIDTH } from '@/object-record/record-table/record-table-cell/components/RecordTableCellGrip';
import { RecordTableFooterCell } from '@/object-record/record-table/record-table-footer/components/RecordTableFooterCell';
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -75,21 +77,33 @@ const StyledTableFoot = styled.thead`
`;
const StyledDiv = styled.div`
width: 30px;
width: calc(${TABLE_CELL_GRIP_WIDTH} + ${TABLE_CELL_CHECKBOX_MIN_WIDTH});
`;
export const RecordTableFooter = () => {
export const RecordTableFooter = ({
currentRecordGroupId,
}: {
currentRecordGroupId?: string;
}) => {
const visibleTableColumns = useRecoilComponentValueV2(
visibleTableColumnsComponentSelector,
);
return (
<StyledTableFoot id="record-table-footer" data-select-disable>
<StyledTableFoot
id={`record-table-footer${currentRecordGroupId ? '-' + currentRecordGroupId : ''}`}
data-select-disable
>
<tr>
<th />
<StyledDiv />
{visibleTableColumns.map((column) => (
<RecordTableFooterCell key={column.fieldMetadataId} column={column} />
{visibleTableColumns.map((column, index) => (
<RecordTableFooterCell
key={`${column.fieldMetadataId}${currentRecordGroupId ? '-' + currentRecordGroupId : ''}`}
column={column}
currentRecordGroupId={currentRecordGroupId}
isFirstCell={index === 0}
/>
))}
</tr>
</StyledTableFoot>

10
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableFooterCell.tsx
View File

@ -63,8 +63,12 @@ const StyledColumnFootContainer = styled.div`
export const RecordTableFooterCell = ({
column,
isFirstCell = false,
currentRecordGroupId,
}: {
column: ColumnDefinition<FieldMetadata>;
isFirstCell?: boolean;
currentRecordGroupId?: string;
}) => {
const tableColumns = useRecoilComponentValueV2(tableColumnsComponentState);
const tableColumnsByKey = useMemo(
@ -82,7 +86,11 @@ export const RecordTableFooterCell = ({
)}
>
<StyledColumnFootContainer>
<RecordTableColumnFooterWithDropdown column={column} />
<RecordTableColumnFooterWithDropdown
column={column}
currentRecordGroupId={currentRecordGroupId}
isFirstCell={isFirstCell}
/>
</StyledColumnFootContainer>
</StyledColumnFooterCell>
);

6
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/hooks/useAggregateRecordsForRecordTableColumnFooter.tsx
View File

@ -1,6 +1,7 @@
import { useAggregateRecords } from '@/object-record/hooks/useAggregateRecords';
import { computeAggregateValueAndLabel } from '@/object-record/record-board/record-board-column/utils/computeAggregateValueAndLabel';
import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
import { useRecordGroupFilter } from '@/object-record/record-group/hooks/useRecordGroupFilter';
import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
import { recordIndexViewFilterGroupsState } from '@/object-record/record-index/states/recordIndexViewFilterGroupsState';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
@ -16,8 +17,9 @@ export const useAggregateRecordsForRecordTableColumnFooter = (
const isAggregateQueryEnabled = useIsFeatureEnabled(
'IS_AGGREGATE_QUERY_ENABLED',
);
const { objectMetadataItem } = useRecordTableContextOrThrow();
const { recordGroupFilter } = useRecordGroupFilter(objectMetadataItem.fields);
const { currentViewWithSavedFiltersAndSorts } = useGetCurrentView();
const recordIndexViewFilterGroups = useRecoilValue(
recordIndexViewFilterGroupsState,
@ -56,7 +58,7 @@ export const useAggregateRecordsForRecordTableColumnFooter = (
const { data } = useAggregateRecords({
objectNameSingular: objectMetadataItem.nameSingular,
recordGqlFieldsAggregate,
filter: { ...requestFilters },
filter: { ...requestFilters, ...recordGroupFilter },
skip:
!isAggregateQueryEnabled || !isDefined(aggregateOperationForViewField),
});

24
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
View File

@ -1,8 +1,7 @@
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
import styled from '@emotion/styled';
import { useCallback } from 'react';
import { RecordTableColumnHead } from './RecordTableColumnHead';
@ -21,23 +20,18 @@ const StyledDropdown = styled(Dropdown)`
export const RecordTableColumnHeadWithDropdown = ({
column,
}: RecordTableColumnHeadWithDropdownProps) => {
const setIsScrollEnabledForRecordTable = useSetRecoilComponentStateV2(
isScrollEnabledForRecordTableState,
);
const { toggleScrollXWrapper, toggleScrollYWrapper } =
useToggleScrollWrapper();
const handleDropdownOpen = useCallback(() => {
setIsScrollEnabledForRecordTable({
enableXScroll: false,
enableYScroll: false,
});
}, [setIsScrollEnabledForRecordTable]);
toggleScrollXWrapper(false);
toggleScrollYWrapper(false);
}, [toggleScrollXWrapper, toggleScrollYWrapper]);
const handleDropdownClose = useCallback(() => {
setIsScrollEnabledForRecordTable({
enableXScroll: true,
enableYScroll: true,
});
}, [setIsScrollEnabledForRecordTable]);
toggleScrollXWrapper(true);
toggleScrollYWrapper(true);
}, [toggleScrollXWrapper, toggleScrollYWrapper]);
return (
<StyledDropdown

17
packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
View File

@ -1,17 +0,0 @@
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export type ScrollEnabled = {
enableXScroll: boolean;
enableYScroll: boolean;
};
export const isScrollEnabledForRecordTableState =
createComponentStateV2<ScrollEnabled>({
key: 'isScrollEnabledForRecordTableState',
defaultValue: {
enableXScroll: true,
enableYScroll: true,
},
componentInstanceContext: RecordTableComponentInstanceContext,
});

2
packages/twenty-front/src/modules/object-record/record-table/types/ColumnDefinition.ts
View File

@ -1,6 +1,5 @@
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
export type ColumnDefinition<T extends FieldMetadata> = FieldDefinition<T> & {
size: number;
@ -10,5 +9,4 @@ export type ColumnDefinition<T extends FieldMetadata> = FieldDefinition<T> & {
viewFieldId?: string;
isFilterable?: boolean;
isSortable?: boolean;
aggregateOperation?: AGGREGATE_OPERATIONS | null;
};

5
packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx
View File

@ -30,7 +30,10 @@ export const SettingsPageContainer = ({
}: {
children: ReactNode;
}) => (
<ScrollWrapper contextProviderName="settingsPageContainer">
<ScrollWrapper
contextProviderName="settingsPageContainer"
componentInstanceId={'scroll-wrapper-settings-page-container'}
>
<StyledSettingsPageContainer>{children}</StyledSettingsPageContainer>
</ScrollWrapper>
);

13
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
View File

@ -1,5 +1,6 @@
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import styled from '@emotion/styled';
import { useId } from 'react';
const StyledDropdownMenuItemsExternalContainer = styled.div<{
hasMaxHeight?: boolean;
@ -44,13 +45,18 @@ export const DropdownMenuItemsContainer = ({
className?: string;
withoutScrollWrapper?: boolean;
}) => {
const id = useId();
return withoutScrollWrapper === true ? (
<StyledDropdownMenuItemsExternalContainer
hasMaxHeight={hasMaxHeight}
className={className}
>
{hasMaxHeight ? (
<StyledScrollWrapper contextProviderName="dropdownMenuItemsContainer">
<StyledScrollWrapper
contextProviderName="dropdownMenuItemsContainer"
componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
>
<StyledDropdownMenuItemsInternalContainer>
{children}
</StyledDropdownMenuItemsInternalContainer>
@ -62,7 +68,10 @@ export const DropdownMenuItemsContainer = ({
)}
</StyledDropdownMenuItemsExternalContainer>
) : (
<ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
<ScrollWrapper
contextProviderName="dropdownMenuItemsContainer"
componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
>
<StyledDropdownMenuItemsExternalContainer
hasMaxHeight={hasMaxHeight}
className={className}

5
packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx
View File

@ -31,7 +31,10 @@ export const ShowPageContainer = ({ children }: ShowPageContainerProps) => {
const isMobile = useIsMobile();
return isMobile ? (
<StyledOuterContainer>
<StyledScrollWrapper contextProviderName="showPageContainer">
<StyledScrollWrapper
contextProviderName="showPageContainer"
componentInstanceId={'scroll-wrapper-show-page-container'}
>
<StyledInnerContainer>{children}</StyledInnerContainer>
</StyledScrollWrapper>
</StyledOuterContainer>

5
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx
View File

@ -23,7 +23,10 @@ export const ShowPageActivityContainer = ({
);
return !isNewViewableRecordLoading ? (
<ScrollWrapper contextProviderName="showPageActivityContainer">
<ScrollWrapper
contextProviderName="showPageActivityContainer"
componentInstanceId={`scroll-wrapper-tab-list-${targetableObject.id}`}
>
<StyledShowPageActivityContainer>
<RichTextEditor
activityId={targetableObject.id}

5
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
View File

@ -46,7 +46,10 @@ export const ShowPageLeftContainer = ({
{children}
</StyledInnerContainer>
) : (
<ScrollWrapper contextProviderName="showPageLeftContainer">
<ScrollWrapper
contextProviderName="showPageLeftContainer"
componentInstanceId={`scroll-wrapper-show-page-left-container`}
>
<StyledIntermediateContainer>
<StyledInnerContainer isMobile={isMobile}>
{children}

49
packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
View File

@ -7,8 +7,9 @@ import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab/components/TabListFromUrlOptionalEffect';
import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
import { Tab } from './Tab';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useEffect } from 'react';
import { Tab } from './Tab';
export type SingleTabProps = {
title: string;
@ -70,26 +71,32 @@ export const TabList = ({
componentInstanceId={tabListInstanceId}
tabListIds={tabs.map((tab) => tab.id)}
/>
<StyledTabsContainer>
{visibleTabs.map((tab) => (
<Tab
id={tab.id}
key={tab.id}
title={tab.title}
Icon={tab.Icon}
logo={tab.logo}
active={tab.id === activeTabId}
disabled={tab.disabled ?? loading}
pill={tab.pill}
to={behaveAsLinks ? `#${tab.id}` : undefined}
onClick={() => {
if (!behaveAsLinks) {
setActiveTabId(tab.id);
}
}}
/>
))}
</StyledTabsContainer>
<ScrollWrapper
defaultEnableYScroll={false}
contextProviderName="tabList"
componentInstanceId={`scroll-wrapper-tab-list-${tabListInstanceId}`}
>
<StyledTabsContainer>
{visibleTabs.map((tab) => (
<Tab
id={tab.id}
key={tab.id}
title={tab.title}
Icon={tab.Icon}
logo={tab.logo}
active={tab.id === activeTabId}
disabled={tab.disabled ?? loading}
pill={tab.pill}
to={behaveAsLinks ? `#${tab.id}` : undefined}
onClick={() => {
if (!behaveAsLinks) {
setActiveTabId(tab.id);
}
}}
/>
))}
</StyledTabsContainer>
</ScrollWrapper>
</TabListScope>
</StyledContainer>
);

69
packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
View File

@ -2,15 +2,17 @@ import styled from '@emotion/styled';
import { OverlayScrollbars } from 'overlayscrollbars';
import { useOverlayScrollbars } from 'overlayscrollbars-react';
import { useEffect, useRef } from 'react';
import { useSetRecoilState } from 'recoil';
import {
ContextProviderName,
getContextByProviderName,
} from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
import { useScrollStates } from '@/ui/utilities/scroll/hooks/internal/useScrollStates';
import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScrollbarsState';
import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState';
import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import 'overlayscrollbars/overlayscrollbars.css';
const StyledScrollWrapper = styled.div<{ scrollHide?: boolean }>`
@ -31,41 +33,52 @@ const StyledInnerContainer = styled.div`
export type ScrollWrapperProps = {
children: React.ReactNode;
className?: string;
enableXScroll?: boolean;
enableYScroll?: boolean;
defaultEnableXScroll?: boolean;
defaultEnableYScroll?: boolean;
contextProviderName: ContextProviderName;
scrollHide?: boolean;
componentInstanceId: string;
};
export const ScrollWrapper = ({
componentInstanceId,
children,
className,
enableXScroll = true,
enableYScroll = true,
defaultEnableXScroll = true,
defaultEnableYScroll = true,
contextProviderName,
scrollHide = false,
}: ScrollWrapperProps) => {
const scrollableRef = useRef<HTMLDivElement>(null);
const Context = getContextByProviderName(contextProviderName);
const { scrollTopComponentState, scrollLeftComponentState } =
useScrollStates(contextProviderName);
const setScrollTop = useSetRecoilState(scrollTopComponentState);
const setScrollLeft = useSetRecoilState(scrollLeftComponentState);
const setScrollTop = useSetRecoilComponentStateV2(
scrollWrapperScrollTopComponentState,
componentInstanceId,
);
const setScrollLeft = useSetRecoilComponentStateV2(
scrollWrapperScrollLeftComponentState,
componentInstanceId,
);
const handleScroll = (overlayScroll: OverlayScrollbars) => {
const target = overlayScroll.elements().scrollOffsetElement;
setScrollTop(target.scrollTop);
setScrollLeft(target.scrollLeft);
};
const setOverlayScrollbars = useSetRecoilState(overlayScrollbarsState);
const setOverlayScrollbars = useSetRecoilComponentStateV2(
scrollWrapperInstanceComponentState,
componentInstanceId,
);
const [initialize, instance] = useOverlayScrollbars({
options: {
scrollbars: { autoHide: 'scroll' },
overflow: {
x: enableXScroll ? undefined : 'hidden',
y: enableYScroll ? undefined : 'hidden',
x: defaultEnableXScroll ? undefined : 'hidden',
y: defaultEnableYScroll ? undefined : 'hidden',
},
},
events: {
@ -84,19 +97,23 @@ export const ScrollWrapper = ({
}, [instance, setOverlayScrollbars]);
return (
<Context.Provider
value={{
ref: scrollableRef,
id: contextProviderName,
}}
<ScrollWrapperComponentInstanceContext.Provider
value={{ instanceId: componentInstanceId }}
>
<StyledScrollWrapper
ref={scrollableRef}
className={className}
scrollHide={scrollHide}
<Context.Provider
value={{
ref: scrollableRef,
id: contextProviderName,
}}
>
<StyledInnerContainer>{children}</StyledInnerContainer>
</StyledScrollWrapper>
</Context.Provider>
<StyledScrollWrapper
ref={scrollableRef}
className={className}
scrollHide={scrollHide}
>
<StyledInnerContainer>{children}</StyledInnerContainer>
</StyledScrollWrapper>
</Context.Provider>
</ScrollWrapperComponentInstanceContext.Provider>
);
};

32
packages/twenty-front/src/modules/ui/utilities/scroll/hooks/internal/useScrollStates.ts
View File

@ -1,32 +0,0 @@
import {
ContextProviderName,
getContextByProviderName,
} from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
import { scrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollLeftComponentState';
import { scrollTopComponentState } from '@/ui/utilities/scroll/states/scrollTopComponentState';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
import { useContext } from 'react';
export const useScrollStates = (contextProviderName: ContextProviderName) => {
const Context = getContextByProviderName(contextProviderName);
const context = useContext(Context);
if (!context) {
throw new Error('Context not found');
}
const { id: scopeId } = context;
return {
scrollLeftComponentState: extractComponentState(
scrollLeftComponentState,
scopeId,
),
scrollTopComponentState: extractComponentState(
scrollTopComponentState,
scopeId,
),
};
};

10
packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollLeftValue.ts
View File

@ -1,10 +0,0 @@
import { ContextProviderName } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
import { useScrollStates } from '@/ui/utilities/scroll/hooks/internal/useScrollStates';
import { useRecoilValue } from 'recoil';
export const useScrollLeftValue = (
contextProviderName: ContextProviderName,
) => {
const { scrollLeftComponentState } = useScrollStates(contextProviderName);
return useRecoilValue(scrollLeftComponentState);
};

8
packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollTopValue.ts
View File

@ -1,8 +0,0 @@
import { ContextProviderName } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
import { useScrollStates } from '@/ui/utilities/scroll/hooks/internal/useScrollStates';
import { useRecoilValue } from 'recoil';
export const useScrollTopValue = (contextProviderName: ContextProviderName) => {
const { scrollTopComponentState } = useScrollStates(contextProviderName);
return useRecoilValue(scrollTopComponentState);
};

34
packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useToggleScrollWrapper.ts Normal file
View File

@ -0,0 +1,34 @@
import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
export const useToggleScrollWrapper = () => {
const instanceOverlay = useRecoilComponentValueV2(
scrollWrapperInstanceComponentState,
);
const toggleScrollXWrapper = (isEnabled: boolean) => {
if (!instanceOverlay) {
return;
}
instanceOverlay.options({
overflow: {
x: isEnabled ? 'scroll' : 'hidden',
},
});
};
const toggleScrollYWrapper = (isEnabled: boolean) => {
if (!instanceOverlay) {
return;
}
instanceOverlay.options({
overflow: {
y: isEnabled ? 'scroll' : 'hidden',
},
});
};
return { toggleScrollXWrapper, toggleScrollYWrapper };
};

4
packages/twenty-front/src/modules/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext.ts Normal file
View File

@ -0,0 +1,4 @@
import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
export const ScrollWrapperComponentInstanceContext =
createComponentInstanceContext();

7
packages/twenty-front/src/modules/ui/utilities/scroll/states/overlayScrollbarsState.ts
View File

@ -1,7 +0,0 @@
import { OverlayScrollbars } from 'overlayscrollbars';
import { createState } from 'twenty-ui';
export const overlayScrollbarsState = createState<OverlayScrollbars | null>({
key: 'scroll/overlayScrollbarsState',
defaultValue: null,
});

6
packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftComponentState.ts
View File

@ -1,6 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const scrollLeftComponentState = createComponentState<number>({
key: 'scroll/scrollLeftComponentState',
defaultValue: 0,
});

6
packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollPositionState.ts
View File

@ -1,6 +0,0 @@
import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
export const scrollPositionState = createFamilyState({
key: 'scroll/scrollPositionState',
defaultValue: 0,
});

6
packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopComponentState.ts
View File

@ -1,6 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const scrollTopComponentState = createComponentState<number>({
key: 'scroll/scrollTopComponentState',
defaultValue: 0,
});

10
packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollWrapperInstanceComponentState.ts Normal file
View File

@ -0,0 +1,10 @@
import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
import { OverlayScrollbars } from 'overlayscrollbars';
export const scrollWrapperInstanceComponentState =
createComponentStateV2<OverlayScrollbars | null>({
key: 'scrollWrapperInstanceComponentState',
defaultValue: null,
componentInstanceContext: ScrollWrapperComponentInstanceContext,
});

9
packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState.ts Normal file
View File

@ -0,0 +1,9 @@
import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const scrollWrapperScrollLeftComponentState =
createComponentStateV2<number>({
key: 'scrollWrapperScrollLeftComponentState',
defaultValue: 0,
componentInstanceContext: ScrollWrapperComponentInstanceContext,
});

9
packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState.ts Normal file
View File

@ -0,0 +1,9 @@
import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const scrollWrapperScrollTopComponentState =
createComponentStateV2<number>({
key: 'scrollWrapperScrollTopComponentState',
defaultValue: 0,
componentInstanceContext: ScrollWrapperComponentInstanceContext,
});

1
packages/twenty-front/src/modules/views/utils/mapColumnDefinitionToViewField.ts
View File

@ -14,6 +14,5 @@ export const mapColumnDefinitionsToViewFields = (
size: columnDefinition.size,
isVisible: columnDefinition.isVisible ?? true,
definition: columnDefinition,
aggregateOperation: columnDefinition.aggregateOperation,
}));
};

1
packages/twenty-front/src/modules/views/utils/mapViewFieldsToColumnDefinitions.ts
View File

@ -47,7 +47,6 @@ export const mapViewFieldsToColumnDefinitions = ({
isLabelIdentifier,
isVisible: isLabelIdentifier || viewField.isVisible,
viewFieldId: viewField.id,
aggregateOperation: viewField.aggregateOperation,
isSortable: correspondingColumnDefinition.isSortable,
isFilterable: correspondingColumnDefinition.isFilterable,
defaultValue: correspondingColumnDefinition.defaultValue,

5
packages/twenty-front/src/pages/settings/Releases.tsx
View File

@ -118,7 +118,10 @@ export const Releases = () => {
]}
>
<SettingsPageContainer>
<ScrollWrapper contextProviderName="releases">
<ScrollWrapper
contextProviderName="releases"
componentInstanceId="scroll-wrapper-releases"
>
<StyledReleaseContainer>
{releases.map((release) => (
<React.Fragment key={release.slug}>