twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-22 03:17:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Move scroll left dependency in body

Browse Source
This commit is contained in:
Thomas Trompette 2024-06-26 11:42:23 +02:00
parent 8e7f57139b
commit b56ca5d979
2 changed files with 13 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,13 +87,6 @@ const StyledTable = styled.table<{
left: 39px;
}
tbody td:nth-of-type(1),
tbody td:nth-of-type(2),
tbody td:nth-of-type(3) {
position: sticky;
z-index: ${({ isScrolledLeft }) => (isScrolledLeft ? 3 : 2)};
}
tbody td:nth-of-type(1) {
left: 0;
}
@ -149,7 +142,7 @@ export const RecordTable = ({
onColumnsChange,
createRecord,
}: RecordTableProps) => {
const { scopeId, visibleTableColumnsSelector, isScrolledLeftSelector } =
const { scopeId, visibleTableColumnsSelector } =
useRecordTableStates(recordTableId);
const { objectMetadataItem } = useObjectMetadataItem({
@ -211,8 +204,6 @@ export const RecordTable = ({
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
const isScrolledLeft = useRecoilValue(isScrolledLeftSelector());
return (
<RecordTableScope
recordTableScopeId={scopeId}
@ -232,10 +223,7 @@ export const RecordTable = ({
visibleTableColumns,
}}
>
<StyledTable
className="entity-table-cell"
isScrolledLeft={isScrolledLeft}
>
<StyledTable className="entity-table-cell">
<RecordTableHeader createRecord={createRecord} />
<RecordTableBodyEffect objectNameSingular={objectNameSingular} />
<RecordTableBody

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

@ -18,8 +18,14 @@ type DraggableTableBodyProps = {
recordTableId: string;
};
const StyledTbody = styled.tbody`
const StyledTbody = styled.tbody<{ isScrolledLeft?: boolean }>`
overflow: hidden;
td:nth-of-type(1),
td:nth-of-type(2),
td:nth-of-type(3) {
position: sticky;
z-index: ${({ isScrolledLeft }) => (isScrolledLeft ? 3 : 2)};
}
`;
export const DraggableTableBody = ({
@ -29,7 +35,7 @@ export const DraggableTableBody = ({
}: DraggableTableBodyProps) => {
const [v4Persistable] = useState(v4());
const { tableRowIdsState } = useRecordTableStates();
const { tableRowIdsState, isScrolledLeftSelector } = useRecordTableStates();
const tableRowIds = useRecoilValue(tableRowIdsState);
@ -67,12 +73,15 @@ export const DraggableTableBody = ({
});
};
const isScrolledLeft = useRecoilValue(isScrolledLeftSelector());
return (
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId={v4Persistable}>
{(provided) => (
<StyledTbody
ref={provided.innerRef}
isScrolledLeft={isScrolledLeft}
// eslint-disable-next-line react/jsx-props-no-spreading
{...provided.droppableProps}
>