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

Feat: The scrollbar should fade away when the scroll is finished or not started (#1269)

Browse Source 
* The scrollbar should fade away when the scroll is finished or not started

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>

* Complete scroll work

* Fix pr

* Fix pr

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-08-24 23:13:53 +00:00
committed by GitHub
parent 75207b093b
commit e373d17a2a
8 changed files with 87 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
front/src/modules/ui/table/components/EntityTable.tsx
View File

@ -8,6 +8,8 @@ import type {
import { SortType } from '@/ui/filter-n-sort/types/interface';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { StyledScrollWrapper } from '@/ui/utilities/scroll/components/StyledScrollWrapper';
import { useListenScroll } from '@/ui/utilities/scroll/hooks/useListenScroll';
import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
@ -87,11 +89,6 @@ const StyledTableContainer = styled.div`
overflow: auto;
`;
const StyledTableWrapper = styled.div`
flex: 1;
overflow: auto;
`;
type OwnProps<SortField> = {
viewName: string;
viewIcon?: React.ReactNode;
@ -128,6 +125,12 @@ export function EntityTable<SortField>({
},
});
const scrollableRef = useRef<HTMLDivElement>(null);
useListenScroll({
scrollableRef,
});
return (
<EntityUpdateMutationContext.Provider value={updateEntityMutation}>
<StyledTableWithHeader>
@ -140,12 +143,12 @@ export function EntityTable<SortField>({
onViewSubmit={onViewSubmit}
onImport={onImport}
/>
<StyledTableWrapper>
<StyledScrollWrapper ref={scrollableRef}>
<StyledTable>
<EntityTableHeader onColumnsChange={onColumnsChange} />
<EntityTableBody />
</StyledTable>
</StyledTableWrapper>
</StyledScrollWrapper>
<DragSelect
dragSelectable={tableBodyRef}
onDragSelectionStart={resetTableRowSelection}