react-sidebar - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

dist-modules/sidebar.js

@@ -19,6 +19,10 @@ 'use strict';
 
-var _reactAddons = require('react/addons');
+var _react = require('react');
 
-var _reactAddons2 = _interopRequireDefault(_reactAddons);
+var _react2 = _interopRequireDefault(_react);
 
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
 var CANCEL_DISTANCE_ON_SCROLL = 20;
@@ -43,3 +47,2 @@
     willChange: 'transform',
-    backgroundColor: 'white',
     overflowY: 'auto'
@@ -107,6 +110,12 @@ },
   _createClass(Sidebar, [{
-    key: 'overlayClicked',
-    value: function overlayClicked() {
-      if (this.props.open) {
-        this.props.onSetOpen(false);
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.saveSidebarWidth();
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      // filter out the updates when we're touching
+      if (!this.isTouching()) {
+        this.saveSidebarWidth();
       }
@@ -133,8 +142,8 @@ }
       if (this.isTouching()) {
-        for (var i = 0; i < ev.targetTouches.length; i++) {
+        for (var ind = 0; ind < ev.targetTouches.length; ind++) {
           // we only care about the finger that we are tracking
-          if (ev.targetTouches[i].identifier == this.state.touchIdentifier) {
+          if (ev.targetTouches[ind].identifier === this.state.touchIdentifier) {
             this.setState({
-              touchCurrentX: ev.targetTouches[i].clientX,
-              touchCurrentY: ev.targetTouches[i].clientY
+              touchCurrentX: ev.targetTouches[ind].clientX,
+              touchCurrentY: ev.targetTouches[ind].clientY
             });
@@ -148,3 +157,3 @@ break;
     key: 'onTouchEnd',
-    value: function onTouchEnd(ev) {
+    value: function onTouchEnd() {
       if (this.isTouching()) {
@@ -173,3 +182,3 @@ // trigger a change to open if sidebar has been dragged beyond dragToggleDistance
     key: 'onScroll',
-    value: function onScroll(ev) {
+    value: function onScroll() {
       if (this.isTouching() && this.inCancelDistanceOnScroll()) {
@@ -185,30 +194,3 @@ this.setState({
     }
-  }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.saveSidebarWidth();
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevState, prevProps) {
-      // filter out the updates when we're touching
-      if (!this.isTouching()) {
-        this.saveSidebarWidth();
-      }
-    }
-  }, {
-    key: 'saveSidebarWidth',
-    value: function saveSidebarWidth() {
-      var width = _reactAddons2['default'].findDOMNode(this.refs.sidebar).offsetWidth;
 
-      if (width != this.state.sidebarWidth) {
-        this.setState({ sidebarWidth: width });
-      }
-    }
-  }, {
-    key: 'isTouching',
-    value: function isTouching() {
-      return this.state.touchIdentifier !== null;
-    }
-
     // True if the on going gesture X distance is less than the cancel distance
@@ -227,3 +209,24 @@ }, {
     }
+  }, {
+    key: 'isTouching',
+    value: function isTouching() {
+      return this.state.touchIdentifier !== null;
+    }
+  }, {
+    key: 'overlayClicked',
+    value: function overlayClicked() {
+      if (this.props.open) {
+        this.props.onSetOpen(false);
+      }
+    }
+  }, {
+    key: 'saveSidebarWidth',
+    value: function saveSidebarWidth() {
+      var width = _reactDom2['default'].findDOMNode(this.refs.sidebar).offsetWidth;
 
+      if (width !== this.state.sidebarWidth) {
+        this.setState({ sidebarWidth: width });
+      }
+    }
+
     // calculate the sidebarWidth based on current touch info
@@ -237,24 +240,18 @@ }, {
       if (this.props.pullRight) {
-
         if (this.props.open && window.innerWidth - this.state.touchStartX < this.state.sidebarWidth) {
           if (this.state.touchCurrentX > this.state.touchStartX) {
             return this.state.sidebarWidth + this.state.touchStartX - this.state.touchCurrentX;
-          } else {
-            return this.state.sidebarWidth;
           }
-        } else {
-          return Math.min(window.innerWidth - this.state.touchCurrentX, this.state.sidebarWidth);
+          return this.state.sidebarWidth;
         }
-      } else {
+        return Math.min(window.innerWidth - this.state.touchCurrentX, this.state.sidebarWidth);
+      }
 
-        if (this.props.open && this.state.touchStartX < this.state.sidebarWidth) {
-          if (this.state.touchCurrentX > this.state.touchStartX) {
-            return this.state.sidebarWidth;
-          } else {
-            return this.state.sidebarWidth - this.state.touchStartX + this.state.touchCurrentX;
-          }
-        } else {
-          return Math.min(this.state.touchCurrentX, this.state.sidebarWidth);
+      if (this.props.open && this.state.touchStartX < this.state.sidebarWidth) {
+        if (this.state.touchCurrentX > this.state.touchStartX) {
+          return this.state.sidebarWidth;
         }
+        return this.state.sidebarWidth - this.state.touchStartX + this.state.touchCurrentX;
       }
+      return Math.min(this.state.touchCurrentX, this.state.sidebarWidth);
     }
@@ -307,3 +304,2 @@ }, {
       } else if (this.props.docked) {
-
         // show sidebar
@@ -322,3 +318,2 @@ if (this.state.sidebarWidth !== 0) {
       } else if (this.props.open) {
-
         // slide open sidebar
@@ -358,3 +353,3 @@ sidebarStyle.transform = 'translateX(0%)';
 
-          dragHandle = _reactAddons2['default'].createElement('div', { style: dragHandleStyle,
+          dragHandle = _react2['default'].createElement('div', { style: dragHandleStyle,
             onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove,
@@ -365,6 +360,6 @@ onTouchEnd: this.onTouchEnd, onTouchCancel: this.onTouchEnd });
 
-      return _reactAddons2['default'].createElement(
+      return _react2['default'].createElement(
         'div',
         rootProps,
-        _reactAddons2['default'].createElement(
+        _react2['default'].createElement(
           'div',
@@ -374,5 +369,5 @@ { style: sidebarStyle, ref: 'sidebar' },
         ),
-        _reactAddons2['default'].createElement('div', { style: overlayStyle,
+        _react2['default'].createElement('div', { style: overlayStyle,
           onClick: this.overlayClicked, onTouchTap: this.overlayClicked }),
-        _reactAddons2['default'].createElement(
+        _react2['default'].createElement(
           'div',
@@ -388,39 +383,37 @@ { style: contentStyle },
   return Sidebar;
-})(_reactAddons2['default'].Component);
+})(_react2['default'].Component);
 
-;
-
 Sidebar.propTypes = {
   // main content to render
-  children: _reactAddons2['default'].PropTypes.node.isRequired,
+  children: _react2['default'].PropTypes.node.isRequired,
 
   // sidebar content to render
-  sidebar: _reactAddons2['default'].PropTypes.node.isRequired,
+  sidebar: _react2['default'].PropTypes.node.isRequired,
 
   // boolean if sidebar should be docked
-  docked: _reactAddons2['default'].PropTypes.bool,
+  docked: _react2['default'].PropTypes.bool,
 
   // boolean if sidebar should slide open
-  open: _reactAddons2['default'].PropTypes.bool,
+  open: _react2['default'].PropTypes.bool,
 
   // boolean if transitions should be disabled
-  transitions: _reactAddons2['default'].PropTypes.bool,
+  transitions: _react2['default'].PropTypes.bool,
 
   // boolean if touch gestures are enabled
-  touch: _reactAddons2['default'].PropTypes.bool,
+  touch: _react2['default'].PropTypes.bool,
 
   // max distance from the edge we can start touching
-  touchHandleWidth: _reactAddons2['default'].PropTypes.number,
+  touchHandleWidth: _react2['default'].PropTypes.number,
 
   // Place the sidebar on the right
-  pullRight: _reactAddons2['default'].PropTypes.bool,
+  pullRight: _react2['default'].PropTypes.bool,
 
   // Enable/Disable sidebar shadow
-  shadow: _reactAddons2['default'].PropTypes.bool,
+  shadow: _react2['default'].PropTypes.bool,
 
   // distance we have to drag the sidebar to toggle open state
-  dragToggleDistance: _reactAddons2['default'].PropTypes.number,
+  dragToggleDistance: _react2['default'].PropTypes.number,
 
   // callback called when the overlay is clicked
-  onSetOpen: _reactAddons2['default'].PropTypes.func
+  onSetOpen: _react2['default'].PropTypes.func
 };
@@ -427,0 +420,0 @@

example/src/index.js

 import React from 'react';
+import ReactDOM from 'react-dom';
 
@@ -13,5 +14,8 @@ import Sidebar from '../../src';
   },
+  content: {
+    padding: '16px',
+  },
 };
 
-var App = React.createClass({
+const App = React.createClass({
   getInitialState() {
@@ -40,4 +44,4 @@ return {
   renderPropCheckbox(prop) {
-    let toggleMethod = (ev) => {
-      let newState = {};
+    const toggleMethod = (ev) => {
+      const newState = {};
       newState[prop] = ev.target.checked;
@@ -49,3 +53,3 @@ this.setState(newState);
       <p key={prop}>
-        <input type='checkbox' onChange={toggleMethod} checked={this.state[prop]} id={prop} />
+        <input type="checkbox" onChange={toggleMethod} checked={this.state[prop]} id={prop} />
         <label htmlFor={prop}> {prop}</label>
@@ -56,5 +60,5 @@ </p>);
   renderPropNumber(prop) {
-    let setMethod = (ev) => {
-      let newState = {};
-      newState[prop] = parseInt(ev.target.value);
+    const setMethod = (ev) => {
+      const newState = {};
+      newState[prop] = parseInt(ev.target.value, 10);
       this.setState(newState);
@@ -65,3 +69,3 @@ };
       <p key={prop}>
-         {prop} <input type='number' onChange={setMethod} value={this.state[prop]} />
+         {prop} <input type="number" onChange={setMethod} value={this.state[prop]} />
       </p>);
@@ -71,12 +75,12 @@ },
   render() {
-    let sidebar = <SidebarContent />;
+    const sidebar = <SidebarContent />;
 
-    let contentHeader = (
+    const contentHeader = (
       <span>
         {!this.state.docked &&
-         <a onClick={this.menuButtonClick} href='#' style={styles.contentHeaderMenuLink}>=</a>}
+         <a onClick={this.menuButtonClick} href="#" style={styles.contentHeaderMenuLink}>=</a>}
         <span> React Sidebar</span>
       </span>);
 
-    let sidebarProps = {
+    const sidebarProps = {
       sidebar: sidebar,
@@ -97,22 +101,24 @@ docked: this.state.docked,
         <MaterialTitlePanel title={contentHeader}>
-          <p>React Sidebar is a sidebar component for React. It offers the following features:</p>
-          <ul>
-            <li>Have the sidebar slide over main content</li>
-            <li>Dock the sidebar next to the content</li>
-            <li>Touch enabled: swipe to open and close the sidebar</li>
-            <li>Easy to combine with media queries for auto-docking (<a href='responsive_example.html'>see example</a>)</li>
-            <li>Sidebar and content passed in as PORCs (Plain Old React Components)</li>
-            <li><a href='https://github.com/balloob/react-sidebar'>Source on GitHub</a> (MIT license)</li>
-            <li>Only dependency is React</li>
-          </ul>
-          <p><a href='https://github.com/balloob/react-sidebar#installation'>Instructions how to get started.</a></p>
-          <p><b>Current rendered sidebar properties:</b></p>
-          {['open', 'docked', 'transitions', 'touch', 'shadow', 'pullRight'].map(this.renderPropCheckbox)}
-          {['touchHandleWidth', 'dragToggleDistance'].map(this.renderPropNumber)}
+          <div style={styles.content}>
+            <p>React Sidebar is a sidebar component for React. It offers the following features:</p>
+            <ul>
+              <li>Have the sidebar slide over main content</li>
+              <li>Dock the sidebar next to the content</li>
+              <li>Touch enabled: swipe to open and close the sidebar</li>
+              <li>Easy to combine with media queries for auto-docking (<a href="responsive_example.html">see example</a>)</li>
+              <li>Sidebar and content passed in as PORCs (Plain Old React Components)</li>
+              <li><a href="https://github.com/balloob/react-sidebar">Source on GitHub</a> (MIT license)</li>
+              <li>Only dependency is React</li>
+            </ul>
+            <p><a href="https://github.com/balloob/react-sidebar#installation">Instructions how to get started.</a></p>
+            <p><b>Current rendered sidebar properties:</b></p>
+            {['open', 'docked', 'transitions', 'touch', 'shadow', 'pullRight'].map(this.renderPropCheckbox)}
+            {['touchHandleWidth', 'dragToggleDistance'].map(this.renderPropNumber)}
+          </div>
         </MaterialTitlePanel>
       </Sidebar>
     );
-  }
+  },
 });
 
-React.render(<App />, document.getElementById('example'))
+ReactDOM.render(<App />, document.getElementById('example'));

example/src/material_title_panel.js

@@ -1,9 +0,7 @@
-import React from 'react/addons';
+import React from 'react';
 
-const update = React.addons.update;
-
 const styles = {
   root: {
-   fontFamily: '"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif',
-   fontWeight: 300,
+    fontFamily: '"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif',
+    fontWeight: 300,
   },
@@ -16,22 +14,15 @@ header: {
   },
-  content: {
-    padding: '16px',
-  },
 };
 
-class MaterialTitlePanel extends React.Component {
-  render() {
-    let rootStyle = this.props.style ?
-                      update(styles.root, {$merge: this.props.style}) :
-                      styles.root;
+const MaterialTitlePanel = (props) => {
+  const rootStyle = props.style ? {...styles.root, ...props.style} : styles.root;
 
-    return (
-      <div style={rootStyle}>
-        <div style={styles.header}>{this.props.title}</div>
-        <div style={styles.content}>{this.props.children}</div>
-      </div>
-    );
-  }
-}
+  return (
+    <div style={rootStyle}>
+      <div style={styles.header}>{props.title}</div>
+      {props.children}
+    </div>
+  );
+};
 
 export default MaterialTitlePanel;

example/src/responsive_example.js

 import React from 'react';
+import ReactDOM from 'react-dom';
 import Sidebar from '../../src';
@@ -12,24 +13,14 @@ import MaterialTitlePanel from './material_title_panel';
   },
+  content: {
+    padding: '16px',
+  },
 };
 
-var App = React.createClass({
+const App = React.createClass({
   getInitialState() {
     return {docked: false, open: false};
-    this.mediaQueryChanged = this.mediaQueryChanged.bind(this);
   },
 
-  toggleOpen(ev) {
-    this.setState({open: !this.state.open});
-
-    if (ev) {
-      ev.preventDefault();
-    }
-  },
-
-  onSetOpen(open) {
-    this.setState({open: open});
-  },
-
-  componentDidMount() {
-    let mql = window.matchMedia(`(min-width: 800px)`);
+  componentWillMount() {
+    const mql = window.matchMedia(`(min-width: 800px)`);
     mql.addListener(this.mediaQueryChanged);
@@ -43,2 +34,6 @@ this.setState({mql: mql, docked: mql.matches});
 
+  onSetOpen(open) {
+    this.setState({open: open});
+  },
+
   mediaQueryChanged() {
@@ -48,13 +43,21 @@ this.setState({docked: this.state.mql.matches});
 
+  toggleOpen(ev) {
+    this.setState({open: !this.state.open});
+
+    if (ev) {
+      ev.preventDefault();
+    }
+  },
+
   render() {
-    let sidebar = <SidebarContent />;
+    const sidebar = <SidebarContent />;
 
-    let contentHeader = (
+    const contentHeader = (
       <span>
         {!this.state.docked &&
-         <a onClick={this.toggleOpen} href='#' style={styles.contentHeaderMenuLink}>=</a>}
+         <a onClick={this.toggleOpen} href="#" style={styles.contentHeaderMenuLink}>=</a>}
         <span> Responsive React Sidebar</span>
       </span>);
 
-    let sidebarProps = {
+    const sidebarProps = {
       sidebar: sidebar,
@@ -69,19 +72,21 @@ docked: this.state.docked,
         <MaterialTitlePanel title={contentHeader}>
-          <p>
-            This example will automatically dock the sidebar if the page
-            width is above 800px (which is currently {''+this.state.docked}).
-          </p>
-          <p>
-            This functionality should live in the component that renders the sidebar.
-            This way you're able to modify the sidebar and main content based on the
-            responsiveness data. For example, the menu button in the header of the
-            content is now {this.state.docked ? 'hidden' : 'shown'} because the sidebar
-            is {!this.state.docked && 'not'} visible.
-          </p>
+          <div style={styles.content}>
+            <p>
+              This example will automatically dock the sidebar if the page
+              width is above 800px (which is currently {'' + this.state.docked}).
+            </p>
+            <p>
+              This functionality should live in the component that renders the sidebar.
+              This way you're able to modify the sidebar and main content based on the
+              responsiveness data. For example, the menu button in the header of the
+              content is now {this.state.docked ? 'hidden' : 'shown'} because the sidebar
+              is {!this.state.docked && 'not'} visible.
+            </p>
+          </div>
         </MaterialTitlePanel>
       </Sidebar>
     );
-  }
+  },
 });
 
-React.render(<App />, document.getElementById('example'))
+ReactDOM.render(<App />, document.getElementById('example'));

example/src/sidebar_content.js

@@ -1,9 +0,8 @@
-import React from 'react/addons';
+import React from 'react';
 import MaterialTitlePanel from './material_title_panel';
 
-const update = React.addons.update;
-
 const styles = {
   sidebar: {
     width: 256,
+    height: '100%',
   },
@@ -21,29 +20,31 @@ sidebarLink: {
   },
+  content: {
+    padding: '16px',
+    height: '100%',
+    backgroundColor: 'white',
+  },
 };
 
-var SidebarContent = React.createClass({
-  render() {
-    let style = styles.sidebar;
+const SidebarContent = (props) => {
+  const style = props.style ? {...styles.sidebar, ...props.style} : styles.sidebar;
 
-    if (this.props.style) {
-      style = update(style, {$merge: this.props.style});
-    }
+  const links = [];
 
-    let links = [];
+  for (let ind = 0; ind < 10; ind++) {
+    links.push(
+      <a key={ind} href="#" style={styles.sidebarLink}>Mock menu item {ind}</a>);
+  }
 
-    for(let i=0; i < 10; i++) {
-      links.push(
-        <a key={i} href='#' style={styles.sidebarLink}>Mock menu item {i}</a>);
-    }
-
-    return (
-      <MaterialTitlePanel title="Menu" style={style}>
-        <a href='index.html' style={styles.sidebarLink}>Home</a>
-        <a href='responsive_example.html' style={styles.sidebarLink}>Responsive Example</a>
+  return (
+    <MaterialTitlePanel title="Menu" style={style}>
+      <div style={styles.content}>
+        <a href="index.html" style={styles.sidebarLink}>Home</a>
+        <a href="responsive_example.html" style={styles.sidebarLink}>Responsive Example</a>
         <div style={styles.divider} />
         {links}
-      </MaterialTitlePanel>);
-  },
-});
+      </div>
+    </MaterialTitlePanel>
+  );
+};
 
 export default SidebarContent;

package.json

 {
   "name": "react-sidebar",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "author": "Paulus Schoutsen <[e-mail]>",
@@ -9,3 +9,4 @@ "description": "A sidebar component for React.",
     "build": "babel src --out-dir dist-modules && webpack",
-    "dev": "webpack --watch"
+    "dev": "webpack --watch",
+    "lint": "eslint src example/src"
   },
@@ -23,10 +24,19 @@ "keywords": [
   "license": "MIT",
+  "peerDependencies": {
+    "react": ">=0.14.0",
+    "react-dom": ">=0.14.0"
+  },
   "devDependencies": {
     "babel": "^5.8.23",
     "babel-core": "^5.8.25",
+    "babel-eslint": "^4.1.3",
     "babel-loader": "^5.3.2",
-    "react": "^0.13.3",
+    "eslint": "^1.6.0",
+    "eslint-config-airbnb": "^0.1.0",
+    "eslint-plugin-react": "^3.5.1",
+    "react": ">=0.14.0",
+    "react-dom": ">=0.14.0",
     "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.11.0"
+    "webpack-dev-server": "^1.12.0"
   }
 }

README.md

@@ -1,6 +0,9 @@
-React Sidebar [![npm version](https://badge.fury.io/js/react-sidebar.svg)](http://badge.fury.io/js/react-sidebar)
+React Sidebar 2.0 [![npm version](https://badge.fury.io/js/react-sidebar.svg)](http://badge.fury.io/js/react-sidebar) [![Build Status](https://travis-ci.org/balloob/react-sidebar.svg)](https://travis-ci.org/balloob/react-sidebar)
 =============
 
-React Sidebar is a sidebar component for React. It offers the following features:
+#### [If you're on React 0.13, use React Sidebar 1.1.0.](https://github.com/balloob/react-sidebar/tree/63b5f19527afd50c9cae4705a5766f8f845a795d)
+#### Breaking change since v1.1.0 is that the sidebar no longer has a white background.
 
+React Sidebar is a sidebar component for React 0.14+. It offers the following features:
+
   - Have the sidebar slide over main content
@@ -7,0 +10,0 @@ - Dock the sidebar on the left of the content

src/index.js

@@ -1,4 +0,3 @@
-
 import Sidebar from './sidebar';
 
 export default Sidebar;

src/sidebar.js

@@ -1,2 +0,3 @@
-import React from 'react/addons';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
@@ -22,3 +23,2 @@ const CANCEL_DISTANCE_ON_SCROLL = 20;
     willChange: 'transform',
-    backgroundColor: 'white',
     overflowY: 'auto',
@@ -81,5 +81,10 @@ },
 
-  overlayClicked() {
-    if (this.props.open) {
-      this.props.onSetOpen(false);
+  componentDidMount() {
+    this.saveSidebarWidth();
+  }
+
+  componentDidUpdate() {
+    // filter out the updates when we're touching
+    if (!this.isTouching()) {
+      this.saveSidebarWidth();
     }
@@ -91,3 +96,3 @@ }
     if (!this.isTouching()) {
-      let touch = ev.targetTouches[0];
+      const touch = ev.targetTouches[0];
       this.setState({
@@ -105,8 +110,8 @@ touchIdentifier: touch.identifier,
     if (this.isTouching()) {
-      for (let i = 0; i < ev.targetTouches.length; i++) {
+      for (let ind = 0; ind < ev.targetTouches.length; ind++) {
         // we only care about the finger that we are tracking
-        if (ev.targetTouches[i].identifier == this.state.touchIdentifier) {
+        if (ev.targetTouches[ind].identifier === this.state.touchIdentifier) {
           this.setState({
-            touchCurrentX: ev.targetTouches[i].clientX,
-            touchCurrentY: ev.targetTouches[i].clientY,
+            touchCurrentX: ev.targetTouches[ind].clientX,
+            touchCurrentY: ev.targetTouches[ind].clientY,
           });
@@ -119,6 +124,6 @@ break;
 
-  onTouchEnd(ev) {
+  onTouchEnd() {
     if (this.isTouching()) {
       // trigger a change to open if sidebar has been dragged beyond dragToggleDistance
-      let touchWidth = this.touchSidebarWidth();
+      const touchWidth = this.touchSidebarWidth();
 
@@ -143,3 +148,3 @@ if (this.props.open && touchWidth < this.state.sidebarWidth - this.props.dragToggleDistance ||
   // cancelling the ongoing gesture if it did not move horizontally much.
-  onScroll(ev) {
+  onScroll() {
     if (this.isTouching() && this.inCancelDistanceOnScroll()) {
@@ -156,25 +161,2 @@ this.setState({
 
-  componentDidMount() {
-    this.saveSidebarWidth();
-  }
-
-  componentDidUpdate(prevState, prevProps) {
-    // filter out the updates when we're touching
-    if (!this.isTouching()) {
-      this.saveSidebarWidth();
-    }
-  }
-
-  saveSidebarWidth() {
-    let width = React.findDOMNode(this.refs.sidebar).offsetWidth;
-
-    if (width != this.state.sidebarWidth) {
-      this.setState({sidebarWidth: width});
-    }
-  }
-
-  isTouching() {
-    return this.state.touchIdentifier !== null;
-  }
-
   // True if the on going gesture X distance is less than the cancel distance
@@ -194,2 +176,20 @@ inCancelDistanceOnScroll() {
 
+  isTouching() {
+    return this.state.touchIdentifier !== null;
+  }
+
+  overlayClicked() {
+    if (this.props.open) {
+      this.props.onSetOpen(false);
+    }
+  }
+
+  saveSidebarWidth() {
+    const width = ReactDOM.findDOMNode(this.refs.sidebar).offsetWidth;
+
+    if (width !== this.state.sidebarWidth) {
+      this.setState({sidebarWidth: width});
+    }
+  }
+
   // calculate the sidebarWidth based on current touch info
@@ -201,26 +201,18 @@ touchSidebarWidth() {
     if (this.props.pullRight) {
-
       if (this.props.open && window.innerWidth - this.state.touchStartX < this.state.sidebarWidth) {
         if (this.state.touchCurrentX > this.state.touchStartX) {
           return this.state.sidebarWidth + this.state.touchStartX - this.state.touchCurrentX;
-        } else {
-          return this.state.sidebarWidth;
         }
-      } else {
-        return Math.min(window.innerWidth - this.state.touchCurrentX, this.state.sidebarWidth);
+        return this.state.sidebarWidth;
       }
+      return Math.min(window.innerWidth - this.state.touchCurrentX, this.state.sidebarWidth);
+    }
 
-    } else {
-
-      if (this.props.open && this.state.touchStartX < this.state.sidebarWidth) {
-        if (this.state.touchCurrentX > this.state.touchStartX) {
-          return this.state.sidebarWidth;
-        } else {
-          return this.state.sidebarWidth - this.state.touchStartX + this.state.touchCurrentX;
-        }
-      } else {
-        return Math.min(this.state.touchCurrentX, this.state.sidebarWidth);
+    if (this.props.open && this.state.touchStartX < this.state.sidebarWidth) {
+      if (this.state.touchCurrentX > this.state.touchStartX) {
+        return this.state.sidebarWidth;
       }
-
+      return this.state.sidebarWidth - this.state.touchStartX + this.state.touchCurrentX;
     }
+    return Math.min(this.state.touchCurrentX, this.state.sidebarWidth);
   }
@@ -261,7 +253,7 @@
       if (this.props.pullRight) {
-        sidebarStyle.transform = `translateX(${(1-percentage)*100}%)`;
-        sidebarStyle.WebkitTransform = `translateX(${(1-percentage)*100}%)`;
+        sidebarStyle.transform = `translateX(${(1 - percentage) * 100}%)`;
+        sidebarStyle.WebkitTransform = `translateX(${(1 - percentage) * 100}%)`;
       } else {
-        sidebarStyle.transform = `translateX(-${(1-percentage)*100}%)`;
-        sidebarStyle.WebkitTransform = `translateX(-${(1-percentage)*100}%)`;
+        sidebarStyle.transform = `translateX(-${(1 - percentage) * 100}%)`;
+        sidebarStyle.WebkitTransform = `translateX(-${(1 - percentage) * 100}%)`;
       }
@@ -272,5 +264,3 @@
       overlayStyle.visibility = 'visible';
-
     } else if (this.props.docked) {
-
       // show sidebar
@@ -288,5 +278,3 @@ if (this.state.sidebarWidth !== 0) {
       }
-
     } else if (this.props.open) {
-
       // slide open sidebar
@@ -299,3 +287,2 @@ sidebarStyle.transform = `translateX(0%)`;
       overlayStyle.visibility = 'visible';
-
     }
@@ -337,3 +324,3 @@
       <div {...rootProps}>
-        <div style={sidebarStyle} ref='sidebar'>
+        <div style={sidebarStyle} ref="sidebar">
           {this.props.sidebar}
@@ -350,3 +337,3 @@ </div>
   }
-};
+}
 
@@ -397,5 +384,5 @@ Sidebar.propTypes = {
   dragToggleDistance: 30,
-  onSetOpen: function() {},
+  onSetOpen: () => {},
 };
 
 export default Sidebar;

No alert changes

Improved metrics

Total package byte prevSize

43030

increased by1.21%

Number of package files

17

increased by6.25%

Number of lines in readme file

139

increased by2.21%

Worsened metrics

Dependency count

2

increased byInfinity%

Dev dependency count

11

increased by83.33%

Lines of code

969

decreased by-0.41%

No dependency changes