Fixed broken modes `form` and `view`

This commit is contained in:
jos 2017-01-08 15:23:17 +01:00
parent ce484c670a
commit 675432c52d
4 changed files with 28 additions and 41 deletions

View File

@ -149,7 +149,7 @@ export default class JSONNode extends Component {
return h('div', {key: 'readonly', className: 'jsoneditor-readonly', title}, text) return h('div', {key: 'readonly', className: 'jsoneditor-readonly', title}, text)
} }
renderProperty (prop: ?PropertyData, index: ?number, data: JSONData, options) { renderProperty (prop: ?PropertyData, index: ?number, data: JSONData, options: {escapeUnicode: boolean, isPropertyEditable: (Path) => boolean}) {
const isIndex = typeof index === 'number' const isIndex = typeof index === 'number'
if (!prop && !isIndex) { if (!prop && !isIndex) {

View File

@ -1,7 +1,9 @@
import { createElement as h } from 'react' // @flow
import { escapeHTML } from '../utils/stringUtils'
import JSONNode from './JSONNode' import JSONNode from './JSONNode'
import type { PropertyData, JSONData } from '../types'
/** /**
* JSONNodeForm * JSONNodeForm
* *
@ -20,33 +22,13 @@ export default class JSONNodeForm extends JSONNode {
} }
// render a readonly property // render a readonly property
renderProperty (prop, data, options) { renderProperty (prop: ?PropertyData, index: ?number, data: JSONData, options: {escapeUnicode: boolean, isPropertyEditable: (Path) => boolean}) {
if (prop !== null) { const formOptions = Object.assign({}, options, { isPropertyEditable })
const isIndex = typeof prop === 'number' // FIXME: pass an explicit prop isIndex
if (isIndex) { // array item return JSONNode.prototype.renderProperty.call(this, prop, index, data, formOptions)
return h('div', { }
key: 'property',
className: 'jsoneditor-property jsoneditor-readonly'
}, prop)
} }
else { // object property
const escapedProp = escapeHTML(prop, options.escapeUnicode)
return h('div', { function isPropertyEditable () {
key: 'property', return false
className: 'jsoneditor-property' + (prop.length === 0 ? ' jsoneditor-empty' : '')
}, escapedProp)
}
}
else {
// root node
const content = JSONNode.getRootName(data, options)
return h('div', {
key: 'property',
className: 'jsoneditor-property jsoneditor-readonly'
}, content)
}
}
} }

View File

@ -12,26 +12,31 @@ import JSONNodeForm from './JSONNodeForm'
*/ */
export default class JSONNodeView extends JSONNodeForm { export default class JSONNodeView extends JSONNodeForm {
// render a readonly value // render a readonly value but with colors
renderValue (value) { renderValue (value, searchResult, options) {
const escapedValue = escapeHTML(value, options.escapeUnicode) const escapedValue = escapeHTML(value, options.escapeUnicode)
const type = valueType (value) const type = valueType (value)
const isEmpty = escapedValue.length === 0
const itsAnUrl = isUrl(value) const itsAnUrl = isUrl(value)
const className = JSONNode.getValueClass(type, itsAnUrl, isEmpty) const isEmpty = escapedValue.length === 0
if (itsAnUrl) { const editable = !options.isValueEditable || options.isValueEditable(this.props.path)
return h('a', { if (editable) {
return h('div', {
key: 'value', key: 'value',
className: className, ref: 'value',
href: escapedValue className: JSONNode.getValueClass(type, itsAnUrl, isEmpty) +
JSONNode.getSearchResultClass(searchResult),
contentEditable: 'false',
spellCheck: 'false',
onClick: this.handleClickValue,
title: itsAnUrl ? JSONNode.URL_TITLE : null
}, escapedValue) }, escapedValue)
} }
else { else {
return h('div', { return h('div', {
key: 'value', key: 'value',
className: className, className: 'jsoneditor-readonly',
onClick: this.handleClickValue title: itsAnUrl ? JSONNode.URL_TITLE : null
}, escapedValue) }, escapedValue)
} }
} }