gitstart-twenty
0c79217ba0
* Add an ESLint rule to prevent the usage of useRef other than for HTML elements Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Bump eslint version and rewrite rule * Fix --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { HTMLAttributes, useRef } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
|
|
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
|
|
|
const StyledDropdownMenuContainer = styled.ul<{
|
|
anchor: 'left' | 'right';
|
|
}>`
|
|
padding: 0;
|
|
position: absolute;
|
|
${({ anchor }) => {
|
|
if (anchor === 'right') return 'right: 0';
|
|
}};
|
|
top: 14px;
|
|
`;
|
|
|
|
export type DropdownMenuContainerProps = {
|
|
anchor?: 'left' | 'right';
|
|
children: React.ReactNode;
|
|
onClose?: () => void;
|
|
width?: `${string}px` | 'auto' | number;
|
|
} & HTMLAttributes<HTMLUListElement>;
|
|
|
|
export const DropdownMenuContainer = ({
|
|
anchor = 'right',
|
|
children,
|
|
onClose,
|
|
width,
|
|
}: DropdownMenuContainerProps) => {
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
useListenClickOutside({
|
|
refs: [dropdownRef],
|
|
callback: () => {
|
|
onClose?.();
|
|
},
|
|
});
|
|
|
|
return (
|
|
<StyledDropdownMenuContainer data-select-disable anchor={anchor}>
|
|
<StyledDropdownMenu ref={dropdownRef} width={width}>
|
|
{children}
|
|
</StyledDropdownMenu>
|
|
</StyledDropdownMenuContainer>
|
|
);
|
|
};
|