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

View File

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

View File

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