Adding all v3.0 features

- Added dark mode
- Added support for column title
- Added support for customizing tablle cell width
- Updated examples

Author: praneshr

examples/src/index.tsx

@@ -2,7 +2,7 @@ require('./style.scss');
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import ReactDiff from '../../lib/index';
+import ReactDiff, { DiffMethod } from '../../lib/index';
 
 const oldJson = require('./diff/json/old.json');
 const newJson = require('./diff/json/new.json');
@@ -19,7 +19,7 @@ interface ExampleState {
   highlightLine?: string[];
   language?: string;
   enableSyntaxHighlighting?: boolean;
-  compareMethod?: string;
+  compareMethod?: DiffMethod;
 }
 
 const P = (window as any).Prism;
@@ -32,7 +32,7 @@ class Example extends React.Component<{}, ExampleState> {
       highlightLine: [],
       language: 'javascript',
       enableSyntaxHighlighting: true,
-      compareMethod: 'diffChars'
+      compareMethod: DiffMethod.CHARS,
     };
   }
 
@@ -169,16 +169,14 @@ class Example extends React.Component<{}, ExampleState> {
               name="js_diff_compare_method"
               id="js_diff_compare_method"
               onChange={this.onCompareMethodChange}
-              value={this.state.compareMethod}
-            >
-              <option value="disabled">DISABLE</option>
-              <option value="diffChars">diffChars</option>
-              <option value="diffWords">diffWords</option>
-              <option value="diffWordsWithSpace">diffWordsWithSpace</option>
-              <option value="diffLines">diffLines</option>
-              <option value="diffTrimmedLines">diffTrimmedLines</option>
-              <option value="diffCss">diffCss</option>
-              <option value="diffSentences">diffSentences</option>
+              value={this.state.compareMethod}>
+              <option value={DiffMethod.CHARS}>Diff Chars</option>
+              <option value={DiffMethod.WORDS}>Diff Words</option>
+              <option value={DiffMethod.WORDS_WITH_SPACE}>DiffWordsWithSpace</option>
+              <option value={DiffMethod.LINES}>diffLines</option>
+              <option value={DiffMethod.TRIMMED_LINES}>diffTrimmedLines</option>
+              <option value={DiffMethod.SENTENCES}>diffCss</option>
+              <option value={DiffMethod.CSS}>diffSentences</option>
             </select>
           </span>
           <span>
@@ -220,8 +218,7 @@ class Example extends React.Component<{}, ExampleState> {
         </div>
         <div className="diff-viewer">
           <ReactDiff
-            disableWordDiff={ this.state.compareMethod === 'disabled' }
-            compareMethod={ this.state.compareMethod }
+            compareMethod={this.state.compareMethod}
             highlightLines={this.state.highlightLine}
             onLineNumberClick={this.onLineNumberClick}
             oldValue={oldValue}
@@ -230,6 +227,9 @@ class Example extends React.Component<{}, ExampleState> {
             renderContent={
               this.state.enableSyntaxHighlighting && this.syntaxHighlight
             }
+            useDarkTheme
+            leftTitle="asdfsdf"
+            rightTitle="asdfsdsldjfgbdkfjbgkjf"
           />
         </div>
         <footer>

examples/src/style.scss

@@ -79,7 +79,7 @@ pre[class*="language-"] {}
 
 .token.punctuation,
 .token.operator {
-  color: #393A34;
+  color: #3bf5d4;
   /* no highlight */
 }
 
@@ -106,13 +106,13 @@ pre[class*="language-"] {}
 .token.function,
 .token.deleted,
 .language-autohotkey .token.tag {
-  color: #9a050f;
+  color: #069071;
 }
 
 .token.tag,
 .token.selector,
 .language-autohotkey .token.keyword {
-  color: #00009f;
+  color: #ff9292;
 }
 
 .token.important,

src/compute-lines.ts

@@ -133,7 +133,7 @@ const computeLineInformation = (
   oldString: string,
   newString: string,
   disableWordDiff: boolean = false,
-  compareMethod: string = DiffMethod.CHARS,
+  compareMethod: string,
 ): ComputedLineInformation => {
   const diffArray = diff.diffLines(
     oldString.trimRight(),
@@ -196,7 +196,7 @@ const computeLineInformation = (
               right.type = type;
               // Do word level diff and assign the corresponding values to the
               // left and right diff information object.
-              if (disableWordDiff || !(<any>Object).values(DiffMethod).includes(compareMethod)) {
+              if (disableWordDiff) {
                 right.value = rightValue;
               } else {
                 const computedDiff = computeDiff(line, rightValue as string, compareMethod);

src/index.tsx

@@ -31,7 +31,7 @@ export interface ReactDiffViewerProps {
   // Enable/Disable word diff.
   disableWordDiff?: boolean;
   // JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
-  compareMethod?: string;
+  compareMethod?: DiffMethod;
   // Number of unmodified lines surrounding each line diff.
   extraLinesSurroundingDiff?: number;
   // Show/hide line number.
@@ -55,6 +55,12 @@ export interface ReactDiffViewerProps {
   highlightLines?: string[];
   // Style overrides.
   styles?: ReactDiffViewerStylesOverride;
+  // Use dark theme.
+  useDarkTheme?: boolean;
+  // Title for left column
+  leftTitle?: string | JSX.Element;
+  // Title for left column
+  rightTitle?: string | JSX.Element;
 }
 
 export interface ReactDiffViewerState {
@@ -76,6 +82,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
     hideLineNumbers: false,
     extraLinesSurroundingDiff: 3,
     showDiffOnly: true,
+    useDarkTheme: false,
   };
 
   public static propTypes = {
@@ -91,6 +98,14 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
     hideLineNumbers: PropTypes.bool,
     showDiffOnly: PropTypes.bool,
     highlightLines: PropTypes.arrayOf(PropTypes.string),
+    leftTitle: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+    ]),
+    rightTitle: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+    ]),
   };
 
   public constructor(props: ReactDiffViewerProps) {
@@ -136,6 +151,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
    */
   private computeStyles: (
     styles: ReactDiffViewerStylesOverride,
+    useDarkTheme: boolean,
   ) => ReactDiffViewerStyles = memoize(computeStyles);
 
   /**
@@ -228,7 +244,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
               [this.styles.highlightedGutter]: highlightLine,
             })}
           >
-            <pre>{lineNumber}</pre>
+            <pre className={this.styles.lineNumber}>{lineNumber}</pre>
           </td>
         )}
         {!this.props.splitView && !this.props.hideLineNumbers && (
@@ -244,7 +260,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
               [this.styles.highlightedGutter]: highlightLine,
             })}
           >
-            <pre>{additionalLineNumber}</pre>
+            <pre className={this.styles.lineNumber}>{additionalLineNumber}</pre>
           </td>
         )}
         <td
@@ -261,14 +277,14 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
           </pre>
         </td>
         <td
-          className={cn({
+          className={cn(this.styles.content, {
             [this.styles.emptyLine]: !content,
             [this.styles.diffAdded]: added,
             [this.styles.diffRemoved]: removed,
             [this.styles.highlightedLine]: highlightLine,
           })}
         >
-          <pre>{content}</pre>
+          <pre className={this.styles.contentText}>{content}</pre>
         </td>
       </React.Fragment>
     );
@@ -399,7 +415,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
     const message = this.props.codeFoldMessageRenderer
       ? this.props
         .codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)
-      : <pre>Expand {num} lines ...</pre>;
+      : <pre className={this.styles.codeFoldContent}>Expand {num} lines ...</pre>;
     const content = (
       <td>
         <a onClick={this.onBlockClickProxy(blockNumber)} tabIndex={0}>
@@ -489,18 +505,36 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
   }
 
   public render = (): JSX.Element => {
-    const { oldValue, newValue } = this.props;
+    const {
+      oldValue,
+      newValue,
+      useDarkTheme,
+      leftTitle,
+      rightTitle,
+      splitView,
+    } = this.props;
 
     if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
       throw Error('"oldValue" and "newValue" should be strings');
     }
 
-    this.styles = this.computeStyles(this.props.styles);
+    this.styles = this.computeStyles(this.props.styles, useDarkTheme);
     const nodes = this.renderDiff();
 
+    const title = (leftTitle || rightTitle)
+      && <tr>
+        <td colSpan={splitView ? 3 : 5} className={this.styles.titleBlock}>{leftTitle}</td>
+        {splitView
+          && <td colSpan={3} className={this.styles.titleBlock}>{rightTitle}</td>
+        }
+      </tr>;
+
     return (
       <table className={this.styles.diffContainer}>
-        <tbody>{nodes}</tbody>
+        <tbody>
+          {title}
+          {nodes}
+        </tbody>
       </table>
     );
   };