reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-02-16 19:40:58 +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() { componentDidMount() {
window.addEventListener('touchend', this.handleMouseUp);
window.addEventListener('mouseup', this.handleMouseUp); window.addEventListener('mouseup', this.handleMouseUp);
window.addEventListener('touchmove', this.handleMouseMove);
window.addEventListener('mousemove', this.handleMouseMove); window.addEventListener('mousemove', this.handleMouseMove);
window.addEventListener('resize', this.handleResize); window.addEventListener('resize', this.handleResize);
@ -254,7 +256,9 @@ export default class Dock extends Component {
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('touchend', this.handleMouseUp);
window.removeEventListener('mouseup', this.handleMouseUp); window.removeEventListener('mouseup', this.handleMouseUp);
window.removeEventListener('touchmove', this.handleMouseMove);
window.removeEventListener('mousemove', this.handleMouseMove); window.removeEventListener('mousemove', this.handleMouseMove);
window.removeEventListener('resize', this.handleResize); window.removeEventListener('resize', this.handleResize);
} }
@ -329,7 +333,11 @@ export default class Dock extends Component {
<div style={dimStyles} onClick={this.handleDimClick} /> <div style={dimStyles} onClick={this.handleDimClick} />
)} )}
<div style={dockStyles}> <div style={dockStyles}>
<div style={resizerStyles} onMouseDown={this.handleMouseDown} /> <div
style={resizerStyles}
onMouseDown={this.handleMouseDown}
onTouchStart={this.handleMouseDown}
/>
<div style={styles.dockContent}> <div style={styles.dockContent}>
{typeof children === 'function' {typeof children === 'function'
? children({ ? children({
@ -401,11 +409,18 @@ export default class Dock extends Component {
handleMouseMove = (e) => { handleMouseMove = (e) => {
if (!this.state.isResizing || this.state.isWindowResizing) return; if (!this.state.isResizing || this.state.isWindowResizing) return;
e.preventDefault();
if (!e.touches) e.preventDefault();
const { position, fluid } = this.props; const { position, fluid } = this.props;
const { fullWidth, fullHeight, isControlled } = this.state; 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; let size;
switch (position) { switch (position) {