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

Fix csv import dropdown overlay (#9262)

Browse Source 
## Context
Fixing https://github.com/twentyhq/twenty/issues/9245 using the new
OverlayContainer component instead of custom styled component

## Test
<img width="352" alt="Screenshot 2024-12-27 at 16 52 55"
src="https://github.com/user-attachments/assets/27ebcdd1-8fe4-425b-995b-bc4e7220192c"
/>
This commit is contained in:
Weiko
2024-12-27 17:07:37 +01:00
committed by GitHub
parent 522b51581d
commit acc07f5bbd
1 changed files with 45 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
View File

@ -18,6 +18,7 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useUpdateEffect } from '~/hooks/useUpdateEffect';
@ -25,13 +26,6 @@ const StyledFloatingDropdown = styled.div`
z-index: ${({ theme }) => theme.lastLayerZIndex};
`;
const StyledDropdownMenu = styled(DropdownMenu)`
background-color: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) => theme.boxShadow.light};
`;
interface MatchColumnSelectProps {
onChange: (value: ReadonlyDeep<SelectOption> | null) => void;
value?: ReadonlyDeep<SelectOption>;
@ -128,48 +122,50 @@ export const MatchColumnSelect = ({
{isOpen &&
createPortal(
<StyledFloatingDropdown ref={refs.setFloating} style={floatingStyles}>
<StyledDropdownMenu
data-select-disable
ref={dropdownContainerRef}
// width={refs.domReference.current?.clientWidth}
>
<DropdownMenuSearchInput
value={searchFilter}
onChange={handleFilterChange}
autoFocus
/>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer hasMaxHeight>
{options?.map((option) => (
<React.Fragment key={option.label}>
<MenuItemSelect
selected={value?.label === option.label}
onClick={() => handleChange(option)}
disabled={
option.disabled && value?.value !== option.value
}
LeftIcon={option?.icon}
text={option.label}
/>
{option.disabled &&
value?.value !== option.value &&
createPortal(
<AppTooltip
key={option.value}
anchorSelect={`#${option.value}`}
content="You are already importing this column."
place="right"
offset={-20}
/>,
document.body,
)}
</React.Fragment>
))}
{options?.length === 0 && (
<MenuItem key="No result" text="No result" />
)}
</DropdownMenuItemsContainer>
</StyledDropdownMenu>
<OverlayContainer>
<DropdownMenu
data-select-disable
ref={dropdownContainerRef}
// width={refs.domReference.current?.clientWidth}
>
<DropdownMenuSearchInput
value={searchFilter}
onChange={handleFilterChange}
autoFocus
/>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer hasMaxHeight>
{options?.map((option) => (
<React.Fragment key={option.label}>
<MenuItemSelect
selected={value?.label === option.label}
onClick={() => handleChange(option)}
disabled={
option.disabled && value?.value !== option.value
}
LeftIcon={option?.icon}
text={option.label}
/>
{option.disabled &&
value?.value !== option.value &&
createPortal(
<AppTooltip
key={option.value}
anchorSelect={`#${option.value}`}
content="You are already importing this column."
place="right"
offset={-20}
/>,
document.body,
)}
</React.Fragment>
))}
{options?.length === 0 && (
<MenuItem key="No result" text="No result" />
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
</OverlayContainer>
</StyledFloatingDropdown>,
document.body,
)}