StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some styling improvements for errors

This commit is contained in:
jos 2016-11-12 13:23:53 +01:00
parent e45aa82b4b
commit 8da5ece3b8
2 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/TextMode.js
View File

@ -6,6 +6,12 @@ import { enrichSchemaError, limitErrors } from '../utils/schemaUtils'
import { jsonToData, dataToJson, patchData } from '../jsonData' import { jsonToData, dataToJson, patchData } from '../jsonData'
import ModeButton from './menu/ModeButton' import ModeButton from './menu/ModeButton'
const AJV_OPTIONS = {
allErrors: true,
verbose: true,
jsonPointers: true
}
/** /**
* TextMode * TextMode
* *
@ -59,6 +65,7 @@ export default class TextMode extends Component {
/** @protected */ /** @protected */
renderMenu () { renderMenu () {
// TODO: move Menu into a separate Component
return h('div', {class: 'jsoneditor-menu'}, [ return h('div', {class: 'jsoneditor-menu'}, [
h('button', { h('button', {
class: 'jsoneditor-format', class: 'jsoneditor-format',
@ -86,7 +93,7 @@ export default class TextMode extends Component {
/** @protected */ /** @protected */
renderSchemaErrors () { renderSchemaErrors () {
// TODO: move the JSON Schema stuff into a separate Component? // TODO: move the JSON Schema stuff into a separate Component
try { try {
// TODO: only validate again when json is changed since last validation // TODO: only validate again when json is changed since last validation
@ -99,8 +106,12 @@ export default class TextMode extends Component {
const allErrors = this.state.compiledSchema.errors.map(enrichSchemaError) const allErrors = this.state.compiledSchema.errors.map(enrichSchemaError)
const limitedErrors = limitErrors(allErrors) const limitedErrors = limitErrors(allErrors)
return h('table', {class: 'jsoneditor-text-errors'}, console.log('errors', allErrors)
h('tbody', {}, limitedErrors.map(TextMode.renderSchemaError))
return h('div', { class: 'jsoneditor-errors'},
h('table', {},
h('tbody', {}, limitedErrors.map(TextMode.renderSchemaError))
)
) )
} }
else { else {
@ -126,7 +137,7 @@ export default class TextMode extends Component {
static renderSchemaError (error) { static renderSchemaError (error) {
const icon = h('input', {type: 'button', class: 'jsoneditor-schema-error'}) const icon = h('input', {type: 'button', class: 'jsoneditor-schema-error'})
if (error && error.data && error.schema) { if (error && error.schema && error.schemaPath) {
// this is an ajv error message // this is an ajv error message
return h('tr', {}, [ return h('tr', {}, [
h('td', {}, icon), h('td', {}, icon),
@ -136,6 +147,7 @@ export default class TextMode extends Component {
} }
else { else {
// any other error message // any other error message
console.log('error???', error)
return h('tr', {}, return h('tr', {},
h('td', {}, icon), h('td', {}, icon),
h('td', {colSpan: 2}, h('code', {}, String(error))) h('td', {colSpan: 2}, h('code', {}, String(error)))
@ -150,8 +162,7 @@ export default class TextMode extends Component {
*/ */
setSchema (schema) { setSchema (schema) {
if (schema) { if (schema) {
const ajv = this.props.options.ajv || const ajv = this.props.options.ajv || Ajv && Ajv(AJV_OPTIONS)
Ajv && Ajv({ allErrors: true, verbose: true })
if (!ajv) { if (!ajv) {
throw new Error('Cannot validate JSON: ajv not available. ' + throw new Error('Cannot validate JSON: ajv not available. ' +

25
src/jsoneditor.less
View File

@ -576,23 +576,26 @@ div.jsoneditor-code {
/* JSON schema errors displayed at the bottom of the editor in mode text and code */ /* JSON schema errors displayed at the bottom of the editor in mode text and code */
.jsoneditor-text-errors { .jsoneditor-errors {
width: 100%; width: 100%;
border-collapse: collapse;
background-color: #ffef8b; background-color: #ffef8b;
border-top: 1px solid #ffd700; border-top: 1px solid #ffd700;
font-family: @fontFamily; table {
font-size: @fontSize; border-collapse: collapse;
td { font-family: @fontFamily;
padding: 3px 6px; font-size: @fontSize;
vertical-align: middle;
}
code { td {
display: block; padding: 3px 6px;
white-space: pre-wrap; vertical-align: middle;
code {
display: block;
white-space: pre-wrap;
}
}
} }
.jsoneditor-schema-error { .jsoneditor-schema-error {