react-diff-viewer-continued 3.3.2 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +2 -1
  3. package/lib/src/index.d.ts +1 -0
  4. package/lib/src/index.js +11 -6
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [3.4.0](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.3.2...v3.4.0) (2024-01-31)
2
+
3
+
4
+ ### Features
5
+
6
+ * add `hideMarkers` ([#37](https://github.com/aeolun/react-diff-viewer-continued/issues/37)) ([c004629](https://github.com/aeolun/react-diff-viewer-continued/commit/c00462912344d441a1d491313230064eb096a6a7))
7
+
1
8
  ## [3.3.2](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.3.1...v3.3.2) (2024-01-31)
2
9
 
3
10
 
package/README.md CHANGED
@@ -76,7 +76,8 @@ class Diff extends PureComponent {
76
76
  | 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. |
77
77
  | renderGutter | `(diffData) => ReactNode` | `undefined` | Function that can be used to render an extra gutter with various information next to the line number. |
78
78
  | hideLineNumbers | `boolean` | `false` | Show and hide line numbers. |
79
- | 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. |
79
+ | hideMarkers | `boolean` | `false` | Show and hide `+`/`-` markers. |
80
+ | 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. |
80
81
  | renderContent | `function` | `undefined` | Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting) |
81
82
  | onLineNumberClick | `function` | `undefined` | Event handler for line number click. `(lineId: string) => void` |
82
83
  | 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. |
package/lib/src/index.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface ReactDiffViewerProps {
15
15
  compareMethod?: DiffMethod;
16
16
  extraLinesSurroundingDiff?: number;
17
17
  hideLineNumbers?: boolean;
18
+ hideMarkers?: boolean;
18
19
  /**
19
20
  * Show the lines indicated here. Specified as L20 or R18 for respectively line 20 on the left or line 18 on the right.
20
21
  */
package/lib/src/index.js CHANGED
@@ -155,13 +155,13 @@ class DiffViewer extends React.Component {
155
155
  additionalPrefix,
156
156
  styles: this.styles,
157
157
  })
158
- : null, (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.marker, {
158
+ : null, !this.props.hideMarkers && ((0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.marker, {
159
159
  [this.styles.emptyLine]: !content,
160
160
  [this.styles.diffAdded]: added,
161
161
  [this.styles.diffRemoved]: removed,
162
162
  [this.styles.diffChanged]: changed,
163
163
  [this.styles.highlightedLine]: highlightLine,
164
- }), children: (0, jsx_runtime_1.jsxs)("pre", { children: [added && '+', removed && '-'] }) }), (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.content, {
164
+ }), children: (0, jsx_runtime_1.jsxs)("pre", { children: [added && '+', removed && '-'] }) })), (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.content, {
165
165
  [this.styles.emptyLine]: !content,
166
166
  [this.styles.diffAdded]: added,
167
167
  [this.styles.diffRemoved]: removed,
@@ -258,7 +258,7 @@ class DiffViewer extends React.Component {
258
258
  });
259
259
  };
260
260
  this.render = () => {
261
- const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, nonce, } = this.props;
261
+ const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, hideMarkers, nonce, } = this.props;
262
262
  if (this.props.compareMethod !== compute_lines_1.DiffMethod.JSON) {
263
263
  if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
264
264
  throw Error('"oldValue" and "newValue" should be strings');
@@ -266,9 +266,13 @@ class DiffViewer extends React.Component {
266
266
  }
267
267
  this.styles = this.computeStyles(this.props.styles, useDarkTheme, nonce);
268
268
  const nodes = this.renderDiff();
269
- const colSpanOnSplitView = hideLineNumbers ? 2 : 3;
270
- const colSpanOnInlineView = hideLineNumbers ? 2 : 4;
271
- let columnExtension = this.props.renderGutter ? 1 : 0;
269
+ let colSpanOnSplitView = hideLineNumbers ? 2 : 3;
270
+ let colSpanOnInlineView = hideLineNumbers ? 2 : 4;
271
+ if (hideMarkers) {
272
+ colSpanOnSplitView -= 1;
273
+ colSpanOnInlineView -= 1;
274
+ }
275
+ const columnExtension = this.props.renderGutter ? 1 : 0;
272
276
  const title = (leftTitle || rightTitle) && ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { colSpan: (splitView ? colSpanOnSplitView : colSpanOnInlineView) +
273
277
  columnExtension, className: this.styles.titleBlock, children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: leftTitle }) }), splitView && ((0, jsx_runtime_1.jsx)("td", { colSpan: colSpanOnSplitView + columnExtension, className: this.styles.titleBlock, children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: rightTitle }) }))] }));
274
278
  return ((0, jsx_runtime_1.jsx)("table", { className: (0, classnames_1.default)(this.styles.diffContainer, {
@@ -289,6 +293,7 @@ DiffViewer.defaultProps = {
289
293
  compareMethod: compute_lines_1.DiffMethod.CHARS,
290
294
  styles: {},
291
295
  hideLineNumbers: false,
296
+ hideMarkers: false,
292
297
  extraLinesSurroundingDiff: 3,
293
298
  showDiffOnly: true,
294
299
  useDarkTheme: false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-diff-viewer-continued",
3
- "version": "3.3.2",
3
+ "version": "3.4.0",
4
4
  "private": false,
5
5
  "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
6
6
  "keywords": [