luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add syntax highlighting to raw / json values

Browse Source
This commit is contained in:
Thomas Nordquist
2019-07-17 19:49:10 +02:00
parent a7eacfac46
commit 5badd19015
2 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx
View File

@@ -40,7 +40,7 @@ function ActionButtons(props: {
</Tooltip> </Tooltip>
</ToggleButton> </ToggleButton>
<ToggleButton className={props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw"> <ToggleButton className={props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
<Tooltip title="Raw value"> <Tooltip title="Raw / formatted JSON">
<span> <span>
<Reorder className={props.classes.toggleButtonIcon} /> <Reorder className={props.classes.toggleButtonIcon} />
</span> </span>

25
app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx
View File

@@ -38,19 +38,19 @@ class ValueRenderer extends React.Component<Props, State> {
) )
} }
private convertMessage(msg?: Base64Message): string | undefined { private convertMessage(msg?: Base64Message): [string | undefined, 'json' | undefined] {
if (!msg) { if (!msg) {
return return [undefined, undefined]
} }
const str = Base64Message.toUnicodeString(msg) const str = Base64Message.toUnicodeString(msg)
try { try {
JSON.parse(str) JSON.parse(str)
} catch (error) { } catch (error) {
return str return [str, undefined]
} }
return this.messageToPrettyJson(str) return [this.messageToPrettyJson(str), 'json']
} }
private messageToPrettyJson(str: string): string | undefined { private messageToPrettyJson(str: string): string | undefined {
@@ -66,14 +66,17 @@ class ValueRenderer extends React.Component<Props, State> {
if (!message.value) { if (!message.value) {
return return
} }
const value = this.convertMessage(message.value) const [value, valueLanguage] = this.convertMessage(message.value)
const compareStr = compare && compare.value ? this.convertMessage(compare.value) : undefined const [compareStr, compareStrLanguage] =
compare && compare.value ? this.convertMessage(compare.value) : [undefined, undefined]
return ( return (
<div> <div>
{this.renderDiff(value, value)} {this.renderDiff(value, value, undefined, valueLanguage)}
<Fade in={Boolean(compareStr)} timeout={400}> <Fade in={Boolean(compareStr)} timeout={400}>
<div>{Boolean(compareStr) ? this.renderDiff(compareStr, compareStr, 'selected') : null}</div> <div>
{Boolean(compareStr) ? this.renderDiff(compareStr, compareStr, 'selected', compareStrLanguage) : null}
</div>
</Fade> </Fade>
</div> </div>
) )
@@ -97,10 +100,10 @@ class ValueRenderer extends React.Component<Props, State> {
} }
const compareValue = compareMessage.value || message.value const compareValue = compareMessage.value || message.value
const current = this.convertMessage(message.value) const [current, currentLanguage] = this.convertMessage(message.value)
const compare = this.convertMessage(compareValue) const [compare, compareLanguage] = this.convertMessage(compareValue)
const language = current && compare ? 'json' : undefined const language = currentLanguage === compareLanguage && compareLanguage === 'json' ? 'json' : undefined
return this.renderDiff(current, compare, undefined, language) return this.renderDiff(current, compare, undefined, language)
} }