From b390019e7656e6cc1fd06049e292e26731e2b905 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 23 Sep 2019 15:46:37 -0700 Subject: [PATCH] [react-interactions] Press with useRef instead of useState We only need to read and modify the value for the lifetime of the hook --- .../events/src/dom/Press.js | 30 +++++++++---------- .../src/dom/testing-library/domEvents.js | 6 ++-- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/react-interactions/events/src/dom/Press.js b/packages/react-interactions/events/src/dom/Press.js index 7f1f4136aae72..c20dcd90e61c6 100644 --- a/packages/react-interactions/events/src/dom/Press.js +++ b/packages/react-interactions/events/src/dom/Press.js @@ -105,10 +105,10 @@ export function usePress(props: PressProps) { onPressStart, } = safeProps; - const [active, updateActive] = React.useState(null); + const activeResponder = React.useRef(null); const tap = useTap({ - disabled: disabled || active === 'keyboard', + disabled: disabled || activeResponder.current === 'keyboard', preventDefault, onAuxiliaryTap(e) { if (onPressStart != null) { @@ -124,8 +124,8 @@ export function usePress(props: PressProps) { } }, onTapStart(e) { - if (active == null) { - updateActive('tap'); + if (activeResponder.current == null) { + activeResponder.current = 'tap'; if (onPressStart != null) { onPressStart(createGestureState(e, 'pressstart')); } @@ -133,47 +133,47 @@ export function usePress(props: PressProps) { }, onTapChange: onPressChange, onTapUpdate(e) { - if (active === 'tap') { + if (activeResponder.current === 'tap') { if (onPressMove != null) { onPressMove(createGestureState(e, 'pressmove')); } } }, onTapEnd(e) { - if (active === 'tap') { + if (activeResponder.current === 'tap') { if (onPressEnd != null) { onPressEnd(createGestureState(e, 'pressend')); } if (onPress != null) { onPress(createGestureState(e, 'press')); } - updateActive(null); + activeResponder.current = null; } }, onTapCancel(e) { - if (active === 'tap') { + if (activeResponder.current === 'tap') { if (onPressEnd != null) { onPressEnd(createGestureState(e, 'pressend')); } - updateActive(null); + activeResponder.current = null; } }, }); const keyboard = useKeyboard({ - disabled: disabled || active === 'tap', + disabled: disabled || activeResponder.current === 'tap', onClick(e) { if (preventDefault !== false) { e.preventDefault(); } - if (active == null && onPress != null) { + if (activeResponder.current == null && onPress != null) { onPress(createGestureState(e, 'press')); } }, onKeyDown(e) { - if (active == null && isValidKey(e)) { + if (activeResponder.current == null && isValidKey(e)) { handlePreventDefault(preventDefault, e); - updateActive('keyboard'); + activeResponder.current = 'keyboard'; if (onPressStart != null) { onPressStart(createGestureState(e, 'pressstart')); @@ -184,7 +184,7 @@ export function usePress(props: PressProps) { } }, onKeyUp(e) { - if (active === 'keyboard' && isValidKey(e)) { + if (activeResponder.current === 'keyboard' && isValidKey(e)) { handlePreventDefault(preventDefault, e); if (onPressChange != null) { onPressChange(false); @@ -195,7 +195,7 @@ export function usePress(props: PressProps) { if (onPress != null) { onPress(createGestureState(e, 'press')); } - updateActive(null); + activeResponder.current = null; } }, }); diff --git a/packages/react-interactions/events/src/dom/testing-library/domEvents.js b/packages/react-interactions/events/src/dom/testing-library/domEvents.js index 963cbc2086fbb..85bc9600e37e1 100644 --- a/packages/react-interactions/events/src/dom/testing-library/domEvents.js +++ b/packages/react-interactions/events/src/dom/testing-library/domEvents.js @@ -104,7 +104,7 @@ function createPointerEvent( ctrlKey, detail, getModifierState(keyArg) { - createGetModifierState(keyArg, modifierState); + return createGetModifierState(keyArg, modifierState); }, height: isMouse ? 1 : height != null ? height : defaultPointerSize, metaKey, @@ -150,7 +150,7 @@ function createKeyboardEvent( altKey, ctrlKey, getModifierState(keyArg) { - createGetModifierState(keyArg, modifierState); + return createGetModifierState(keyArg, modifierState); }, isComposing, key, @@ -193,7 +193,7 @@ function createMouseEvent( ctrlKey, detail, getModifierState(keyArg) { - createGetModifierState(keyArg, modifierState); + return createGetModifierState(keyArg, modifierState); }, metaKey, movementX,