fix click after scroll issue

asmyshlyaev177 · Aug 18, 2018 · cd80fe8 · cd80fe8
1 parent bf6fb13
commit cd80fe8
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -26,11 +26,11 @@ Add star if you like project :)
 
 ## Quick start
 
-```
+```bash
 npm install --save react-horizontal-scrolling-menu
 ```
 In project:
-```
+```javascript
 import React, { Component } from 'react';
 import ScrollMenu from 'react-horizontal-scrolling-menu';
 import './App.css';
@@ -117,7 +117,7 @@ class App extends Component {
 
 ```
 In App.css
-```
+```scss
 .menu-item {
   padding: 0 40px;
   margin: 5px 10px;
@@ -139,7 +139,7 @@ In App.css
 ```
 ## Example
 You can clone repository and run demo project from *examples* folder.
-```
+```bash
 git clone https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu
 cd react-horizontal-scrolling-menu/examples
 npm install
@@ -181,20 +181,20 @@ Any contribution and correction appreciated. Just fork repo, commit and make PR,
 
 ## Contributing
 1 Fork the repo:
-  * In root folder ```run npm link```
-  * Run ```npm install``` in root folder
+  * In root folder `run npm link`
+  * Run `npm install` in root folder
   * Remove react-horizontal-scrolling-menu from package.json example project
-  * Run ```npm link react-horizontal-scrolling-menu && npm install```
-  * Run ```npm run start``` in root and in examples folders
+  * Run `npm link react-horizontal-scrolling-menu && npm install`
+  * Run `npm run start` in root and in examples folders
 
 2 Write code! Add some feature or fix bug.
 
 3 Check that all tests passed and add tests for your code.
-  * You can use ```npm run test:watch``` for run tests in watch mode
+  * You can use `npm run test:watch` for run tests in watch mode
 
 4 Update readme and example(if needed)
 
-5 Run ```npm run build``` , make commit and Pull Request
+5 Run `npm run build` , make commit and Pull Request
 
 ## Contributors
 

diff --git a/build/index.js b/build/index.js
diff --git a/build/index.js.map b/build/index.js.map
diff --git a/build/index.mjs b/build/index.mjs
@@ -228,6 +228,7 @@ var InnerWrapper = exports.InnerWrapper = function (_React$Component) {
       var items = data.map(function (el) {
         return _react2.default.cloneElement(el, { selected: isActive(el.key, selected) });
       });
+
       return _react2.default.createElement(
         'div',
         {
@@ -309,6 +310,14 @@ var ScrollMenu = exports.ScrollMenu = function (_React$Component2) {
       stopDragTranslate: null
     };
 
+    _this3.setRef = function (ref) {
+      _this3.ref = ref;
+    };
+
+    _this3.setWrapperRef = function (ref) {
+      _this3.ref.menuWrapper = ref;
+    };
+
     _this3.setInitial = function () {
       var _this3$props = _this3.props,
           selected = _this3$props.selected,
@@ -411,18 +420,18 @@ var ScrollMenu = exports.ScrollMenu = function (_React$Component2) {
     };
 
     _this3.onItemClick = function (id) {
-      var dragging = _this3.state.dragging;
       var _this3$props2 = _this3.props,
           clickWhenDrag = _this3$props2.clickWhenDrag,
           onSelect = _this3$props2.onSelect;
       var _this3$state2 = _this3.state,
           startDragTranslate = _this3$state2.startDragTranslate,
-          stopDragTranslate = _this3$state2.stopDragTranslate;
+          stopDragTranslate = _this3$state2.stopDragTranslate,
+          xPoint = _this3$state2.xPoint;
 
-      var diff = Math.abs((startDragTranslate || 0) - (stopDragTranslate || 0));
-      var afterScroll = startDragTranslate === null || stopDragTranslate === null;
+      var diff = Math.abs(stopDragTranslate - startDragTranslate);
+      var afterScroll = xPoint && diff > 5;
 
-      if (dragging || !afterScroll && !clickWhenDrag && diff > 5) return false;
+      if (afterScroll && !clickWhenDrag) return false;
 
       _this3.setState({ selected: id }, function () {
         if (onSelect) onSelect(id);
@@ -631,6 +640,10 @@ var ScrollMenu = exports.ScrollMenu = function (_React$Component2) {
       }
     };
 
+    _this3.handleArrowClickRight = function () {
+      _this3.handleArrowClick(false);
+    };
+
     _this3.handleArrowClick = function () {
       var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       var alignCenter = _this3.props.alignCenter;
@@ -761,7 +774,13 @@ var ScrollMenu = exports.ScrollMenu = function (_React$Component2) {
         xPoint = defaultSetting.xPoint;
       }
 
-      _this3.setState({ dragging: false, xPoint: xPoint, translate: newTranslate }, function () {
+      _this3.setState({
+        dragging: false,
+        xPoint: xPoint,
+        translate: newTranslate
+        // startDragTranslate: null,
+        // stopDragTranslate: null
+      }, function () {
         if (startDragTranslate !== newTranslate) {
           _this3.onUpdate({});
         }
@@ -778,10 +797,6 @@ var ScrollMenu = exports.ScrollMenu = function (_React$Component2) {
       }
     };
 
-    _this3.setRef = function (ref) {
-      _this3.ref = ref;
-    };
-
     _this3.ref = {};
     return _this3;
   }
@@ -830,8 +845,6 @@ var ScrollMenu = exports.ScrollMenu = function (_React$Component2) {
   }, {
     key: 'render',
     value: function render() {
-      var _this4 = this;
-
       var _props2 = this.props,
           data = _props2.data,
           arrowLeft = _props2.arrowLeft,
@@ -862,17 +875,13 @@ var ScrollMenu = exports.ScrollMenu = function (_React$Component2) {
         {
           className: menuClass,
           style: menuStyles,
-          onWheel: function onWheel(e) {
-            return _this4.handleWheel(e);
-          }
+          onWheel: this.handleWheel
         },
         arrowLeft && _react2.default.createElement(
           Arrow,
           {
             className: arrowClass,
-            onClick: function onClick() {
-              return _this4.handleArrowClick();
-            }
+            onClick: this.handleArrowClick
           },
           arrowLeft
         ),
@@ -881,9 +890,7 @@ var ScrollMenu = exports.ScrollMenu = function (_React$Component2) {
           {
             className: wrapperClass,
             style: wrapperStyles,
-            ref: function ref(inst) {
-              return _this4.ref.menuWrapper = inst;
-            },
+            ref: this.setWrapperRef,
             onMouseDown: this.handleDragStart,
             onTouchStart: this.handleDragStart,
             onTouchEnd: this.handleDragStop,
@@ -908,9 +915,7 @@ var ScrollMenu = exports.ScrollMenu = function (_React$Component2) {
           Arrow,
           {
             className: arrowClass,
-            onClick: function onClick() {
-              return _this4.handleArrowClick(false);
-            }
+            onClick: this.handleArrowClickRight
           },
           arrowRight
         )

diff --git a/build/index2.mjs b/build/index2.mjs
diff --git a/examples/package.json b/examples/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-horizontal-scrolling-menu": "^0.2.6",
+    "react-horizontal-scrolling-menu": "^0.2.7",
     "react-scripts": "1.1.4"
   },
   "scripts": {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-horizontal-scrolling-menu",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Scrolling horizontal menu component for React, support mouse and touch devices.",
   "main": "build/index.js",
   "module": "build/index2.mjs",
@@ -44,7 +44,7 @@
     "all-contributors-cli": "^5.3.0",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.2.5",
-    "babel-jest": "^23.4.0",
+    "babel-jest": "^23.4.2",
     "babel-loader": "^7.1.5",
     "babel-plugin-syntax-async-generators": "^6.13.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
@@ -59,11 +59,11 @@
     "babel-preset-stage-2": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
     "coveralls": "^3.0.2",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.4.4",
+    "enzyme-adapter-react-16": "^1.2.0",
     "eslint": "^5.1.0",
     "eslint-plugin-react": "^7.10.0",
-    "jest": "^23.4.0",
+    "jest": "^23.5.0",
     "jscoverage": "^0.6.0",
     "jsdom": "^11.11.0",
     "nodeunit": "^0.11.3",

diff --git a/src/scrollMenu.js b/src/scrollMenu.js
@@ -114,6 +114,7 @@ export class InnerWrapper extends React.Component {
     const isActive = (itemId, selected) => String(itemId) === String(selected);
     const items = data
       .map(el => React.cloneElement(el, { selected: isActive(el.key, selected) }));
+
     return (
       <div
         className={innerWrapperClass}
@@ -200,6 +201,14 @@ export class ScrollMenu extends React.Component {
     document.removeEventListener('mouseup', this.handleDragStop);
   }
 
+  setRef = ref => {
+    this.ref = ref;
+  }
+
+  setWrapperRef = ref => {
+    this.ref.menuWrapper = ref;
+  }
+
   setInitial = () => {
     const { selected, data } = this.props;
     if (!data || !data.length) return false;
@@ -274,14 +283,13 @@ export class ScrollMenu extends React.Component {
   };
 
   onItemClick = id => {
-    const { dragging } = this.state;
     const { clickWhenDrag, onSelect } = this.props;
 
-    const { startDragTranslate, stopDragTranslate } = this.state;
-    const diff = Math.abs((startDragTranslate || 0) - (stopDragTranslate || 0));
-    const afterScroll = startDragTranslate === null || stopDragTranslate === null;
+    const { startDragTranslate, stopDragTranslate, xPoint } = this.state;
+    const diff = Math.abs(stopDragTranslate - startDragTranslate);
+    const afterScroll = xPoint && diff > 5;
 
-    if (dragging || !afterScroll && !clickWhenDrag && diff > 5) return false;
+    if (afterScroll && !clickWhenDrag) return false;
 
     this.setState({ selected: id }, () => { if (onSelect) onSelect(id); });
   }
@@ -462,6 +470,10 @@ export class ScrollMenu extends React.Component {
     }
   }
 
+  handleArrowClickRight = () => {
+    this.handleArrowClick(false);
+  }
+
   handleArrowClick = (left = true) => {
     const { alignCenter } = this.props;
     const {
@@ -588,7 +600,13 @@ export class ScrollMenu extends React.Component {
     }
 
     this.setState(
-      { dragging: false, xPoint, translate: newTranslate },
+      {
+        dragging: false,
+        xPoint,
+        translate: newTranslate,
+        // startDragTranslate: null,
+        // stopDragTranslate: null
+      },
       () => {
         if (startDragTranslate !== newTranslate) {
           this.onUpdate({});
@@ -604,10 +622,6 @@ export class ScrollMenu extends React.Component {
     }
   }
 
-  setRef = ref => {
-    this.ref = ref;
-  }
-
   render() {
     const {
       data,
@@ -634,13 +648,13 @@ export class ScrollMenu extends React.Component {
       <div
         className={menuClass}
         style={ menuStyles }
-        onWheel = {(e) => this.handleWheel(e)}
+        onWheel={this.handleWheel}
       >
 
         {arrowLeft && 
           <Arrow
             className={arrowClass}
-            onClick={() => this.handleArrowClick()}
+            onClick={this.handleArrowClick}
           >
             {arrowLeft}
           </Arrow>
@@ -649,7 +663,7 @@ export class ScrollMenu extends React.Component {
         <div
           className={wrapperClass}
           style={ wrapperStyles }
-          ref={inst => this.ref.menuWrapper = inst}
+          ref={this.setWrapperRef}
           onMouseDown={this.handleDragStart}
           onTouchStart={this.handleDragStart}
           onTouchEnd={this.handleDragStop}
@@ -675,7 +689,7 @@ export class ScrollMenu extends React.Component {
         {arrowRight &&
           <Arrow
             className={arrowClass}
-            onClick={() => this.handleArrowClick(false)}
+            onClick={this.handleArrowClickRight}
           >
             {arrowRight}
           </Arrow>

diff --git a/src/scrollMenu.spec.js b/src/scrollMenu.spec.js
@@ -180,13 +180,17 @@ describe('test menu', () => {
     const wrapper = mount(<ScrollMenu {...rest} />); 
     expect(wrapper.find('Arrow').length).toBe(1);
   });
-  it('click on arrow', () => {
+  it('handle arrowClickRight dispatch handleArrowClick', () => {
     const arrowClick = jest.fn();
     wrapper.instance().handleArrowClick = arrowClick;
-    wrapper.find('Arrow').first().simulate('click');
+    wrapper.instance().handleArrowClickRight();
     expect(arrowClick.mock.calls.length).toEqual(1);
-    wrapper.find('Arrow').last().simulate('click');
-    expect(arrowClick.mock.calls.length).toEqual(2);
+  });
+  it('handle arrowClickRight fn', () => {
+    const arrowClickRight = jest.fn();
+    wrapper.instance().handleArrowClickRight = arrowClickRight;
+    wrapper.instance().handleArrowClickRight();
+    expect(arrowClickRight.mock.calls.length).toEqual(1);
   });
   it('not render empty arrows', () => {
     const wrapper = mount(<ScrollMenu data={menu} />);
@@ -969,11 +973,6 @@ describe('functions', () => {
 
     it('onItemClick', () => {
       const wrapper = mount(<ScrollMenu {...props} />);
-      wrapper.setState({ dragging: true });
-      wrapper.instance().onItemClick(items[3][0]);
-      expect(wrapper.state().selected).toEqual(0);
-
-      wrapper.setState({ dragging: false });
       wrapper.instance().onItemClick(items[3][0]);
       expect(wrapper.state().selected).toEqual(items[3][0]);
     });
@@ -985,7 +984,8 @@ describe('functions', () => {
         selected: 'item1',
         dragging: false,
         startDragTranslate: 0,
-        stopDragTranslate: 10
+        stopDragTranslate: 10,
+        xPoint: 10
       });
       wrapper.instance().onItemClick(items[2][0]);
       expect(wrapper.state().selected).toEqual('item1');