Commit 12864fe8 authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf
Browse files

Open operations modal on longpress

parent 5290489a
......@@ -10,6 +10,7 @@ import { translate as $t,
import { get } from '../../store';
import InfiniteList from '../ui/infinite-list';
import withLongPress from '../ui/longpress';
import AmountWell from './amount-well';
import DetailsModal from './details';
......@@ -20,6 +21,8 @@ import SyncButton from './sync-button';
// Infinite list properties.
const OPERATION_BALLAST = 10;
const PressableOperationItem = withLongPress(OperationItem);
// Keep in sync with style.css.
function computeOperationHeight(isSmallScreen) {
return isSmallScreen ? 41 : 54;
......@@ -71,7 +74,7 @@ class OperationsComponent extends React.Component {
.map(o => {
let handleOpenModal = () => this.selectModalOperation(o.id);
return (
<OperationItem
<PressableOperationItem
key={ o.id }
operation={ o }
formatCurrency={ this.props.account.formatCurrency }
......@@ -79,6 +82,7 @@ class OperationsComponent extends React.Component {
getCategory={ this.props.getCategory }
types={ this.props.types }
onOpenModal={ handleOpenModal }
onLongPress={ handleOpenModal }
/>
);
});
......
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
// Duration of a long press in ms
const LONG_PRESS_DURATION = 500;
function withLongPress(WrappedComponent) {
class WithLongPressComponent extends React.Component {
constructor(props) {
super(props);
this.element = null;
this.timer = null;
this.pressStart = 0;
this.onPressStart = this.onPressStart.bind(this);
this.onPressEnd = this.onPressEnd.bind(this);
this.onContextMenu = this.onContextMenu.bind(this);
}
onContextMenu(event) {
event.preventDefault();
event.stopPropagation();
}
onPressStart(event) {
clearTimeout(this.timer);
this.pressStart = Date.now();
this.timer = setTimeout(this.props.onLongPress, LONG_PRESS_DURATION);
event.target.addEventListener('touchend', this.onPressEnd);
event.target.addEventListener('touchmove', this.onPressEnd);
event.target.addEventListener('touchcancel', this.onPressEnd);
event.target.addEventListener('contextmenu', this.onContextMenu);
}
onPressEnd(event) {
// Prevent clicks to happen after a long press
if (event.type === 'touchend' && (Date.now() - this.pressStart) > LONG_PRESS_DURATION) {
event.preventDefault();
}
event.target.removeEventListener('touchend', this.onPressEnd);
event.target.removeEventListener('touchmove', this.onPressEnd);
event.target.removeEventListener('touchcancel', this.onPressEnd);
event.target.removeEventListener('contextmenu', this.onContextMenu);
clearTimeout(this.timer);
this.pressStart = 0;
}
componentDidMount() {
ReactDOM.findDOMNode(this.element).addEventListener('touchstart', this.onPressStart);
}
componentWillUnMount() {
let domElement = ReactDOM.findDOMNode(this.element);
domElement.removeEventListener('touchstart', this.onPressStart);
domElement.removeEventListener('touchend', this.onPressEnd);
domElement.removeEventListener('touchmove', this.onPressEnd);
domElement.removeEventListener('touchcancel', this.onPressEnd);
domElement.removeEventListener('contextmenu', this.onContextMenu);
}
render() {
let refComponent = node => {
this.element = node;
};
return (
<WrappedComponent
{ ...this.props }
ref={ refComponent }
/>
);
}
}
WithLongPressComponent.propTypes = {
// The callback called when a longpress occurred on the component.
onLongPress: PropTypes.func.isRequired
};
return WithLongPressComponent;
}
export default withLongPress;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment