Configured prettier for the project

Author: Andarist

package.json

@@ -32,7 +32,7 @@
     "test:basic": "run-s lint build",
     "test:karma": "karma start test/karma.conf.js --single-run",
     "test:nodom": "mocha test/no-dom-test.js",
-    "postinstall": "node test/setup-pre-commit-hook"
+    "precommit": "npm test && lint-staged"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
@@ -42,15 +42,18 @@
     "babel-preset-es2015": "^6.24.1",
     "chai": "^3.5.0",
     "eslint": "^3.4.0",
+    "husky": "^0.13.3",
     "karma": "^1.4.0",
     "karma-chai": "^0.1.0",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-spec-reporter": "0.0.26",
     "karma-webpack": "^2.0.2",
+    "lint-staged": "^3.4.2",
     "mocha": "^3.2.0",
     "npm-run-all": "^4.0.2",
     "phantomjs-prebuilt": "^2.1.7",
+    "prettier": "^1.3.1",
     "react": "^15.5.x",
     "react-dom": "^15.5.x",
     "react-test-renderer": "^15.5.x",
@@ -69,5 +72,12 @@
     "plugins": [
       "transform-class-properties"
     ]
+  },
+  "lint-staged": {
+    "{src,test}/**/*.js": [
+      "prettier --print-width=120 --single-quote --trailing-comma=all --write",
+      "eslint --fix",
+      "git add"
+    ]
   }
 }

src/generateOutsideCheck.js

