react-floater - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

es/index.js

@@ -219,3 +219,2 @@ import ReactDOM from 'react-dom';
     _this.node = document.createElement('div');
-    _this.node.style.zIndex = 1;
     if (props.id) {
@@ -380,3 +379,3 @@ _this.node.id = props.id;
         {
-          className: '__tooltip__arrow',
+          className: '__floater__arrow',
           style: this.arrowStyle
@@ -494,3 +493,3 @@ },
       'div',
-      { className: '__tooltip__content', style: styles.content },
+      { className: '__floater__content', style: styles.content },
       content
@@ -503,3 +502,3 @@ )
       'div',
-      { className: '__tooltip__title', style: styles.title },
+      { className: '__floater__title', style: styles.title },
       title
@@ -512,3 +511,3 @@ );
       'div',
-      { className: '__tooltip__footer', style: styles.footer },
+      { className: '__floater__footer', style: styles.footer },
       footer
@@ -526,3 +525,3 @@ );
     'div',
-    { className: '__tooltip__container', style: styles.container },
+    { className: '__floater__container', style: styles.container },
     output.close,
@@ -584,4 +583,4 @@ output.title,
           ref: setFloaterRef,
-          className: '__tooltip',
-          style: this.tooltipStyle
+          className: '__floater',
+          style: this.floaterStyle
         },
@@ -593,3 +592,3 @@ output.content,
   }, {
-    key: 'tooltipStyle',
+    key: 'floaterStyle',
     get: function get$$1() {
@@ -605,8 +604,8 @@ var _props2 = this.props,
       var length = styles.arrow.length,
-          tooltip = styles.tooltip,
-          tooltipCentered = styles.tooltipCentered,
-          tooltipClosing = styles.tooltipClosing,
-          tooltipOpening = styles.tooltipOpening,
-          tooltipWithAnimation = styles.tooltipWithAnimation,
-          tooltipWithComponent = styles.tooltipWithComponent;
+          floater = styles.floater,
+          floaterCentered = styles.floaterCentered,
+          floaterClosing = styles.floaterClosing,
+          floaterOpening = styles.floaterOpening,
+          floaterWithAnimation = styles.floaterWithAnimation,
+          floaterWithComponent = styles.floaterWithComponent;
 
@@ -628,22 +627,22 @@ var element = {};
       if ([STATUS.OPENING, STATUS.OPEN].indexOf(status) !== -1) {
-        element = _extends({}, element, tooltipOpening);
+        element = _extends({}, element, floaterOpening);
       }
 
       if (status === STATUS.CLOSING) {
-        element = _extends({}, element, tooltipClosing);
+        element = _extends({}, element, floaterClosing);
       }
 
       if (status === STATUS.OPEN && !disableAnimation && !isPositioned) {
-        element = _extends({}, element, tooltipWithAnimation);
+        element = _extends({}, element, floaterWithAnimation);
       }
 
       if (placement === 'center') {
-        element = _extends({}, element, tooltipCentered);
+        element = _extends({}, element, floaterCentered);
       }
 
       if (component) {
-        element = _extends({}, element, tooltipWithComponent);
+        element = _extends({}, element, floaterWithComponent);
       }
 
-      return _extends({}, tooltip, element);
+      return _extends({}, floater, element);
     }
@@ -760,3 +759,3 @@ }]);
   },
