jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): move diff rows to separate comp

Browse source
This commit is contained in:
sylenien 2022-09-26 12:28:44 +02:00 • committed by Delirium
parent 51473cc4e5
commit 0c9d012707
2 changed files with 40 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/app/components/Session_/Storage/DiffRow.tsx Normal file
View file

@ -0,0 +1,32 @@
import React from 'react'
import cn from 'classnames'
interface Props {
shades: Record<string, string>
pathRoot: string
path: string
diff: Record<string, any>
}
function DiffRow({ diff, path, pathRoot, shades }: Props) {
const [shorten, setShorten] = React.useState(true)
const oldValue = diff.item ? JSON.stringify(diff.item.lhs) : JSON.stringify(diff.lhs);
const newValue = diff.item ? JSON.stringify(diff.item.rhs) : JSON.stringify(diff.rhs);
const pathStr = path.length > 15 && shorten ? (path.slice(0, 5) + '...' + path.slice(10)) : path
return (
<div className="p-1 rounded" style={{ background: shades[pathRoot] }}>
<span className={path.length > 15 ? "cursor-pointer" : ''} onClick={() => setShorten(false)}>
{pathStr}
{': '}
</span>
<span className="line-through text-disabled-text">{oldValue || 'undefined'}</span>
{' -> '}
<span className={`${!newValue ? 'text-red' : 'text-green'}`}>
{newValue || 'undefined'}
</span>
</div>
)
}
export default DiffRow

27
frontend/app/components/Session_/Storage/Storage.js
View file

@ -14,7 +14,8 @@ import { diff } from 'deep-diff';
import { jump } from 'Player';
import Autoscroll from '../Autoscroll';
import BottomBlock from '../BottomBlock/index';
import DiffRow from './DiffRow'
import cn from 'classnames'
import stl from './storage.module.css';
// const STATE = 'STATE';
@ -111,23 +112,11 @@ export default class Storage extends React.PureComponent {
}
renderDiffs(diff, i) {
const oldValue = diff.item ? JSON.stringify(diff.item.lhs) : JSON.stringify(diff.lhs);
const newValue = diff.item ? JSON.stringify(diff.item.rhs) : JSON.stringify(diff.rhs);
const [path, pathRoot] = this.createPathAndBg(diff);
console.log(this.pathShades[pathRoot]);
const [path, pathRoot] = this.createPathAndBg(diff)
return (
<div key={i} className="p-1 rounded" style={{ background: this.pathShades[pathRoot] }}>
<span>
{path}
{': '}
</span>
<span className="line-through text-disabled-text">{oldValue || 'undefined'}</span>
{' -> '}
<span className={`${!newValue ? 'text-red' : 'text-green'}`}>
{newValue || 'undefined'}
</span>
</div>
<React.Fragment key={i}>
<DiffRow shades={this.pathShades} path={path} diff={diff} pathRoot={pathRoot} />
</React.Fragment>
);
}
@ -194,9 +183,9 @@ export default class Storage extends React.PureComponent {
}
return (
<div className="flex justify-between items-start border-b" key={`store-${i}`}>
<div className={cn("flex justify-between items-start", src !== null ? 'border-b' : '')} key={`store-${i}`}>
{src === null ? (
<div className="font-mono" style={{ flex: 2, marginLeft: '27%' }}> {name} </div>
<div className="font-mono" style={{ flex: 2, marginLeft: '26.5%' }}> {name} </div>
) : (
<>
{this.renderDiff(item, prevItem)}