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

Implement <ScrollRestoration /> (#5086)

Browse Source 
### Description

Implement &lt;ScrollRestoration /&gt;

### Refs


[https://github.com/twentyhq/twenty/issues/4357](https://github.com/twentyhq/twenty/issues/4183)

### Demo


https://github.com/twentyhq/twenty/assets/140154534/321242e1-4751-4204-8c86-e9b921c1733e

Fixes #4357

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
This commit is contained in:
gitstart-app[bot]
2024-05-17 16:36:28 +02:00
committed by GitHub
parent 992602b307
commit 0e525caf01
8 changed files with 161 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,7 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useScrollRestoration } from '~/hooks/useScrollRestoration';
export type RecordBoardProps = {
recordBoardId: string;
@ -42,6 +43,11 @@ const StyledBoardHeader = styled.div`
z-index: 1;
`;
const RecordBoardScrollRestoreEffect = () => {
useScrollRestoration();
return null;
};
export const RecordBoard = ({ recordBoardId }: RecordBoardProps) => {
const { updateOneRecord, selectFieldMetadataItem } =
useContext(RecordBoardContext);
@ -152,6 +158,7 @@ export const RecordBoard = ({ recordBoardId }: RecordBoardProps) => {
))}
</DragDropContext>
</StyledContainer>
<RecordBoardScrollRestoreEffect />
</ScrollWrapper>
<DragSelect
dragSelectable={boardRef}

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

@ -4,6 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
import { useScrollRestoration } from '~/hooks/useScrollRestoration';
type RecordTableBodyEffectProps = {
objectNameSingular: string;
@ -31,6 +32,11 @@ export const RecordTableBodyEffect = ({
isFetchingMoreRecordsFamilyState(queryStateIdentifier),
);
const rowHeight = 32;
const viewportHeight = records.length * rowHeight;
useScrollRestoration(viewportHeight);
useEffect(() => {
if (!loading) {
setRecordTableData(records, totalCount);