Adding option to hide line numbers and improved style handling for gutters

Author: praneshr

README.md

@@ -68,6 +68,7 @@ class Diff extends PureComponent {
 |newVlaue          |`string`       |`''`          |New value as string.                          |
 |splitView         |`boolean`      |`true`        |Switch between `unified` and `split` view.    |
 |disableWordDiff   |`boolean`      |`false`       |Show and hide word diff in a diff line.       |
+|hideLineNumbers   |`boolean`      |`false`       |Show and hide line numbers.                   |
 |renderContent     |`function`     |`undefined`   |Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting)   |
 |onLineNumberClick |`function`     |`undefined`   |Event handler for line number click. `(lineId: string) => void`          |
 |hightlightLines   |`array[string]`|`[]`          |List of lines to be highlighted. Works together with `onLineNumberClick`. Line number are prefixed with `L` and `R` for the left and right section of the diff viewer, respectively. For example, `L-20` means 20th line in the left pane. To highlight a range of line numbers, pass the prefixed line number as an array. For example, `[L-2, L-3, L-4, L-5]` will highlight the lines `2-5` in the left pane.   |
@@ -161,9 +162,10 @@ const defaultStyles = {
   diffAdded: {}, // style object
   marker: {}, // style object
   gutter: {}, // style object
+  leftGutter: {}, // style object
+  rightGutter: {}, // style object
   hightlightedLine: {}, // style object
   hightlightedGutter: {}, // style object
-  lineNumber: {}, // style object
   line: {}, // style object
   wordDiff: {}, // style object
   wordAdded: {}, // style object

package.json

@@ -23,7 +23,7 @@
     "build:watch": "tsc --outDir lib/ -w",
     "publish:examples": "NODE_ENV=production yarn build:examples && gh-pages -d examples/dist -r $GITHUB_REPO_URL",
     "publish:examples:local": "NODE_ENV=production yarn build:examples && gh-pages -d examples/dist",
-    "start:examples": "webpack-dev-server --open --hot --inline --host 192.168.31.72",
+    "start:examples": "webpack-dev-server --open --hot --inline",
     "test": "mocha --require ts-node/register --require enzyme.ts ./test/index.tsx",
     "test:watch": "mocha --require ts-node/register --require enzyme.ts --watch-extensions ts,tsx --watch ./test/index.tsx"
   },

src/index.tsx

@@ -17,6 +17,7 @@ export interface IReactDiffViewerProps {
   newValue: string;
   splitView?: boolean;
   disableWordDiff?: boolean;
+  hideLineNumbers?: boolean;
   renderContent?: (source: string) => JSX.Element;
   onLineNumberClick?: (lineId: string, event: React.MouseEvent<HTMLTableCellElement>) => void;
   highlightLines?: string[];
@@ -73,6 +74,7 @@ class DiffViewer extends React.Component<IReactDiffViewerProps, IReactDiffViewer
     highlightLines: [],
     disableWordDiff: false,
     styles: {},
+    hideLineNumbers: false,
   }
 
   static propTypes = {
@@ -83,6 +85,7 @@ class DiffViewer extends React.Component<IReactDiffViewerProps, IReactDiffViewer
     renderContent: PropTypes.func,
     onLineNumberClick: PropTypes.func,
     styles: PropTypes.object,
+    hideLineNumbers: PropTypes.bool,
     highlightLines: PropTypes.arrayOf(PropTypes.string),
   }
 
@@ -101,6 +104,7 @@ class DiffViewer extends React.Component<IReactDiffViewerProps, IReactDiffViewer
                 leftLineNumber = leftLineNumber + 1
                 return <DefaultLine
                   styles={styles}
+                  hideLineNumbers={this.props.hideLineNumbers}
                   leftLineNumber={leftLineNumber}
                   rightLineNumber={rightLineNumber}
                   leftContent={ch}
@@ -150,6 +154,7 @@ class DiffViewer extends React.Component<IReactDiffViewerProps, IReactDiffViewer
                 removed={removed}
                 added={added}
                 key={num}
+                hideLineNumbers={this.props.hideLineNumbers}
                 hightlightLines={this.props.highlightLines}
                 renderContent={this.props.renderContent}
                 leftContent={leftContent}
@@ -200,6 +205,7 @@ class DiffViewer extends React.Component<IReactDiffViewerProps, IReactDiffViewer
               styles={styles}
               onLineNumberClick={this.props.onLineNumberClick}
               key={num}
+              hideLineNumbers={this.props.hideLineNumbers}
               renderContent={this.props.renderContent}
               removed={diffObj.removed}
               leftLineNumber={diffObj.added || leftLineNumber}

src/line.tsx

@@ -2,8 +2,6 @@ import * as React from 'react'
 import cn from 'classnames'
 
 import { IReactDiffViewerStyles } from './styles'
