From b9a79cfef7970a1f5472c7b998623860484b7c8e Mon Sep 17 00:00:00 2001 From: erikoleary Date: Sat, 8 Dec 2018 15:50:57 -0600 Subject: [PATCH 1/5] - Ignore yarn - Added 'disabled' attribute --- .gitignore | 1 + src/index.js | 14 +++++++++----- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index 3c3629e..97008e5 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +yarn.lock \ No newline at end of file diff --git a/src/index.js b/src/index.js index 1a3fbf0..aac8773 100644 --- a/src/index.js +++ b/src/index.js @@ -24,13 +24,15 @@ export default class LongPressable extends React.PureComponent { // Maximum distance (pixels) user is allowed to drag before // click is canceled dragThreshold: PropType.number, + disabled: PropType.bool, children: PropType.node } static defaultProps = { longPressTime: 500, primaryMouseButtonOnly: true, - dragThreshold: 100 + dragThreshold: 100, + disabled: false } isLongPressing = false @@ -90,12 +92,14 @@ export default class LongPressable extends React.PureComponent { } render() { + var disabled = this.props.disabled; + return (
{this.props.children}
From 5a43371ff0cc1956f18aa7421b896a40895995b5 Mon Sep 17 00:00:00 2001 From: erikoleary Date: Sat, 8 Dec 2018 17:29:31 -0600 Subject: [PATCH 2/5] - Fixed null reference exception if short press or long press not bound - Disable context menu --- .gitignore | 3 ++- dist/index.js | 19 +++++++++++++------ src/index.js | 7 ++++--- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index 97008e5..576fd3b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules -yarn.lock \ No newline at end of file +yarn.lock +.vscode/ \ No newline at end of file diff --git a/dist/index.js b/dist/index.js index afe5934..a8a4c9f 100644 --- a/dist/index.js +++ b/dist/index.js @@ -55,7 +55,7 @@ var LongPressable = function (_React$PureComponent) { var mousePosition = eventToPosition(e); if (!_this.isLongPressing && !_this.exceedDragThreshold(mousePosition)) { - _this.props.onShortPress(); + _this.props.onShortPress && _this.props.onShortPress(); } else { _this.isLongPressing = false; } @@ -98,13 +98,18 @@ var LongPressable = function (_React$PureComponent) { }, { key: 'render', value: function render() { + var disabled = this.props.disabled; + return _react2.default.createElement( 'div', { - onPointerUp: this.onPointerUp, - onPointerDown: this.onPointerDown, - onPointerMove: this.onPointerMove, - onPointerLeave: this.onPointerLeave + onContextMenu: function onContextMenu(e) { + return e.preventDefault(); + }, + onPointerUp: disabled ? null : this.onPointerUp, + onPointerDown: disabled ? null : this.onPointerDown, + onPointerMove: disabled ? null : this.onPointerMove, + onPointerLeave: disabled ? null : this.onPointerLeave }, this.props.children ); @@ -122,11 +127,13 @@ LongPressable.propTypes = { // Maximum distance (pixels) user is allowed to drag before // click is canceled dragThreshold: _propTypes2.default.number, + disabled: _propTypes2.default.bool, children: _propTypes2.default.node }; LongPressable.defaultProps = { longPressTime: 500, primaryMouseButtonOnly: true, - dragThreshold: 100 + dragThreshold: 100, + disabled: false }; exports.default = LongPressable; \ No newline at end of file diff --git a/src/index.js b/src/index.js index aac8773..7cec96c 100644 --- a/src/index.js +++ b/src/index.js @@ -47,7 +47,7 @@ export default class LongPressable extends React.PureComponent { if (!this.isLongPressing && !this.exceedDragThreshold(mousePosition)) { - this.props.onShortPress() + this.props.onShortPress && this.props.onShortPress() } else { this.isLongPressing = false @@ -60,12 +60,12 @@ export default class LongPressable extends React.PureComponent { return } } - + this.startingPosition = eventToPosition(e) this.timerID = setTimeout(() => { this.isLongPressing = true - this.props.onLongPress() + this.props.onLongPress && this.props.onLongPress() }, this.props.longPressTime) } @@ -96,6 +96,7 @@ export default class LongPressable extends React.PureComponent { return (
e.preventDefault()} onPointerUp={disabled ? null : this.onPointerUp} onPointerDown={disabled ? null : this.onPointerDown} onPointerMove={disabled ? null : this.onPointerMove} From a0e852f68d443b68304ab21545511ccbe19144d8 Mon Sep 17 00:00:00 2001 From: erikoleary Date: Sat, 8 Dec 2018 17:36:14 -0600 Subject: [PATCH 3/5] Forgot to build --- dist/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/index.js b/dist/index.js index a8a4c9f..15b5c5f 100644 --- a/dist/index.js +++ b/dist/index.js @@ -70,7 +70,7 @@ var LongPressable = function (_React$PureComponent) { _this.timerID = setTimeout(function () { _this.isLongPressing = true; - _this.props.onLongPress(); + _this.props.onLongPress && _this.props.onLongPress(); }, _this.props.longPressTime); }, _this.onPointerMove = function (e) { var mousePosition = eventToPosition(e); From 5e0211da4ff1021daf726bbd81655628840599f3 Mon Sep 17 00:00:00 2001 From: erikoleary Date: Wed, 26 Dec 2018 22:06:49 -0600 Subject: [PATCH 4/5] Dont allow click for disabled inputs --- dist/index.js | 5 ++++- src/index.js | 5 +++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/dist/index.js b/dist/index.js index 15b5c5f..fa6a770 100644 --- a/dist/index.js +++ b/dist/index.js @@ -47,7 +47,9 @@ var LongPressable = function (_React$PureComponent) { args[_key] = arguments[_key]; } - return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = LongPressable.__proto__ || Object.getPrototypeOf(LongPressable)).call.apply(_ref, [this].concat(args))), _this), _this.isLongPressing = false, _this.startingPosition = { x: 0, y: 0 }, _this.onPointerUp = function (e) { + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = LongPressable.__proto__ || Object.getPrototypeOf(LongPressable)).call.apply(_ref, [this].concat(args))), _this), _this.isLongPressing = false, _this.startingPosition = { x: 0, y: 0 }, _this.cancelEvent = function (e) { + e.stopPropagation(); + }, _this.onPointerUp = function (e) { if (_this.timerID) { _this.cancelLongPress(); } @@ -106,6 +108,7 @@ var LongPressable = function (_React$PureComponent) { onContextMenu: function onContextMenu(e) { return e.preventDefault(); }, + onClick: disabled ? this.cancelEvent : null, onPointerUp: disabled ? null : this.onPointerUp, onPointerDown: disabled ? null : this.onPointerDown, onPointerMove: disabled ? null : this.onPointerMove, diff --git a/src/index.js b/src/index.js index 7cec96c..95ee95e 100644 --- a/src/index.js +++ b/src/index.js @@ -38,6 +38,10 @@ export default class LongPressable extends React.PureComponent { isLongPressing = false startingPosition = { x: 0, y: 0 } + cancelEvent = (e) => { + e.stopPropagation(); + } + onPointerUp = (e) => { if (this.timerID) { this.cancelLongPress() @@ -97,6 +101,7 @@ export default class LongPressable extends React.PureComponent { return (
e.preventDefault()} + onClick={disabled ? this.cancelEvent : null} onPointerUp={disabled ? null : this.onPointerUp} onPointerDown={disabled ? null : this.onPointerDown} onPointerMove={disabled ? null : this.onPointerMove} From 10d7365924331766a055e9b28c90440838a1e371 Mon Sep 17 00:00:00 2001 From: erikoleary Date: Thu, 27 Dec 2018 11:48:59 -0600 Subject: [PATCH 5/5] Stop propagation of context menu --- dist/index.js | 2 +- src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/index.js b/dist/index.js index fa6a770..f15b4ba 100644 --- a/dist/index.js +++ b/dist/index.js @@ -106,7 +106,7 @@ var LongPressable = function (_React$PureComponent) { 'div', { onContextMenu: function onContextMenu(e) { - return e.preventDefault(); + e.preventDefault();e.stopPropagation(); }, onClick: disabled ? this.cancelEvent : null, onPointerUp: disabled ? null : this.onPointerUp, diff --git a/src/index.js b/src/index.js index 95ee95e..a9185bc 100644 --- a/src/index.js +++ b/src/index.js @@ -100,7 +100,7 @@ export default class LongPressable extends React.PureComponent { return (
e.preventDefault()} + onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} onClick={disabled ? this.cancelEvent : null} onPointerUp={disabled ? null : this.onPointerUp} onPointerDown={disabled ? null : this.onPointerDown}