feat(popover): prevent flip (#398)

* feat(popover): add preventFlip prop * feat(select): prevent options-list flip
core-ds · Dec 2, 2020 · c0c1723 · c0c1723
1 parent d13c1f8
commit c0c1723
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/popover/src/Component.tsx b/packages/popover/src/Component.tsx
@@ -34,6 +34,12 @@ export type PopoverProps = {
      */
     position?: Position;
 
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+
     /**
      * Если `true`, будет отрисована стрелочка
      */
@@ -89,6 +95,7 @@ export const Popover: React.FC<PopoverProps> = ({
     withArrow = false,
     withTransition = true,
     position = 'left',
+    preventFlip,
     popperClassName,
     arrowClassName,
     open,
@@ -105,8 +112,12 @@ export const Popover: React.FC<PopoverProps> = ({
             modifiers.push({ name: 'arrow', options: { element: arrowElement } });
         }
 
+        if (preventFlip) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
+        }
+
         return modifiers;
-    }, [withArrow, arrowElement, offset]);
+    }, [offset, withArrow, preventFlip, arrowElement]);
 
     const { styles: popperStyles, attributes, update } = usePopper(
         referenceElement,

diff --git a/packages/select/src/components/base-select/Component.tsx b/packages/select/src/components/base-select/Component.tsx
@@ -327,6 +327,7 @@ export const BaseSelect = forwardRef(
                             withTransition={false}
                             anchorElement={fieldRef.current as HTMLElement}
                             position='bottom-start'
+                            preventFlip={true}
                             getPortalContainer={getPortalContainer}
                             popperClassName={styles.popover}
                         >