57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import * as diff from 'diff'
|
|
import * as React from 'react'
|
|
import ShowChart from '@material-ui/icons/ShowChart'
|
|
import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser'
|
|
import { lineChangeStyle, trimNewlineRight } from './util'
|
|
import { Theme } from '@material-ui/core'
|
|
import { withStyles } from '@material-ui/styles'
|
|
|
|
interface Props {
|
|
changes: Array<diff.Change>,
|
|
literalPositions: Array<JsonPropertyLocation>
|
|
classes: any
|
|
}
|
|
|
|
const style = (theme: Theme) => {
|
|
return {
|
|
gutterLine: {
|
|
display: 'flex' as 'flex',
|
|
textAlign: 'right' as 'right',
|
|
paddingRight: theme.spacing(0.5),
|
|
height: '16px',
|
|
},
|
|
}
|
|
}
|
|
|
|
function tokensForLine(change: diff.Change, line: number, literalPositions: Array<JsonPropertyLocation>) {
|
|
let diagram = literalPositions[line] ? <ShowChart style={{ height: '16px' }} /> : ''
|
|
|
|
if (change.added) {
|
|
return [diagram, '+']
|
|
} else if (change.removed) {
|
|
return '-'
|
|
} else {
|
|
return [diagram, ' ']
|
|
}
|
|
}
|
|
|
|
function Gutters(props: Props) {
|
|
let currentLine = -1
|
|
const gutters = props.changes.map((change, key) => {
|
|
return trimNewlineRight(change.value)
|
|
.split('\n')
|
|
.map((_, idx) => {
|
|
currentLine = !change.removed ? currentLine + 1 : currentLine
|
|
return (
|
|
<div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={props.classes.gutterLine}>
|
|
{tokensForLine(change, currentLine, props.literalPositions)}
|
|
</div>
|
|
)
|
|
})
|
|
}).reduce((a, b) => a.concat(b), [])
|
|
|
|
return <div>{gutters}</div>
|
|
}
|
|
|
|
export default withStyles(style)(Gutters)
|