diff --git a/CHANGELOG.md b/CHANGELOG.md index 89ca796..f4947e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,12 @@ ### Removed --> +## [2.0.0-beta.3] - 2020-03-03 + +### Fixed + +- Max pointer size + ## [2.0.0-beta.2] - 2020-02-26 ### Fixed diff --git a/package.json b/package.json index 7962b94..72cef6e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "use-interaction", - "version": "2.0.0-beta.2", + "version": "2.0.0-beta.3", "private": false, "description": "React hook for getting and following user interaction type", "keywords": [ diff --git a/src/useInteraction.js b/src/useInteraction.js index 6e3d232..ee4b7a2 100644 --- a/src/useInteraction.js +++ b/src/useInteraction.js @@ -2,10 +2,10 @@ import { useState, useEffect, useCallback } from 'react' import PropTypes from 'prop-types' import { round } from 'lodash' import ulog from 'ulog' -const log = ulog('use-interaction') +const log = ulog('use-interaction') +let setMaxPointerSize = null const getKey = event => (event.keyCode ? event.keyCode : event.which) -let handleInteractionPointer = null const useInteraction = ({ initial = null } = {}) => { const initialPointerType = @@ -115,18 +115,19 @@ const useInteraction = ({ initial = null } = {}) => { [keys, inputs, handleInteractionChange] ) - handleInteractionPointer = useCallback( - event => { - log.info(event, event.type) + setMaxPointerSize = event => { + log.info(event, event.type, event.pointerType) - const nextAccuracy = round(event.height, 1) + const nextAccuracy = round(event.height, 1) - if (nextAccuracy > pointerAccuracy) { - setPointerAccuracy(nextAccuracy) - } - }, - [pointerAccuracy] - ) + if (nextAccuracy > pointerAccuracy) { + setPointerAccuracy(nextAccuracy) + } + } + + const handleInteractionPointer = useCallback(setMaxPointerSize, [ + pointerAccuracy, + ]) useEffect(() => { window.addEventListener('touchstart', handleInteractionTouch, false) @@ -138,7 +139,11 @@ const useInteraction = ({ initial = null } = {}) => { window.removeEventListener('keydown', handleInteractionKeyboard, false) window.removeEventListener('pointerdown', handleInteractionPointer, false) } - }, [handleInteractionTouch, handleInteractionKeyboard]) + }, [ + handleInteractionTouch, + handleInteractionKeyboard, + handleInteractionPointer, + ]) useEffect(() => { if (firedEvent.mousemove === true || firedEvent.wheel === true) { @@ -173,4 +178,4 @@ useInteraction.propTypes = { } export default useInteraction -export { handleInteractionPointer, log } +export { setMaxPointerSize, log } diff --git a/src/useInteraction.test.js b/src/useInteraction.test.js index 8f234de..f9674ef 100644 --- a/src/useInteraction.test.js +++ b/src/useInteraction.test.js @@ -2,7 +2,7 @@ import React from 'react' import { renderHook, cleanup, act } from '@testing-library/react-hooks' import { render, fireEvent } from '@testing-library/react' -import useInteraction, { handleInteractionPointer, log } from './useInteraction' +import useInteraction, { setMaxPointerSize, log } from './useInteraction' if (process.env.NODE_ENV === 'test') { log.level = log.NONE @@ -184,7 +184,7 @@ test('should set accuracy of the pointer', () => { pointerType: 'touch', type: 'pointerdown', } - handleInteractionPointer(PointerEvent) + setMaxPointerSize(PointerEvent) fireEvent.touchStart(getByTestId('test-div'), { type: 'touchstart' }) fireEvent.mouseMove(document.body, { type: 'mousemove' }) }) @@ -203,7 +203,7 @@ test('should set accuracy of the pointer', () => { pointerType: 'touch', type: 'pointerdown', } - handleInteractionPointer(PointerEvent) + setMaxPointerSize(PointerEvent) fireEvent.touchStart(getByTestId('test-div'), { type: 'touchstart' }) fireEvent.mouseMove(document.body, { type: 'mousemove' }) }) @@ -222,7 +222,7 @@ test('should set accuracy of the pointer', () => { pointerType: 'touch', type: 'pointerdown', } - handleInteractionPointer(PointerEvent) + setMaxPointerSize(PointerEvent) fireEvent.touchStart(getByTestId('test-div'), { type: 'touchstart' }) }) @@ -248,7 +248,7 @@ test('should set accuracy of the pointer', () => { pointerType: 'mouse', type: 'pointerdown', } - handleInteractionPointer(PointerEvent) + setMaxPointerSize(PointerEvent) fireEvent.mouseDown(getByTestId('test-div'), { type: 'mousedown' }) })