react-diff-viewer-continued 4.0.3 → 4.0.4

package/lib/esm/src/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import cn from 'classnames';
-import { computeLineInformation, DiffMethod, DiffType, } from './compute-lines';
-import computeStyles from './styles';
+import cn from "classnames";
+import * as React from "react";
+import memoize from "memoize-one";
 import { computeHiddenBlocks } from "./compute-hidden-blocks";
+import { DiffMethod, DiffType, computeLineInformation, } from "./compute-lines";
 import { Expand } from "./expand";
-import memoize from 'memoize-one';
+import computeStyles from "./styles";
 import { Fold } from "./fold";
 export var LineNumberPrefix;
 (function (LineNumberPrefix) {
@@ -15,8 +15,8 @@ export var LineNumberPrefix;
 class DiffViewer extends React.Component {
     styles;
     static defaultProps = {
-        oldValue: '',
-        newValue: '',
+        oldValue: "",
+        newValue: "",
         splitView: true,
         highlightLines: [],
         disableWordDiff: false,
@@ -27,7 +27,7 @@ class DiffViewer extends React.Component {
         showDiffOnly: true,
         useDarkTheme: false,
         linesOffset: 0,
-        nonce: '',
+        nonce: "",
     };
     constructor(props) {
         super(props);
@@ -87,16 +87,16 @@ class DiffViewer extends React.Component {
      */
     renderWordDiff = (diffArray, renderer) => {
         return diffArray.map((wordDiff, i) => {
-            const content = renderer ? renderer(wordDiff.value) : wordDiff.value;
-            if (typeof content !== 'string')
+            const content = renderer
+                ? renderer(wordDiff.value)
+                : wordDiff.value;
+            if (typeof content !== "string")
                 return;
-            return wordDiff.type === DiffType.ADDED ?
-                _jsx("ins", { className: cn(this.styles.wordDiff, {
-                        [this.styles.wordAdded]: wordDiff.type === DiffType.ADDED,
-                    }), children: content }, i)
-                : wordDiff.type === DiffType.REMOVED ? _jsx("del", { className: cn(this.styles.wordDiff, {
-                        [this.styles.wordRemoved]: wordDiff.type === DiffType.REMOVED,
-                    }), children: content }, i) : _jsx("span", { className: cn(this.styles.wordDiff), children: content }, i);
+            return wordDiff.type === DiffType.ADDED ? (_jsx("ins", { className: cn(this.styles.wordDiff, {
+                    [this.styles.wordAdded]: wordDiff.type === DiffType.ADDED,
+                }), children: content }, i)) : wordDiff.type === DiffType.REMOVED ? (_jsx("del", { className: cn(this.styles.wordDiff, {
+                    [this.styles.wordRemoved]: wordDiff.type === DiffType.REMOVED,
+                }), children: content }, i)) : (_jsx("span", { className: cn(this.styles.wordDiff), children: content }, i));
         });
     };
     /**
@@ -131,12 +131,12 @@ class DiffViewer extends React.Component {
         else {
             content = value;
         }
-        let ElementType = 'div';
+        let ElementType = "div";
         if (added && !hasWordDiff) {
-            ElementType = 'ins';
+            ElementType = "ins";
         }
         else if (removed && !hasWordDiff) {
-            ElementType = 'del';
+            ElementType = "del";
         }
         return (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers && (_jsx("td", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: cn(this.styles.gutter, {
                         [this.styles.emptyGutter]: !lineNumber,
@@ -167,7 +167,7 @@ class DiffViewer extends React.Component {
                         [this.styles.diffRemoved]: removed,
                         [this.styles.diffChanged]: changed,
                         [this.styles.highlightedLine]: highlightLine,
-                    }), children: _jsxs("pre", { children: [added && '+', removed && '-'] }) }), _jsx("td", { className: cn(this.styles.content, {
+                    }), children: _jsxs("pre", { children: [added && "+", removed && "-"] }) }), _jsx("td", { className: cn(this.styles.content, {
                         [this.styles.emptyLine]: !content,
                         [this.styles.diffAdded]: added,
                         [this.styles.diffRemoved]: removed,
@@ -176,12 +176,16 @@ class DiffViewer extends React.Component {
                         left: prefix === LineNumberPrefix.LEFT,
                         right: prefix === LineNumberPrefix.RIGHT,
                     }), onMouseDown: () => {
-                        const elements = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ? 'right' : 'left');
+                        const elements = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ? "right" : "left");
                         for (let i = 0; i < elements.length; i++) {
                             const element = elements.item(i);
                             element.classList.add(this.styles.noSelect);
                         }
-                    }, title: added && !hasWordDiff ? "Added line" : removed && !hasWordDiff ? "Removed line" : undefined, children: _jsx(ElementType, { className: this.styles.contentText, children: content }) })] }));
+                    }, title: added && !hasWordDiff
+                        ? "Added line"
+                        : removed && !hasWordDiff
+                            ? "Removed line"
+                            : undefined, children: _jsx(ElementType, { className: this.styles.contentText, children: content }) })] }));
     };
     /**
      * Generates lines for split view.
@@ -205,7 +209,7 @@ class DiffViewer extends React.Component {
     renderInlineView = ({ left, right }, index) => {
         let content;
         if (left.type === DiffType.REMOVED && right.type === DiffType.ADDED) {
-            return (_jsxs(React.Fragment, { children: [_jsx("tr", { className: this.styles.line, children: this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null) }), _jsx("tr", { className: this.styles.line, children: this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber) })] }, index));
+            return (_jsxs(React.Fragment, { children: [_jsx("tr", { className: this.styles.line, children: this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null) }), _jsx("tr", { className: this.styles.line, children: this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber, LineNumberPrefix.RIGHT) })] }, index));
         }
         if (left.type === DiffType.REMOVED) {
             content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null);
@@ -235,8 +239,8 @@ class DiffViewer extends React.Component {
      */
     renderSkippedLineIndicator = (num, blockNumber, leftBlockLineNumber, rightBlockLineNumber) => {
         const { hideLineNumbers, splitView } = this.props;
-        const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : (_jsxs("pre", { className: this.styles.codeFoldContent, children: ["Expand ", num, " lines ..."] }));
-        const content = (_jsx("td", { className: this.styles.codeFoldContentContainer, children: _jsx("a", { onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
+        const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : (_jsxs("span", { className: this.styles.codeFoldContent, children: ["Expand ", num, " lines ..."] }));
+        const content = (_jsx("td", { className: this.styles.codeFoldContentContainer, children: _jsx("button", { type: "button", className: this.styles.codeFoldExpandButton, onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
         const isUnifiedViewWithoutLineNumbers = !splitView && !hideLineNumbers;
         return (_jsxs("tr", { className: this.styles.codeFold, children: [!hideLineNumbers && _jsx("td", { className: this.styles.codeFoldGutter }), this.props.renderGutter ? (_jsx("td", { className: this.styles.codeFoldGutter })) : null, _jsx("td", { className: cn({
                         [this.styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
@@ -257,10 +261,11 @@ class DiffViewer extends React.Component {
                 const blockIndex = lineBlocks[lineIndex];
                 if (blockIndex !== undefined) {
                     const lastLineOfBlock = blocks[blockIndex].endLine === lineIndex;
-                    if (!this.state.expandedBlocks.includes(blockIndex) && lastLineOfBlock) {
+                    if (!this.state.expandedBlocks.includes(blockIndex) &&
+                        lastLineOfBlock) {
                         return (_jsx(React.Fragment, { children: this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber) }, lineIndex));
                     }
-                    else if (!this.state.expandedBlocks.includes(blockIndex)) {
+                    if (!this.state.expandedBlocks.includes(blockIndex)) {
                         return null;
                     }
                 }
@@ -272,13 +277,14 @@ class DiffViewer extends React.Component {
         return {
             diffNodes,
             blocks,
-            lineInformation
+            lineInformation,
         };
     };
     render = () => {
         const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, compareMethod, hideLineNumbers, nonce, } = this.props;
-        if (typeof (compareMethod) === 'string' && compareMethod !== DiffMethod.JSON) {
-            if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
+        if (typeof compareMethod === "string" &&
+            compareMethod !== DiffMethod.JSON) {
+            if (typeof oldValue !== "string" || typeof newValue !== "string") {
                 throw Error('"oldValue" and "newValue" should be strings');
             }
         }
@@ -294,8 +300,9 @@ class DiffViewer extends React.Component {
             colSpanOnSplitView += 1;
             colSpanOnInlineView += 1;
         }
-        let deletions = 0, additions = 0;
-        nodes.lineInformation.forEach((l) => {
+        let deletions = 0;
+        let additions = 0;
+        for (const l of nodes.lineInformation) {
             if (l.left.type === DiffType.ADDED) {
                 additions++;
             }
@@ -308,7 +315,7 @@ class DiffViewer extends React.Component {
             if (l.right.type === DiffType.REMOVED) {
                 deletions++;
             }
-        });
+        }
         const totalChanges = deletions + additions;
         const percentageAddition = Math.round((additions / totalChanges) * 100);
         const blocks = [];
@@ -321,24 +328,26 @@ class DiffViewer extends React.Component {
             }
         }
         const allExpanded = this.state.expandedBlocks.length === nodes.blocks.length;
-        return (_jsxs("div", { children: [_jsxs("div", { className: this.styles.summary, role: 'banner', children: [_jsx("a", { style: { cursor: 'pointer' }, onClick: () => {
+        return (_jsxs("div", { children: [_jsxs("div", { className: this.styles.summary, role: "banner", children: [_jsx("button", { type: "button", className: this.styles.allExpandButton, onClick: () => {
                                 this.setState({
-                                    expandedBlocks: allExpanded ? [] : nodes.blocks.map(b => b.index)
+                                    expandedBlocks: allExpanded
+                                        ? []
+                                        : nodes.blocks.map((b) => b.index),
                                 });
-                            }, children: allExpanded ? _jsx(Fold, {}) : _jsx(Expand, {}) }), " ", totalChanges, _jsx("div", { style: { display: 'flex', gap: '1px' }, children: blocks }), this.props.summary ? _jsx("span", { children: this.props.summary }) : null] }), _jsx("table", { className: cn(this.styles.diffContainer, {
+                            }, children: allExpanded ? _jsx(Fold, {}) : _jsx(Expand, {}) }), " ", totalChanges, _jsx("div", { style: { display: "flex", gap: "1px" }, children: blocks }), this.props.summary ? _jsx("span", { children: this.props.summary }) : null] }), _jsx("table", { className: cn(this.styles.diffContainer, {
                         [this.styles.splitView]: splitView,
                     }), onMouseUp: () => {
-                        const elements = document.getElementsByClassName('right');
+                        const elements = document.getElementsByClassName("right");
                         for (let i = 0; i < elements.length; i++) {
                             const element = elements.item(i);
                             element.classList.remove(this.styles.noSelect);
                         }
-                        const elementsLeft = document.getElementsByClassName('left');
+                        const elementsLeft = document.getElementsByClassName("left");
                         for (let i = 0; i < elementsLeft.length; i++) {
                             const element = elementsLeft.item(i);
                             element.classList.remove(this.styles.noSelect);
                         }
-                    }, children: _jsxs("tbody", { children: [_jsxs("tr", { children: [!this.props.hideLineNumbers ? _jsx("td", { width: '50px' }) : null, !splitView && !this.props.hideLineNumbers ? _jsx("td", { width: '50px' }) : null, this.props.renderGutter ? _jsx("td", { width: '50px' }) : null, _jsx("td", { width: '28px' }), _jsx("td", { width: '100%' }), splitView ? _jsxs(_Fragment, { children: [!this.props.hideLineNumbers ? _jsx("td", { width: '50px' }) : null, this.props.renderGutter ? _jsx("td", { width: '50px' }) : null, _jsx("td", { width: '28px' }), _jsx("td", { width: '100%' })] }) : null] }), leftTitle || rightTitle ? _jsxs("tr", { children: [_jsx("td", { colSpan: (splitView ? colSpanOnSplitView : colSpanOnInlineView), className: cn(this.styles.titleBlock, this.styles.column), role: 'columnheader', children: leftTitle ? _jsx("pre", { className: this.styles.contentText, children: leftTitle }) : null }), splitView ? _jsx("td", { colSpan: colSpanOnSplitView, className: cn(this.styles.titleBlock, this.styles.column), role: 'columnheader', children: rightTitle ? _jsx("pre", { className: this.styles.contentText, children: rightTitle }) : null }) : null] }) : null, nodes.diffNodes] }) })] }));
+                    }, children: _jsxs("tbody", { children: [_jsxs("tr", { children: [!this.props.hideLineNumbers ? _jsx("td", { width: "50px" }) : null, !splitView && !this.props.hideLineNumbers ? (_jsx("td", { width: "50px" })) : null, this.props.renderGutter ? _jsx("td", { width: "50px" }) : null, _jsx("td", { width: "28px" }), _jsx("td", { width: "100%" }), splitView ? (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers ? _jsx("td", { width: "50px" }) : null, this.props.renderGutter ? _jsx("td", { width: "50px" }) : null, _jsx("td", { width: "28px" }), _jsx("td", { width: "100%" })] })) : null] }), leftTitle || rightTitle ? (_jsxs("tr", { children: [_jsx("th", { colSpan: splitView ? colSpanOnSplitView : colSpanOnInlineView, className: cn(this.styles.titleBlock, this.styles.column), children: leftTitle ? (_jsx("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView ? (_jsx("th", { colSpan: colSpanOnSplitView, className: cn(this.styles.titleBlock, this.styles.column), children: rightTitle ? (_jsx("pre", { className: this.styles.contentText, children: rightTitle })) : null })) : null] })) : null, nodes.diffNodes] }) })] }));
     };
 }
 export default DiffViewer;