fix(column): Use passive wheel listener (#4348)
* chore(yarn): Install detect-passive-events * fix(column): Use passive listener
This commit is contained in:
		
							parent
							
								
									23e854cb91
								
							
						
					
					
						commit
						ebf5a06084
					
				
					 3 changed files with 15 additions and 1 deletions
				
			
		| 
						 | 
					@ -1,5 +1,6 @@
 | 
				
			||||||
import React from 'react';
 | 
					import React from 'react';
 | 
				
			||||||
import PropTypes from 'prop-types';
 | 
					import PropTypes from 'prop-types';
 | 
				
			||||||
 | 
					import detectPassiveEvents from 'detect-passive-events';
 | 
				
			||||||
import scrollTop from '../scroll';
 | 
					import scrollTop from '../scroll';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default class Column extends React.PureComponent {
 | 
					export default class Column extends React.PureComponent {
 | 
				
			||||||
| 
						 | 
					@ -30,11 +31,19 @@ export default class Column extends React.PureComponent {
 | 
				
			||||||
    this.node = c;
 | 
					    this.node = c;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  componentDidMount () {
 | 
				
			||||||
 | 
					    this.node.addEventListener('wheel', this.handleWheel,  detectPassiveEvents ? { passive: true } : false);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  componentWillUnmount () {
 | 
				
			||||||
 | 
					    this.node.removeEventListener('wheel', this.handleWheel);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  render () {
 | 
					  render () {
 | 
				
			||||||
    const { children } = this.props;
 | 
					    const { children } = this.props;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <div role='region' className='column' ref={this.setRef} onWheel={this.handleWheel}>
 | 
					      <div role='region' className='column' ref={this.setRef}>
 | 
				
			||||||
        {children}
 | 
					        {children}
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
    );
 | 
					    );
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -44,6 +44,7 @@
 | 
				
			||||||
    "compression-webpack-plugin": "^0.4.0",
 | 
					    "compression-webpack-plugin": "^0.4.0",
 | 
				
			||||||
    "cross-env": "^5.0.1",
 | 
					    "cross-env": "^5.0.1",
 | 
				
			||||||
    "css-loader": "^0.28.4",
 | 
					    "css-loader": "^0.28.4",
 | 
				
			||||||
 | 
					    "detect-passive-events": "^1.0.2",
 | 
				
			||||||
    "dotenv": "^4.0.0",
 | 
					    "dotenv": "^4.0.0",
 | 
				
			||||||
    "emojione": "^2.2.7",
 | 
					    "emojione": "^2.2.7",
 | 
				
			||||||
    "emojione-picker": "^2.2.1",
 | 
					    "emojione-picker": "^2.2.1",
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -2328,6 +2328,10 @@ detect-node@^2.0.3:
 | 
				
			||||||
  version "2.0.3"
 | 
					  version "2.0.3"
 | 
				
			||||||
  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
 | 
					  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					detect-passive-events@^1.0.2:
 | 
				
			||||||
 | 
					  version "1.0.2"
 | 
				
			||||||
 | 
					  resolved "https://registry.yarnpkg.com/detect-passive-events/-/detect-passive-events-1.0.2.tgz#0e39d7b675907eff55b8965f5be3fc0b0f4178b9"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
diff@3.2.0:
 | 
					diff@3.2.0:
 | 
				
			||||||
  version "3.2.0"
 | 
					  version "3.2.0"
 | 
				
			||||||
  resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
 | 
					  resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in a new issue