[react-interactions] Press with useRef instead of useState (#16870)
We only need to read and modify the value for the lifetime of the hook
Nicolas Gallagher committed
Sep 23, 2019 at 16:25 UTC
c5e7190ed4af266bbc636bda08e766fce9ee68a7
2 files changed
+18
-18
packages/react-interactions/events/src/dom/Press.js
+15
-15
@@ -128,10 +128,10 @@ export function usePress(props: PressProps) {
128
onPressStart,
129
} = safeProps;
130
131
- const [active, updateActive] = React.useState(null);
131
+ const activeResponder = React.useRef(null);
132
133
const tap = useTap({
134
- disabled: disabled || active === 'keyboard',
134
+ disabled: disabled || activeResponder.current === 'keyboard',
135
preventDefault,
136
onAuxiliaryTap(e) {
137
if (onPressStart != null) {
@@ -147,8 +147,8 @@ export function usePress(props: PressProps) {
147
}
148
},
149
onTapStart(e) {
150
- if (active == null) {
151
- updateActive('tap');
150
+ if (activeResponder.current == null) {
151
+ activeResponder.current = 'tap';
152
if (onPressStart != null) {
153
onPressStart(createGestureState(e, 'pressstart'));
154
}
@@ -156,47 +156,47 @@ export function usePress(props: PressProps) {
156
},
157
onTapChange: onPressChange,
158
onTapUpdate(e) {
159
- if (active === 'tap') {
159
+ if (activeResponder.current === 'tap') {
160
if (onPressMove != null) {
161
onPressMove(createGestureState(e, 'pressmove'));
162
}
163
}
164
},
165
onTapEnd(e) {
166
- if (active === 'tap') {
166
+ if (activeResponder.current === 'tap') {
167
if (onPressEnd != null) {
168
onPressEnd(createGestureState(e, 'pressend'));
169
}
170
if (onPress != null) {
171
onPress(createGestureState(e, 'press'));
172
}
173
- updateActive(null);
173
+ activeResponder.current = null;
174
}
175
},
176
onTapCancel(e) {
177
- if (active === 'tap') {
177
+ if (activeResponder.current === 'tap') {
178
if (onPressEnd != null) {
179
onPressEnd(createGestureState(e, 'pressend'));
180
}
181
- updateActive(null);
181
+ activeResponder.current = null;
182
}
183
},
184
});
185
186
const keyboard = useKeyboard({
187
- disabled: disabled || active === 'tap',
187
+ disabled: disabled || activeResponder.current === 'tap',
188
onClick(e) {
189
if (preventDefault !== false) {
190
e.preventDefault();
191
}
192
- if (active == null && onPress != null) {
192
+ if (activeResponder.current == null && onPress != null) {
193
onPress(createGestureState(e, 'press'));
194
}
195
},
196
onKeyDown(e) {
197
- if (active == null && isValidKey(e)) {
197
+ if (activeResponder.current == null && isValidKey(e)) {
198
handlePreventDefault(preventDefault, e);
199
- updateActive('keyboard');
199
+ activeResponder.current = 'keyboard';
200
201
if (onPressStart != null) {
202
onPressStart(createGestureState(e, 'pressstart'));
@@ -207,7 +207,7 @@ export function usePress(props: PressProps) {
207
}
208
},
209
onKeyUp(e) {
210
- if (active === 'keyboard' && isValidKey(e)) {
210
+ if (activeResponder.current === 'keyboard' && isValidKey(e)) {
211
handlePreventDefault(preventDefault, e);
212
if (onPressChange != null) {
213
onPressChange(false);
@@ -218,7 +218,7 @@ export function usePress(props: PressProps) {
218
if (onPress != null) {
219
onPress(createGestureState(e, 'press'));
220
}
221
- updateActive(null);
221
+ activeResponder.current = null;
222
}
223
},
224
});
packages/react-interactions/events/src/dom/testing-library/domEvents.js
+3
-3
@@ -104,7 +104,7 @@ function createPointerEvent(
104
ctrlKey,
105
detail,
106
getModifierState(keyArg) {
107
- createGetModifierState(keyArg, modifierState);
107
+ return createGetModifierState(keyArg, modifierState);
108
},
109
height: isMouse ? 1 : height != null ? height : defaultPointerSize,
110
metaKey,
@@ -150,7 +150,7 @@ function createKeyboardEvent(
150
altKey,
151
ctrlKey,
152
getModifierState(keyArg) {
153
- createGetModifierState(keyArg, modifierState);
153
+ return createGetModifierState(keyArg, modifierState);
154
},
155
isComposing,
156
key,
@@ -193,7 +193,7 @@ function createMouseEvent(
193
ctrlKey,
194
detail,
195
getModifierState(keyArg) {
196
- createGetModifierState(keyArg, modifierState);
196
+ return createGetModifierState(keyArg, modifierState);
197
},
198
metaKey,
199
movementX,