trimText() — react Function Reference

Architecture documentation for the trimText() function in text.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ trimText() — react Function Reference

Dependency Diagram

graph TD
  f48fe0f6_f3a8_290b_ed64_ae744f1c7286["trimText()"]
  021281ec_8833_1644_b4c0_b06b07634697["text.js"]
  f48fe0f6_f3a8_290b_ed64_ae744f1c7286 -->|defined in| 021281ec_8833_1644_b4c0_b06b07634697
  1d4e7b93_85d0_def6_42c9_e20824e49731["drawText()"]
  1d4e7b93_85d0_def6_42c9_e20824e49731 -->|calls| f48fe0f6_f3a8_290b_ed64_ae744f1c7286
  0b0e3142_4743_a84d_6f31_7f99707e3dee["getTextWidth()"]
  f48fe0f6_f3a8_290b_ed64_ae744f1c7286 -->|calls| 0b0e3142_4743_a84d_6f31_7f99707e3dee
  style f48fe0f6_f3a8_290b_ed64_ae744f1c7286 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/utils/text.js lines 30–63

export function trimText(
  context: CanvasRenderingContext2D,
  text: string,
  width: number,
): string | null {
  const maxIndex = text.length - 1;

  let startIndex = 0;
  let stopIndex = maxIndex;

  let longestValidIndex = 0;
  let longestValidText = null;

  // Trimming long text could be really slow if we decrease only 1 character at a time.
  // Trimming with more of a binary search approach is faster in the worst cases.
  while (startIndex <= stopIndex) {
    const currentIndex = Math.floor((startIndex + stopIndex) / 2);
    const trimmedText =
      currentIndex === maxIndex ? text : text.slice(0, currentIndex) + '…';

    if (getTextWidth(context, trimmedText) <= width) {
      if (longestValidIndex < currentIndex) {
        longestValidIndex = currentIndex;
        longestValidText = trimmedText;
      }

      startIndex = currentIndex + 1;
    } else {
      stopIndex = currentIndex - 1;
    }
  }

  return longestValidText;
}