Skip to content

Commit 2004717

Browse files
praneshrpraneshr
committed
Adding option to hide line numbers and improved style handling for gutters
1 parent f22b205 commit 2004717

File tree

5 files changed

+113
-85
lines changed

5 files changed

+113
-85
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ class Diff extends PureComponent {
6868
|newVlaue |`string` |`''` |New value as string. |
6969
|splitView |`boolean` |`true` |Switch between `unified` and `split` view. |
7070
|disableWordDiff |`boolean` |`false` |Show and hide word diff in a diff line. |
71+
|hideLineNumbers |`boolean` |`false` |Show and hide line numbers. |
7172
|renderContent |`function` |`undefined` |Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting) |
7273
|onLineNumberClick |`function` |`undefined` |Event handler for line number click. `(lineId: string) => void` |
7374
|hightlightLines |`array[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. |
@@ -161,9 +162,10 @@ const defaultStyles = {
161162
diffAdded: {}, // style object
162163
marker: {}, // style object
163164
gutter: {}, // style object
165+
leftGutter: {}, // style object
166+
rightGutter: {}, // style object
164167
hightlightedLine: {}, // style object
165168
hightlightedGutter: {}, // style object
166-
lineNumber: {}, // style object
167169
line: {}, // style object
168170
wordDiff: {}, // style object
169171
wordAdded: {}, // style object

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"build:watch": "tsc --outDir lib/ -w",
2424
"publish:examples": "NODE_ENV=production yarn build:examples && gh-pages -d examples/dist -r $GITHUB_REPO_URL",
2525
"publish:examples:local": "NODE_ENV=production yarn build:examples && gh-pages -d examples/dist",
26-
"start:examples": "webpack-dev-server --open --hot --inline --host 192.168.31.72",
26+
"start:examples": "webpack-dev-server --open --hot --inline",
2727
"test": "mocha --require ts-node/register --require enzyme.ts ./test/index.tsx",
2828
"test:watch": "mocha --require ts-node/register --require enzyme.ts --watch-extensions ts,tsx --watch ./test/index.tsx"
2929
},

‎src/index.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export interface IReactDiffViewerProps {
1717
newValue: string;
1818
splitView?: boolean;
1919
disableWordDiff?: boolean;
20+
hideLineNumbers?: boolean;
2021
renderContent?: (source: string) => JSX.Element;
2122
onLineNumberClick?: (lineId: string, event: React.MouseEvent<HTMLTableCellElement>) => void;
2223
highlightLines?: string[];
@@ -73,6 +74,7 @@ class DiffViewer extends React.Component<IReactDiffViewerProps, IReactDiffViewer
7374
highlightLines: [],
7475
disableWordDiff: false,
7576
styles: {},
77+
hideLineNumbers: false,
7678
}
7779

7880
static propTypes = {
@@ -83,6 +85,7 @@ class DiffViewer extends React.Component<IReactDiffViewerProps, IReactDiffViewer
8385
renderContent: PropTypes.func,
8486
onLineNumberClick: PropTypes.func,
8587
styles: PropTypes.object,
88+
hideLineNumbers: PropTypes.bool,
8689
highlightLines: PropTypes.arrayOf(PropTypes.string),
8790
}
8891

@@ -101,6 +104,7 @@ class DiffViewer extends React.Component<IReactDiffViewerProps, IReactDiffViewer
101104
leftLineNumber = leftLineNumber + 1
102105
return <DefaultLine
103106
styles={styles}
107+
hideLineNumbers={this.props.hideLineNumbers}
104108
leftLineNumber={leftLineNumber}
105109
rightLineNumber={rightLineNumber}
106110
leftContent={ch}
@@ -150,6 +154,7 @@ class DiffViewer extends React.Component<IReactDiffViewerProps, IReactDiffViewer
150154
removed={removed}
151155
added={added}
152156
key={num}
157+
hideLineNumbers={this.props.hideLineNumbers}
153158
hightlightLines={this.props.highlightLines}
154159
renderContent={this.props.renderContent}
155160
leftContent={leftContent}
@@ -200,6 +205,7 @@ class DiffViewer extends React.Component<IReactDiffViewerProps, IReactDiffViewer
200205
styles={styles}
201206
onLineNumberClick={this.props.onLineNumberClick}
202207
key={num}
208+
hideLineNumbers={this.props.hideLineNumbers}
203209
renderContent={this.props.renderContent}
204210
removed={diffObj.removed}
205211
leftLineNumber={diffObj.added || leftLineNumber}

‎src/line.tsx

Lines changed: 83 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import * as React from 'react'
22
import cn from 'classnames'
33

44
import { IReactDiffViewerStyles } from './styles'
5-
6-
75
interface ICommon {
86
leftLineNumber?: number | boolean;
97
rightLineNumber?: number | boolean;
@@ -13,6 +11,7 @@ interface ICommon {
1311
renderContent?: (source: string) => JSX.Element;
1412
hightlightLines?: string[];
1513
styles: IReactDiffViewerStyles;
14+
hideLineNumbers?: boolean;
1615
}
1716
interface IInlineLine extends ICommon {
1817
content?: string | JSX.Element | JSX.Element[];
@@ -51,47 +50,55 @@ export const InlineLine = ({
5150
renderContent,
5251
hightlightLines = [],
5352
styles,
53+
hideLineNumbers,
5454
}: IInlineLine) => {
5555
const hightlightLine = (leftLineNumber !== true || rightLineNumber !== true)
5656
&& (
5757
hightlightLines.includes(`${leftLineNumberPrefix}-${leftLineNumber}`)
5858
|| hightlightLines.includes(`${rightLineNumberPrefix}-${rightLineNumber}`)
5959
)
6060
return <tr className={styles.line}>
61-
<td className={cn(
62-
styles.lineNumber,
63-
{
64-
[styles.diffAdded]: added,
65-
[styles.diffRemoved]: removed,
66-
[styles.hightlightedGutter]: hightlightLine,
67-
})}
68-
onClick={onLineNumberClickProxy(onLineNumberClick, `${leftLineNumberPrefix}-${leftLineNumber}`)}
69-
>
70-
{
71-
leftLineNumber !== true
72-
&& <LineNumber
73-
lineNumber={leftLineNumber as number}
74-
prefix={leftLineNumberPrefix}
75-
/>
76-
}
77-
</td>
78-
<td className={cn(
79-
styles.lineNumber,
80-
{
81-
[styles.diffAdded]: added,
82-
[styles.diffRemoved]: removed,
83-
[styles.hightlightedGutter]: hightlightLine,
84-
})}
85-
onClick={onLineNumberClickProxy(onLineNumberClick, `${rightLineNumberPrefix}-${rightLineNumber}`)}
86-
>
87-
{
88-
rightLineNumber !== true
89-
&& <LineNumber
90-
lineNumber={rightLineNumber as number}
91-
prefix={rightLineNumberPrefix}
92-
/>
93-
}
94-
</td>
61+
{
62+
!hideLineNumbers
63+
&& <React.Fragment>
64+
<td className={cn(
65+
styles.gutter,
66+
styles.leftGutter,
67+
{
68+
[styles.diffAdded]: added,
69+
[styles.diffRemoved]: removed,
70+
[styles.hightlightedGutter]: hightlightLine,
71+
})}
72+
onClick={onLineNumberClickProxy(onLineNumberClick, `${leftLineNumberPrefix}-${leftLineNumber}`)}
73+
>
74+
{
75+
leftLineNumber !== true
76+
&& <LineNumber
77+
lineNumber={leftLineNumber as number}
78+
prefix={leftLineNumberPrefix}
79+
/>
80+
}
81+
</td>
82+
<td className={cn(
83+
styles.gutter,
84+
styles.rightGutter,
85+
{
86+
[styles.diffAdded]: added,
87+
[styles.diffRemoved]: removed,
88+
[styles.hightlightedGutter]: hightlightLine,
89+
})}
90+
onClick={onLineNumberClickProxy(onLineNumberClick, `${rightLineNumberPrefix}-${rightLineNumber}`)}
91+
>
92+
{
93+
rightLineNumber !== true
94+
&& <LineNumber
95+
lineNumber={rightLineNumber as number}
96+
prefix={rightLineNumberPrefix}
97+
/>
98+
}
99+
</td>
100+
</React.Fragment>
101+
}
95102
<td className={cn(
96103
styles.marker,
97104
{
@@ -130,30 +137,35 @@ export const DefaultLine = ({
130137
renderContent,
131138
hightlightLines = [],
132139
styles,
140+
hideLineNumbers,
133141
}: IDefaultLine) => {
134142
const hightlightLeftLine = leftLineNumber !== true
135143
&& hightlightLines.includes(`${leftLineNumberPrefix}-${leftLineNumber}`)
136144
const hightlightRightLine = rightLineNumber !== true
137145
&& hightlightLines.includes(`${rightLineNumberPrefix}-${rightLineNumber}`)
138146

139147
return <tr className={styles.line}>
140-
<td className={cn(
141-
styles.lineNumber,
142-
{
143-
[styles.diffRemoved]: removed,
144-
[styles.hightlightedGutter]: hightlightLeftLine,
145-
},
146-
)}
147-
onClick={onLineNumberClickProxy(onLineNumberClick, `${leftLineNumberPrefix}-${leftLineNumber}`)}
148-
>
149-
{
150-
leftLineNumber
151-
&& <LineNumber
152-
lineNumber={leftLineNumber as number}
153-
prefix={leftLineNumberPrefix}
154-
/>
155-
}
156-
</td>
148+
{
149+
!hideLineNumbers
150+
&& <td className={cn(
151+
styles.gutter,
152+
styles.leftGutter,
153+
{
154+
[styles.diffRemoved]: removed,
155+
[styles.hightlightedGutter]: hightlightLeftLine,
156+
},
157+
)}
158+
onClick={onLineNumberClickProxy(onLineNumberClick, `${leftLineNumberPrefix}-${leftLineNumber}`)}
159+
>
160+
{
161+
leftLineNumber
162+
&& <LineNumber
163+
lineNumber={leftLineNumber as number}
164+
prefix={leftLineNumberPrefix}
165+
/>
166+
}
167+
</td>
168+
}
157169
<td className={cn(
158170
styles.marker,
159171
{
@@ -178,20 +190,24 @@ export const DefaultLine = ({
178190
|| leftContent
179191
}
180192
</td>
181-
<td className={cn(
182-
styles.lineNumber,
183-
{
184-
[styles.diffAdded]: added,
185-
[styles.hightlightedGutter]: hightlightRightLine,
186-
},
187-
)}
188-
onClick={onLineNumberClickProxy(onLineNumberClick, `${rightLineNumberPrefix}-${rightLineNumber}`)}
189-
>
190-
<LineNumber
191-
lineNumber={rightLineNumber as number}
192-
prefix={rightLineNumberPrefix}
193-
/>
194-
</td>
193+
{
194+
!hideLineNumbers
195+
&& <td className={cn(
196+
styles.gutter,
197+
styles.rightGutter,
198+
{
199+
[styles.diffAdded]: added,
200+
[styles.hightlightedGutter]: hightlightRightLine,
201+
},
202+
)}
203+
onClick={onLineNumberClickProxy(onLineNumberClick, `${rightLineNumberPrefix}-${rightLineNumber}`)}
204+
>
205+
<LineNumber
206+
lineNumber={rightLineNumber as number}
207+
prefix={rightLineNumberPrefix}
208+
/>
209+
</td>
210+
}
195211
<td className={cn(
196212
styles.marker,
197213
{

‎src/styles.ts

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ export interface IReactDiffViewerStyles {
77
diffRemoved?: string;
88
diffAdded?: string;
99
line?: string;
10-
gutter?: string;
1110
hightlightedGutter?: string;
12-
lineNumber?: string;
11+
gutter?: string;
1312
hightlightedLine?: string;
1413
marker?: string;
1514
wordDiff?: string;
1615
wordAdded?: string;
1716
wordRemoved?: string;
17+
leftGutter?: string;
18+
rightGutter?: string;
1819
}
1920

2021
export interface IReactDiffViewerStylesOverride {
@@ -36,14 +37,15 @@ export interface IReactDiffViewerStylesOverride {
3637
diffRemoved?: Interpolation;
3738
diffAdded?: Interpolation;
3839
marker?: Interpolation;
39-
gutter?: Interpolation;
4040
hightlightedLine?: Interpolation;
4141
hightlightedGutter?: Interpolation;
42-
lineNumber?: Interpolation;
42+
gutter?: Interpolation;
4343
line?: Interpolation;
4444
wordDiff?: Interpolation;
4545
wordAdded?: Interpolation;
4646
wordRemoved?: Interpolation;
47+
leftGutter?: Interpolation;
48+
rightGutter?: Interpolation;
4749
}
4850

4951
export default (styleOverride: IReactDiffViewerStylesOverride) => {
@@ -129,13 +131,6 @@ export default (styleOverride: IReactDiffViewerStylesOverride) => {
129131
}
130132
})
131133

132-
const gutter = css({
133-
display: 'flex',
134-
marginRight: 40,
135-
justifyContent: 'space-between',
136-
label: 'gutter',
137-
})
138-
139134
const hightlightedLine = css({
140135
background: variables.highlightBackground,
141136
label: 'hightlighted-line',
@@ -145,11 +140,11 @@ export default (styleOverride: IReactDiffViewerStylesOverride) => {
145140
label: 'hightlighted-gutter',
146141
})
147142

148-
const lineNumber = css({
143+
const gutter = css({
149144
userSelect: 'none',
150145
minWidth: 40,
151146
padding: '0 10px',
152-
label: 'line-number',
147+
label: 'gutter',
153148
cursor: 'pointer',
154149
textAlign: 'right',
155150
background: variables.gutterBackground,
@@ -183,7 +178,7 @@ export default (styleOverride: IReactDiffViewerStylesOverride) => {
183178

184179
const wordDiff = css({
185180
padding: 2,
186-
display: 'inline',
181+
display: 'inline-flex',
187182
borderRadius: 1,
188183
label: 'word-diff',
189184
})
@@ -198,19 +193,28 @@ export default (styleOverride: IReactDiffViewerStylesOverride) => {
198193
label: 'word-removed',
199194
})
200195

196+
const leftGutter = css({
197+
label: 'left-gutter',
198+
})
199+
200+
const rightGutter = css({
201+
label: 'right-gutter',
202+
})
203+
201204
const defaultStyles: any = {
202205
diffContainer,
203206
diffRemoved,
204207
diffAdded,
205208
marker,
206-
gutter,
207209
hightlightedGutter,
208210
hightlightedLine,
209-
lineNumber,
211+
gutter,
210212
line,
211213
wordDiff,
212214
wordAdded,
213215
wordRemoved,
216+
leftGutter,
217+
rightGutter,
214218
}
215219

216220
const computerOverrideStyles: any = Object.keys(styles)

0 commit comments

Comments
 (0)