diff --git a/lib/compute-lines.d.ts b/lib/compute-lines.d.ts new file mode 100644 index 00000000..c39cf443 --- /dev/null +++ b/lib/compute-lines.d.ts @@ -0,0 +1,51 @@ +export declare enum DiffType { + DEFAULT = 0, + ADDED = 1, + REMOVED = 2 +} +export declare enum DiffMethod { + CHARS = "diffChars", + WORDS = "diffWords", + WORDS_WITH_SPACE = "diffWordsWithSpace", + LINES = "diffLines", + TRIMMED_LINES = "diffTrimmedLines", + SENTENCES = "diffSentences", + CSS = "diffCss" +} +export interface DiffInformation { + value?: string | DiffInformation[]; + lineNumber?: number; + type?: DiffType; +} +export interface LineInformation { + left?: DiffInformation; + right?: DiffInformation; +} +export interface ComputedLineInformation { + lineInformation: LineInformation[]; + diffLines: number[]; +} +export interface ComputedDiffInformation { + left?: DiffInformation[]; + right?: DiffInformation[]; +} +export interface JsDiffChangeObject { + added?: boolean; + removed?: boolean; + value?: string; +} +/** + * [TODO]: Think about moving common left and right value assignment to a + * common place. Better readability? + * + * Computes line wise information based in the js diff information passed. Each + * line contains information about left and right section. Left side denotes + * deletion and right side denotes addition. + * + * @param oldString Old string to compare. + * @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 + */ +declare const computeLineInformation: (oldString: string, newString: string, disableWordDiff?: boolean, compareMethod?: string) => ComputedLineInformation; +export { computeLineInformation }; diff --git a/lib/compute-lines.js b/lib/compute-lines.js new file mode 100644 index 00000000..92f0a9ef --- /dev/null +++ b/lib/compute-lines.js @@ -0,0 +1,191 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const diff = require("diff"); +const jsDiff = diff; +var DiffType; +(function (DiffType) { + DiffType[DiffType["DEFAULT"] = 0] = "DEFAULT"; + DiffType[DiffType["ADDED"] = 1] = "ADDED"; + DiffType[DiffType["REMOVED"] = 2] = "REMOVED"; +})(DiffType = exports.DiffType || (exports.DiffType = {})); +// See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods +var DiffMethod; +(function (DiffMethod) { + DiffMethod["CHARS"] = "diffChars"; + DiffMethod["WORDS"] = "diffWords"; + DiffMethod["WORDS_WITH_SPACE"] = "diffWordsWithSpace"; + DiffMethod["LINES"] = "diffLines"; + DiffMethod["TRIMMED_LINES"] = "diffTrimmedLines"; + DiffMethod["SENTENCES"] = "diffSentences"; + DiffMethod["CSS"] = "diffCss"; +})(DiffMethod = exports.DiffMethod || (exports.DiffMethod = {})); +/** + * Splits diff text by new line and computes final list of diff lines based on + * conditions. + * + * @param value Diff text from the js diff module. + */ +const constructLines = (value) => { + const lines = value.split('\n'); + const isAllEmpty = lines.every((val) => !val); + if (isAllEmpty) { + // This is to avoid added an extra new line in the UI. + if (lines.length === 2) { + return []; + } + lines.pop(); + return lines; + } + const lastLine = lines[lines.length - 1]; + const firstLine = lines[0]; + // Remove the first and last element if they are new line character. This is + // to avoid addition of extra new line in the UI. + if (!lastLine) { + lines.pop(); + } + if (!firstLine) { + lines.shift(); + } + return lines; +}; +/** + * Computes word diff information in the line. + * [TODO]: Consider adding options argument for JsDiff text block comparison + * + * @param oldValue Old word in the line. + * @param newValue New word in the line. + * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api + */ +const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => { + const diffArray = jsDiff[compareMethod](oldValue, newValue); + const computedDiff = { + left: [], + right: [], + }; + diffArray + .forEach(({ added, removed, value }) => { + const diffInformation = {}; + if (added) { + diffInformation.type = DiffType.ADDED; + diffInformation.value = value; + computedDiff.right.push(diffInformation); + } + if (removed) { + diffInformation.type = DiffType.REMOVED; + diffInformation.value = value; + computedDiff.left.push(diffInformation); + } + if (!removed && !added) { + diffInformation.type = DiffType.DEFAULT; + diffInformation.value = value; + computedDiff.right.push(diffInformation); + computedDiff.left.push(diffInformation); + } + return diffInformation; + }); + return computedDiff; +}; +/** + * [TODO]: Think about moving common left and right value assignment to a + * common place. Better readability? + * + * Computes line wise information based in the js diff information passed. Each + * line contains information about left and right section. Left side denotes + * deletion and right side denotes addition. + * + * @param oldString Old string to compare. + * @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 + */ +const computeLineInformation = (oldString, newString, disableWordDiff = false, compareMethod = DiffMethod.CHARS) => { + const diffArray = diff.diffLines(oldString.trimRight(), newString.trimRight(), { + newlineIsToken: true, + ignoreWhitespace: false, + ignoreCase: false, + }); + let rightLineNumber = 0; + let leftLineNumber = 0; + let lineInformation = []; + let counter = 0; + const diffLines = []; + const ignoreDiffIndexes = []; + const getLineInformation = (value, diffIndex, added, removed, evaluateOnlyFirstLine) => { + const lines = constructLines(value); + return lines.map((line, lineIndex) => { + const left = {}; + const right = {}; + if (ignoreDiffIndexes.includes(`${diffIndex}-${lineIndex}`) + || (evaluateOnlyFirstLine && lineIndex !== 0)) { + return undefined; + } + if (added || removed) { + if (!diffLines.includes(counter)) { + diffLines.push(counter); + } + if (removed) { + leftLineNumber += 1; + left.lineNumber = leftLineNumber; + left.type = DiffType.REMOVED; + left.value = line || ' '; + // When the current line is of type REMOVED, check the next item in + // the diff array whether it is of type ADDED. If true, the current + // diff will be marked as both REMOVED and ADDED. Meaning, the + // current line is a modification. + const nextDiff = diffArray[diffIndex + 1]; + if (nextDiff && nextDiff.added) { + const nextDiffLines = constructLines(nextDiff.value)[lineIndex]; + if (nextDiffLines) { + const { value: rightValue, lineNumber, type, } = getLineInformation(nextDiff.value, diffIndex, true, false, true)[0].right; + // When identified as modification, push the next diff to ignore + // list as the next value will be added in this line computation as + // right and left values. + ignoreDiffIndexes.push(`${diffIndex + 1}-${lineIndex}`); + right.lineNumber = lineNumber; + right.type = type; + // Do word level diff and assign the corresponding values to the + // left and right diff information object. + if (disableWordDiff) { + right.value = rightValue; + } + else { + const computedDiff = computeDiff(line, rightValue, compareMethod); + right.value = computedDiff.right; + left.value = computedDiff.left; + } + } + } + } + else { + rightLineNumber += 1; + right.lineNumber = rightLineNumber; + right.type = DiffType.ADDED; + right.value = line; + } + } + else { + leftLineNumber += 1; + rightLineNumber += 1; + left.lineNumber = leftLineNumber; + left.type = DiffType.DEFAULT; + left.value = line; + right.lineNumber = rightLineNumber; + right.type = DiffType.DEFAULT; + right.value = line; + } + counter += 1; + return { right, left }; + }).filter(Boolean); + }; + diffArray + .forEach(({ added, removed, value }, index) => { + lineInformation = [ + ...lineInformation, + ...getLineInformation(value, index, added, removed), + ]; + }); + return { + lineInformation, diffLines, + }; +}; +exports.computeLineInformation = computeLineInformation; diff --git a/lib/index.d.ts b/lib/index.d.ts new file mode 100644 index 00000000..39443d39 --- /dev/null +++ b/lib/index.d.ts @@ -0,0 +1,141 @@ +import * as React from 'react'; +import * as PropTypes from 'prop-types'; +import { LineInformation, DiffMethod } from './compute-lines'; +import { ReactDiffViewerStylesOverride } from './styles'; +export declare enum LineNumberPrefix { + LEFT = "L", + RIGHT = "R" +} +export interface ReactDiffViewerProps { + oldValue: string; + newValue: string; + splitView?: boolean; + disableWordDiff?: boolean; + compareMethod?: DiffMethod; + extraLinesSurroundingDiff?: number; + hideLineNumbers?: boolean; + showDiffOnly?: boolean; + renderContent?: (source: string) => JSX.Element; + codeFoldMessageRenderer?: (totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => JSX.Element; + onLineNumberClick?: (lineId: string, event: React.MouseEvent) => void; + onLineContentClick?: (params: { + direction: 'leftCode' | 'rightCode'; + words: string; + }) => void; + highlightLines?: string[]; + styles?: ReactDiffViewerStylesOverride; + useDarkTheme?: boolean; + leftTitle?: string | JSX.Element; + rightTitle?: string | JSX.Element; +} +export interface ReactDiffViewerState { + expandedBlocks?: number[]; +} +declare class DiffViewer extends React.Component { + private styles; + static defaultProps: ReactDiffViewerProps; + static propTypes: { + oldValue: PropTypes.Validator; + newValue: PropTypes.Validator; + splitView: PropTypes.Requireable; + disableWordDiff: PropTypes.Requireable; + compareMethod: PropTypes.Requireable; + renderContent: PropTypes.Requireable<(...args: any[]) => any>; + onLineNumberClick: PropTypes.Requireable<(...args: any[]) => any>; + extraLinesSurroundingDiff: PropTypes.Requireable; + styles: PropTypes.Requireable; + hideLineNumbers: PropTypes.Requireable; + showDiffOnly: PropTypes.Requireable; + highlightLines: PropTypes.Requireable; + leftTitle: PropTypes.Requireable; + rightTitle: PropTypes.Requireable; + }; + constructor(props: ReactDiffViewerProps); + /** + * Resets code block expand to the initial stage. Will be exposed to the parent component via + * refs. + */ + resetCodeBlocks: () => boolean; + /** + * Pushes the target expanded code block to the state. During the re-render, + * this value is used to expand/fold unmodified code. + */ + private onBlockExpand; + /** + * Computes final styles for the diff viewer. It combines the default styles with the user + * supplied overrides. The computed styles are cached with performance in mind. + * + * @param styles User supplied style overrides. + */ + private computeStyles; + /** + * Returns a function with clicked line number in the closure. Returns an no-op function when no + * onLineNumberClick handler is supplied. + * + * @param id Line id of a line. + */ + private onLineNumberClickProxy; + private onLineContentClickProxy; + /** + * Maps over the word diff and constructs the required React elements to show word diff. + * + * @param diffArray Word diff information derived from line information. + * @param renderer Optional renderer to format diff words. Useful for syntax highlighting. + */ + private renderWordDiff; + /** + * Maps over the line diff and constructs the required react elements to show line diff. It calls + * renderWordDiff when encountering word diff. This takes care of both inline and split view line + * renders. + * + * @param lineNumber Line number of the current line. + * @param type Type of diff of the current line. + * @param prefix Unique id to prefix with the line numbers. + * @param value Content of the line. It can be a string or a word diff array. + * @param additionalLineNumber Additional line number to be shown. Useful for rendering inline + * diff view. Right line number will be passed as additionalLineNumber. + * @param additionalPrefix Similar to prefix but for additional line number. + */ + private renderLine; + /** + * Generates lines for split view. + * + * @param obj Line diff information. + * @param obj.left Life diff information for the left pane of the split view. + * @param obj.right Life diff information for the right pane of the split view. + * @param index React key for the lines. + */ + private renderSplitView; + /** + * Generates lines for inline view. + * + * @param obj Line diff information. + * @param obj.left Life diff information for the added section of the inline view. + * @param obj.right Life diff information for the removed section of the inline view. + * @param index React key for the lines. + */ + renderInlineView: ({ left, right }: LineInformation, index: number) => JSX.Element; + /** + * Returns a function with clicked block number in the closure. + * + * @param id Cold fold block id. + */ + private onBlockClickProxy; + /** + * Generates cold fold block. It also uses the custom message renderer when available to show + * cold fold messages. + * + * @param num Number of skipped lines between two blocks. + * @param blockNumber Code fold block id. + * @param leftBlockLineNumber First left line number after the current code fold block. + * @param rightBlockLineNumber First right line number after the current code fold block. + */ + private renderSkippedLineIndicator; + /** + * Generates the entire diff view. + */ + private renderDiff; + render: () => JSX.Element; +} +export default DiffViewer; +export { ReactDiffViewerStylesOverride, DiffMethod }; diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 00000000..a265c25d --- /dev/null +++ b/lib/index.js @@ -0,0 +1,334 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const React = require("react"); +const PropTypes = require("prop-types"); +const classnames_1 = require("classnames"); +const compute_lines_1 = require("./compute-lines"); +exports.DiffMethod = compute_lines_1.DiffMethod; +const styles_1 = require("./styles"); +// eslint-disable-next-line @typescript-eslint/no-var-requires +const m = require('memoize-one'); +const memoize = m.default || m; +var LineNumberPrefix; +(function (LineNumberPrefix) { + LineNumberPrefix["LEFT"] = "L"; + LineNumberPrefix["RIGHT"] = "R"; +})(LineNumberPrefix = exports.LineNumberPrefix || (exports.LineNumberPrefix = {})); +class DiffViewer extends React.Component { + constructor(props) { + super(props); + /** + * Resets code block expand to the initial stage. Will be exposed to the parent component via + * refs. + */ + this.resetCodeBlocks = () => { + if (this.state.expandedBlocks.length > 0) { + this.setState({ + expandedBlocks: [], + }); + return true; + } + return false; + }; + /** + * Pushes the target expanded code block to the state. During the re-render, + * this value is used to expand/fold unmodified code. + */ + this.onBlockExpand = (id) => { + const prevState = this.state.expandedBlocks.slice(); + prevState.push(id); + this.setState({ + expandedBlocks: prevState, + }); + }; + /** + * Computes final styles for the diff viewer. It combines the default styles with the user + * supplied overrides. The computed styles are cached with performance in mind. + * + * @param styles User supplied style overrides. + */ + this.computeStyles = memoize(styles_1.default); + /** + * Returns a function with clicked line number in the closure. Returns an no-op function when no + * onLineNumberClick handler is supplied. + * + * @param id Line id of a line. + */ + this.onLineNumberClickProxy = (id) => { + if (this.props.onLineNumberClick) { + return (e) => this.props.onLineNumberClick(id, e); + } + return () => { }; + }; + this.onLineContentClickProxy = ({ direction, value }) => { + let words; + let _direction; + if (!this.props.onLineContentClick) + return () => { }; + if (this.props.onLineContentClick) + return (event) => { + event.stopPropagation(); + event.preventDefault(); + words = value; + _direction = 1 === direction ? 'rightCode' : 'leftCode'; + if ('[object String]' !== Object.prototype.toString.call(value)) { + words = value.map((item) => item.value).join(''); + } + this.props.onLineContentClick({ + direction: _direction, + words + }); + }; + }; + /** + * Maps over the word diff and constructs the required React elements to show word diff. + * + * @param diffArray Word diff information derived from line information. + * @param renderer Optional renderer to format diff words. Useful for syntax highlighting. + */ + this.renderWordDiff = (diffArray, renderer) => { + return diffArray.map((wordDiff, i) => { + return (React.createElement("span", { key: i, className: classnames_1.default(this.styles.wordDiff, { + [this.styles.wordAdded]: wordDiff.type === compute_lines_1.DiffType.ADDED, + [this.styles.wordRemoved]: wordDiff.type === compute_lines_1.DiffType.REMOVED, + }) }, renderer ? renderer(wordDiff.value) : wordDiff.value)); + }); + }; + /** + * Maps over the line diff and constructs the required react elements to show line diff. It calls + * renderWordDiff when encountering word diff. This takes care of both inline and split view line + * renders. + * + * @param lineNumber Line number of the current line. + * @param type Type of diff of the current line. + * @param prefix Unique id to prefix with the line numbers. + * @param value Content of the line. It can be a string or a word diff array. + * @param additionalLineNumber Additional line number to be shown. Useful for rendering inline + * diff view. Right line number will be passed as additionalLineNumber. + * @param additionalPrefix Similar to prefix but for additional line number. + */ + this.renderLine = (lineNumber, type, prefix, value, additionalLineNumber, additionalPrefix) => { + const lineNumberTemplate = `${prefix}-${lineNumber}`; + const additionalLineNumberTemplate = `${additionalPrefix}-${additionalLineNumber}`; + const highlightLine = this.props.highlightLines.includes(lineNumberTemplate) + || this.props.highlightLines.includes(additionalLineNumberTemplate); + const added = type === compute_lines_1.DiffType.ADDED; + const removed = type === compute_lines_1.DiffType.REMOVED; + let content; + if (Array.isArray(value)) { + content = this.renderWordDiff(value, this.props.renderContent); + } + else if (this.props.renderContent) { + content = this.props.renderContent(value); + } + else { + content = value; + } + return (React.createElement(React.Fragment, null, + !this.props.hideLineNumbers && (React.createElement("td", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: classnames_1.default(this.styles.gutter, { + [this.styles.emptyGutter]: !lineNumber, + [this.styles.diffAdded]: added, + [this.styles.diffRemoved]: removed, + [this.styles.highlightedGutter]: highlightLine, + }) }, + React.createElement("pre", { className: this.styles.lineNumber }, lineNumber))), + !this.props.splitView && !this.props.hideLineNumbers && (React.createElement("td", { onClick: additionalLineNumber + && this.onLineNumberClickProxy(additionalLineNumberTemplate), className: classnames_1.default(this.styles.gutter, { + [this.styles.emptyGutter]: !additionalLineNumber, + [this.styles.diffAdded]: added, + [this.styles.diffRemoved]: removed, + [this.styles.highlightedGutter]: highlightLine, + }) }, + React.createElement("pre", { className: this.styles.lineNumber }, additionalLineNumber))), + React.createElement("td", { className: classnames_1.default(this.styles.marker, { + [this.styles.emptyLine]: !content, + [this.styles.diffAdded]: added, + [this.styles.diffRemoved]: removed, + [this.styles.highlightedLine]: highlightLine, + }) }, + React.createElement("pre", null, + added && '+', + removed && '-')), + React.createElement("td", { onClick: this.onLineContentClickProxy({ direction: type, value }), className: classnames_1.default(this.styles.content, { + [this.styles.emptyLine]: !content, + [this.styles.diffAdded]: added, + [this.styles.diffRemoved]: removed, + [this.styles.highlightedLine]: highlightLine, + }) }, + React.createElement("pre", { className: this.styles.contentText }, content)))); + }; + /** + * Generates lines for split view. + * + * @param obj Line diff information. + * @param obj.left Life diff information for the left pane of the split view. + * @param obj.right Life diff information for the right pane of the split view. + * @param index React key for the lines. + */ + this.renderSplitView = ({ left, right }, index) => { + return (React.createElement("tr", { key: index, className: this.styles.line }, + this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value), + this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, right.value))); + }; + /** + * Generates lines for inline view. + * + * @param obj Line diff information. + * @param obj.left Life diff information for the added section of the inline view. + * @param obj.right Life diff information for the removed section of the inline view. + * @param index React key for the lines. + */ + this.renderInlineView = ({ left, right }, index) => { + let content; + if (left.type === compute_lines_1.DiffType.REMOVED && right.type === compute_lines_1.DiffType.ADDED) { + return (React.createElement(React.Fragment, { key: index }, + React.createElement("tr", { className: this.styles.line }, this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null)), + React.createElement("tr", { className: this.styles.line }, this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber)))); + } + if (left.type === compute_lines_1.DiffType.REMOVED) { + content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null); + } + if (left.type === compute_lines_1.DiffType.DEFAULT) { + content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, right.lineNumber, LineNumberPrefix.RIGHT); + } + if (right.type === compute_lines_1.DiffType.ADDED) { + content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber); + } + return React.createElement("tr", { key: index, className: this.styles.line }, content); + }; + /** + * Returns a function with clicked block number in the closure. + * + * @param id Cold fold block id. + */ + this.onBlockClickProxy = (id) => () => this.onBlockExpand(id); + /** + * Generates cold fold block. It also uses the custom message renderer when available to show + * cold fold messages. + * + * @param num Number of skipped lines between two blocks. + * @param blockNumber Code fold block id. + * @param leftBlockLineNumber First left line number after the current code fold block. + * @param rightBlockLineNumber First right line number after the current code fold block. + */ + this.renderSkippedLineIndicator = (num, blockNumber, leftBlockLineNumber, rightBlockLineNumber) => { + const { splitView } = this.props; + const message = this.props.codeFoldMessageRenderer + ? this.props + .codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber) + : React.createElement("pre", { className: this.styles.codeFoldContent }, + "Expand ", + num, + " lines ..."); + const content = (React.createElement("td", null, + React.createElement("a", { onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0 }, message))); + return (React.createElement("tr", { key: `${leftBlockLineNumber}-${rightBlockLineNumber}`, className: this.styles.codeFold }, + !this.props.hideLineNumbers && (React.createElement("td", { className: this.styles.codeFoldGutter })), + React.createElement("td", { className: classnames_1.default({ [this.styles.codeFoldGutter]: !splitView }) }), + splitView ? content : React.createElement("td", null), + !splitView ? content : React.createElement("td", null), + React.createElement("td", null), + React.createElement("td", null))); + }; + /** + * Generates the entire diff view. + */ + this.renderDiff = () => { + const { oldValue, newValue, splitView, disableWordDiff, compareMethod } = this.props; + const { lineInformation, diffLines } = compute_lines_1.computeLineInformation(oldValue, newValue, disableWordDiff, compareMethod); + const extraLines = this.props.extraLinesSurroundingDiff < 0 + ? 0 + : this.props.extraLinesSurroundingDiff; + let skippedLines = []; + return lineInformation.map((line, i) => { + const diffBlockStart = diffLines[0]; + const currentPosition = diffBlockStart - i; + if (this.props.showDiffOnly) { + if (currentPosition === -extraLines) { + skippedLines = []; + diffLines.shift(); + } + if (line.left.type === compute_lines_1.DiffType.DEFAULT + && (currentPosition > extraLines + || typeof diffBlockStart === 'undefined') + && !this.state.expandedBlocks.includes(diffBlockStart)) { + skippedLines.push(i + 1); + if (i === lineInformation.length - 1 && skippedLines.length > 1) { + return this.renderSkippedLineIndicator(skippedLines.length, diffBlockStart, line.left.lineNumber, line.right.lineNumber); + } + return null; + } + } + const diffNodes = splitView + ? this.renderSplitView(line, i) + : this.renderInlineView(line, i); + if (currentPosition === extraLines && skippedLines.length > 0) { + const { length } = skippedLines; + skippedLines = []; + return (React.createElement(React.Fragment, { key: i }, + this.renderSkippedLineIndicator(length, diffBlockStart, line.left.lineNumber, line.right.lineNumber), + diffNodes)); + } + return diffNodes; + }); + }; + this.render = () => { + 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, useDarkTheme); + const nodes = this.renderDiff(); + const title = (leftTitle || rightTitle) + && React.createElement("tr", null, + React.createElement("td", { colSpan: splitView ? 3 : 5, className: this.styles.titleBlock }, + React.createElement("pre", { className: this.styles.contentText }, leftTitle)), + splitView + && React.createElement("td", { colSpan: 3, className: this.styles.titleBlock }, + React.createElement("pre", { className: this.styles.contentText }, rightTitle))); + return (React.createElement("table", { className: classnames_1.default(this.styles.diffContainer, { [this.styles.splitView]: splitView }) }, + React.createElement("tbody", null, + title, + nodes))); + }; + this.state = { + expandedBlocks: [], + }; + } +} +DiffViewer.defaultProps = { + oldValue: '', + newValue: '', + splitView: true, + highlightLines: [], + disableWordDiff: false, + compareMethod: compute_lines_1.DiffMethod.CHARS, + styles: {}, + hideLineNumbers: false, + extraLinesSurroundingDiff: 3, + showDiffOnly: true, + useDarkTheme: false, +}; +DiffViewer.propTypes = { + oldValue: PropTypes.string.isRequired, + newValue: PropTypes.string.isRequired, + splitView: PropTypes.bool, + disableWordDiff: PropTypes.bool, + compareMethod: PropTypes.oneOf(Object.values(compute_lines_1.DiffMethod)), + renderContent: PropTypes.func, + onLineNumberClick: PropTypes.func, + extraLinesSurroundingDiff: PropTypes.number, + styles: PropTypes.object, + 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, + ]), +}; +exports.default = DiffViewer; diff --git a/lib/styles.d.ts b/lib/styles.d.ts new file mode 100644 index 00000000..536ce9f8 --- /dev/null +++ b/lib/styles.d.ts @@ -0,0 +1,77 @@ +import { Interpolation } from 'create-emotion'; +export interface ReactDiffViewerStyles { + diffContainer?: string; + diffRemoved?: string; + diffAdded?: string; + line?: string; + highlightedGutter?: string; + contentText?: string; + gutter?: string; + highlightedLine?: string; + lineNumber?: string; + marker?: string; + wordDiff?: string; + wordAdded?: string; + wordRemoved?: string; + codeFoldGutter?: string; + emptyGutter?: string; + emptyLine?: string; + codeFold?: string; + titleBlock?: string; + content?: string; + splitView?: string; + [key: string]: string | undefined; +} +export interface ReactDiffViewerStylesVariables { + diffViewerBackground?: string; + diffViewerTitleBackground?: string; + diffViewerColor?: string; + diffViewerTitleColor?: string; + diffViewerTitleBorderColor?: string; + addedBackground?: string; + addedColor?: string; + removedBackground?: string; + removedColor?: string; + wordAddedBackground?: string; + wordRemovedBackground?: string; + addedGutterBackground?: string; + removedGutterBackground?: string; + gutterBackground?: string; + gutterBackgroundDark?: string; + highlightBackground?: string; + highlightGutterBackground?: string; + codeFoldGutterBackground?: string; + codeFoldBackground?: string; + emptyLineBackground?: string; + gutterColor?: string; + addedGutterColor?: string; + removedGutterColor?: string; + codeFoldContentColor?: string; +} +export interface ReactDiffViewerStylesOverride { + variables?: { + dark?: ReactDiffViewerStylesVariables; + light?: ReactDiffViewerStylesVariables; + }; + diffContainer?: Interpolation; + diffRemoved?: Interpolation; + diffAdded?: Interpolation; + marker?: Interpolation; + emptyGutter?: Interpolation; + highlightedLine?: Interpolation; + lineNumber?: Interpolation; + highlightedGutter?: Interpolation; + contentText?: Interpolation; + gutter?: Interpolation; + line?: Interpolation; + wordDiff?: Interpolation; + wordAdded?: Interpolation; + wordRemoved?: Interpolation; + codeFoldGutter?: Interpolation; + emptyLine?: Interpolation; + content?: Interpolation; + titleBlock?: Interpolation; + splitView?: Interpolation; +} +declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean) => ReactDiffViewerStyles; +export default _default; diff --git a/lib/styles.js b/lib/styles.js new file mode 100644 index 00000000..31c20067 --- /dev/null +++ b/lib/styles.js @@ -0,0 +1,277 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const emotion_1 = require("emotion"); +exports.default = (styleOverride, useDarkTheme = false) => { + const { variables: overrideVariables = {}, ...styles } = styleOverride; + const themeVariables = { + light: { + ...{ + diffViewerBackground: '#fff', + diffViewerColor: '212529', + addedBackground: '#e6ffed', + addedColor: '#24292e', + removedBackground: '#ffeef0', + removedColor: '#24292e', + wordAddedBackground: '#acf2bd', + wordRemovedBackground: '#fdb8c0', + addedGutterBackground: '#cdffd8', + removedGutterBackground: '#ffdce0', + gutterBackground: '#f7f7f7', + gutterBackgroundDark: '#f3f1f1', + highlightBackground: '#fffbdd', + highlightGutterBackground: '#fff5b1', + codeFoldGutterBackground: '#dbedff', + codeFoldBackground: '#f1f8ff', + emptyLineBackground: '#fafbfc', + gutterColor: '#212529', + addedGutterColor: '#212529', + removedGutterColor: '#212529', + codeFoldContentColor: '#212529', + diffViewerTitleBackground: '#fafbfc', + diffViewerTitleColor: '#212529', + diffViewerTitleBorderColor: '#eee', + }, + ...(overrideVariables.light || {}), + }, + dark: { + ...{ + diffViewerBackground: '#2e303c', + diffViewerColor: '#FFF', + addedBackground: '#044B53', + addedColor: 'white', + removedBackground: '#632F34', + removedColor: 'white', + wordAddedBackground: '#055d67', + wordRemovedBackground: '#7d383f', + addedGutterBackground: '#034148', + removedGutterBackground: '#632b30', + gutterBackground: '#2c2f3a', + gutterBackgroundDark: '#262933', + highlightBackground: '#2a3967', + highlightGutterBackground: '#2d4077', + codeFoldGutterBackground: '#21232b', + codeFoldBackground: '#262831', + emptyLineBackground: '#363946', + gutterColor: '#464c67', + addedGutterColor: '#8c8c8c', + removedGutterColor: '#8c8c8c', + codeFoldContentColor: '#555a7b', + diffViewerTitleBackground: '#2f323e', + diffViewerTitleColor: '#555a7b', + diffViewerTitleBorderColor: '#353846', + }, + ...(overrideVariables.dark || {}), + }, + }; + const variables = useDarkTheme ? themeVariables.dark : themeVariables.light; + const content = emotion_1.css({ + width: '100%', + label: 'content', + }); + const splitView = emotion_1.css({ + [`.${content}`]: { + width: '50%', + }, + label: 'split-view', + }); + const diffContainer = emotion_1.css({ + width: '100%', + background: variables.diffViewerBackground, + pre: { + margin: 0, + whiteSpace: 'pre-wrap', + lineHeight: '25px', + }, + label: 'diff-container', + borderCollapse: 'collapse', + }); + const codeFoldContent = emotion_1.css({ + color: variables.codeFoldContentColor, + label: 'code-fold-content', + }); + const contentText = emotion_1.css({ + color: variables.diffViewerColor, + label: 'content-text', + }); + const titleBlock = emotion_1.css({ + background: variables.diffViewerTitleBackground, + padding: 10, + borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`, + label: 'title-block', + ':last-child': { + borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`, + }, + [`.${contentText}`]: { + color: variables.diffViewerTitleColor, + }, + }); + const lineNumber = emotion_1.css({ + color: variables.gutterColor, + label: 'line-number', + }); + const diffRemoved = emotion_1.css({ + background: variables.removedBackground, + color: variables.removedColor, + pre: { + color: variables.removedColor, + }, + [`.${lineNumber}`]: { + color: variables.removedGutterColor, + }, + label: 'diff-removed', + }); + const diffAdded = emotion_1.css({ + background: variables.addedBackground, + color: variables.addedColor, + pre: { + color: variables.addedColor, + }, + [`.${lineNumber}`]: { + color: variables.addedGutterColor, + }, + label: 'diff-added', + }); + const wordDiff = emotion_1.css({ + padding: 2, + display: 'inline-flex', + borderRadius: 1, + label: 'word-diff', + }); + const wordAdded = emotion_1.css({ + background: variables.wordAddedBackground, + label: 'word-added', + }); + const wordRemoved = emotion_1.css({ + background: variables.wordRemovedBackground, + label: 'word-removed', + }); + const codeFoldGutter = emotion_1.css({ + backgroundColor: variables.codeFoldGutterBackground, + label: 'code-fold-gutter', + }); + const codeFold = emotion_1.css({ + backgroundColor: variables.codeFoldBackground, + height: 40, + fontSize: 14, + fontWeight: 700, + label: 'code-fold', + a: { + textDecoration: 'underline !important', + cursor: 'pointer', + pre: { + display: 'inline', + }, + }, + }); + const emptyLine = emotion_1.css({ + backgroundColor: variables.emptyLineBackground, + label: 'empty-line', + }); + const marker = emotion_1.css({ + width: 25, + paddingLeft: 10, + paddingRight: 10, + userSelect: 'none', + label: 'marker', + [`&.${diffAdded}`]: { + pre: { + color: variables.addedColor, + }, + }, + [`&.${diffRemoved}`]: { + pre: { + color: variables.removedColor, + }, + }, + }); + const highlightedLine = emotion_1.css({ + background: variables.highlightBackground, + label: 'highlighted-line', + [`.${wordAdded}, .${wordRemoved}`]: { + backgroundColor: 'initial', + }, + }); + const highlightedGutter = emotion_1.css({ + label: 'highlighted-gutter', + }); + const gutter = emotion_1.css({ + userSelect: 'none', + minWidth: 50, + padding: '0 10px', + label: 'gutter', + textAlign: 'right', + background: variables.gutterBackground, + '&:hover': { + cursor: 'pointer', + background: variables.gutterBackgroundDark, + pre: { + opacity: 1, + }, + }, + pre: { + opacity: 0.5, + }, + [`&.${diffAdded}`]: { + background: variables.addedGutterBackground, + }, + [`&.${diffRemoved}`]: { + background: variables.removedGutterBackground, + }, + [`&.${highlightedGutter}`]: { + background: variables.highlightGutterBackground, + '&:hover': { + background: variables.highlightGutterBackground, + }, + }, + }); + const emptyGutter = emotion_1.css({ + '&:hover': { + background: variables.gutterBackground, + cursor: 'initial', + }, + label: 'empty-gutter', + }); + const line = emotion_1.css({ + verticalAlign: 'baseline', + label: 'line', + }); + const defaultStyles = { + diffContainer, + diffRemoved, + diffAdded, + splitView, + marker, + highlightedGutter, + highlightedLine, + gutter, + line, + wordDiff, + wordAdded, + wordRemoved, + codeFoldGutter, + codeFold, + emptyGutter, + emptyLine, + lineNumber, + contentText, + content, + codeFoldContent, + titleBlock, + }; + const computerOverrideStyles = Object.keys(styles) + .reduce((acc, key) => ({ + ...acc, + ...{ + [key]: emotion_1.css(styles[key]), + }, + }), {}); + return Object.keys(defaultStyles) + .reduce((acc, key) => ({ + ...acc, + ...{ + [key]: computerOverrideStyles[key] + ? emotion_1.cx(defaultStyles[key], computerOverrideStyles[key]) + : defaultStyles[key], + }, + }), {}); +}; diff --git a/src/index.tsx b/src/index.tsx index 8abde923..28d85bf3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -51,6 +51,10 @@ export interface ReactDiffViewerProps { lineId: string, event: React.MouseEvent, ) => void; + onLineContentClick?: (params: { + direction: 'leftCode' | 'rightCode'; + words: string; + }) => void; // Array of line ids to highlight lines. highlightLines?: string[]; // Style overrides. @@ -167,6 +171,25 @@ class DiffViewer extends React.Component { }; }; + private onLineContentClickProxy: (params: { direction: number; value: string | Array; }) => any = ({ direction, value }) => { + let words: string | Array + let _direction: 'leftCode' | 'rightCode' + if (!this.props.onLineContentClick) return () => { } + if (this.props.onLineContentClick) return (event: React.MouseEvent): void => { + event.stopPropagation() + event.preventDefault() + words = (value as string) + _direction = 1===direction? 'rightCode': 'leftCode' + if ('[object String]'!==Object.prototype.toString.call(value)) { + words = (value as Array).map((item: { value: string }): string => item.value).join('') + } + this.props.onLineContentClick({ + direction: _direction, + words + }) + } + } + /** * Maps over the word diff and constructs the required React elements to show word diff. * @@ -277,6 +300,7 @@ class DiffViewer extends React.Component