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)
}
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'
if (!prop && !isIndex) {

View File

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

View File

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