Skip to content

Commit

Permalink
feat: add hideMarkers (#37)
Browse files Browse the repository at this point in the history 
Co-authored-by: Bart Riepe <bart@serial-experiments.com>
  • Loading branch information
@Kirbo @Aeolun
Kirbo and Aeolun authored Jan 31, 2024
1 parent ef88b39 commit c004629
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 18 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ class Diff extends PureComponent {
| compareMethod | `DiffMethod` | `DiffMethod.CHARS` | JsDiff text diff method used for diffing strings. Check out the [guide](https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#text-block-diff-comparison) to use different methods. |
| renderGutter | `(diffData) => ReactNode` | `undefined` | Function that can be used to render an extra gutter with various information next to the line number. |
| hideLineNumbers | `boolean` | `false` | Show and hide line numbers. |
| alwaysShowLines | `string[]` | `[]` | List of lines to always be shown, regardless of diff status. 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. `extraLinesSurroundingDiff` applies to these lines as well. |
| hideMarkers | `boolean` | `false` | Show and hide `+`/`-` markers. |
| alwaysShowLines | `string[]` | `[]` | List of lines to always be shown, regardless of diff status. 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. `extraLinesSurroundingDiff` applies to these lines as well. |
| 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` |
| highlightLines | `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. |
Expand Down
46 changes: 29 additions & 17 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export interface ReactDiffViewerProps {
extraLinesSurroundingDiff?: number;
// Show/hide line number.
hideLineNumbers?: boolean;
// Show/hide `+`/`-` markers.
hideMarkers?: boolean;
/**
* Show the lines indicated here. Specified as L20 or R18 for respectively line 20 on the left or line 18 on the right.
*/
Expand Down Expand Up @@ -96,6 +98,7 @@ class DiffViewer extends React.Component<
compareMethod: DiffMethod.CHARS,
styles: {},
hideLineNumbers: false,
hideMarkers: false,
extraLinesSurroundingDiff: 3,
showDiffOnly: true,
useDarkTheme: false,
Expand Down Expand Up @@ -272,20 +275,22 @@ class DiffViewer extends React.Component<
styles: this.styles,
})
: null}
<td
className={cn(this.styles.marker, {
[this.styles.emptyLine]: !content,
[this.styles.diffAdded]: added,
[this.styles.diffRemoved]: removed,
[this.styles.diffChanged]: changed,
[this.styles.highlightedLine]: highlightLine,
})}
>
<pre>
{added && '+'}
{removed && '-'}
</pre>
</td>
{!this.props.hideMarkers && (
<td
className={cn(this.styles.marker, {
[this.styles.emptyLine]: !content,
[this.styles.diffAdded]: added,
[this.styles.diffRemoved]: removed,
[this.styles.diffChanged]: changed,
[this.styles.highlightedLine]: highlightLine,
})}
>
<pre>
{added && '+'}
{removed && '-'}
</pre>
</td>
)}
<td
className={cn(this.styles.content, {
[this.styles.emptyLine]: !content,
Expand Down Expand Up @@ -556,6 +561,7 @@ class DiffViewer extends React.Component<
rightTitle,
splitView,
hideLineNumbers,
hideMarkers,
nonce,
} = this.props;

Expand All @@ -567,9 +573,15 @@ class DiffViewer extends React.Component<

this.styles = this.computeStyles(this.props.styles, useDarkTheme, nonce);
const nodes = this.renderDiff();
const colSpanOnSplitView = hideLineNumbers ? 2 : 3;
const colSpanOnInlineView = hideLineNumbers ? 2 : 4;
let columnExtension = this.props.renderGutter ? 1 : 0;
let colSpanOnSplitView = hideLineNumbers ? 2 : 3;
let colSpanOnInlineView = hideLineNumbers ? 2 : 4;

if (hideMarkers) {
colSpanOnSplitView -= 1;
colSpanOnInlineView -= 1;
}

const columnExtension = this.props.renderGutter ? 1 : 0;

const title = (leftTitle || rightTitle) && (
<tr>
Expand Down

0 comments on commit c004629

Please sign in to comment.