Function ImageDiffModeSelector

ts/ImageDiffModeSelector.tsx:17–53

(props: Props)

/** A widget to toggle between image diff modes (blink or side-by-side). */
export function ImageDiffModeSelector(props: Props) {
  if (isOneSided(props.filePair)) {
    return null; // Only "side-by-side" makes sense for one-sided diffs.
  }

  // Returns the text, optionally wrapped in a link and/or <b> tag.
  const linkOrB = (isLink: boolean, isBold: boolean, val: ImageDiffMode, text: string) => {
    const inner = isBold ? <b>{text}</b> : text;
    if (isLink) {
      return (
        <a
          href="#"
          onClick={() => {
            props.changeImageDiffMode(val);
          }}>
          {inner}
        </a>
      );
    } else {
      return inner;
    }
  };

  const mode = props.imageDiffMode;
  const isBlink = mode == 'blink';
  const isSxS = mode == 'side-by-side';
  const isOnion = mode == 'onion-skin';
  const isSwipe = mode == 'swipe';
  return (
    <span>
      <span className="mode">{linkOrB(!isSxS, isSxS, 'side-by-side', 'Side by Side (s)')}</span>
      <span className="mode">{linkOrB(true, isBlink, 'blink', 'Blink (b)')}</span>
      <span className="mode">{linkOrB(!isOnion, isOnion, 'onion-skin', 'Onion Skin')}</span>
      <span className="mode">{linkOrB(!isSwipe, isSwipe, 'swipe', 'Swipe')}</span>
    </span>
  );
}