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