fix: content getting hide on drag and drop in stage view cards (#7621)

## ISSUE - Closes #7388 ## Demo https://github.com/user-attachments/assets/193813aa-def9-406b-9fe7-397627bb1242 - [ ] Table Row Drag WIP --------- Co-authored-by: Lucas Bordeau <[email protected]>
twentyhq · Nov 5, 2024 · 3793f6c · 3793f6c
1 parent 84b0b78
commit 3793f6c
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 144 deletions.
diff --git a/...t/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/...t/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
@@ -23,14 +23,13 @@ import { RecordBoardScrollWrapperContext } from '@/ui/utilities/scroll/contexts/
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import styled from '@emotion/styled';
 import { ReactNode, useContext, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
+import { InView, useInView } from 'react-intersection-observer';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import {
   AnimatedEaseInOut,
   AvatarChipVariant,
   Checkbox,
   CheckboxVariant,
-  ChipSize,
   IconEye,
   IconEyeOff,
   LightIconButton,
@@ -147,10 +146,6 @@ const StyledCompactIconContainer = styled.div`
   margin-left: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledRecordInlineCellPlaceholder = styled.div`
-  height: 24px;
-`;
-
 export const RecordBoardCard = ({
   isCreating = false,
   onCreateSuccess,
@@ -240,7 +235,7 @@ export const RecordBoardCard = ({
 
   const scrollWrapperRef = useContext(RecordBoardScrollWrapperContext);
 
-  const { ref: cardRef, inView } = useInView({
+  const { ref: cardRef } = useInView({
     root: scrollWrapperRef?.ref.current,
     rootMargin: '1000px',
   });
@@ -256,126 +251,123 @@ export const RecordBoardCard = ({
   return (
     <StyledBoardCardWrapper onContextMenu={handleActionMenuDropdown}>
       {!isCreating && <RecordValueSetterEffect recordId={recordId} />}
-      <StyledBoardCard
-        ref={cardRef}
-        selected={isCurrentCardSelected}
-        onMouseLeave={onMouseLeaveBoard}
-        onClick={() => {
-          if (!isCreating) {
-            setIsCurrentCardSelected(!isCurrentCardSelected);
-          }
-        }}
-      >
-        <StyledBoardCardHeader showCompactView={isCompactModeActive}>
-          {isCreating && position !== undefined ? (
-            <RecordInlineCellEditMode>
-              <StyledTextInput
-                autoFocus
-                value={newLabelValue}
-                onInputEnter={() =>
-                  handleInputEnter(
-                    labelIdentifierField?.label ?? '',
-                    newLabelValue,
-                    position,
-                    onCreateSuccess,
-                  )
-                }
-                onBlur={() =>
-                  handleBlur(
-                    labelIdentifierField?.label ?? '',
-                    newLabelValue,
-                    position,
-                    onCreateSuccess,
-                  )
-                }
-                onChange={(text: string) => setNewLabelValue(text)}
-                placeholder={labelIdentifierField?.label}
-              />
-            </RecordInlineCellEditMode>
-          ) : (
-            <RecordIdentifierChip
-              objectNameSingular={objectMetadataItem.nameSingular}
-              record={record as ObjectRecord}
-              variant={AvatarChipVariant.Transparent}
-              size={ChipSize.Large}
-            />
-          )}
-
-          {!isCreating && (
-            <>
-              {isCompactModeActive && (
-                <StyledCompactIconContainer className="compact-icon-container">
-                  <LightIconButton
-                    Icon={isCardExpanded ? IconEyeOff : IconEye}
-                    accent="tertiary"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setIsCardExpanded((prev) => !prev);
-                    }}
-                  />
-                </StyledCompactIconContainer>
-              )}
-
-              <StyledCheckboxContainer className="checkbox-container">
-                <Checkbox
-                  hoverable
-                  checked={isCurrentCardSelected}
-                  onChange={() =>
-                    setIsCurrentCardSelected(!isCurrentCardSelected)
+      <InView>
+        <StyledBoardCard
+          ref={cardRef}
+          selected={isCurrentCardSelected}
+          onMouseLeave={onMouseLeaveBoard}
+          onClick={() => {
+            if (!isCreating) {
+              setIsCurrentCardSelected(!isCurrentCardSelected);
+            }
+          }}
+        >
+          <StyledBoardCardHeader showCompactView={isCompactModeActive}>
+            {isCreating && position !== undefined ? (
+              <RecordInlineCellEditMode>
+                <StyledTextInput
+                  autoFocus
+                  value={newLabelValue}
+                  onInputEnter={() =>
+                    handleInputEnter(
+                      labelIdentifierField?.label ?? '',
+                      newLabelValue,
+                      position,
+                      onCreateSuccess,
+                    )
+                  }
+                  onBlur={() =>
+                    handleBlur(
+                      labelIdentifierField?.label ?? '',
+                      newLabelValue,
+                      position,
+                      onCreateSuccess,
+                    )
                   }
-                  variant={CheckboxVariant.Secondary}
+                  onChange={(text: string) => setNewLabelValue(text)}
+                  placeholder={labelIdentifierField?.label}
                 />
-              </StyledCheckboxContainer>
-            </>
-          )}
-        </StyledBoardCardHeader>
-
-        <AnimatedEaseInOut
-          isOpen={isCardExpanded || !isCompactModeActive}
-          initial={false}
-        >
-          <StyledBoardCardBody>
-            {visibleFieldDefinitionsFiltered.map((fieldDefinition) => (
-              <PreventSelectOnClickContainer
-                key={fieldDefinition.fieldMetadataId}
-              >
-                <FieldContext.Provider
-                  value={{
-                    recordId: isCreating ? '' : recordId,
-                    maxWidth: 156,
-                    recoilScopeId:
-                      (isCreating ? 'new' : recordId) +
-                      fieldDefinition.fieldMetadataId,
-                    isLabelIdentifier: false,
-                    fieldDefinition: {
-                      disableTooltip: false,
-                      fieldMetadataId: fieldDefinition.fieldMetadataId,
-                      label: fieldDefinition.label,
-                      iconName: fieldDefinition.iconName,
-                      type: fieldDefinition.type,
-                      metadata: fieldDefinition.metadata,
-                      defaultValue: fieldDefinition.defaultValue,
-                      editButtonIcon: getFieldButtonIcon({
-                        metadata: fieldDefinition.metadata,
-                        type: fieldDefinition.type,
-                      }),
-                      settings: fieldDefinition.settings,
-                    },
-                    useUpdateRecord: useUpdateOneRecordHook,
-                    hotkeyScope: InlineCellHotkeyScope.InlineCell,
-                  }}
+              </RecordInlineCellEditMode>
+            ) : (
+              <RecordIdentifierChip
+                objectNameSingular={objectMetadataItem.nameSingular}
+                record={record as ObjectRecord}
+                variant={AvatarChipVariant.Transparent}
+              />
+            )}
+
+            {!isCreating && (
+              <>
+                {isCompactModeActive && (
+                  <StyledCompactIconContainer className="compact-icon-container">
+                    <LightIconButton
+                      Icon={isCardExpanded ? IconEyeOff : IconEye}
+                      accent="tertiary"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setIsCardExpanded((prev) => !prev);
+                      }}
+                    />
+                  </StyledCompactIconContainer>
+                )}
+
+                <StyledCheckboxContainer className="checkbox-container">
+                  <Checkbox
+                    hoverable
+                    checked={isCurrentCardSelected}
+                    onChange={() =>
+                      setIsCurrentCardSelected(!isCurrentCardSelected)
+                    }
+                    variant={CheckboxVariant.Secondary}
+                  />
+                </StyledCheckboxContainer>
+              </>
+            )}
+          </StyledBoardCardHeader>
+
+          <AnimatedEaseInOut
+            isOpen={isCardExpanded || !isCompactModeActive}
+            initial={false}
+          >
+            <StyledBoardCardBody>
+              {visibleFieldDefinitionsFiltered.map((fieldDefinition) => (
+                <PreventSelectOnClickContainer
+                  key={fieldDefinition.fieldMetadataId}
                 >
-                  {inView ? (
+                  <FieldContext.Provider
+                    value={{
+                      recordId: isCreating ? '' : recordId,
+                      maxWidth: 156,
+                      recoilScopeId:
+                        (isCreating ? 'new' : recordId) +
+                        fieldDefinition.fieldMetadataId,
+                      isLabelIdentifier: false,
+                      fieldDefinition: {
+                        disableTooltip: false,
+                        fieldMetadataId: fieldDefinition.fieldMetadataId,
+                        label: fieldDefinition.label,
+                        iconName: fieldDefinition.iconName,
+                        type: fieldDefinition.type,
+                        metadata: fieldDefinition.metadata,
+                        defaultValue: fieldDefinition.defaultValue,
+                        editButtonIcon: getFieldButtonIcon({
+                          metadata: fieldDefinition.metadata,
+                          type: fieldDefinition.type,
+                        }),
+                        settings: fieldDefinition.settings,
+                      },
+                      useUpdateRecord: useUpdateOneRecordHook,
+                      hotkeyScope: InlineCellHotkeyScope.InlineCell,
+                    }}
+                  >
                     <RecordInlineCell />
-                  ) : (
-                    <StyledRecordInlineCellPlaceholder />
-                  )}
-                </FieldContext.Provider>
-              </PreventSelectOnClickContainer>
-            ))}
-          </StyledBoardCardBody>
-        </AnimatedEaseInOut>
-      </StyledBoardCard>
+                  </FieldContext.Provider>
+                </PreventSelectOnClickContainer>
+              ))}
+            </StyledBoardCardBody>
+          </AnimatedEaseInOut>
+        </StyledBoardCard>
+      </InView>
     </StyledBoardCardWrapper>
   );
 };
diff --git a/...ges/twenty-front/src/modules/object-record/record-table/contexts/RecordTableRowContext.ts b/...ges/twenty-front/src/modules/object-record/record-table/contexts/RecordTableRowContext.ts
@@ -1,5 +1,5 @@
-import { createContext } from 'react';
 import { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
+import { createContext } from 'react';
 
 export type RecordTableRowContextProps = {
   pathToShowPage: string;

diff --git a/...dules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx b/...dules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
@@ -9,11 +9,10 @@ import { Checkbox } from 'twenty-ui';
 const StyledContainer = styled.div`
   align-items: center;
   cursor: pointer;
-
   display: flex;
   height: 32px;
-
   justify-content: center;
+  min-width: 24px;
 `;
 
 export const RecordTableCellCheckbox = () => {

diff --git a/...ont/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx b/...ont/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx
@@ -16,6 +16,7 @@ const StyledTd = styled.td<{
   left?: number;
   hasRightBorder?: boolean;
   hasBottomBorder?: boolean;
+  width?: number;
 }>`
   border-bottom: 1px solid
     ${({ borderColor, hasBottomBorder }) =>
@@ -32,13 +33,12 @@ const StyledTd = styled.td<{
 
   background: ${({ backgroundColor }) => backgroundColor};
   z-index: ${({ zIndex }) => (isDefined(zIndex) ? zIndex : 'auto')};
-
   ${({ isDragging }) =>
     isDragging
       ? `
       background-color: transparent;
       border-color: transparent;
-  `
+    `
       : ''}
 
   ${({ freezeFirstColumns }) =>
@@ -60,6 +60,7 @@ export const RecordTableTd = ({
   left,
   hasRightBorder = true,
   hasBottomBorder = true,
+  width,
   ...dragHandleProps
 }: {
   className?: string;
@@ -72,6 +73,7 @@ export const RecordTableTd = ({
   hasRightBorder?: boolean;
   hasBottomBorder?: boolean;
   left?: number;
+  width?: number;
 } & (Partial<DraggableProvidedDragHandleProps> | null)) => {
   const { theme } = useContext(ThemeContext);
 
@@ -94,6 +96,7 @@ export const RecordTableTd = ({
       left={left}
       hasRightBorder={hasRightBorder}
       hasBottomBorder={hasBottomBorder}
+      width={width}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...dragHandleProps}
     >

diff --git a/...dules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx b/...dules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx
@@ -175,6 +175,7 @@ export const RecordTableHeaderCell = ({
       resizedFieldKey,
       resizeFieldOffsetState,
       tableColumnsByKey,
+      setResizedFieldKey,
       tableColumns,
       handleColumnsChange,
     ],

diff --git a/.../modules/object-record/record-table/record-table-row/components/RecordTableCellsEmpty.tsx b/.../modules/object-record/record-table/record-table-row/components/RecordTableCellsEmpty.tsx
@@ -1,9 +1,8 @@
-import { useContext } from 'react';
-
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useContext } from 'react';
 
 export const RecordTableCellsEmpty = () => {
   const { isSelected } = useContext(RecordTableRowContext);