react-floater - npm Package Compare versions

Comparing version 0.5.3 to 0.5.4

es/index.js

@@ -359,3 +359,3 @@ import ReactDOM from 'react-dom';
         points = '0,0 ' + x / 2 + ',' + y + ' ' + x + ',0';
-        arrowStyles.bottom = -y;
+        arrowStyles.bottom = 0;
       } else if (placement.startsWith('bottom')) {
@@ -380,3 +380,3 @@ points = x + ',' + y + ' ' + x / 2 + ',0 0,' + y;
           className: '__floater__arrow',
-          style: this.arrowStyle
+          style: this.parentStyle
         },
@@ -400,3 +400,3 @@ React.createElement(
   }, {
-    key: 'arrowStyle',
+    key: 'parentStyle',
     get: function get$$1() {
@@ -414,9 +414,11 @@ var _props2 = this.props,
       if (placement.startsWith('top')) {
-        arrow.bottom = length;
+        arrow.bottom = 0;
         arrow.left = 0;
         arrow.right = 0;
+        arrow.height = length;
       } else if (placement.startsWith('bottom')) {
-        arrow.top = 0;
         arrow.left = 0;
         arrow.right = 0;
+        arrow.top = 0;
+        arrow.height = length;
       } else if (placement.startsWith('left')) {
@@ -558,6 +560,8 @@ arrow.right = 0;
           hideArrow = _props.hideArrow,
-          setFloaterRef = _props.setFloaterRef;
+          setFloaterRef = _props.setFloaterRef,
+          status = _props.status;
 
 
       var output = {};
+      var classes = ['__floater'];
 
@@ -574,2 +578,6 @@ if (component) {
 
+      if (status === STATUS.OPEN) {
+        classes.push('__floater__open');
+      }
+
       if (!hideArrow) {
@@ -583,7 +591,11 @@ output.arrow = React.createElement(Arrow, this.props);
           ref: setFloaterRef,
-          className: '__floater',
+          className: classes.join(' '),
           style: this.floaterStyle
         },
-        output.content,
-        output.arrow
+        React.createElement(
+          'div',
+          { className: '__floater__body' },
+          output.content,
+          output.arrow
+        )
       );
@@ -885,5 +897,3 @@ }
 
-      if (!children && target && !is.boolean(open)) {
-        // add event listener based on event,
-      }
+      if (!children && target && !is.boolean(open)) ;
     }
@@ -890,0 +900,0 @@ }, {

lib/index.js

@@ -363,3 +363,3 @@ 'use strict';
         points = '0,0 ' + x / 2 + ',' + y + ' ' + x + ',0';
-        arrowStyles.bottom = -y;
+        arrowStyles.bottom = 0;
       } else if (placement.startsWith('bottom')) {
@@ -384,3 +384,3 @@ points = x + ',' + y + ' ' + x / 2 + ',0 0,' + y;
           className: '__floater__arrow',
-          style: this.arrowStyle
+          style: this.parentStyle
         },
