reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-22 09:36:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

feature(react-dock): add touch events (#596)

Browse Source 
* Touch events

Enable to resize the dock on touch devices by handling touch events in addition to mouse events

* Prettifying

`yarn run prettify` command prettifying.

Co-authored-by: Nathan Bierema <nbierema@gmail.com>
This commit is contained in:
Marko Kuosmanen 2020-08-19 17:14:53 +03:00 committed by GitHub
parent 5a6074a081
commit e2da4e084f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/react-dock/src/Dock.js vendored
View File

@ -244,7 +244,9 @@ export default class Dock extends Component {
};
componentDidMount() {
window.addEventListener('touchend', this.handleMouseUp);
window.addEventListener('mouseup', this.handleMouseUp);
window.addEventListener('touchmove', this.handleMouseMove);
window.addEventListener('mousemove', this.handleMouseMove);
window.addEventListener('resize', this.handleResize);
@ -254,7 +256,9 @@ export default class Dock extends Component {
}
componentWillUnmount() {
window.removeEventListener('touchend', this.handleMouseUp);
window.removeEventListener('mouseup', this.handleMouseUp);
window.removeEventListener('touchmove', this.handleMouseMove);
window.removeEventListener('mousemove', this.handleMouseMove);
window.removeEventListener('resize', this.handleResize);
}
@ -329,7 +333,11 @@ export default class Dock extends Component {
<div style={dimStyles} onClick={this.handleDimClick} />
)}
<div style={dockStyles}>
<div style={resizerStyles} onMouseDown={this.handleMouseDown} />
<div
style={resizerStyles}
onMouseDown={this.handleMouseDown}
onTouchStart={this.handleMouseDown}
/>
<div style={styles.dockContent}>
{typeof children === 'function'
? children({
@ -401,11 +409,18 @@ export default class Dock extends Component {
handleMouseMove = (e) => {
if (!this.state.isResizing || this.state.isWindowResizing) return;
e.preventDefault();
if (!e.touches) e.preventDefault();
const { position, fluid } = this.props;
const { fullWidth, fullHeight, isControlled } = this.state;
const { clientX: x, clientY: y } = e;
let { clientX: x, clientY: y } = e;
if (e.touches) {
x = e.touches[0].clientX;
y = e.touches[0].clientY;
}
let size;
switch (position) {