feat: update library for react 17, and add custom gutters

.eslintrc

@@ -1,23 +1,13 @@
 {
   "extends": ["airbnb-base", "plugin:@typescript-eslint/recommended"],
   "rules": {
-    "no-tabs": "off",
     "@typescript-eslint/indent": ["error", 2],
-    "max-len": ["error", {
-      "code": 100
-    }],
     "arrow-body-style": "off",
-  },
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
-      }
-    }
+    "import/extensions": "off"
   },
   "env": {
     "mocha": true,
     "node": true,
-    "browser": true,
-  },
+    "browser": true
+  }
 }

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

README.md

@@ -1,4 +1,3 @@
-
 <p align="center">
   <img src='https://i.ibb.co/DKrGhVQ/Frame-1-1.png' width="100%" alt='React Diff Viewer' />
 </p>
@@ -126,7 +125,7 @@ if(a === 10) {
 `;
 
 class Diff extends PureComponent {
-  highlightSyntax = str => (
+  highlightSyntax = (str) => (
     <pre
       style={{ display: 'inline' }}
       dangerouslySetInnerHTML={{
@@ -313,7 +312,7 @@ if(a === 10) {
 `;
 
 class Diff extends PureComponent {
-  highlightSyntax = str => (
+  highlightSyntax = (str) => (
     <span
       style={{ display: 'inline' }}
       dangerouslySetInnerHTML={{

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+};

examples/src/index.tsx

@@ -1,20 +1,23 @@
-require('./style.scss');
+import './style.scss';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import ReactDiff, { DiffMethod } from '../../lib/index';
+import ReactDiff, { DiffMethod } from '../../src/index';
 
 const oldJs = require('./diff/javascript/old.rjs').default;
 const newJs = require('./diff/javascript/new.rjs').default;
 
-const logo = require('../../logo.png');
+import logo from '../../logo.png';
+import cn from "classnames"
 
 interface ExampleState {
   splitView?: boolean;
   highlightLine?: string[];
   language?: string;
+  theme: 'dark' | 'light';
   enableSyntaxHighlighting?: boolean;
   compareMethod?: DiffMethod;
+  customGutter?: boolean;
 }
 
 const P = (window as any).Prism;
@@ -24,6 +27,9 @@ class Example extends React.Component<{}, ExampleState> {
     super(props);
     this.state = {
       highlightLine: [],
+      theme: 'dark',
+      splitView: true,
+      customGutter: true,
       enableSyntaxHighlighting: true,
     };
   }
@@ -57,7 +63,6 @@ class Example extends React.Component<{}, ExampleState> {
   };
 
   public render(): JSX.Element {
-
     return (
       <div className="react-diff-viewer-example">
         <div className="radial"></div>
@@ -74,33 +79,121 @@ class Example extends React.Component<{}, ExampleState> {
             <a href="https://reactjs.org" target="_blank">
               React.{' '}
             </a>
-            Featuring split view, inline view, word diff, line highlight and more.
+            Featuring split view, inline view, word diff, line highlight and
+            more.
           </p>
           <div className="cta">
-            <a href="https://github.com/praneshr/react-diff-viewer#install">
+            <a href="https://github.com/aeolun/react-diff-viewer-continued#install">
               <button type="button" className="btn btn-primary btn-lg">
                 Documentation
               </button>
             </a>
           </div>
+
+          <div className="options">
+            <div>
+              <label className="switch">
+                <input
+                  type="checkbox"
+                  checked={this.state.theme === 'dark'}
+                  onChange={() => {
+                    if (this.state.theme === 'dark') {
+                      document.body.classList.add('light');
+                    } else {
+                      document.body.classList.remove('light');
+                    }
+                    this.setState({
+                      theme: this.state.theme === 'dark' ? 'light' : 'dark',
+                    });
+                  }}
+                />
+                <span className="slider round"></span>
+              </label>
+              <span>Dark theme</span>
+            </div>
+            <div>
+              <label className={'switch'}>
+                <input
+                  type="checkbox"
+                  checked={this.state.splitView}
+                  onChange={() => {
+                    this.setState({
+                      splitView: !this.state.splitView,
+                    });
+                  }}
+                />
+                <span className="slider round"></span>
+              </label>
+              <span>Split pane</span>
+            </div>
+            <div>
+              <label className={'switch'}>
+                <input
+                  type="checkbox"
+                  checked={this.state.enableSyntaxHighlighting}
+                  onChange={() => {
+                    this.setState({
+                      enableSyntaxHighlighting:
+                        !this.state.enableSyntaxHighlighting,
+                    });
+                  }}
+                />
+                <span className="slider round"></span>
+              </label>
+              <span>Syntax highlighting</span>
+            </div>
+            <div>
+              <label className={'switch'}>
+                <input
+                  type="checkbox"
+                  checked={this.state.customGutter}
+                  onChange={() => {
+                    this.setState({
+                      customGutter:
+                        !this.state.customGutter,
+                    });
+                  }}
+                />
+                <span className="slider round"></span>
+              </label>
+              <span>Custom gutter</span>
+            </div>
+          </div>
         </div>
         <div className="diff-viewer">
           <ReactDiff
             highlightLines={this.state.highlightLine}
             onLineNumberClick={this.onLineNumberClick}
             oldValue={oldJs}
-            splitView
+            splitView={this.state.splitView}
             newValue={newJs}
-            renderContent={this.syntaxHighlight}
-            useDarkTheme
+            renderGutter={this.state.customGutter ? (diffData) => {
+              return (
+                <td className={diffData.type !== undefined ? cn(diffData.styles.gutter) : cn(diffData.styles.gutter, diffData.styles.emptyGutter, {})} title={"extra info"}>
+                  <pre className={cn(diffData.styles.lineNumber, {})}>
+                    {diffData.type == 2 ? 'DEL' : diffData.type == 1 ? "ADD" : diffData.type ? "===" : undefined}
+                  </pre>
+                </td>
+              )
+            } : undefined}
+            renderContent={
+              this.state.enableSyntaxHighlighting
+                ? this.syntaxHighlight
+                : undefined
+            }
+            useDarkTheme={this.state.theme === 'dark'}
             leftTitle="webpack.config.js master@2178133 - pushed 2 hours ago."
             rightTitle="webpack.config.js master@64207ee - pushed 13 hours ago."
           />
         </div>
         <footer>
-          Made with 💓 by{' '}
+          Originally made with 💓 by{' '}
           <a href="https://praneshravi.in" target="_blank">
             Pranesh Ravi
+          </a>{' '}
+          and extended by{' '}
+          <a href="https://serial-experiments.com" target="_blank">
+            Bart Riepe
           </a>
         </footer>
       </div>