@@ -404,3 +404,3 @@ React.createElement(
   }, {
-    key: 'arrowStyle',
+    key: 'parentStyle',
     get: function get$$1() {
@@ -418,9 +418,11 @@ var _props2 = this.props,
       if (placement.startsWith('top')) {
-        arrow.bottom = length;
+        arrow.bottom = 0;
         arrow.left = 0;
         arrow.right = 0;
+        arrow.height = length;
       } else if (placement.startsWith('bottom')) {
-        arrow.top = 0;
         arrow.left = 0;
         arrow.right = 0;
+        arrow.top = 0;
+        arrow.height = length;
       } else if (placement.startsWith('left')) {
@@ -562,6 +564,8 @@ arrow.right = 0;
           hideArrow = _props.hideArrow,
-          setFloaterRef = _props.setFloaterRef;
+          setFloaterRef = _props.setFloaterRef,
+          status = _props.status;
 
 
       var output = {};
+      var classes = ['__floater'];
 
@@ -578,2 +582,6 @@ if (component) {
 
+      if (status === STATUS.OPEN) {
+        classes.push('__floater__open');
+      }
+
       if (!hideArrow) {
@@ -587,7 +595,11 @@ output.arrow = React.createElement(Arrow, this.props);
           ref: setFloaterRef,
-          className: '__floater',
+          className: classes.join(' '),
           style: this.floaterStyle
         },
-        output.content,
-        output.arrow
+        React.createElement(
+          'div',
+          { className: '__floater__body' },
+          output.content,
+          output.arrow
+        )
       );
@@ -889,5 +901,3 @@ }
 
-      if (!children && target && !is.boolean(open)) {
-        // add event listener based on event,
-      }
+      if (!children && target && !is.boolean(open)) ;
     }
@@ -894,0 +904,0 @@ }, {

package.json

 {
   "name": "react-floater",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Floaters everywhere!",
@@ -45,4 +45,4 @@ "author": "Gil Barbara <[e-mail]>",
   "devDependencies": {
-    "autoprefixer": "^8.2.0",
-    "babel-core": "^6.26.0",
+    "autoprefixer": "^8.5.0",
+    "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
@@ -54,10 +54,10 @@ "babel-jest": "^22.4.3",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-node-env-inline": "^0.4.0",
+    "babel-plugin-transform-node-env-inline": "^0.4.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
     "bundlesize": "^0.17.0",
-    "chalk": "^2.3.2",
-    "cross-env": "^5.1.4",
+    "chalk": "^2.4.1",
+    "cross-env": "^5.1.5",
     "enzyme": "^3.3.0",
@@ -67,8 +67,8 @@ "enzyme-adapter-react-16": "^1.1.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-babel": "^5.0.0",
-    "eslint-plugin-flowtype": "^2.46.2",
+    "eslint-plugin-babel": "^5.1.0",
+    "eslint-plugin-flowtype": "^2.46.3",
     "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
-    "flow-bin": "^0.69.0",
+    "eslint-plugin-react": "^7.8.2",
+    "flow-bin": "^0.72.0",
     "husky": "^0.14.3",
@@ -78,11 +78,11 @@ "jest": "^22.4.3",
     "prop-types": "^15.6.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.3.1",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-test-renderer": "^16.3.2",
     "rimraf": "^2.6.2",
-    "rollup": "^0.57.1",
-    "rollup-plugin-babel": "^3.0.3",
-    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup": "^0.59.0",
+    "rollup-plugin-babel": "^3.0.4",
+    "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0",
-    "styled-components": "^3.2.5",
+    "styled-components": "^3.2.6",
     "watch-run": "^1.2.5"
@@ -89,0 +89,0 @@ },

src/components/Floater/Arrow.js

@@ -11,3 +11,3 @@ import React from 'react';
 
-  get arrowStyle() {
+  get parentStyle() {
     const { placement, styles } = this.props;
@@ -21,10 +21,12 @@ const { length } = styles.arrow;
     if (placement.startsWith('top')) {
-      arrow.bottom = length;
+      arrow.bottom = 0;
       arrow.left = 0;
       arrow.right = 0;
+      arrow.height = length;
     }
     else if (placement.startsWith('bottom')) {
-      arrow.top = 0;
       arrow.left = 0;
       arrow.right = 0;
+      arrow.top = 0;
+      arrow.height = length;
     }
@@ -56,3 +58,3 @@ else if (placement.startsWith('left')) {
       points = `0,0 ${x / 2},${y} ${x},0`;
-      arrowStyles.bottom = -y;
+      arrowStyles.bottom = 0;
     }
@@ -79,3 +81,3 @@ else if (placement.startsWith('bottom')) {
         className="__floater__arrow"
-        style={this.arrowStyle}
+        style={this.parentStyle}
       >
@@ -82,0 +84,0 @@ <span ref={setArrowRef} style={arrowStyles}>

src/components/Floater/index.js

@@ -92,5 +92,7 @@ import React from 'react';
       setFloaterRef,
+      status,
     } = this.props;
 
     const output = {};
+    const classes = ['__floater'];
 
@@ -109,2 +111,6 @@ if (component) {
 
+    if (status === STATUS.OPEN) {
+      classes.push('__floater__open');
+    }
+
     if (!hideArrow) {
@@ -117,7 +123,9 @@ output.arrow = <Arrow {...this.props} />;
         ref={setFloaterRef}
-        className="__floater"
+        className={classes.join(' ')}
         style={this.floaterStyle}
       >
-        {output.content}
-        {output.arrow}
+        <div className="__floater__body">
+          {output.content}
+          {output.arrow}
+        </div>
       </div>
@@ -124,0 +132,0 @@ );

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

Improved metrics

Total package byte prevSize

120644

increased by0.66%

Lines of code

3560

increased by0.76%

No dependency changes