Disable popper

This commit is contained in:
Elio Struyf
2022-09-08 11:00:33 +02:00
parent 23c5a7bc18
commit bf98ff9a1d
6 changed files with 8 additions and 7 deletions

View File

@@ -37,7 +37,7 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({onCli
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button>
<MenuItems widthClass={`w-56`}>
<MenuItems widthClass={`w-56`} disablePopper>
<div className="py-1">
{choices.map((choice, idx) => (
<MenuItem

View File

@@ -29,7 +29,7 @@ export const Filter: React.FunctionComponent<IFilterProps> = ({label, activeItem
)}
title={activeItem || DEFAULT_VALUE} />
<MenuItems>
<MenuItems disablePopper>
<MenuItem
title={DEFAULT_VALUE}
value={null}

View File

@@ -22,7 +22,7 @@ export const Folders: React.FunctionComponent<IFoldersProps> = ({}: React.PropsW
<Menu as="div" className="relative z-10 inline-block text-left">
<MenuButton label={`Showing`} title={crntFolder || DEFAULT_TYPE} />
<MenuItems>
<MenuItems disablePopper>
<MenuItem
title={DEFAULT_TYPE}
value={null}

View File

@@ -23,7 +23,7 @@ export const Grouping: React.FunctionComponent<IGroupingProps> = ({}: React.Prop
<Menu as="div" className="relative z-10 inline-block text-left">
<MenuButton label={`Group by`} title={crntGroup?.name || ""} />
<MenuItems>
<MenuItems disablePopper>
{groupOptions.map((option) => (
<MenuItem
key={option.id}

View File

@@ -91,7 +91,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSo
<Menu as="div" className="relative z-10 inline-block text-left">
<MenuButton label={`Sort by`} title={crntSort?.title || crntSort?.name || ""} disabled={!!searchValue} />
<MenuItems widthClass="w-48">
<MenuItems widthClass="w-48" disablePopper>
{allOptions.map((option) => (
<MenuItem
key={option.id}

View File

@@ -6,9 +6,10 @@ export interface IMenuItemsProps {
widthClass?: string;
marginTopClass?: string;
updatePopper?: () => void;
disablePopper?: boolean
}
export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass, marginTopClass, children, updatePopper}: React.PropsWithChildren<IMenuItemsProps>) => {
export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass, marginTopClass, children, updatePopper, disablePopper}: React.PropsWithChildren<IMenuItemsProps>) => {
return (
<Transition
as={Fragment}
@@ -20,7 +21,7 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass,
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className={`${widthClass || ""} ${marginTopClass || "mt-2"} rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}>
<Menu.Items className={`${widthClass || ""} ${marginTopClass || "mt-2"} ${ disablePopper ? "origin-top-right absolute right-0 z-20" : ""} rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}>
<div className="py-1">
{children}
</div>