Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 17x 17x 740x 740x 575x 740x 740x 740x 740x 573x 573x 570x 740x 738x 738x 738x 738x 180x 180x 558x 740x 740x | /**
* Copyright (c) Nicolas Gallagher
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
/**
* Hook for integrating the Responder System into React
*
* function SomeComponent({ onStartShouldSetResponder }) {
* const ref = useRef(null);
* useResponderEvents(ref, { onStartShouldSetResponder });
* return <div ref={ref} />
* }
*/
import type { ResponderConfig } from './ResponderSystem';
import * as React from 'react';
import * as ResponderSystem from './ResponderSystem';
const emptyObject = {};
let idCounter = 0;
function useStable<T>(getInitialValue: () => T): T {
const ref = React.useRef<T | null>(null);
if (ref.current == null) {
ref.current = getInitialValue();
}
return ref.current;
}
export default function useResponderEvents(hostRef: any, config: ResponderConfig = emptyObject) {
const id = useStable(() => idCounter++);
const isAttachedRef = React.useRef(false);
// This is a separate effects so it doesn't run when the config changes.
// On initial mount, attach global listeners if needed.
// On unmount, remove node potentially attached to the Responder System.
React.useEffect(() => {
ResponderSystem.attachListeners();
return () => {
ResponderSystem.removeNode(id);
};
}, [id]);
// Register and unregister with the Responder System as necessary
React.useEffect(() => {
const {
onMoveShouldSetResponder,
onMoveShouldSetResponderCapture,
onScrollShouldSetResponder,
onScrollShouldSetResponderCapture,
onSelectionChangeShouldSetResponder,
onSelectionChangeShouldSetResponderCapture,
onStartShouldSetResponder,
onStartShouldSetResponderCapture
} = config;
const requiresResponderSystem =
onMoveShouldSetResponder != null ||
onMoveShouldSetResponderCapture != null ||
onScrollShouldSetResponder != null ||
onScrollShouldSetResponderCapture != null ||
onSelectionChangeShouldSetResponder != null ||
onSelectionChangeShouldSetResponderCapture != null ||
onStartShouldSetResponder != null ||
onStartShouldSetResponderCapture != null;
const node = hostRef.current;
if (requiresResponderSystem) {
ResponderSystem.addNode(id, node, config);
isAttachedRef.current = true;
} else Iif (isAttachedRef.current) {
ResponderSystem.removeNode(id);
isAttachedRef.current = false;
}
}, [config, hostRef, id]);
React.useDebugValue({ isResponder: hostRef.current === ResponderSystem.getResponderNode() });
React.useDebugValue(config);
}
|