-
-
 interface ICommon {
   leftLineNumber?: number | boolean;
   rightLineNumber?: number | boolean;
@@ -13,6 +11,7 @@ interface ICommon {
   renderContent?: (source: string) => JSX.Element;
   hightlightLines?: string[];
   styles: IReactDiffViewerStyles;
+  hideLineNumbers?: boolean;
 }
 interface IInlineLine extends ICommon {
   content?: string | JSX.Element | JSX.Element[];
@@ -51,47 +50,55 @@ export const InlineLine = ({
   renderContent,
   hightlightLines = [],
   styles,
+  hideLineNumbers,
 }: IInlineLine) => {
   const hightlightLine = (leftLineNumber !== true || rightLineNumber !== true)
     && (
       hightlightLines.includes(`${leftLineNumberPrefix}-${leftLineNumber}`)
     || hightlightLines.includes(`${rightLineNumberPrefix}-${rightLineNumber}`)
   )
   return <tr className={styles.line}>
-    <td className={cn(
-      styles.lineNumber,
-      {
-        [styles.diffAdded]: added,
-        [styles.diffRemoved]: removed,
-        [styles.hightlightedGutter]: hightlightLine,
-      })}
-      onClick={onLineNumberClickProxy(onLineNumberClick, `${leftLineNumberPrefix}-${leftLineNumber}`)}
-    >
-      {
-        leftLineNumber !== true
-        && <LineNumber
-          lineNumber={leftLineNumber as number}
-          prefix={leftLineNumberPrefix}
-        />
-      }
-    </td>
-    <td className={cn(
-      styles.lineNumber,
-      {
-        [styles.diffAdded]: added,
-        [styles.diffRemoved]: removed,
-        [styles.hightlightedGutter]: hightlightLine,
-      })}
-      onClick={onLineNumberClickProxy(onLineNumberClick, `${rightLineNumberPrefix}-${rightLineNumber}`)}
-    >
-      {
-        rightLineNumber !== true
-        && <LineNumber
-          lineNumber={rightLineNumber as number}
-          prefix={rightLineNumberPrefix}
-        />
-      }
-    </td>
+    {
+      !hideLineNumbers
+      && <React.Fragment>
+        <td className={cn(
+          styles.gutter,
+          styles.leftGutter,
+          {
+            [styles.diffAdded]: added,
+            [styles.diffRemoved]: removed,
+            [styles.hightlightedGutter]: hightlightLine,
+          })}
+          onClick={onLineNumberClickProxy(onLineNumberClick, `${leftLineNumberPrefix}-${leftLineNumber}`)}
+        >
+          {
+            leftLineNumber !== true
+            && <LineNumber
+              lineNumber={leftLineNumber as number}
+              prefix={leftLineNumberPrefix}
+            />
+          }
+        </td>
+        <td className={cn(
+          styles.gutter,
+          styles.rightGutter,
+          {
+            [styles.diffAdded]: added,
+            [styles.diffRemoved]: removed,
+            [styles.hightlightedGutter]: hightlightLine,
+          })}
+          onClick={onLineNumberClickProxy(onLineNumberClick, `${rightLineNumberPrefix}-${rightLineNumber}`)}
+        >
+          {
+            rightLineNumber !== true
+            && <LineNumber
+              lineNumber={rightLineNumber as number}
+              prefix={rightLineNumberPrefix}
+            />
+          }
+        </td>
+      </React.Fragment>
+    }
     <td className={cn(
       styles.marker,
       {
@@ -130,30 +137,35 @@ export const DefaultLine = ({
   renderContent,
   hightlightLines = [],
   styles,
+  hideLineNumbers,
 }: IDefaultLine) => {
   const hightlightLeftLine = leftLineNumber !== true
     && hightlightLines.includes(`${leftLineNumberPrefix}-${leftLineNumber}`)
   const hightlightRightLine = rightLineNumber !== true
     && hightlightLines.includes(`${rightLineNumberPrefix}-${rightLineNumber}`)
 
   return <tr className={styles.line}>
-    <td className={cn(
-      styles.lineNumber,
-      {
-        [styles.diffRemoved]: removed,
-        [styles.hightlightedGutter]: hightlightLeftLine,
-      },
-    )}
-      onClick={onLineNumberClickProxy(onLineNumberClick, `${leftLineNumberPrefix}-${leftLineNumber}`)}
-    >
-      {
-        leftLineNumber
-        && <LineNumber
-          lineNumber={leftLineNumber as number}
-          prefix={leftLineNumberPrefix}
-        />
-      }
-    </td>
+    {
+      !hideLineNumbers
+      && <td className={cn(
+        styles.gutter,
+        styles.leftGutter,
+        {
+          [styles.diffRemoved]: removed,
+          [styles.hightlightedGutter]: hightlightLeftLine,
+        },
+      )}
+        onClick={onLineNumberClickProxy(onLineNumberClick, `${leftLineNumberPrefix}-${leftLineNumber}`)}
+      >
+        {
+          leftLineNumber
+          && <LineNumber
+            lineNumber={leftLineNumber as number}
+            prefix={leftLineNumberPrefix}
+          />
+        }
+      </td>
+    }
     <td className={cn(
       styles.marker,
       {
@@ -178,20 +190,24 @@ export const DefaultLine = ({
         || leftContent
       }
     </td>
-    <td className={cn(
-      styles.lineNumber,
-      {
-        [styles.diffAdded]: added,
-        [styles.hightlightedGutter]: hightlightRightLine,
-      },
-    )}
-      onClick={onLineNumberClickProxy(onLineNumberClick, `${rightLineNumberPrefix}-${rightLineNumber}`)}
-    >
-      <LineNumber
-        lineNumber={rightLineNumber as number}
-        prefix={rightLineNumberPrefix}
-      />
-    </td>
+    {
+      !hideLineNumbers
+      && <td className={cn(
+        styles.gutter,
+        styles.rightGutter,
+        {
+          [styles.diffAdded]: added,
+          [styles.hightlightedGutter]: hightlightRightLine,
+        },
+      )}
+        onClick={onLineNumberClickProxy(onLineNumberClick, `${rightLineNumberPrefix}-${rightLineNumber}`)}
+      >
+        <LineNumber
+          lineNumber={rightLineNumber as number}
+          prefix={rightLineNumberPrefix}
+        />
+      </td>
+    }
     <td className={cn(
       styles.marker,
       {

src/styles.ts

@@ -7,14 +7,15 @@ export interface IReactDiffViewerStyles {
   diffRemoved?: string;
   diffAdded?: string;
   line?: string;
-  gutter?: string;
   hightlightedGutter?: string;
-  lineNumber?: string;
+  gutter?: string;
   hightlightedLine?: string;
   marker?: string;
   wordDiff?: string;
   wordAdded?: string;
   wordRemoved?: string;
+  leftGutter?: string;
+  rightGutter?: string;
 }
 
 export interface IReactDiffViewerStylesOverride {
@@ -36,14 +37,15 @@ export interface IReactDiffViewerStylesOverride {
   diffRemoved?: Interpolation;
   diffAdded?: Interpolation;
   marker?: Interpolation;
-  gutter?: Interpolation;
   hightlightedLine?: Interpolation;
   hightlightedGutter?: Interpolation;
-  lineNumber?: Interpolation;
+  gutter?: Interpolation;
   line?: Interpolation;
   wordDiff?: Interpolation;
   wordAdded?: Interpolation;
   wordRemoved?: Interpolation;
+  leftGutter?: Interpolation;
+  rightGutter?: Interpolation;
 }
 
 export default (styleOverride: IReactDiffViewerStylesOverride) => {
@@ -129,13 +131,6 @@ export default (styleOverride: IReactDiffViewerStylesOverride) => {
     }
   })
 
-  const gutter = css({
-    display: 'flex',
-    marginRight: 40,
-    justifyContent: 'space-between',
-    label: 'gutter',
-  })
-
   const hightlightedLine = css({
     background: variables.highlightBackground,
     label: 'hightlighted-line',
@@ -145,11 +140,11 @@ export default (styleOverride: IReactDiffViewerStylesOverride) => {
     label: 'hightlighted-gutter',
   })
 
-  const lineNumber = css({
+  const gutter = css({
     userSelect: 'none',
     minWidth: 40,
     padding: '0 10px',
-    label: 'line-number',
+    label: 'gutter',
     cursor: 'pointer',
     textAlign: 'right',
     background: variables.gutterBackground,
@@ -183,7 +178,7 @@ export default (styleOverride: IReactDiffViewerStylesOverride) => {
 
   const wordDiff = css({
     padding: 2,
-    display: 'inline',
+    display: 'inline-flex',
     borderRadius: 1,
     label: 'word-diff',
   })
@@ -198,19 +193,28 @@ export default (styleOverride: IReactDiffViewerStylesOverride) => {
     label: 'word-removed',
   })
 
+  const leftGutter = css({
+    label: 'left-gutter',
+  })
+
+  const rightGutter = css({
+    label: 'right-gutter',
+  })
+
   const defaultStyles: any = {
     diffContainer,
     diffRemoved,
     diffAdded,
     marker,
-    gutter,
     hightlightedGutter,
     hightlightedLine,
-    lineNumber,
+    gutter,
     line,
     wordDiff,
     wordAdded,
     wordRemoved,
+    leftGutter,
+    rightGutter,
   }
 
   const computerOverrideStyles: any = Object.keys(styles)