[react-interactions] Press with useRef instead of useState (#16870)

We only need to read and modify the value for the lifetime of the hook
This commit is contained in:
Nicolas Gallagher
2019-09-23 16:25:13 -07:00
committed by GitHub
parent 911104a129
commit c5e7190ed4
2 changed files with 18 additions and 18 deletions
+15 -15
View File
@@ -128,10 +128,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) {
@@ -147,8 +147,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'));
}
@@ -156,47 +156,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'));
@@ -207,7 +207,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);
@@ -218,7 +218,7 @@ export function usePress(props: PressProps) {
if (onPress != null) {
onPress(createGestureState(e, 'press'));
}
updateActive(null);
activeResponder.current = null;
}
},
});
@@ -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,