Merge pull request #75 from bridgecrewio/master

support line offset

Author: praneshr

README.md

@@ -1,3 +1,4 @@
+
 <p align="center">
   <img src='https://i.ibb.co/DKrGhVQ/Frame-1-1.png' width="100%" alt='React Diff Viewer' />
 </p>
@@ -78,6 +79,7 @@ class Diff extends PureComponent {
 | useDarkTheme              | `boolean`       | `true`                         | To enable/disable dark theme.                                                                                                                                                                                                                                                                                                                                                                                    |
 | leftTitle                 | `string`        | `undefined`                    | Column title for left section of the diff in split view. This will be used as the only title in inline view.                                                                                                                                                                                                                                                                                                     |
 | rightTitle                | `string`        | `undefined`                    | Column title for right section of the diff in split view. This will be ignored in inline view.                                                                                                                                                                                                                                                                                                                   |
+| linesOffset               | `number`        | `0`                            | Number to start count code lines from.                                                                                                                                                                                                                                                                                                                                                                           |
 
 ## Instance Methods
 

src/compute-lines.ts

@@ -133,12 +133,14 @@ const computeDiff = (
  * @param newString New string to compare with old string.
  * @param disableWordDiff Flag to enable/disable word diff.
  * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ * @param linesOffset line number to start counting from
  */
 const computeLineInformation = (
   oldString: string,
   newString: string,
   disableWordDiff: boolean = false,
   compareMethod: string = DiffMethod.CHARS,
+  linesOffset: number = 0,
 ): ComputedLineInformation => {
   const diffArray = diff.diffLines(
     oldString.trimRight(),
@@ -149,8 +151,8 @@ const computeLineInformation = (
       ignoreCase: false,
     },
   );
-  let rightLineNumber = 0;
-  let leftLineNumber = 0;
+  let rightLineNumber = linesOffset;
+  let leftLineNumber = linesOffset;
   let lineInformation: LineInformation[] = [];
   let counter = 0;
   const diffLines: number[] = [];

src/index.tsx

@@ -28,6 +28,8 @@ export interface ReactDiffViewerProps {
   newValue: string;
   // Enable/Disable split view.
   splitView?: boolean;
+  // Set line Offset
+  linesOffset?: number;
   // Enable/Disable word diff.
   disableWordDiff?: boolean;
   // JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
@@ -83,6 +85,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
     extraLinesSurroundingDiff: 3,
     showDiffOnly: true,
     useDarkTheme: false,
+    linesOffset: 0,
   };
 
   public static propTypes = {
@@ -106,6 +109,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
       PropTypes.string,
       PropTypes.element,
     ]),
+    linesOffset: PropTypes.number,
   };
 
   public constructor(props: ReactDiffViewerProps) {
@@ -441,12 +445,13 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
    * Generates the entire diff view.
    */
   private renderDiff = (): JSX.Element[] => {
-    const { oldValue, newValue, splitView, disableWordDiff, compareMethod } = this.props;
+    const { oldValue, newValue, splitView, disableWordDiff, compareMethod, linesOffset } = this.props;
     const { lineInformation, diffLines } = computeLineInformation(
       oldValue,
       newValue,
       disableWordDiff,
       compareMethod,
+      linesOffset,
     );
     const extraLines = this.props.extraLinesSurroundingDiff < 0
       ? 0

test/compute-lines-test.ts

@@ -374,4 +374,40 @@ Also this info`;
         ],
       });
   });
+
+  it('Should start line counting from offset', (): void => {
+    const oldCode = 'Hello World';
+    const newCode = `My Updated Name
+Also this info`;
+
+    expect(computeLineInformation(oldCode, newCode, true, DiffMethod.WORDS, 5))
+      .toMatchObject({
+        lineInformation: [
+          {
+            right: {
+              lineNumber: 6,
+              type: 1,
+              value: 'My Updated Name',
+            },
+            left: {
+              lineNumber: 6,
+              type: 2,
+              value: 'Hello World',
+            },
+          },
+          {
+            right: {
+              lineNumber: 7,
+              type: 1,
+              value: 'Also this info',
+            },
+            left: {},
+          },
+        ],
+        diffLines: [
+          0,
+          2,
+        ],
+      });
+  });
 });