Comments (3)
I think it's ok and it'll be useful in my own business project.
I'm going to add an optional prop hideUnchangedLines
for the viewer component, which value will be:
/**
* all fields are optional,
* default is `false` which means it won't hide unchanged lines.
*/
type HideUnchangedLines = false | {
/**
* if there are continuous unchanged lines exceeding the limit, they should be hidden.
* default is `6`
*/
threshold?: number;
/**
* if there are `x` continuous unchanged lines to be hidden, we can keep displaying some lines.
* default is `3`
*/
margin?: number;
/**
* the custom renderer of the "expand" line
* default renderer will produce the following buttons in this line:
* [⬆️ Show 20 lines] [↕️ Show all unchanged lines] [⬇️ Show 20 lines]
*/
expandLineRenderer?: ({
/**
* if this is `true`, you can show a "⬆️ Show xx lines" button
*/
hasLinesBefore: boolean;
/**
* if this is `true`, you can show a "⬇️ Show xx lines" button
*/
hasLinesAfter: boolean;
/**
* call this function to expand `lines` lines before,
* if there are not enough lines before, it will expand all lines before.
*/
onExpandBefore: (lines: number) => void;
/**
* call this function to expand `lines` lines after,
* if there are not enough lines after, it will expand all lines after.
*/
onExpandAfter: (lines: number) => void;
/**
* call this function to expand all lines in this continuous part.
*/
onExpandAll: () => void;
}) => JSX.Element;
}
For example, if I call the viewer component like this:
<Viewer
{...otherViewerProps}
hideUnchangedLines={{ threshold: 6, margin: 3 }}
/>
And the data (the unchanged parts) is like this:
1
2
3
4
5
6
7
8
9
10
Which will produce the output like this:
1
2
3
[⬆️ Show 20 lines] [↕️ Show all unchanged lines] [⬇️ Show 20 lines]
8
9
10
from json-diff-kit.
Here are 2 screenshots for preview, the feature itself is still under development:
from json-diff-kit.
Hi, you can pass the hideUnchangedLines={true}
prop to the <Viewer>
component to support hiding the unchanged lines. I think the default config is enough in most situations, or you can render your own "expand" line using the given API (please refer to type definitions).
from json-diff-kit.
Related Issues (20)
- Error [ERR_MODULE_NOT_FOUND]: Cannot find package HOT 1
- Performance issue when large jsons are diff HOT 3
- SyntaxError: Cannot use import statement outside a module HOT 4
- Comparing a non object with a object produces a non beautified object. HOT 1
- Add "ignoreCaseForKey" for Differ HOT 1
- Sytax highligting with prism HOT 2
- Type Error : Object is being assigned to a read-only property HOT 1
- Possible configuration for changing the highlighter color in Viewer HOT 1
- Comparing array from the end in some cases HOT 2
- Null problem HOT 2
- Comparing array with the same array with added object produces a non beautified object HOT 3
- Key order wasn't respected HOT 8
- `undefined` results in error HOT 6
- 'Show lines before' button is not working properly when there is no difference HOT 2
- When json contains more than the maximum integer allowed by js, precision is lost HOT 2
- Output html HOT 6
- Plans to split into packages?
- Request for Vue HOT 2
- With large JSON data, the buttons "Show line after/before" not working HOT 2
- Error `Unexpected token 'export'` when using with Remix/Vite
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from json-diff-kit.