@@ -31,7 +31,7 @@ function findHighest(current, componentNode, ignoreClass) {
   // a layered approach, too, but that requires going back to
   // thinking in terms of Dom node nesting, running counter
   // to React's 'you shouldn't care about the DOM' philosophy.
-  while(current.parentNode) {
+  while (current.parentNode) {
     if (isNodeFound(current, componentNode, ignoreClass)) {
       return true;
     }
@@ -51,7 +51,14 @@ function clickedScrollbar(evt) {
  * Generate the event handler that checks whether a clicked DOM node
  * is inside of, or lives outside of, our Component's node tree.
  */
-export default function generateOutsideCheck(componentNode, eventHandler, ignoreClass, excludeScrollbar, preventDefault, stopPropagation) {
+export default function generateOutsideCheck(
+  componentNode,
+  eventHandler,
+  ignoreClass,
+  excludeScrollbar,
+  preventDefault,
+  stopPropagation,
+) {
   return function(evt) {
     if (preventDefault) {
       evt.preventDefault();
@@ -60,7 +67,7 @@ export default function generateOutsideCheck(componentNode, eventHandler, ignore
       evt.stopPropagation();
     }
     const current = evt.target;
-    if((excludeScrollbar && clickedScrollbar(evt)) || (findHighest(current, componentNode, ignoreClass) !== document)) {
+    if ((excludeScrollbar && clickedScrollbar(evt)) || findHighest(current, componentNode, ignoreClass) !== document) {
       return;
     }
     eventHandler(evt);

src/index.js

@@ -17,17 +17,17 @@ const handlers = [];
  */
 export default function onClickOutsideHOC(WrappedComponent, config) {
   return class onClickOutside extends Component {
-    static displayName = `OnClickOutside(${ WrappedComponent.displayName || WrappedComponent.name || 'Component' })`
+    static displayName = `OnClickOutside(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
 
     static defaultProps = {
       eventTypes: ['mousedown', 'touchstart'],
       excludeScrollbar: (config && config.excludeScrollbar) || false,
       outsideClickIgnoreClass: 'ignore-react-onclickoutside',
       preventDefault: false,
       stopPropagation: false,
-    }
+    };
 
-    static getClass = () => WrappedComponent.getClass ? WrappedComponent.getClass() : WrappedComponent
+    static getClass = () => (WrappedComponent.getClass ? WrappedComponent.getClass() : WrappedComponent);
 
     /**
      * Access the WrappedComponent's instance.
@@ -41,7 +41,7 @@ export default function onClickOutsideHOC(WrappedComponent, config) {
     }
 
     // this is given meaning in componentDidMount/componentDidUpdate
-    __outsideClickHandler = null
+    __outsideClickHandler = null;
 
     /**
      * Add click listeners to the current document,
@@ -51,27 +51,31 @@ export default function onClickOutsideHOC(WrappedComponent, config) {
       // If we are in an environment without a DOM such
       // as shallow rendering or snapshots then we exit
       // early to prevent any unhandled errors being thrown.
-      if (typeof document === 'undefined' || !document.createElement){
+      if (typeof document === 'undefined' || !document.createElement) {
         return;
       }
 
       const instance = this.getInstance();
 
-      if(config && typeof config.handleClickOutside === 'function') {
+      if (config && typeof config.handleClickOutside === 'function') {
         this.__clickOutsideHandlerProp = config.handleClickOutside(instance);
-        if(typeof this.__clickOutsideHandlerProp !== 'function') {
-          throw new Error('WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.');
+        if (typeof this.__clickOutsideHandlerProp !== 'function') {
+          throw new Error(
+            'WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.',
+          );
         }
-      } else if(typeof instance.handleClickOutside === 'function') {
+      } else if (typeof instance.handleClickOutside === 'function') {
         if (Component.prototype.isPrototypeOf(instance)) {
           this.__clickOutsideHandlerProp = instance.handleClickOutside.bind(instance);
         } else {
           this.__clickOutsideHandlerProp = instance.handleClickOutside;
         }
-      } else if(typeof instance.props.handleClickOutside === 'function') {
+      } else if (typeof instance.props.handleClickOutside === 'function') {
         this.__clickOutsideHandlerProp = instance.props.handleClickOutside;
       } else {
-        throw new Error('WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.');
+        throw new Error(
+          'WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.',
+        );
       }
 
       // TODO: try to get rid of this, could be done with function ref, might be problematic for SFC though, they do not expose refs
@@ -132,7 +136,7 @@ export default function onClickOutsideHOC(WrappedComponent, config) {
           document.addEventListener(eventName, fn, handlerOptions);
         });
       }
-    }
+    };
 
     /**
      * Can be called to explicitly disable event listening
@@ -147,17 +151,17 @@ export default function onClickOutsideHOC(WrappedComponent, config) {
         }
         events.forEach(eventName => document.removeEventListener(eventName, fn));
       }
-    }
+    };
 
     addOutsideClickHandler() {
-      const fn = this.__outsideClickHandler = generateOutsideCheck(
+      const fn = (this.__outsideClickHandler = generateOutsideCheck(
         findDOMNode(this.getInstance()),
         this.__clickOutsideHandlerProp,
         this.props.outsideClickIgnoreClass,
         this.props.excludeScrollbar,
         this.props.preventDefault,
-        this.props.stopPropagation
-      );
+        this.props.stopPropagation,
+      ));
 
       const pos = registeredComponents.length;
       registeredComponents.push(this);
@@ -178,23 +182,23 @@ export default function onClickOutsideHOC(WrappedComponent, config) {
 
       if (pos > -1) {
         // clean up so we don't leak memory
-        if (handlers[pos]) { handlers.splice(pos, 1); }
+        if (handlers[pos]) {
+          handlers.splice(pos, 1);
+        }
         registeredComponents.splice(pos, 1);
       }
     }
 
-    getRef = ref => this.instanceRef = ref
+    getRef = ref => (this.instanceRef = ref);
 
     /**
      * Pass-through render
      */
     render() {
-      var props = Object.keys(this.props)
-        .filter(prop => prop !== 'excludeScrollbar')
-        .reduce((props, prop) => {
-          props[prop] = this.props[prop];
-          return props;
-        }, {});
+      var props = Object.keys(this.props).filter(prop => prop !== 'excludeScrollbar').reduce((props, prop) => {
+        props[prop] = this.props[prop];
+        return props;
+      }, {});
 
       if (WrappedComponent.prototype.isReactComponent) {
         props.ref = this.getRef;

test/browser/test1.js

@@ -1,5 +1,4 @@
 (function test1(onClickOutside) {
-
   onClickOutside = onClickOutside.default;
 
   /**
@@ -9,7 +8,7 @@
     constructor(props) {
       super(props);
       this.state = {
-        highlight: false
+        highlight: false,
       };
     }
 
@@ -24,11 +23,11 @@
     }
 
     render() {
-      var className = 'concentric' + (this.state.highlight? ' highlight' : '');
+      var className = 'concentric' + (this.state.highlight ? ' highlight' : '');
       return React.createElement('div', {
         className: className,
         children: this.props.children,
-        onClick: e => this.highlight(e)
+        onClick: e => this.highlight(e),
       });
     }
   }
@@ -45,11 +44,11 @@
         children: React.createElement(Nested, {
           id: 3,
           stopPropagation: true,
-          children: React.createElement('div', { className: 'label', children: ['test'] })
-        })
-      })
+          children: React.createElement('div', { className: 'label', children: ['test'] }),
+        }),
+      }),
     });
   };
 
   ReactDOM.render(React.createElement(App), document.getElementById('app1'));
-}(onClickOutside)); /* global onClickOutside */
+})(onClickOutside); /* global onClickOutside */

test/browser/test2.js

@@ -1,5 +1,4 @@
 (function test2(onClickOutside) {
-
   onClickOutside = onClickOutside.default;
 
   class BasePopup extends React.Component {
@@ -20,21 +19,19 @@
     constructor(props) {
       super(props);
       this.state = {
-        hideToolbox: true
+        hideToolbox: true,
       };
     }
     render() {
-      return (
-        React.createElement('div', {
-          children: [
-            React.createElement('button', {
-              onClick: e => this.state.hideToolbox && this.show(e),
-              children: 'show text'
-            }),
-            this.state.hideToolbox ? null : React.createElement(Popup, {hide: e => this.hide(e)})
-          ]
-        })
-      );
+      return React.createElement('div', {
+        children: [
+          React.createElement('button', {
+            onClick: e => this.state.hideToolbox && this.show(e),
+            children: 'show text',
+          }),
+          this.state.hideToolbox ? null : React.createElement(Popup, { hide: e => this.hide(e) }),
+        ],
+      });
     }
     show() {
       console.log('test2 - show');
@@ -47,5 +44,4 @@
   }
 
   ReactDOM.render(React.createElement(App), document.getElementById('app2'));
-
-}(onClickOutside)); /* global onClickOutside */
+})(onClickOutside); /* global onClickOutside */

test/karma.conf.js

@@ -1,35 +1,34 @@
 module.exports = function(config) {
   config.set({
-
-    files: [
-      'test.js'
-    ],
+    files: ['test.js'],
 
     frameworks: ['mocha', 'chai'],
 
     preprocessors: {
-      'test.js': ['webpack']
+      'test.js': ['webpack'],
     },
 
     reporters: ['spec'],
 
     webpack: {
       devtool: 'inline-source-map',
       module: {
-        loaders: [{
-          test: /.js$/,
-          loader: 'babel',
-          query: {
-            presets: [['es2015', { 'loose': true }]],
-            plugins: ['transform-class-properties']
-          }
-        }]
-      }
+        loaders: [
+          {
+            test: /.js$/,
+            loader: 'babel',
+            query: {
+              presets: [['es2015', { loose: true }]],
+              plugins: ['transform-class-properties'],
+            },
+          },
+        ],
+      },
     },
 
     webpackMiddleware: {
       noInfo: true,
-      stats: { errorDetails: true }
+      stats: { errorDetails: true },
     },
 
     plugins: [
@@ -40,7 +39,6 @@ module.exports = function(config) {
       require('karma-spec-reporter'),
     ],
 
-    browsers: ['PhantomJS']
-
+    browsers: ['PhantomJS'],
   });
 };

test/no-dom-test.js

@@ -4,9 +4,7 @@ var renderer = require('react-test-renderer');
 var requireHijack = require('require-hijack');
 
 describe('onclickoutside hoc with no DOM', function() {
-
   class Component extends React.Component {
-
     handleClickOutside() {}
 
     render() {
@@ -19,7 +17,7 @@ describe('onclickoutside hoc with no DOM', function() {
   it('should not throw an error if rendered in an environment with no DOM', function() {
     // Needed until React 15.4 lands due to https://github.com/facebook/react/issues/7386.
     requireHijack.replace('react-dom').with({
-      render: function(){}
+      render: function() {},
     });
 
     // Must import this after we mock out ReactDOM to prevent the inject error.
@@ -31,5 +29,4 @@ describe('onclickoutside hoc with no DOM', function() {
     var renderInstance = renderer.create(element);
     assert(renderInstance.toJSON().type === 'div', 'wrapped component renders a div');
   });
-
 });