fix issue yjose#36 popup arrowStyle css property "left" is been overr…

…idden - arrowStyle.top and arrowStyle.left css property will now be respected for setting the arrow style
yashhy · Sep 14, 2018 · 4c4af3c · 4c4af3c
1 parent b3187a0
commit 4c4af3c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/docs/src/markdown/componentApi.md b/docs/src/markdown/componentApi.md
@@ -29,8 +29,8 @@ The reactjs-popup API is inspired by semantic popup docs
 | onOpen               |                   | {func}         | function called on open event                                                                                                                                                                                                                                         |
 | onClose              |                   | {func}         | function called on close event                                                                                                                                                                                                                                        |
 | contentStyle         |                   | {object}       | Custom popup content style                                                                                                                                                                                                                                            |
-| overlayStyle         |                   | {object}       | Custom overlay style                                                                                                                                                                                                                                                  |
-| arrowStyle           |                   | {object}       | Custom arrow style                                                                                                                                                                                                                                                    |
+| overlayStyle         |                   | {object}       | Custom overlay style <br/> Note: `top` and `left` property will not be overridden.                                                                                                                                                                                                                                                 |
+| arrowStyle           |                   | {object}       | Custom arrow style  <br/> Note: `transform` property will not be overridden.                                                                                                                                                                                                                                                  |
 | keepTooltipInside    |                   | {bool,string}  | html selector, class name or id element that the tooltip must be inside (defaults to `window` if keepTooltipInside = true) default false                                                                                                                              |
 
 ### Example : on focus

diff --git a/src/Popup.js b/src/Popup.js
@@ -138,7 +138,7 @@ export default class Popup extends React.PureComponent {
   };
 
   setPosition = () => {
-    const { arrow, position, offsetX, offsetY, keepTooltipInside } = this.props;
+    const { arrow, position, offsetX, offsetY, keepTooltipInside, arrowStyle } = this.props;
     const { modal } = this.state;
     if (modal) return;
     const helper = this.HelperEl.getBoundingClientRect();
@@ -168,8 +168,8 @@ export default class Popup extends React.PureComponent {
       this.ArrowEl.style["transform"] = cords.transform;
       this.ArrowEl.style["-ms-transform"] = cords.transform;
       this.ArrowEl.style["-webkit-transform"] = cords.transform;
-      this.ArrowEl.style.top = cords.arrowTop;
-      this.ArrowEl.style.left = cords.arrowLeft;
+      this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop;
+      this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft;
     }
     if (
       window