TooltipSnapshot() — react Function Reference

Architecture documentation for the TooltipSnapshot() function in EventTooltip.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ TooltipSnapshot() — react Function Reference

Dependency Diagram

graph TD
  670872df_95cd_5768_5e5a_0e6e294cbeb7["TooltipSnapshot()"]
  57dc23c0_c74d_e09e_ad1f_116cb590a38c["EventTooltip.js"]
  670872df_95cd_5768_5e5a_0e6e294cbeb7 -->|defined in| 57dc23c0_c74d_e09e_ad1f_116cb590a38c
  style 670872df_95cd_5768_5e5a_0e6e294cbeb7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/EventTooltip.js lines 335–365

const TooltipSnapshot = ({
  height,
  snapshot,
  width,
}: {
  height: number,
  snapshot: Snapshot,
  width: number,
}) => {
  const aspectRatio = snapshot.width / snapshot.height;

  // Zoomed in view should not be any bigger than the DevTools viewport.
  let safeWidth = snapshot.width;
  let safeHeight = snapshot.height;
  if (safeWidth > width) {
    safeWidth = width;
    safeHeight = safeWidth / aspectRatio;
  }
  if (safeHeight > height) {
    safeHeight = height;
    safeWidth = safeHeight * aspectRatio;
  }

  return (
    <img
      className={styles.Image}
      src={snapshot.imageSource}
      style={{height: safeHeight, width: safeWidth}}
    />
  );
};