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

change(ui): formatted components

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

39
frontend/app/components/Session_/Storage/DiffRow.tsx
View file

@ -1,32 +1,29 @@
import React from 'react'
import cn from 'classnames'
import React from 'react';
interface Props {
shades: Record<string, string>
pathRoot: string
path: string
diff: Record<string, any>
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 [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
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>
)
<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
export default DiffRow;

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

@ -14,8 +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 DiffRow from './DiffRow';
import cn from 'classnames';
import stl from './storage.module.css';
// const STATE = 'STATE';
@ -112,7 +112,7 @@ export default class Storage extends React.PureComponent {
}
renderDiffs(diff, i) {
const [path, pathRoot] = this.createPathAndBg(diff)
const [path, pathRoot] = this.createPathAndBg(diff);
return (
<React.Fragment key={i}>
<DiffRow shades={this.pathShades} path={path} diff={diff} pathRoot={pathRoot} />
@ -183,9 +183,15 @@ export default class Storage extends React.PureComponent {
}
return (
<div className={cn("flex justify-between items-start", src !== null ? '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: '26.5%' }}> {name} </div>
<div className="font-mono" style={{ flex: 2, marginLeft: '26.5%' }}>
{' '}
{name}{' '}
</div>
) : (
<>
{this.renderDiff(item, prevItem)}