extractEvents() — react Function Reference

Architecture documentation for the extractEvents() function in ScrollEndEventPlugin.js from the react codebase.

Function javascript BabelCompiler Validation calls 3 called by 1

Entity Profile

BabelCompiler→ Validation→ extractEvents() — react Function Reference

Dependency Diagram

graph TD
  4aec19a3_29c8_bb6a_c13b_8823cc60b026["extractEvents()"]
  f81462d0_b06e_fbf9_f1b8_93352f59d5eb["ScrollEndEventPlugin.js"]
  4aec19a3_29c8_bb6a_c13b_8823cc60b026 -->|defined in| f81462d0_b06e_fbf9_f1b8_93352f59d5eb
  e68ee20d_0906_0494_d1c4_4f9c91467ead["extractEvents()"]
  e68ee20d_0906_0494_d1c4_4f9c91467ead -->|calls| 4aec19a3_29c8_bb6a_c13b_8823cc60b026
  e68ee20d_0906_0494_d1c4_4f9c91467ead["extractEvents()"]
  4aec19a3_29c8_bb6a_c13b_8823cc60b026 -->|calls| e68ee20d_0906_0494_d1c4_4f9c91467ead
  23a35a28_0e9c_e296_230b_ac3a7b368eb1["debounceScrollEnd()"]
  4aec19a3_29c8_bb6a_c13b_8823cc60b026 -->|calls| 23a35a28_0e9c_e296_230b_ac3a7b368eb1
  ffe5dadd_1136_563b_f11c_19f1898c60be["accumulateSinglePhaseListeners()"]
  4aec19a3_29c8_bb6a_c13b_8823cc60b026 -->|calls| ffe5dadd_1136_563b_f11c_19f1898c60be
  style 4aec19a3_29c8_bb6a_c13b_8823cc60b026 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/events/plugins/ScrollEndEventPlugin.js lines 123–210

function extractEvents(
  dispatchQueue: DispatchQueue,
  domEventName: DOMEventName,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: null | EventTarget,
  eventSystemFlags: EventSystemFlags,
  targetContainer: null | EventTarget,
) {
  if (!enableScrollEndPolyfill) {
    return;
  }

  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;

  if (domEventName !== 'scrollend') {
    if (!isScrollEndEventSupported && inCapturePhase) {
      switch (domEventName) {
        case 'scroll': {
          if (nativeEventTarget !== null) {
            debounceScrollEnd(targetInst, nativeEvent, nativeEventTarget);
          }
          break;
        }
        case 'touchstart': {
          isTouchStarted = true;
          break;
        }
        case 'touchcancel':
        case 'touchend': {
          // Note we cannot use pointer events for this because they get
          // cancelled when native scrolling takes control.
          isTouchStarted = false;
          break;
        }
        case 'mousedown': {
          isMouseDown = true;
          break;
        }
        case 'mouseup': {
          isMouseDown = false;
          break;
        }
      }
    }
    return;
  }

  if (!isScrollEndEventSupported && nativeEventTarget !== null) {
    const existingTimer = getScrollEndTimer(nativeEventTarget);
    if (existingTimer != null) {
      // If we do get a native scrollend event fired, we cancel the polyfill.
      // This could happen if our feature detection is broken or if there's another
      // polyfill calling dispatchEvent to fire it before we fire ours.
      clearTimeout(existingTimer);
      clearScrollEndTimer(nativeEventTarget);
    } else {
      // If we didn't receive a 'scroll' event first, we ignore this event to avoid
      // double firing. Such as if we fired our onScrollEnd polyfill and then
      // we also observed a native one afterwards.
      return;
    }
  }

  // In React onScrollEnd doesn't bubble.
  const accumulateTargetOnly = !inCapturePhase;

  const listeners = accumulateSinglePhaseListeners(
    targetInst,
    'onScrollEnd',
    'scrollend',
    inCapturePhase,
    accumulateTargetOnly,
    nativeEvent,
  );

  if (listeners.length > 0) {
    // Intentionally create event lazily.
    const event: ReactSyntheticEvent = new SyntheticUIEvent(
      'onScrollEnd',
      'scrollend',