mirror of
https://github.com/lingble/twenty.git
synced 2025-11-01 21:27:58 +00:00
Revert "fix: dropdowns should have a max-height & padding from screen" (#8165)
Reverts twentyhq/twenty#8055
This commit is contained in:
@@ -4,10 +4,9 @@ import {
|
|||||||
FloatingPortal,
|
FloatingPortal,
|
||||||
offset,
|
offset,
|
||||||
Placement,
|
Placement,
|
||||||
size,
|
|
||||||
useFloating,
|
useFloating,
|
||||||
} from '@floating-ui/react';
|
} from '@floating-ui/react';
|
||||||
import { MouseEvent, useEffect, useRef, useState } from 'react';
|
import { MouseEvent, useEffect, useRef } from 'react';
|
||||||
import { Keys } from 'react-hotkeys-hook';
|
import { Keys } from 'react-hotkeys-hook';
|
||||||
import { Key } from 'ts-key-enum';
|
import { Key } from 'ts-key-enum';
|
||||||
|
|
||||||
@@ -22,7 +21,6 @@ import { isDefined } from '~/utils/isDefined';
|
|||||||
import { useDropdown } from '../hooks/useDropdown';
|
import { useDropdown } from '../hooks/useDropdown';
|
||||||
import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';
|
import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';
|
||||||
|
|
||||||
import { flushSync } from 'react-dom';
|
|
||||||
import { DropdownMenu } from './DropdownMenu';
|
import { DropdownMenu } from './DropdownMenu';
|
||||||
import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';
|
import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';
|
||||||
|
|
||||||
@@ -65,9 +63,6 @@ export const Dropdown = ({
|
|||||||
onOpen,
|
onOpen,
|
||||||
}: DropdownProps) => {
|
}: DropdownProps) => {
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
const [maxHeight, setMaxHeight] = useState<string | number | undefined>(
|
|
||||||
undefined,
|
|
||||||
);
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
isDropdownOpen,
|
isDropdownOpen,
|
||||||
@@ -89,16 +84,7 @@ export const Dropdown = ({
|
|||||||
|
|
||||||
const { refs, floatingStyles, placement } = useFloating({
|
const { refs, floatingStyles, placement } = useFloating({
|
||||||
placement: dropdownPlacement,
|
placement: dropdownPlacement,
|
||||||
middleware: [
|
middleware: [flip(), ...offsetMiddlewares],
|
||||||
flip(),
|
|
||||||
size({
|
|
||||||
padding: 12 + 20, // 12px for padding bottom, 20px for dropdown bottom margin target
|
|
||||||
apply: ({ availableHeight }) => {
|
|
||||||
flushSync(() => setMaxHeight(availableHeight));
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
...offsetMiddlewares,
|
|
||||||
],
|
|
||||||
whileElementsMounted: autoUpdate,
|
whileElementsMounted: autoUpdate,
|
||||||
strategy: dropdownStrategy,
|
strategy: dropdownStrategy,
|
||||||
});
|
});
|
||||||
@@ -169,7 +155,7 @@ export const Dropdown = ({
|
|||||||
width={dropdownMenuWidth ?? dropdownWidth}
|
width={dropdownMenuWidth ?? dropdownWidth}
|
||||||
data-select-disable
|
data-select-disable
|
||||||
ref={refs.setFloating}
|
ref={refs.setFloating}
|
||||||
style={{ ...floatingStyles, maxHeight }}
|
style={floatingStyles}
|
||||||
>
|
>
|
||||||
{dropdownComponents}
|
{dropdownComponents}
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
@@ -181,7 +167,7 @@ export const Dropdown = ({
|
|||||||
width={dropdownMenuWidth ?? dropdownWidth}
|
width={dropdownMenuWidth ?? dropdownWidth}
|
||||||
data-select-disable
|
data-select-disable
|
||||||
ref={refs.setFloating}
|
ref={refs.setFloating}
|
||||||
style={{ ...floatingStyles, maxHeight }}
|
style={floatingStyles}
|
||||||
>
|
>
|
||||||
{dropdownComponents}
|
{dropdownComponents}
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|||||||
@@ -25,8 +25,6 @@ const StyledDropdownMenu = styled.div<{
|
|||||||
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
z-index: 30;
|
z-index: 30;
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
width: ${({ width = 160 }) =>
|
width: ${({ width = 160 }) =>
|
||||||
typeof width === 'number' ? `${width}px` : width};
|
typeof width === 'number' ? `${width}px` : width};
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user