react-outside-click-handler - npm Package Compare versions

Comparing version 1.2.4 to 1.3.0

build/OutsideClickHandler.js

@@ -40,3 +40,5 @@ 'use strict';
   FLEX: 'flex',
-  INLINE_BLOCK: 'inline-block'
+  INLINE: 'inline',
+  INLINE_BLOCK: 'inline-block',
+  CONTENTS: 'contents'
 };
@@ -96,8 +98,9 @@
   }, {
-    key: 'componentWillReceiveProps',
+    key: 'componentDidUpdate',
     value: function () {
-      function componentWillReceiveProps(_ref2) {
-        var disabled = _ref2.disabled,
-            useCapture = _ref2.useCapture;
-        var prevDisabled = this.props.disabled;
+      function componentDidUpdate(_ref2) {
+        var prevDisabled = _ref2.disabled;
+        var _props2 = this.props,
+            disabled = _props2.disabled,
+            useCapture = _props2.useCapture;
 
@@ -113,3 +116,3 @@ if (prevDisabled !== disabled) {
 
-      return componentWillReceiveProps;
+      return componentDidUpdate;
     }()
@@ -206,5 +209,5 @@ }, {
       function render() {
-        var _props2 = this.props,
-            children = _props2.children,
-            display = _props2.display;
+        var _props3 = this.props,
+            children = _props3.children,
+            display = _props3.display;
 
@@ -211,0 +214,0 @@

CHANGELOG.md

 # Change Log
 
+## v1.3.0
+ - [New] `display`: add `contents` (#34)
+ - [New] `display`: add `inline` (#28)
+ - [Refactor] Replace `componentWillReceiveProps` with `componentDidUpdate` for a side effect (#36)
+ - [Deps] update `airbnb-prop-types`
+ - [Dev Deps] update `enzyme-adapter-react-helper`, `eslint`, `eslint-config-airbnb`, `eslint-plugin-import`, `eslint-plugin-react`, `eslint-plugin-react-with-styles`, `rimraf`, `safe-publish-latest`, `sinon-sandbox`; add `eslint-plugin-react-hooks`
+
 ## v1.2.4
@@ -4,0 +11,0 @@ - [Fix] prevent memory leak if `mousedown` is fired, but `mouseup` isn’t (#20)

esm/OutsideClickHandler.js

@@ -21,3 +21,5 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
   FLEX: 'flex',
-  INLINE_BLOCK: 'inline-block'
+  INLINE: 'inline',
+  INLINE_BLOCK: 'inline-block',
+  CONTENTS: 'contents'
 };
@@ -77,8 +79,9 @@
   }, {
-    key: 'componentWillReceiveProps',
+    key: 'componentDidUpdate',
     value: function () {
-      function componentWillReceiveProps(_ref2) {
-        var disabled = _ref2.disabled,
-            useCapture = _ref2.useCapture;
-        var prevDisabled = this.props.disabled;
+      function componentDidUpdate(_ref2) {
+        var prevDisabled = _ref2.disabled;
+        var _props2 = this.props,
+            disabled = _props2.disabled,
+            useCapture = _props2.useCapture;
 
@@ -94,3 +97,3 @@ if (prevDisabled !== disabled) {
 
-      return componentWillReceiveProps;
+      return componentDidUpdate;
     }()
@@ -187,5 +190,5 @@ }, {
       function render() {
-        var _props2 = this.props,
-            children = _props2.children,
-            display = _props2.display;
+        var _props3 = this.props,
+            children = _props3.children,
+            display = _props3.display;
 
@@ -192,0 +195,0 @@

package.json

 {
   "name": "react-outside-click-handler",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "A React component for dealing with clicks outside its subtree",
@@ -48,9 +48,10 @@ "main": "index.js",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-helper": "^1.3.5",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.1",
-    "eslint-plugin-import": "^2.18.0",
+    "enzyme-adapter-react-helper": "^1.3.6",
+    "eslint": "^6.4.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.2",
-    "eslint-plugin-react-with-styles": "^2.1.0",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^2.1.0",
+    "eslint-plugin-react-with-styles": "^2.2.0",
     "in-publish": "^2.0.0",
@@ -61,9 +62,9 @@ "mocha": "^3.5.3",
     "react-dom": "^0.14 || >=15",
-    "rimraf": "^2.6.3",
-    "safe-publish-latest": "^1.1.2",
+    "rimraf": "^2.7.1",
+    "safe-publish-latest": "^1.1.3",
     "sinon": "^5.1.1",
-    "sinon-sandbox": "^2.0.2"
+    "sinon-sandbox": "^2.0.6"
   },
   "dependencies": {
-    "airbnb-prop-types": "^2.13.2",
+    "airbnb-prop-types": "^2.15.0",
     "consolidated-events": "^1.1.1 || ^2.0.0",
@@ -70,0 +71,0 @@ "document.contains": "^1.0.1",

README.md

@@ -45,4 +45,4 @@ # react-outside-click-handler
 
-### display: `PropTypes.oneOf(['block', 'flex', 'inline-block'])`
+### display: `PropTypes.oneOf(['block', 'flex', 'inline-block', 'inline', 'contents'])`
 
-By default, the `OutsideClickHandler` renders a `display: block` `<div />` to wrap the subtree defined by `children`. If desired, the `display` can be set to `inline-block` or `flex` instead. There is no way not to render a wrapping `<div />`.
+By default, the `OutsideClickHandler` renders a `display: block` `<div />` to wrap the subtree defined by `children`. If desired, the `display` can be set to `inline-block`, `inline`, `flex`, or `contents` instead. There is no way not to render a wrapping `<div />`.

src/OutsideClickHandler.jsx

@@ -13,3 +13,5 @@ import React from 'react';
   FLEX: 'flex',
+  INLINE: 'inline',
   INLINE_BLOCK: 'inline-block',
+  CONTENTS: 'contents',
 };
@@ -49,4 +51,4 @@
 
-  componentWillReceiveProps({ disabled, useCapture }) {
-    const { disabled: prevDisabled } = this.props;
+  componentDidUpdate({ disabled: prevDisabled }) {
+    const { disabled, useCapture } = this.props;
     if (prevDisabled !== disabled) {
@@ -53,0 +55,0 @@ if (disabled) {

test/OutsideClickHandler_test.jsx

@@ -7,3 +7,2 @@ import React from 'react';
 import contains from 'document.contains';
-
 import OutsideClickHandler from '../src/OutsideClickHandler';
@@ -22,2 +21,19 @@
 
+    it('renders display others than block properly', () => {
+      const displays = ['flex', 'inline-block', 'contents', 'inline'];
+      displays.forEach((displayType) => {
+        const wrapper = shallow((
+          <OutsideClickHandler display={displayType} />
+        ));
+        expect(wrapper.prop('style')).to.have.property('display', displayType);
+      });
+    });
+
+    it('does not add `display` style when using the default `block`', () => {
+      const wrapper = shallow((
+        <OutsideClickHandler />
+      ));
+      expect(wrapper.props()).not.to.have.property('display');
+    });
+
     it('renders the children it‘s given', () => {
@@ -30,3 +46,3 @@ const wrapper = shallow((
       ));
-      expect(wrapper.children().map(x => ({ type: x.type(), id: x.prop('id') }))).to.eql([
+      expect(wrapper.children().map((x) => ({ type: x.type(), id: x.prop('id') }))).to.eql([
         { type: 'section', id: 'a' },
@@ -167,1 +183,112 @@ { type: 'nav', id: 'b' },
 });
+
+describe('OutsideClickHandler display=inline', () => {
+  describe('basics', () => {
+    it('renders a div', () => {
+      expect(shallow(<OutsideClickHandler display="inline" />).is('div')).to.equal(true);
+    });
+
+    it('renders the children it‘s given', () => {
+      const wrapper = shallow((
+        <OutsideClickHandler display="inline">
+          <section id="a" />
+          <nav id="b" />
+        </OutsideClickHandler>
+      ));
+      expect(wrapper.children().map((x) => ({ type: x.type(), id: x.prop('id') }))).to.eql([
+        { type: 'section', id: 'a' },
+        { type: 'nav', id: 'b' },
+      ]);
+    });
+  });
+
+  describe('#onOutsideClick()', () => {
+    const target = { parentNode: null };
+    const event = { target };
+    beforeEach(() => {
+      target.parentNode = null;
+    });
+
+    it('is a noop if `this.childNode` contains `e.target`', () => {
+      const spy = sinon.spy();
+      const wrapper = shallow(<OutsideClickHandler onOutsideClick={spy} display="inline" />);
+      const instance = wrapper.instance();
+
+      instance.childNode = {};
+      target.parentNode = instance.childNode;
+      expect(contains(instance.childNode, target)).to.equal(true);
+
+      instance.onMouseUp(event);
+
+      expect(spy).to.have.property('callCount', 0);
+    });
+
+    describe('when `this.childNode` does not contain `e.target`', () => {
+      it('calls onOutsideClick', () => {
+        const spy = sinon.spy();
+        const wrapper = shallow(<OutsideClickHandler onOutsideClick={spy} display="inline" />);
+        const instance = wrapper.instance();
+
+        instance.childNode = {};
+        expect(contains(instance.childNode, target)).to.equal(false);
+
+        instance.onMouseUp(event);
+
+        expect(spy).to.have.property('callCount', 1);
+        expect(spy.firstCall.args).to.eql([event]);
+      });
+    });
+  });
+
+  describe.skip('lifecycle methods', () => {
+    wrap()
+    .withOverride(() => document, 'attachEvent', () => sinon.stub())
+    .describe('#componentDidMount', () => {
+      let addEventListenerStub;
+      beforeEach(() => {
+        addEventListenerStub = sinon.stub(document, 'addEventListener');
+      });
+
+      it('document.addEventListener is called with `click` & onOutsideClick', () => {
+        const wrapper = mount(<OutsideClickHandler display="inline" />);
+        const { onOutsideClick } = wrapper.instance();
+        expect(addEventListenerStub.calledWith('click', onOutsideClick, true)).to.equal(true);
+      });
+
+      it('document.attachEvent is called if addEventListener is not available', () => {
+        document.addEventListener = undefined;
+
+        const wrapper = mount(<OutsideClickHandler display="inline" />);
+        const { onOutsideClick } = wrapper.instance();
+        expect(document.attachEvent.calledWith('onclick', onOutsideClick)).to.equal(true);
+      });
+    });
+
+    wrap()
+    .withOverride(() => document, 'detachEvent', () => sinon.stub())
+    .describe('#componentWillUnmount', () => {
+      let removeEventListenerSpy;
+      beforeEach(() => {
+        removeEventListenerSpy = sinon.spy(document, 'removeEventListener');
+      });
+
+      it('document.removeEventListener is called with `click` and props.onOutsideClick', () => {
+        const wrapper = mount(<OutsideClickHandler display="inline" />);
+        const { onOutsideClick } = wrapper.instance();
+
+        wrapper.instance().componentWillUnmount();
+        expect(removeEventListenerSpy.calledWith('click', onOutsideClick, true)).to.equal(true);
+      });
+
+      it('document.detachEvent is called if document.removeEventListener is not available', () => {
+        document.removeEventListener = undefined;
+
+        const wrapper = mount(<OutsideClickHandler display="inline" />);
+        const { onOutsideClick } = wrapper.instance();
+
+        wrapper.instance().componentWillUnmount();
+        expect(document.detachEvent.calledWith('onclick', onOutsideClick)).to.equal(true);
+      });
+    });
+  });
+});

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

37457

increased by16.41%

Lines of code

712

increased by18.86%

Worsened metrics

Dev dependency count

25

increased by4.17%

Dependency changes

• Updatedairbnb-prop-types@^2.15.0