feat(Dropdown): add positionFixed property

8base · Aug 19, 2019 · 3878492 · 3878492
1 parent 5fe34cc
commit 3878492
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/src/components/Dropdown/DropdownBody.js b/src/components/Dropdown/DropdownBody.js
@@ -22,6 +22,8 @@ type DropdownBodyProps = {
   pin?: 'left' | 'right',
   /** Set body offset relative target */
   offset?: PropSizes,
+  /** Use fixed position instead of absolute */
+  positionFixed?: boolean,
   /** Manual set width */
   width?: number,
   /** Popper js option https://popper.js.org/popper-documentation.html#modifiers..preventOverflow */
@@ -83,6 +85,7 @@ const DropdownBody = dropdownBodyEnhancer(
     isOpen: false,
     forceRender: false,
     withPortal: false,
+    positionFixed: false,
     closeOnClickOutside: true,
   }
 
@@ -128,7 +131,7 @@ const DropdownBody = dropdownBodyEnhancer(
 
 
   render() {
-      const { withPortal, forceRender, dropdown: { isOpen }, ...rest } = this.props;
+      const { withPortal, forceRender, positionFixed, dropdown: { isOpen }, ...rest } = this.props;
 
       const popperPlacement = this.getPopperPlacement();
       const popperModifiers = this.getPopperModifiers();
@@ -142,6 +145,7 @@ const DropdownBody = dropdownBodyEnhancer(
             <Popper
               placement={ popperPlacement }
               modifiers={ popperModifiers }
+              positionFixed={ positionFixed }
             >
               { ({ ref, style, placement }) => (
                 <DropdownBodyTag

diff --git a/src/components/Dropdown/Dropdowon.test.js b/src/components/Dropdown/Dropdowon.test.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { Dropdown } from './';
+import { Popper } from 'react-popper';
 
 
 describe('<Dropdown />', () => {
@@ -19,7 +20,19 @@ describe('<Dropdown />', () => {
   });
 
 
-  it('should open and close dropdwon by changing the props', () => {
+  it('should pass props to Popper component', () => {
+    const wrapper = mount(
+      <Dropdown isOpen>
+        <Dropdown.Head><div /></Dropdown.Head>
+        <Dropdown.Body positionFixed><div /></Dropdown.Body>
+      </Dropdown>,
+    );
+
+    expect(wrapper.find(Popper).props().positionFixed).toBeTruthy();
+  });
+
+
+  it('should open and close dropdown by changing the props', () => {
     const wrapper = mount(
       <Dropdown isOpen={ false }>
         <Dropdown.Head>Head</Dropdown.Head>
@@ -85,7 +98,7 @@ describe('<Dropdown />', () => {
   });
 
 
-  it('shouldn\'t open and close dropdwon when disabled=true', () => {
+  it('shouldn\'t open and close dropdown when disabled=true', () => {
     const wrapper = mount(
       <Dropdown>
         <Dropdown.Head disabled>Head</Dropdown.Head>

diff --git a/src/components/Dropdown/__snapshots__/Dropdowon.test.js.snap b/src/components/Dropdown/__snapshots__/Dropdowon.test.js.snap
@@ -144,6 +144,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       padding="none"
                       pin="left"
                       placement="bottom"
+                      positionFixed={false}
                       preventDefault={false}
                       stopPropagation={false}
                       withPortal={false}