Merge pull request #7608 from weseek/imprv/110142-121201-get-custom-modifiers

imprv: Create getCustomModifiers

apps/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 
-import { modifiersForRightAlign } from '@growi/ui/dist/utils';
+import { getCustomModifiers } from '@growi/ui/dist/utils';
 import { useTranslation } from 'next-i18next';
 import {
   Dropdown, DropdownMenu, DropdownToggle, DropdownItem,
@@ -250,7 +250,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
     <DropdownMenu
       data-testid="page-item-control-menu"
       right={alignRight}
-      modifiers={modifiersForRightAlign}
+      modifiers={getCustomModifiers(alignRight)}
       container="body"
       persist={!!alignRight}
       style={{ zIndex: 1055 }} /* make it larger than $zindex-modal of bootstrap */

packages/ui/src/interfaces/popper-data.ts

@@ -14,11 +14,11 @@ export interface PopperData {
   };
 }
 
-export interface Modifiers {
-  applyStyle: {
+export interface CustomModifiers {
+  applyStyle?: {
     enabled: boolean
   }
-  computeStyle: {
+  computeStyle?: {
     enabled: boolean,
     fn: (data: PopperData) => PopperData
   }

packages/ui/src/utils/reactstrap-modifiers.ts

@@ -1,8 +1,8 @@
-import { PopperData, Modifiers } from '~/interfaces/popper-data';
+import { PopperData, CustomModifiers } from '~/interfaces/popper-data';
 
 // Conditional modifiers
 // To prevent flickering. only happened when `right` is true and persist props should be enabled
-export const modifiersForRightAlign: Modifiers = {
+const modifiersForRightAlign: CustomModifiers = {
   applyStyle: {
     enabled: true,
   },
@@ -24,3 +24,11 @@ export const modifiersForRightAlign: Modifiers = {
   },
   preventOverflow: { boundariesElement: 'viewport' },
 };
+
+export const getCustomModifiers = (alignRight?: boolean): CustomModifiers => {
+  return (
+    alignRight
+      ? modifiersForRightAlign
+      : { preventOverflow: { boundariesElement: 'viewport' } }
+  );
+};