How to use react-diff-view - 10 common examples

it('returns a flattened list of all changes', () => {
      const diff = parseDiff(diffWithDeletions)[0];
      const changes = getAllHunkChanges(diff.hunks);

      // Check a line from the first hunk:
      expect(changes.filter((c) => c.lineNumber === 2)[0].content).toEqual(
        "import { Diff, DiffProps, parseDiff } from 'react-diff-view';",
      );
      // Check a line from the second hunk:
      expect(changes.filter((c) => c.lineNumber === 24)[0].content).toEqual(
        '    console.log({ hunk });',
      );
      // Check a line from the third hunk:
      expect(changes.filter((c) => c.lineNumber === 50)[0].content).toEqual(
        '          ',
      );
    });
  });

threshold: 30,
    markLongDistanceDiff: true,
  });

  // old,new Text
  if (patch === '') {
    const gitDiff = getDiff(oldText, newText);
    const files = parseDiff(gitDiff);
    const hunk = files[0].hunks;

    return (
      hunk && 
    );
  }
  // Patch
  const files = parseDiff(
    patch
      .split('\n')
      .slice(1)
      .join('\n')
  );
  // eslint-disable-next-line react/prop-types
  const renderFile = ({ oldRevision, newRevision, type, hunks }) => (
    
  );

it('renders multiple inline messages', () => {
    const externalMessages = [
      // Add a message to line 9 in the first hunk.
      { line: 9, uid: 'first' },
      // Add a message to line 23 in the second hunk.
      { line: 23, uid: 'second' },
    ];

    const diff = parseDiff(diffWithDeletions)[0];
    const widgets = renderAndGetWidgets({
      diff,
      selectedMessageMap: createFakeLinterMessagesByPath({
        messages: externalMessages,
      }),
    });

    const { hunks } = diff;

    const firstWidget = renderWidget(hunks, widgets, externalMessages[0].line);
    expect(firstWidget.find(LinterMessage)).toHaveLength(1);
    expect(firstWidget.find(LinterMessage)).toHaveProp(
      'message',
      expect.objectContaining({
        uid: externalMessages[0].uid,
      }),

const createFakeDiffWithChanges = (
    testHunks: TestHunkChange[][],
  ): DiffInfo => {
    // The fixture is only used to initialize some fields. All of the
    // hunks/changes will be overwritten.
    const diffSample = parseDiff(diffWithDeletions)[0];

    const hunks = testHunks.map((hunk) => {
      return {
        changes: hunk.map((change) => {
          return {
            content: 'the content of the change is irrelevant to the tests',
            isDelete: change.type === 'delete',
            isInsert: change.type === 'insert',
            isNormal: change.type === 'normal',
            lineNumber: change.lineNumber,
            oldLineNumber:
              change.type === 'normal' ? change.lineNumber : undefined,
            type: change.type,
          };
        }),
        content: 'the content of hunks is irrelevant to the tests',

};
                })
                .filter(i => !i.hook)
                .filter(i => i.a !== i.b)
                .map(i => {
                    const context = pref.appDetails.compactDiff ? 2 : Number.MAX_SAFE_INTEGER;
                    // react-diff-view, awesome as it is, does not accept unidiff format, you must add a git header section
                    return `diff --git a/${i.name} b/${i.name}
index 6829b8a2..4c565f1b 100644
${formatLines(diffLines(i.a, i.b), {context, aname: `a/${name}}`, bname: `b/${i.name}`})}`;
                })
                .join('\n');
            // assume that if you only have one file, we don't need the file path
            const whiteBox = props.states.length > 1 ? 'white-box' : '';
            const showPath = props.states.length > 1;
            const files = parseDiff(diffText);
            const viewType = pref.appDetails.inlineDiff ? 'unified' : 'split';
            return (
                <div>
                    <div>
                        
                                services.viewPreferences.updatePreferences({
                                    appDetails: {
                                        ...pref.appDetails,
                                        compactDiff: !pref.appDetails.compactDiff
                                    }
                                })
                            }
                        /&gt;</div></div>

export const getDiffAnchors = (diff: DiffInfo): string[] => {
  const anchors: string[] = [];

  for (const hunk of diff.hunks) {
    let seekingChange = true;
    for (const change of hunk.changes) {
      if (change.type === 'normal') {
        seekingChange = true;
      } else if (seekingChange) {
        // This is the first change in a block.
        anchors.push(getChangeKey(change));
        seekingChange = false;
      }
    }
  }
  return anchors;
};

getWidgets = (
    hunks: Hunks,
    selectedMessageMap: LinterProviderInfo['selectedMessageMap'],
  ) => {
    const { _changeCanBeCommentedUpon, enableCommenting, version } = this.props;

    const allWidgets: WidgetMap = {};

    // We only want widgets for delete, insert and normal changes, not eofnl changes.
    const changesAllowingWidgets = getAllHunkChanges(hunks).filter(
      (change) => change.isDelete || change.isInsert || change.isNormal,
    );
    for (const change of changesAllowingWidgets) {
      const changeKey = getChangeKey(change);
      const line = change.lineNumber;

      let messages;
      if (line && selectedMessageMap) {
        messages = selectedMessageMap.byLine[line];
      }

      let widget =
        enableCommenting && line && _changeCanBeCommentedUpon(change) ? (
          
            {(allComments) => allComments}

(canExpand, hunks) => {
        if (canExpand) {
            // Expand a normal section to demostrate util function
            return expandCollapsedBlockBy(
                expandFromRawCode(hunks, rawCode, 18, 22),
                rawCode,
                lines => lines <= 10
            );
        }

        return hunks;
    }
);

const DiffView = ({ oldText, newText, viewType, patch }) => {
  const markEdits = markCharacterEdits({
    threshold: 30,
    markLongDistanceDiff: true,
  });

  // old,new Text
  if (patch === '') {
    const gitDiff = getDiff(oldText, newText);
    const files = parseDiff(gitDiff);
    const hunk = files[0].hunks;

    return (
      hunk && 
    );
  }
  // Patch
  const files = parseDiff(

const DiffView = ({
  oldText,
  newText,
  className,
  viewType,
  patch,
  markEditsByWord,
  emptyState,
  markThreshold,
  markLongDistanceDiff,
  ...props
}) => {
  const markEditProps = { markThreshold, markLongDistanceDiff };
  const markEdits = markEditsByWord ? markWordEdits(markEditProps) : markCharacterEdits(markEditProps);
  const classes = classNames('diff-pf', className);

  // Old, New Text
  if (!patch) {
    const gitDiff = getDiff(oldText, newText);
    const files = parseDiff(gitDiff);
    const hunk = files[0].hunks;

    if (hunk.length === 0) {
      return emptyState;
    }
    return hunk && ;
  }

  // Patch
  const files = parseDiff(patch);