react-with-hover - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/bundle.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.WithHover=t(require("react")):e.WithHover=t(e.react)}(this,function(e){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var n=o(1),u=r(n);t.default=u.default},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},s=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),f=o(2),c=r(f);t.default=function(){var e=arguments.length<=0||void 0===arguments[0]?function(e){return{hover:e}}:arguments[0];return function(t){var o,r;return r=o=function(o){function r(){var e,t,o,i;n(this,r);for(var a=arguments.length,s=Array(a),f=0;a>f;f++)s[f]=arguments[f];return t=o=u(this,(e=Object.getPrototypeOf(r)).call.apply(e,[this].concat(s))),o.state={hover:!1},i=t,u(o,i)}return i(r,o),s(r,[{key:"onMouseEnter",value:function(){if(this.state.hover||this.setState({hover:!0}),this.props.onMouseEnter){var e;(e=this.props).onMouseEnter.apply(e,arguments)}}},{key:"onMouseLeave",value:function(){if(this.state.hover&&this.setState({hover:!1}),this.props.onMouseLeave){var e;(e=this.props).onMouseLeave.apply(e,arguments)}}},{key:"render",value:function(){return c.default.createElement(t,a({},e(this.state.hover),this.props,{onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave}))}}]),r}(f.Component),o.propTypes={onMouseEnter:f.PropTypes.func,onMouseLeave:f.PropTypes.func},r}}},function(t,o){t.exports=e}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.WithHover=t(require("react")):e.WithHover=t(e.react)}(this,function(e){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var n=r(1),u=o(n);t.default=u.default},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},c=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),f=r(2),s=o(f),p=function(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],t=e.transform,r=void 0===t?function(e){return{hover:e}}:t,o=e.containerStyle,p=void 0===o?{width:"100%",height:"100%",padding:0,border:0}:o;return function(e){var t,o;return o=t=function(t){function o(){var e,t,r,i;n(this,o);for(var a=arguments.length,c=Array(a),f=0;a>f;f++)c[f]=arguments[f];return t=r=u(this,(e=Object.getPrototypeOf(o)).call.apply(e,[this].concat(c))),r.state={hover:!1},r.onMouseEnter=function(){r.state.hover||r.setState({hover:!0})},r.onMouseLeave=function(){r.state.hover&&r.setState({hover:!1})},i=t,u(r,i)}return i(o,t),c(o,[{key:"render",value:function(){return s.default.createElement("div",{style:p,onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave},s.default.createElement(e,a({},r(this.state.hover),this.props)))}}]),o}(f.Component),t.propTypes={onMouseEnter:f.PropTypes.func,onMouseLeave:f.PropTypes.func},o}};t.default=p},function(t,r){t.exports=e}])});

dist/with-hover.js

@@ -23,13 +23,23 @@ 'use strict';
 
