extractBeforeInputEvent() — react Function Reference

Architecture documentation for the extractBeforeInputEvent() function in BeforeInputEventPlugin.js from the react codebase.

Function javascript BabelCompiler Validation calls 3 called by 1

Entity Profile

BabelCompiler→ Validation→ extractBeforeInputEvent() — react Function Reference

Dependency Diagram

graph TD
  f9de52ad_6a52_511a_a2cc_a210ea41b984["extractBeforeInputEvent()"]
  a235366c_1abe_162c_b9bf_7fbbfb597584["BeforeInputEventPlugin.js"]
  f9de52ad_6a52_511a_a2cc_a210ea41b984 -->|defined in| a235366c_1abe_162c_b9bf_7fbbfb597584
  28a876ba_5723_6438_1f13_a75a6758eb3f["extractEvents()"]
  28a876ba_5723_6438_1f13_a75a6758eb3f -->|calls| f9de52ad_6a52_511a_a2cc_a210ea41b984
  2c8561d4_b5f4_5116_1092_d5867919739f["getNativeBeforeInputChars()"]
  f9de52ad_6a52_511a_a2cc_a210ea41b984 -->|calls| 2c8561d4_b5f4_5116_1092_d5867919739f
  17925d0e_e60e_3acc_8c2a_0e7947a22eeb["getFallbackBeforeInputChars()"]
  f9de52ad_6a52_511a_a2cc_a210ea41b984 -->|calls| 17925d0e_e60e_3acc_8c2a_0e7947a22eeb
  dd9eb6ac_296c_ca63_51dd_da82f645aaaa["accumulateTwoPhaseListeners()"]
  f9de52ad_6a52_511a_a2cc_a210ea41b984 -->|calls| dd9eb6ac_296c_ca63_51dd_da82f645aaaa
  style f9de52ad_6a52_511a_a2cc_a210ea41b984 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js lines 381–415

function extractBeforeInputEvent(
  dispatchQueue: DispatchQueue,
  domEventName: DOMEventName,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: null | EventTarget,
) {
  let chars;

  if (canUseTextInputEvent) {
    chars = getNativeBeforeInputChars(domEventName, nativeEvent);
  } else {
    chars = getFallbackBeforeInputChars(domEventName, nativeEvent);
  }

  // If no characters are being inserted, no BeforeInput event should
  // be fired.
  if (!chars) {
    return null;
  }

  const listeners = accumulateTwoPhaseListeners(targetInst, 'onBeforeInput');
  if (listeners.length > 0) {
    const event: ReactSyntheticEvent = new SyntheticInputEvent(
      'onBeforeInput',
      'beforeinput',
      null,
      nativeEvent,
      nativeEventTarget,
    );
    dispatchQueue.push({event, listeners});
    // $FlowFixMe[incompatible-use]
    event.data = chars;
  }
}