58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root';
|
|
|
|
interface DropdownMenuModalProps {
|
|
/** The element initiating opening the modal. */
|
|
element?: HTMLElement;
|
|
content?: JSX.Element;
|
|
}
|
|
|
|
const DropdownMenuModal: React.FC<BaseModalProps & DropdownMenuModalProps> = ({ content, onClose }) => {
|
|
const handleClick: React.MouseEventHandler<HTMLElement> = (e) => {
|
|
onClose('DROPDOWN_MENU');
|
|
e.stopPropagation();
|
|
};
|
|
const [firstRender, setFirstRender] = React.useState(true);
|
|
|
|
const handleClickOutside: React.MouseEventHandler<HTMLElement> = (e) => {
|
|
if ((e.target as HTMLElement).id === 'dropdown-menu-modal') {
|
|
handleClick(e);
|
|
}
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
setFirstRender(false);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
id='dropdown-menu-modal'
|
|
className='absolute inset-0'
|
|
role='presentation'
|
|
onClick={handleClickOutside}
|
|
>
|
|
<div
|
|
className={clsx('pointer-events-auto fixed inset-x-0 z-[1001] mx-auto max-h-[calc(100dvh-1rem)] w-[calc(100vw-2rem)] max-w-lg overflow-auto rounded-t-xl bg-white py-1 shadow-lg duration-200 ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-all dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', {
|
|
'bottom-0 opacity-100': !firstRender,
|
|
'no-reduce-motion:-bottom-32 no-reduce-motion:opacity-0': firstRender,
|
|
})}
|
|
>
|
|
{content}
|
|
<div className='p-2 px-3'>
|
|
<button
|
|
className='flex w-full appearance-none place-content-center items-center rounded-full border border-gray-700 bg-transparent p-2 text-sm font-medium text-gray-700 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-gray-500 dark:text-gray-500'
|
|
onClick={handleClick}
|
|
>
|
|
<FormattedMessage id='lightbox.close' defaultMessage='Close' />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { DropdownMenuModal as default, type DropdownMenuModalProps };
|