react-diff-view
Advanced tools
Comparing version 2.4.7 to 2.4.8
{ | ||
"name": "react-diff-view", | ||
"version": "2.4.7", | ||
"version": "2.4.8", | ||
"description": "A git diff component to consume the git unified diff output.", | ||
@@ -5,0 +5,0 @@ "main": "cjs/index.js", |
@@ -71,3 +71,3 @@ # react-diff-view | ||
This is the normal behavior, which will displaed as 3 lines of deletion, 1 line of modification and 3 lines of addition: | ||
This is the normal behavior, which will displayed as 3 lines of deletion, 1 line of modification and 3 lines of addition: | ||
@@ -119,8 +119,8 @@ ![Normal sequence behavior](https://raw.githubusercontent.com/otakustay/react-diff-view/master/screenshots/sequence-normal.png) | ||
The children is optional if you only need all hunks to be displaed, however you can use this function children to add custome events or classes to hunks. | ||
The children is optional if you only need all hunks to be displayed, however you can use this function children to add custom events or classes to hunks. | ||
As you can see, `Diff` component requires a `hunks` prop as well as a function `children` prop which receivs the `hunks` prop as its argument, this may looks redundant but actually very useful when work with HOCs modifying hunks. For example, we have a HOC to remove all normal changes: | ||
As you can see, `Diff` component requires a `hunks` prop as well as a function `children` prop which receive the `hunks` prop as its argument, this may looks redundant but actually very useful when work with HOCs modifying hunks. For example, we have a HOC to remove all normal changes: | ||
```jsx | ||
const filterOuteNormalChanges = hunk => { | ||
const filterOutNormalChanges = hunk => { | ||
return { | ||
@@ -144,3 +144,3 @@ ...hunk, | ||
const MyDiff = removeNomalChanges(Diff); | ||
const MyDiff = removeNormalChanges(Diff); | ||
``` | ||
@@ -193,3 +193,3 @@ | ||
A very simple use case of `Decoration` is to provide a summary infomation of hunk: | ||
A very simple use case of `Decoration` is to provide a summary information of hunk: | ||
@@ -228,3 +228,3 @@ ```jsx | ||
In some cases we need functions like commenting on change, `react-diff-view` provides an extensible solution called **widget** to archive such senarios. | ||
In some cases we need functions like commenting on change, `react-diff-view` provides an extensible solution called **widget** to archive such scenarios. | ||
@@ -277,3 +277,3 @@ A widget is any react element bound to a change object, a widget is configured in an object with `change` and `element` property, when rendering diff changes, if there is a widget object with the same `change` object, the `element` will be rendered below the line of code. | ||
`react-diff-view` includes a bunch of css variables (custom properties) to customize the prensentation of diff in [supported browsers](https://caniuse.com/#feat=css-variables), these includes: | ||
`react-diff-view` includes a bunch of css variables (custom properties) to customize the presentation of diff in [supported browsers](https://caniuse.com/#feat=css-variables), these includes: | ||
@@ -302,3 +302,3 @@ ```css | ||
You can override styles on certian css classes to customize the appearance of `react-diff-view`, here is a list of css classes generated by component: | ||
You can override styles on certain css classes to customize the appearance of `react-diff-view`, here is a list of css classes generated by component: | ||
@@ -308,3 +308,3 @@ - `diff`: The diff container, a `<table>` element. | ||
- `diff-hunk`: The `<tbody>` element representing a diff hunk. | ||
- `diff-decoration`: The `<tr>` element reprensenting the decoration row. | ||
- `diff-decoration`: The `<tr>` element representing the decoration row. | ||
- `diff-decoration-gutter`: The `<td>` element corresponding to gutter within decoration. | ||
@@ -369,3 +369,3 @@ - `diff-decoration-content`: The `<td>` element corresponding to code content within decoration. | ||
Each event callback receivs an object with key `change` and `side`, the `side` property is `undefined` in unified mode, in split mode it could be either `"old"` and `"new"` responding to the triggering element. | ||
Each event callback receive an object with key `change` and `side`, the `side` property is `undefined` in unified mode, in split mode it could be either `"old"` and `"new"` responding to the triggering element. | ||
@@ -463,3 +463,3 @@ One of the common cases is to add code selecting functionality. This can be archived simply by passing an `onClick` event to gutter and coe and manipulating the `selectedChanges` prop: | ||
By giving an array of ranges on both old and new side, the token system will pick them out of each line, you should pass a `renderToken` function prop to `Diff` component to customize your render implement of customzied token. The `renderToken` is a simple function receiving `(token, defaultRender)` as arguments: | ||
By giving an array of ranges on both old and new side, the token system will pick them out of each line, you should pass a `renderToken` function prop to `Diff` component to customize your render implement of customized token. The `renderToken` is a simple function receiving `(token, defaultRender)` as arguments: | ||
@@ -641,3 +641,3 @@ ```jsx | ||
- Make `insertHunk` work when hunks have overlaps. | ||
- Add `referenceRawCodeOrLines` parameter to `addStubHunk` function to automatically determineswhether a stub hunk is required. | ||
- Add `referenceRawCodeOrLines` parameter to `addStubHunk` function to automatically determines whether a stub hunk is required. | ||
- Add `computeCorresponding(Old|New)LineNumber` functions to get corresponding line number from one side to another side. | ||
@@ -644,0 +644,0 @@ - Add `findChangeBy(Old|New)LineNumber` functions to find specific change in hunks. |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1345239
1180