Merge pull request #44 from yjose/v1.3.0

V1.3.0
yjose · Sep 29, 2018 · e7fbccf · e7fbccf
2 parents bc93b50 + 4e3c8ff
commit e7fbccf
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,8 @@
 - Modal, Tooltip, Menu : All in one 🏋️
 - Full style customization 👌
 - Easy to use. 🚀
-- IE Support.
+- IE Support.🚀
+- TypeScript Support 👌
 - All these clocks in at around 3 kB zipped. ⚡️
 
 Requires React >= 16.0

diff --git a/docs/src/markdown/componentApi.md b/docs/src/markdown/componentApi.md
@@ -31,7 +31,7 @@ The reactjs-popup API is inspired by semantic popup docs
 | contentStyle         |                   | {object}       | Custom popup content 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                                                                                                                              |
+| keepTooltipInside    |     true              | {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/docs/src/markdown/welcome.md b/docs/src/markdown/welcome.md
@@ -15,7 +15,8 @@ Reactjs-popup is a simple react popup component with a lot of benefits :
 - Modal, Tooltip, Menu : All in one 🏋️
 - Full style customization 👌
 - Easy to use. 🚀
-- IE Support.
+- IE Support. 🚀
+- TypeScript Support 👌
 - All these clocks in at around 3 kB zipped. ⚡️
 
 Requires React >= 16.0

diff --git a/lib/README.md b/lib/README.md
@@ -25,7 +25,8 @@
 - Modal, Tooltip, Menu : All in one 🏋️
 - Full style customization 👌
 - Easy to use. 🚀
-- IE Support.
+- IE Support.🚀
+- TypeScript Support 👌
 - All these clocks in at around 3 kB zipped. ⚡️
 
 Requires React >= 16.0

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -5,7 +5,7 @@ declare module 'reactjs-popup' {
   type Position = 'top left' | 'top right' | 'bottom right' | 'bottom left' | 'right center' | 'left center' | 'top center' | 'bottom center';
 
   interface Props {
-    trigger: JSX.Element | ((isOpen: boolean) => JSX.Element);
+    trigger?: JSX.Element | ((isOpen: boolean) => JSX.Element);
     open?: boolean;
     defaultOpen?: boolean;
     on?: EventType | EventType[];

diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactjs-popup",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "React Popup Component - Modals,Tooltips and Menus —  All in one",
   "main": "reactjs-popup.cjs.js",
   "module": "reactjs-popup.es.js",

diff --git a/lib/reactjs-popup.cjs.js b/lib/reactjs-popup.cjs.js
@@ -1,5 +1,5 @@
 /*!
- * reactjs-popup v1.2.0
+ * reactjs-popup v1.3.0
  * (c) 2018-present Youssouf EL AZIZI <[email protected]>
  * Released under the MIT License.
  */
@@ -384,7 +384,8 @@ function (_React$PureComponent) {
           position = _this$props.position,
           offsetX = _this$props.offsetX,
           offsetY = _this$props.offsetY,
-          keepTooltipInside = _this$props.keepTooltipInside;
+          keepTooltipInside = _this$props.keepTooltipInside,
+          arrowStyle = _this$props.arrowStyle;
       var modal = _this.state.modal;
       if (modal) return;
 
@@ -410,8 +411,8 @@ function (_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.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
@@ -455,6 +456,7 @@ function (_React$PureComponent) {
           case "hover":
             triggerProps.onMouseEnter = _this.onMouseEnter;
             triggerProps.onMouseLeave = _this.onMouseLeave;
+            break;
 
           case "focus":
             triggerProps.onFocus = _this.onMouseEnter;
@@ -535,7 +537,10 @@ function (_React$PureComponent) {
       var modal = this.state.modal;
       var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0);
       var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
-      return [this.state.isOpen && React.createElement("div", {
+      return [!!this.props.trigger && React.createElement(Ref, {
+        innerRef: this.setTriggerRef,
+        key: "R"
+      }, this.renderTrigger()), this.state.isOpen && React.createElement("div", {
         key: "H",
         style: {
           position: "absolute",
@@ -548,10 +553,7 @@ function (_React$PureComponent) {
         className: "popup-overlay",
         style: Object.assign({}, ovStyle, overlayStyle),
         onClick: closeOnDocumentClick ? this.closePopup : undefined
-      }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
-        innerRef: this.setTriggerRef,
-        key: "R"
-      }, this.renderTrigger())];
+      }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent()];
     }
   }]);
 

diff --git a/lib/reactjs-popup.es.js b/lib/reactjs-popup.es.js
@@ -1,5 +1,5 @@
 /*!
- * reactjs-popup v1.2.0
+ * reactjs-popup v1.3.0
  * (c) 2018-present Youssouf EL AZIZI <[email protected]>
  * Released under the MIT License.
  */
@@ -380,7 +380,8 @@ function (_React$PureComponent) {
           position = _this$props.position,
           offsetX = _this$props.offsetX,
           offsetY = _this$props.offsetY,
-          keepTooltipInside = _this$props.keepTooltipInside;
+          keepTooltipInside = _this$props.keepTooltipInside,
+          arrowStyle = _this$props.arrowStyle;
       var modal = _this.state.modal;
       if (modal) return;
 
@@ -406,8 +407,8 @@ function (_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.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
@@ -451,6 +452,7 @@ function (_React$PureComponent) {
           case "hover":
             triggerProps.onMouseEnter = _this.onMouseEnter;
             triggerProps.onMouseLeave = _this.onMouseLeave;
+            break;
 
           case "focus":
             triggerProps.onFocus = _this.onMouseEnter;
@@ -531,7 +533,10 @@ function (_React$PureComponent) {
       var modal = this.state.modal;
       var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0);
       var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
-      return [this.state.isOpen && React.createElement("div", {
+      return [!!this.props.trigger && React.createElement(Ref, {
+        innerRef: this.setTriggerRef,
+        key: "R"
+      }, this.renderTrigger()), this.state.isOpen && React.createElement("div", {
         key: "H",
         style: {
           position: "absolute",
@@ -544,10 +549,7 @@ function (_React$PureComponent) {
         className: "popup-overlay",
         style: Object.assign({}, ovStyle, overlayStyle),
         onClick: closeOnDocumentClick ? this.closePopup : undefined
-      }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
-        innerRef: this.setTriggerRef,
-        key: "R"
-      }, this.renderTrigger())];
+      }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent()];
     }
   }]);
 

diff --git a/lib/reactjs-popup.js b/lib/reactjs-popup.js
@@ -1,5 +1,5 @@
 /*!
- * reactjs-popup v1.2.0
+ * reactjs-popup v1.3.0
  * (c) 2018-present Youssouf EL AZIZI <[email protected]>
  * Released under the MIT License.
  */
@@ -385,7 +385,8 @@
             position = _this$props.position,
             offsetX = _this$props.offsetX,
             offsetY = _this$props.offsetY,
-            keepTooltipInside = _this$props.keepTooltipInside;
+            keepTooltipInside = _this$props.keepTooltipInside,
+            arrowStyle = _this$props.arrowStyle;
         var modal = _this.state.modal;
         if (modal) return;
 
@@ -411,8 +412,8 @@
           _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.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
@@ -456,6 +457,7 @@
             case "hover":
               triggerProps.onMouseEnter = _this.onMouseEnter;
               triggerProps.onMouseLeave = _this.onMouseLeave;
+              break;
 
             case "focus":
               triggerProps.onFocus = _this.onMouseEnter;
@@ -536,7 +538,10 @@
         var modal = this.state.modal;
         var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0);
         var ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
-        return [this.state.isOpen && React.createElement("div", {
+        return [!!this.props.trigger && React.createElement(Ref, {
+          innerRef: this.setTriggerRef,
+          key: "R"
+        }, this.renderTrigger()), this.state.isOpen && React.createElement("div", {
           key: "H",
           style: {
             position: "absolute",
@@ -549,10 +554,7 @@
           className: "popup-overlay",
           style: Object.assign({}, ovStyle, overlayStyle),
           onClick: closeOnDocumentClick ? this.closePopup : undefined
-        }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, {
-          innerRef: this.setTriggerRef,
-          key: "R"
-        }, this.renderTrigger())];
+        }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent()];
       }
     }]);