chore: add prettier and format code

Author: janczizikow

.eslintrc

@@ -1,15 +1,12 @@
 {
   "parser": "babel-eslint",
-  "extends": [
-    "eslint-config-airbnb",
-  ],
+  "extends": ["eslint-config-airbnb", "prettier", "prettier/react"],
   "rules": {
-    "indent": [2, 2, {"SwitchCase": 1}],
+    "indent": [2, 2, { "SwitchCase": 1 }],
     "no-console": [0],
     "func-names": [0],
     "semi": [2, "never"],
     "no-extra-semi": [2],
-    "space-before-function-paren": [2, "always"],
     "no-else-return": [0],
     "space-infix-ops": [0],
     "react/prefer-es6-class": [0],
@@ -18,10 +15,10 @@
     "react/no-unused-prop-types": [0],
     "react/jsx-filename-extension": [0],
     "react/no-string-refs": [0],
-    "import/extensions": [0],
+    "import/extensions": [0]
   },
   "env": {
     "browser": true,
-    "node": true,
-  },
+    "node": true
+  }
 }

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "arrowParens": "avoid",
+  "semi": false,
+  "singleQuote": true
+}

package.json

@@ -24,12 +24,14 @@
     "eslint": "^3.8.0",
     "eslint-config-airbnb": "^12.0.0",
     "eslint-config-airbnb-base": "^9.0.0",
+    "eslint-config-prettier": "^6.13.0",
     "eslint-plugin-import": "^2.0.1",
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.4.1",
     "mocha": "^3.1.2",
     "mocha-unfunk-reporter": "^0.4.0",
-    "pre-commit": "^1.0.5"
+    "pre-commit": "^1.0.5",
+    "prettier": "2.1.2"
   },
   "directories": {
     "example": "examples"
@@ -57,6 +59,7 @@
     "watch": "./node_modules/.bin/webpack-dev-server --hot",
     "publish-patch": "npm run build && npm version patch && npm publish; git push; git push --tags",
     "lint": "eslint --ignore-path .gitignore src/*",
-    "lint:fix": "eslint --ignore-path .gitignore . --fix"
+    "lint:fix": "eslint --ignore-path .gitignore . --fix",
+    "format": "prettier --config .prettierrc --write 'src/**/*.{js,jsx}'"
   }
 }

src/index.js

@@ -24,7 +24,7 @@ export default class Headroom extends Component {
     style: PropTypes.object,
     calcHeightOnResize: PropTypes.bool,
     tag: PropTypes.string,
-  };
+  }
 
   static defaultProps = {
     parent: () => window,
@@ -39,9 +39,9 @@ export default class Headroom extends Component {
     pinStart: 0,
     calcHeightOnResize: true,
     tag: 'div',
-  };
+  }
 
