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

5421 box shadow on frozen header and first column (#6130)

Browse Source 
- Refactored components in table
- Added a isTableRecordScrolledLeftState and
isTableRecordScrolledTopState to subscribe to table scroll
- Added a zIndex logic that subscribes to those new states in new tinier
components

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2024-07-05 18:30:59 +02:00
committed by GitHub
parent cc6ce142ce
commit 7b3a590f79
68 changed files with 1531 additions and 1130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableTableBody.tsx
View File

@ -1,87 +0,0 @@
import { useState } from 'react';
import styled from '@emotion/styled';
import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { v4 } from 'uuid';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { RecordTablePendingRow } from '@/object-record/record-table/components/RecordTablePendingRow';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useComputeNewRowPosition } from '@/object-record/record-table/hooks/useComputeNewRowPosition';
import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState';
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { isDefined } from '~/utils/isDefined';
type DraggableTableBodyProps = {
draggableItems: React.ReactNode;
objectNameSingular: string;
recordTableId: string;
};
const StyledTbody = styled.tbody`
overflow: hidden;
`;
export const DraggableTableBody = ({
objectNameSingular,
draggableItems,
recordTableId,
}: DraggableTableBodyProps) => {
const [v4Persistable] = useState(v4());
const { tableRowIdsState } = useRecordTableStates();
const tableRowIds = useRecoilValue(tableRowIdsState);
const { updateOneRecord: updateOneRow } = useUpdateOneRecord({
objectNameSingular,
});
const { currentViewWithCombinedFiltersAndSorts } =
useGetCurrentView(recordTableId);
const viewSorts = currentViewWithCombinedFiltersAndSorts?.viewSorts || [];
const setIsRemoveSortingModalOpenState = useSetRecoilState(
isRemoveSortingModalOpenState,
);
const computeNewRowPosition = useComputeNewRowPosition();
const handleDragEnd = (result: DropResult) => {
if (viewSorts.length > 0) {
setIsRemoveSortingModalOpenState(true);
return;
}
const computeResult = computeNewRowPosition(result, tableRowIds);
if (!isDefined(computeResult)) {
return;
}
updateOneRow({
idToUpdate: computeResult.draggedRecordId,
updateOneRecordInput: {
position: computeResult.newPosition,
},
});
};
return (
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId={v4Persistable}>
{(provided) => (
<StyledTbody
ref={provided.innerRef}
// eslint-disable-next-line react/jsx-props-no-spreading
{...provided.droppableProps}
>
<RecordTablePendingRow />
{draggableItems}
{provided.placeholder}
</StyledTbody>
)}
</Droppable>
</DragDropContext>
);
};

27
packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
View File

@ -1,12 +1,13 @@
import { useRef } from 'react';
import { Keys } from 'react-hotkeys-hook';
import {
autoUpdate,
flip,
FloatingPortal,
offset,
Placement,
useFloating,
} from '@floating-ui/react';
import { useRef } from 'react';
import { Keys } from 'react-hotkeys-hook';
import { Key } from 'ts-key-enum';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
@ -85,7 +86,7 @@ export const Dropdown = ({
};
useListenClickOutside({
refs: [containerRef],
refs: [refs.floating],
callback: () => {
onClickOutside?.();
@ -131,15 +132,17 @@ export const Dropdown = ({
/>
)}
{isDropdownOpen && (
<DropdownMenu
disableBlur={disableBlur}
width={dropdownMenuWidth ?? dropdownWidth}
data-select-disable
ref={refs.setFloating}
style={floatingStyles}
>
{dropdownComponents}
</DropdownMenu>
<FloatingPortal>
<DropdownMenu
disableBlur={disableBlur}
width={dropdownMenuWidth ?? dropdownWidth}
data-select-disable
ref={refs.setFloating}
style={floatingStyles}
>
{dropdownComponents}
</DropdownMenu>
</FloatingPortal>
)}
<DropdownOnToggleEffect
onDropdownClose={onClose}

4
packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx
View File

@ -1,10 +1,10 @@
import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
import { Chip, ChipVariant } from 'twenty-ui';
import { AnimatedContainer } from '@/object-record/record-table/components/AnimatedContainer';
import { ExpandedListDropdown } from '@/ui/layout/expandable-list/components/ExpandedListDropdown';
import { isFirstOverflowingChildElement } from '@/ui/layout/expandable-list/utils/isFirstOverflowingChildElement';
import { AnimatedContainer } from '@/ui/utilities/animation/components/AnimatedContainer';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { isDefined } from '~/utils/isDefined';