Position floating menu below for insert actions

This commit is contained in:
jos 2018-03-07 12:17:52 +01:00
parent 1b2bcd6dd9
commit 65df3428ac
2 changed files with 8 additions and 3 deletions

View File

@ -38,7 +38,8 @@ const json = {
'object': {'a': 'b', 'c': 'd', 'e': [{"first": true}, {"second": true}]}, 'object': {'a': 'b', 'c': 'd', 'e': [{"first": true}, {"second": true}]},
'string': 'Hello World', 'string': 'Hello World',
'unicode': 'A unicode character: \u260E', 'unicode': 'A unicode character: \u260E',
'url': 'http://jsoneditoronline.org' 'url': 'http://jsoneditoronline.org',
'largeArray': [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
} }
function expandAll (path) { function expandAll (path) {

View File

@ -11,7 +11,7 @@ import {
META, META,
SELECTED, SELECTED_START, SELECTED_END, SELECTED_AFTER, SELECTED_INSIDE, SELECTED, SELECTED_START, SELECTED_END, SELECTED_AFTER, SELECTED_INSIDE,
SELECTED_FIRST, SELECTED_LAST SELECTED_FIRST, SELECTED_LAST
} from '../eson' } from '../eson'
export default class JSONNode extends PureComponent { export default class JSONNode extends PureComponent {
static URL_TITLE = 'Ctrl+Click or Ctrl+Enter to open url' static URL_TITLE = 'Ctrl+Click or Ctrl+Enter to open url'
@ -58,6 +58,7 @@ export default class JSONNode extends PureComponent {
} }
renderJSONObject () { renderJSONObject () {
// TODO: refactor renderJSONObject (too large/complex)
const meta = this.props.value[META] const meta = this.props.value[META]
const props = meta.props const props = meta.props
const nodeStart = h('div', { const nodeStart = h('div', {
@ -122,6 +123,7 @@ export default class JSONNode extends PureComponent {
} }
renderJSONArray () { renderJSONArray () {
// TODO: refactor renderJSONArray (too large/complex)
const meta = this.props.value[META] const meta = this.props.value[META]
const count = this.props.value.length const count = this.props.value.length
const nodeStart = h('div', { const nodeStart = h('div', {
@ -534,13 +536,15 @@ export default class JSONNode extends PureComponent {
const isLastOfMultiple = ((selected & SELECTED_LAST) !== 0) && const isLastOfMultiple = ((selected & SELECTED_LAST) !== 0) &&
((selected & SELECTED_FIRST) === 0) ((selected & SELECTED_FIRST) === 0)
const isAfter = ((selected & SELECTED_AFTER) !== 0)
// const isInside = ((selected & SELECTED_INSIDE) !== 0) // TODO: nicely position menu when selected inside
return h(FloatingMenu, { return h(FloatingMenu, {
key: 'floating-menu', key: 'floating-menu',
path: this.props.value[META].path, path: this.props.value[META].path,
emit: this.props.emit, emit: this.props.emit,
items: this.getFloatingMenuItems(type, selected), items: this.getFloatingMenuItems(type, selected),
position: isLastOfMultiple ? 'bottom' : 'top' position: isLastOfMultiple || isAfter ? 'bottom' : 'top'
}) })
} }