-  static getDerivedStateFromProps (props, state) {
+  static getDerivedStateFromProps(props, state) {
     if (props.disable && state.state !== 'unfixed') {
       return {
         translateY: 0,
@@ -54,7 +54,7 @@ export default class Headroom extends Component {
     return null
   }
 
-  constructor (props) {
+  constructor(props) {
     super(props)
     // Class variables.
     this.currentScrollY = 0
@@ -69,7 +69,7 @@ export default class Headroom extends Component {
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.setHeightOffset()
 
     this.eventListenerOptions = supportsPassiveEvents()
@@ -97,14 +97,14 @@ export default class Headroom extends Component {
     }
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     return (
       !shallowequal(this.props, nextProps) ||
       !shallowequal(this.state, nextState)
     )
   }
 
-  componentDidUpdate (prevProps, prevState) {
+  componentDidUpdate(prevProps, prevState) {
     // If children have changed, remeasure height.
     if (prevProps.children !== this.props.children) {
       this.setHeightOffset()
@@ -151,7 +151,7 @@ export default class Headroom extends Component {
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     if (this.props.parent()) {
       this.props
         .parent()
@@ -190,55 +190,55 @@ export default class Headroom extends Component {
     } else if (this.props.parent().scrollTop !== undefined) {
       return this.props.parent().scrollTop
     } else {
-      return (document.documentElement || document.body.parentNode || document.body).scrollTop
+      return (
+        document.documentElement ||
+        document.body.parentNode ||
+        document.body
+      ).scrollTop
     }
   }
 
-  getViewportHeight = () => (
-    window.innerHeight
-      || document.documentElement.clientHeight
-      || document.body.clientHeight
-  )
+  getViewportHeight = () =>
+    window.innerHeight ||
+    document.documentElement.clientHeight ||
+    document.body.clientHeight
 
   getDocumentHeight = () => {
     const body = document.body
     const documentElement = document.documentElement
 
     return Math.max(
-      body.scrollHeight, documentElement.scrollHeight,
-      body.offsetHeight, documentElement.offsetHeight,
-      body.clientHeight, documentElement.clientHeight
+      body.scrollHeight,
+      documentElement.scrollHeight,
+      body.offsetHeight,
+      documentElement.offsetHeight,
+      body.clientHeight,
+      documentElement.clientHeight
     )
   }
 
-  getElementPhysicalHeight = elm => Math.max(
-    elm.offsetHeight,
-    elm.clientHeight
-  )
+  getElementPhysicalHeight = elm => Math.max(elm.offsetHeight, elm.clientHeight)
 
-  getElementHeight = elm => Math.max(
-    elm.scrollHeight,
-    elm.offsetHeight,
-    elm.clientHeight,
-  )
+  getElementHeight = elm =>
+    Math.max(elm.scrollHeight, elm.offsetHeight, elm.clientHeight)
 
   getScrollerPhysicalHeight = () => {
     const parent = this.props.parent()
 
-    return (parent === window || parent === document.body)
+    return parent === window || parent === document.body
       ? this.getViewportHeight()
       : this.getElementPhysicalHeight(parent)
   }
 
   getScrollerHeight = () => {
     const parent = this.props.parent()
 
-    return (parent === window || parent === document.body)
+    return parent === window || parent === document.body
       ? this.getDocumentHeight()
       : this.getElementHeight(parent)
   }
 
-  isOutOfBound = (currentScrollY) => {
+  isOutOfBound = currentScrollY => {
     const pastTop = currentScrollY < 0
 
     const scrollerPhysicalHeight = this.getScrollerPhysicalHeight()
@@ -333,7 +333,7 @@ export default class Headroom extends Component {
     this.scrollTicking = false
   }
 
-  render () {
+  render() {
     const { className: userClassName, tag: Tag, ...divProps } = this.props
     delete divProps.onUnpin
     delete divProps.onPin
@@ -350,7 +350,10 @@ export default class Headroom extends Component {
     const { style, wrapperStyle, ...rest } = divProps
 
     let innerStyle = {
-      position: this.props.disable || this.state.state === 'unfixed' ? 'relative' : 'fixed',
+      position:
+        this.props.disable || this.state.state === 'unfixed'
+          ? 'relative'
+          : 'fixed',
       top: 0,
       left: 0,
       right: 0,

src/shouldUpdate.js

@@ -21,7 +21,7 @@ export default function (
       scrollDirection,
       distanceScrolled,
     }
-  // We're unfixed and headed down. Carry on.
+    // We're unfixed and headed down. Carry on.
   } else if (
     currentScrollY <= state.height &&
     scrollDirection === 'down' &&
@@ -33,7 +33,7 @@ export default function (
       distanceScrolled,
     }
   } else if (
-    currentScrollY > (state.height + props.pinStart) &&
+    currentScrollY > state.height + props.pinStart &&
     scrollDirection === 'down' &&
     state.state === 'unfixed'
   ) {
@@ -42,19 +42,20 @@ export default function (
       scrollDirection,
       distanceScrolled,
     }
-  // We're past the header and scrolling down.
-  // We transition to "unpinned" if necessary.
+    // We're past the header and scrolling down.
+    // We transition to "unpinned" if necessary.
   } else if (
     scrollDirection === 'down' &&
     ['pinned', 'unfixed'].indexOf(state.state) >= 0 &&
-    currentScrollY > (state.height + props.pinStart) && distanceScrolled > props.downTolerance
+    currentScrollY > state.height + props.pinStart &&
+    distanceScrolled > props.downTolerance
   ) {
     return {
       action: 'unpin',
       scrollDirection,
       distanceScrolled,
     }
-  // We're scrolling up, we transition to "pinned"
+    // We're scrolling up, we transition to "pinned"
   } else if (
     scrollDirection === 'up' &&
     distanceScrolled > props.upTolerance &&
@@ -65,8 +66,8 @@ export default function (
       scrollDirection,
       distanceScrolled,
     }
-  // We're scrolling up, and inside the header.
-  // We transition to pin regardless of upTolerance
+    // We're scrolling up, and inside the header.
+    // We transition to pin regardless of upTolerance
   } else if (
     scrollDirection === 'up' &&
     currentScrollY <= state.height &&

src/supportsPassiveEvents.js

@@ -3,12 +3,12 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners
  * @returns Boolean
  */
-export default function supportsPassiveEvents () {
+export default function supportsPassiveEvents() {
   let passiveSupported = false
 
   try {
     const options = {
-      get passive () {
+      get passive() {
         // This function will be called when the browser
         // attempts to access the passive property.
         passiveSupported = true

test/.eslintrc

@@ -1,9 +1,9 @@
 {
-  "extends" : "../.eslintrc",
-  "env"     : {
-    "mocha" : true
+  "extends": "../.eslintrc",
+  "env": {
+    "mocha": true
   },
-  "globals" : {
-    "describe": true,
+  "globals": {
+    "describe": true
   }
 }