-exports.default = function () {
-  var transform = arguments.length <= 0 || arguments[0] === undefined ? function (hover) {
+var withHover = function withHover() {
+  var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  var _ref$transform = _ref.transform;
+  var transform = _ref$transform === undefined ? function (hover) {
     return { hover: hover };
-  } : arguments[0];
-  return function (InnerComponent) {
+  } : _ref$transform;
+  var _ref$containerStyle = _ref.containerStyle;
+  var containerStyle = _ref$containerStyle === undefined ? {
+    width: '100%',
+    height: '100%',
+    padding: 0,
+    border: 0
+  } : _ref$containerStyle;
+  return function (BaseComponent) {
     var _class, _temp2;
 
     return _temp2 = _class = function (_Component) {
-      _inherits(WithHover, _Component);
+      _inherits(_class, _Component);
 
-      function WithHover() {
+      function _class() {
         var _Object$getPrototypeO;
@@ -39,3 +49,3 @@
 
-        _classCallCheck(this, WithHover);
+        _classCallCheck(this, _class);
 
@@ -46,42 +56,31 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(WithHover)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(_class)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
           hover: false
+        }, _this.onMouseEnter = function () {
+          if (!_this.state.hover) {
+            _this.setState({ hover: true });
+          }
+        }, _this.onMouseLeave = function () {
+          if (_this.state.hover) {
+            _this.setState({ hover: false });
+          }
         }, _temp), _possibleConstructorReturn(_this, _ret);
       }
 
-      _createClass(WithHover, [{
-        key: 'onMouseEnter',
-        value: function onMouseEnter() {
-          if (!this.state.hover) {
-            this.setState({ hover: true });
-          }
-          if (this.props.onMouseEnter) {
-            var _props;
-
-            (_props = this.props).onMouseEnter.apply(_props, arguments);
-          }
-        }
-      }, {
-        key: 'onMouseLeave',
-        value: function onMouseLeave() {
-          if (this.state.hover) {
-            this.setState({ hover: false });
-          }
-          if (this.props.onMouseLeave) {
-            var _props2;
-
-            (_props2 = this.props).onMouseLeave.apply(_props2, arguments);
-          }
-        }
-      }, {
+      _createClass(_class, [{
         key: 'render',
         value: function render() {
-          return _react2.default.createElement(InnerComponent, _extends({}, transform(this.state.hover), this.props, {
-            onMouseEnter: this.onMouseEnter,
-            onMouseLeave: this.onMouseLeave
-          }));
+          return _react2.default.createElement(
+            'div',
+            {
+              style: containerStyle,
+              onMouseEnter: this.onMouseEnter,
+              onMouseLeave: this.onMouseLeave
+            },
+            _react2.default.createElement(BaseComponent, _extends({}, transform(this.state.hover), this.props))
+          );
         }
       }]);
 
-      return WithHover;
+      return _class;
     }(_react.Component), _class.propTypes = {
@@ -92,2 +91,4 @@ onMouseEnter: _react.PropTypes.func,
   };
-};
+};
+
+exports.default = withHover;

package.json

 {
   "name": "react-with-hover",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Simple hover high order function.",
@@ -11,3 +11,3 @@ "main": "dist/index.js",
     "bundle": "webpack --config webpack.config.js",
-    "build": "npm run clean && npm run transpile && npm run bundle",
+    "build": "npm run lint && npm run clean && npm run transpile && npm run bundle",
     "lint": "eslint ./src"
@@ -14,0 +14,0 @@ },

README.md

@@ -23,10 +23,20 @@ # react-with-hover
 
-You can also change the property name by passing a function, example:
+You can change the property name by passing a function, example:
 
 ```js
-const Decorated = WithHover((flag) => ({ mouseOver: flag }))(Header)
+const Decorated = WithHover(
+  { transform: (flag) => ({ mouseOver: flag }) }
+)(Header)
 ```
 
-Then the property passed to the `Header` component is `mouseOver`
+The property passed to the `Header` would change to `mouseOver`
 
+You can also change the wrapper div style to meet your needs like:
+
+```js
+const Decorated = WithHover(
+  { containerStyle: { display: 'inline-block' } }
+)(Header)
+```
+
 ## Contributing
@@ -33,0 +43,0 @@

src/__tests__/with-hover-test.js

@@ -20,6 +20,12 @@ jest.unmock('../with-hover')
     it('injects hover property', () => { expect(subject.find(Header).prop('hover')).toBe(false) })
+    it('reacts to mouseenter then mouseleave', () => {
+      subject.simulate('mouseenter')
+      expect(subject.find(Header).prop('hover')).toBe(true)
+      subject.simulate('mouseleave')
+      expect(subject.find(Header).prop('hover')).toBe(false)
+    })
   })
 
   describe('when composing with a custom transform function', () => {
-    const Decorated = WithHover((flag) => ({ mouseOver: flag }))(Header)
+    const Decorated = WithHover({ transform: (flag) => ({ mouseOver: flag }) })(Header)
 
@@ -26,0 +32,0 @@ beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })

src/with-hover.js

 import React, { Component, PropTypes } from 'react'
 
-export default (
-  transform = (hover) => ({ hover })
-) => (InnerComponent) =>
-  class WithHover extends Component {
-    static propTypes = {
-      onMouseEnter: PropTypes.func,
-      onMouseLeave: PropTypes.func,
-    }
+const withHover = ({
+  transform = ((hover) => ({ hover })),
+  containerStyle = ({
+    width: '100%',
+    height: '100%',
+    padding: 0,
+    border: 0,
+  }),
+} = {}) => (BaseComponent) => class extends Component {
+  static propTypes = {
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+  }
 
-    state = {
-      hover: false,
-    }
+  state = {
+    hover: false
+  }
 
-    onMouseEnter(...args) {
-      if (!this.state.hover) { this.setState({ hover: true }) }
-      if (this.props.onMouseEnter) {
-        this.props.onMouseEnter(...args)
-      }
-    }
+  onMouseEnter = () => {
+    if (!this.state.hover) { this.setState({ hover: true }) }
+  }
 
-    onMouseLeave(...args) {
-      if (this.state.hover) { this.setState({ hover: false }) }
-      if (this.props.onMouseLeave) {
-        this.props.onMouseLeave(...args)
-      }
-    }
+  onMouseLeave = () => {
+    if (this.state.hover) { this.setState({ hover: false }) }
+  }
 
-    render() {
-      return (
-        <InnerComponent
+  render() {
+    return (
+      <div
+        style={containerStyle}
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}
+      >
+        <BaseComponent
           {...transform(this.state.hover)}
           {...this.props}
-          onMouseEnter={this.onMouseEnter}
-          onMouseLeave={this.onMouseLeave}
         />
-      )
-    }
+      </div>
+    )
   }
+}
+
+export default withHover

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

15286

increased by3.12%

Lines of code

184

increased by6.36%

Number of lines in readme file

52

increased by23.81%

No dependency changes