Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add hideMarkers #37

Merged
merged 2 commits into from
Jan 31, 2024
Merged

feat: add hideMarkers #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
63466f5
feat: add `hideMarkers`
Kirbo Dec 15, 2023
4ac0f33
Merge branch 'master' into master
Aeolun Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
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
Open in desktop
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
Loading