-  tooltip: {
+  floater: {
     display: 'inline-block',
@@ -771,7 +770,7 @@ filter: 'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',
   },
-  tooltipOpening: {
+  floaterOpening: {
     opacity: 1,
     visibility: 'visible'
   },
-  tooltipWithAnimation: {
+  floaterWithAnimation: {
     opacity: 1,
@@ -781,10 +780,10 @@ transition: 'opacity 0.3s, transform 0.2s',
   },
-  tooltipWithComponent: {
+  floaterWithComponent: {
     maxWidth: '100%'
   },
-  tooltipClosing: {
+  floaterClosing: {
     opacity: 0,
     visibility: 'visible'
   },
-  tooltipCentered: {
+  floaterCentered: {
     left: '50%',
@@ -887,3 +886,3 @@ position: 'fixed',
           target: this.target,
-          tooltip: this.tooltipRef
+          floater: this.floaterRef
         },
@@ -937,4 +936,4 @@ debug: this.debug
 
-      if (this.tooltipRef && (changedTo('status', STATUS.OPENING) || changedTo('status', STATUS.CLOSING))) {
-        once(this.tooltipRef, 'transitionend', this.handleTransitionEnd);
+      if (this.floaterRef && (changedTo('status', STATUS.OPENING) || changedTo('status', STATUS.CLOSING))) {
+        once(this.floaterRef, 'transitionend', this.handleTransitionEnd);
       }
@@ -975,4 +974,4 @@ }
         this.setState({ status: STATUS.IDLE });
-      } else if (target && this.tooltipRef) {
-        new Popper(target, this.tooltipRef, {
+      } else if (target && this.floaterRef) {
+        new Popper(target, this.floaterRef, {
           placement: placement,
@@ -1001,3 +1000,3 @@ modifiers: {
 
-            getPopper(data, 'tooltip');
+            getPopper(data, 'floater');
 
@@ -1324,4 +1323,4 @@ _this2.setState({
   this.setFloaterRef = function (ref) {
-    if (!_this4.tooltipRef) {
-      _this4.tooltipRef = ref;
+    if (!_this4.floaterRef) {
+      _this4.floaterRef = ref;
     }
@@ -1328,0 +1327,0 @@ };

lib/index.js

@@ -223,3 +223,2 @@ 'use strict';
     _this.node = document.createElement('div');
-    _this.node.style.zIndex = 1;
     if (props.id) {
@@ -384,3 +383,3 @@ _this.node.id = props.id;
         {
-          className: '__tooltip__arrow',
+          className: '__floater__arrow',
           style: this.arrowStyle
@@ -498,3 +497,3 @@ },
       'div',
-      { className: '__tooltip__content', style: styles.content },
+      { className: '__floater__content', style: styles.content },
       content
@@ -507,3 +506,3 @@ )
       'div',
-      { className: '__tooltip__title', style: styles.title },
+      { className: '__floater__title', style: styles.title },
       title
@@ -516,3 +515,3 @@ );
       'div',
-      { className: '__tooltip__footer', style: styles.footer },
+      { className: '__floater__footer', style: styles.footer },
       footer
@@ -530,3 +529,3 @@ );
     'div',
-    { className: '__tooltip__container', style: styles.container },
+    { className: '__floater__container', style: styles.container },
     output.close,
@@ -588,4 +587,4 @@ output.title,
           ref: setFloaterRef,
-          className: '__tooltip',
-          style: this.tooltipStyle
+          className: '__floater',
+          style: this.floaterStyle
         },
@@ -597,3 +596,3 @@ output.content,
   }, {
-    key: 'tooltipStyle',
+    key: 'floaterStyle',
     get: function get$$1() {
@@ -609,8 +608,8 @@ var _props2 = this.props,
       var length = styles.arrow.length,
-          tooltip = styles.tooltip,
-          tooltipCentered = styles.tooltipCentered,
-          tooltipClosing = styles.tooltipClosing,
-          tooltipOpening = styles.tooltipOpening,
-          tooltipWithAnimation = styles.tooltipWithAnimation,
-          tooltipWithComponent = styles.tooltipWithComponent;
+          floater = styles.floater,
+          floaterCentered = styles.floaterCentered,
+          floaterClosing = styles.floaterClosing,
+          floaterOpening = styles.floaterOpening,
+          floaterWithAnimation = styles.floaterWithAnimation,
+          floaterWithComponent = styles.floaterWithComponent;
 
@@ -632,22 +631,22 @@ var element = {};
       if ([STATUS.OPENING, STATUS.OPEN].indexOf(status) !== -1) {
-        element = _extends({}, element, tooltipOpening);
+        element = _extends({}, element, floaterOpening);
       }
 
       if (status === STATUS.CLOSING) {
-        element = _extends({}, element, tooltipClosing);
+        element = _extends({}, element, floaterClosing);
       }
 
       if (status === STATUS.OPEN && !disableAnimation && !isPositioned) {
-        element = _extends({}, element, tooltipWithAnimation);
+        element = _extends({}, element, floaterWithAnimation);
       }
 
       if (placement === 'center') {
-        element = _extends({}, element, tooltipCentered);
+        element = _extends({}, element, floaterCentered);
       }
 
       if (component) {
-        element = _extends({}, element, tooltipWithComponent);
+        element = _extends({}, element, floaterWithComponent);
       }
 
-      return _extends({}, tooltip, element);
+      return _extends({}, floater, element);
     }
@@ -764,3 +763,3 @@ }]);
   },
-  tooltip: {
+  floater: {
     display: 'inline-block',
@@ -775,7 +774,7 @@ filter: 'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',
   },
-  tooltipOpening: {
+  floaterOpening: {
     opacity: 1,
     visibility: 'visible'
   },
-  tooltipWithAnimation: {
+  floaterWithAnimation: {
     opacity: 1,
@@ -785,10 +784,10 @@ transition: 'opacity 0.3s, transform 0.2s',
   },
-  tooltipWithComponent: {
+  floaterWithComponent: {
     maxWidth: '100%'
   },
-  tooltipClosing: {
+  floaterClosing: {
     opacity: 0,
     visibility: 'visible'
   },
-  tooltipCentered: {
+  floaterCentered: {
     left: '50%',
@@ -891,3 +890,3 @@ position: 'fixed',
           target: this.target,
-          tooltip: this.tooltipRef
+          floater: this.floaterRef
         },
@@ -941,4 +940,4 @@ debug: this.debug
 
-      if (this.tooltipRef && (changedTo('status', STATUS.OPENING) || changedTo('status', STATUS.CLOSING))) {
-        once(this.tooltipRef, 'transitionend', this.handleTransitionEnd);
+      if (this.floaterRef && (changedTo('status', STATUS.OPENING) || changedTo('status', STATUS.CLOSING))) {
+        once(this.floaterRef, 'transitionend', this.handleTransitionEnd);
       }
@@ -979,4 +978,4 @@ }
         this.setState({ status: STATUS.IDLE });
-      } else if (target && this.tooltipRef) {
-        new Popper(target, this.tooltipRef, {
+      } else if (target && this.floaterRef) {
+        new Popper(target, this.floaterRef, {
           placement: placement,
@@ -1005,3 +1004,3 @@ modifiers: {
 
-            getPopper(data, 'tooltip');
+            getPopper(data, 'floater');
 
@@ -1328,4 +1327,4 @@ _this2.setState({
   this.setFloaterRef = function (ref) {
-    if (!_this4.tooltipRef) {
-      _this4.tooltipRef = ref;
+    if (!_this4.floaterRef) {
+      _this4.floaterRef = ref;
     }
@@ -1332,0 +1331,0 @@ };

package.json

 {
   "name": "react-floater",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Floaters everywhere!",
@@ -41,3 +41,3 @@ "author": "Gil Barbara <[e-mail]>",
     "is-lite": "^0.2.0",
-    "popper.js": "^1.14.1",
+    "popper.js": "^1.14.3",
     "react-proptype-conditional-require": "^1.0.4"
@@ -48,3 +48,3 @@ },
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.2.3",
     "babel-jest": "^22.4.3",
@@ -55,3 +55,3 @@ "babel-plugin-array-includes": "^2.0.3",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-node-env-inline": "^0.3.0",
+    "babel-plugin-transform-node-env-inline": "^0.4.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
@@ -68,5 +68,5 @@ "babel-preset-env": "^1.6.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-flowtype": "^2.46.1",
-    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-babel": "^5.0.0",
+    "eslint-plugin-flowtype": "^2.46.2",
+    "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
@@ -81,3 +81,3 @@ "eslint-plugin-react": "^7.7.0",
     "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0",
+    "react-test-renderer": "^16.3.1",
     "rimraf": "^2.6.2",
@@ -88,3 +88,3 @@ "rollup": "^0.57.1",
     "rollup-plugin-node-resolve": "^3.3.0",
-    "styled-components": "^3.2.3",
+    "styled-components": "^3.2.5",
     "watch-run": "^1.2.5"
@@ -91,0 +91,0 @@ },

src/components/Floater/Arrow.js

@@ -75,3 +75,3 @@ import React from 'react';
       <div
-        className="__tooltip__arrow"
+        className="__floater__arrow"
         style={this.arrowStyle}
@@ -78,0 +78,0 @@ >

src/components/Floater/Container.js

@@ -20,3 +20,3 @@ import React from 'react';
       ? content
-      : <div className="__tooltip__content" style={styles.content}>{content}</div>
+      : <div className="__floater__content" style={styles.content}>{content}</div>
   };
@@ -27,3 +27,3 @@
       ? title
-      : <div className="__tooltip__title" style={styles.title}>{title}</div>;
+      : <div className="__floater__title" style={styles.title}>{title}</div>;
   }
@@ -34,3 +34,3 @@
       ? footer
-      : <div className="__tooltip__footer" style={styles.footer}>{footer}</div>;
+      : <div className="__floater__footer" style={styles.footer}>{footer}</div>;
   }
@@ -50,3 +50,3 @@
   return (
-    <div className="__tooltip__container" style={styles.container}>
+    <div className="__floater__container" style={styles.container}>
       {output.close}
@@ -53,0 +53,0 @@ {output.title}

src/components/Floater/index.js

@@ -32,12 +32,12 @@ import React from 'react';
 
-  get tooltipStyle() {
+  get floaterStyle() {
     const { disableAnimation, component, placement, hideArrow, isPositioned, status, styles } = this.props;
     const {
       arrow: { length },
-      tooltip,
-      tooltipCentered,
-      tooltipClosing,
-      tooltipOpening,
-      tooltipWithAnimation,
-      tooltipWithComponent,
+      floater,
+      floaterCentered,
+      floaterClosing,
+      floaterOpening,
+      floaterWithAnimation,
+      floaterWithComponent,
     } = styles;
@@ -62,23 +62,23 @@ let element = {};
     if ([STATUS.OPENING, STATUS.OPEN].includes(status)) {
-      element = { ...element, ...tooltipOpening };
+      element = { ...element, ...floaterOpening };
     }
 
     if (status === STATUS.CLOSING) {
-      element = { ...element, ...tooltipClosing };
+      element = { ...element, ...floaterClosing };
     }
 
     if (status === STATUS.OPEN && !disableAnimation && !isPositioned) {
-      element = { ...element, ...tooltipWithAnimation };
+      element = { ...element, ...floaterWithAnimation };
     }
 
     if (placement === 'center') {
-      element = { ...element, ...tooltipCentered };
+      element = { ...element, ...floaterCentered };
     }
 
     if (component) {
-      element = { ...element, ...tooltipWithComponent };
+      element = { ...element, ...floaterWithComponent };
     }
 
     return {
-      ...tooltip,
+      ...floater,
       ...element,
@@ -117,4 +117,4 @@ };
         ref={setFloaterRef}
-        className="__tooltip"
-        style={this.tooltipStyle}
+        className="__floater"
+        style={this.floaterStyle}
       >
@@ -121,0 +121,0 @@ {output.content}

src/components/index.js

@@ -133,3 +133,3 @@ import React from 'react';
         target: this.target,
-        tooltip: this.tooltipRef,
+        floater: this.floaterRef,
       },
@@ -174,7 +174,7 @@ debug: this.debug,
     if (
-      this.tooltipRef
+      this.floaterRef
       && (changedTo('status', STATUS.OPENING) || changedTo('status', STATUS.CLOSING)
       )
     ) {
-      once(this.tooltipRef, 'transitionend', this.handleTransitionEnd);
+      once(this.floaterRef, 'transitionend', this.handleTransitionEnd);
     }
@@ -211,4 +211,4 @@ }
     }
-    else if (target && this.tooltipRef) {
-      new Popper(target, this.tooltipRef, {
+    else if (target && this.floaterRef) {
+      new Popper(target, this.floaterRef, {
         placement,
@@ -240,3 +240,3 @@ modifiers: {
 
-          getPopper(data, 'tooltip');
+          getPopper(data, 'floater');
 
@@ -321,4 +321,4 @@ this.setState({
   setFloaterRef = (ref) => {
-    if (!this.tooltipRef) {
-      this.tooltipRef = ref;
+    if (!this.floaterRef) {
+      this.floaterRef = ref;
     }
@@ -325,0 +325,0 @@ };

src/components/Portal.js

@@ -13,3 +13,2 @@ import React from 'react';
     this.node = document.createElement('div');
-    this.node.style.zIndex = 1;
     if (props.id) {
@@ -16,0 +15,0 @@ this.node.id = props.id;

src/styles.js

@@ -16,3 +16,3 @@ const zIndex = 100;
   },
-  tooltip: {
+  floater: {
     display: 'inline-block',
@@ -27,7 +27,7 @@ filter: 'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',
   },
-  tooltipOpening: {
+  floaterOpening: {
     opacity: 1,
     visibility: 'visible',
   },
-  tooltipWithAnimation: {
+  floaterWithAnimation: {
     opacity: 1,
@@ -37,10 +37,10 @@ transition: 'opacity 0.3s, transform 0.2s',
   },
-  tooltipWithComponent: {
+  floaterWithComponent: {
     maxWidth: '100%',
   },
-  tooltipClosing: {
+  floaterClosing: {
     opacity: 0,
     visibility: 'visible',
   },
-  tooltipCentered: {
+  floaterCentered: {
     left: '50%',
@@ -47,0 +47,0 @@ position: 'fixed',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

119552

decreased by-0.08%

Lines of code

3529

decreased by-0.08%

Dependency changes

• Updatedpopper.js@^1.14.3