Created insert dropdown
This commit is contained in:
parent
2999fbc380
commit
b4a0dd6a3d
|
@ -570,9 +570,9 @@ export default class TreeMode extends PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInsertBefore = () => {
|
handleInsertBefore = (insertType) => {
|
||||||
// FIXME: implement handleInsertBefore
|
// FIXME: implement handleInsertBefore
|
||||||
console.error('Insert not yet implemented...')
|
console.error('Insert not yet implemented...', insertType)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -14,6 +14,8 @@ export default class DropDown extends Component {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
value: PropTypes.string,
|
value: PropTypes.string,
|
||||||
|
text: PropTypes.string,
|
||||||
|
title: PropTypes.string,
|
||||||
options: PropTypes.arrayOf(PropTypes.shape({
|
options: PropTypes.arrayOf(PropTypes.shape({
|
||||||
value: PropTypes.string.isRequired,
|
value: PropTypes.string.isRequired,
|
||||||
text: PropTypes.string,
|
text: PropTypes.string,
|
||||||
|
@ -45,16 +47,19 @@ export default class DropDown extends Component {
|
||||||
|
|
||||||
const selectedText = selected
|
const selectedText = selected
|
||||||
? (selected.text || selected.value)
|
? (selected.text || selected.value)
|
||||||
: ''
|
: this.props.text
|
||||||
|
|
||||||
return h('div', {className: 'jsoneditor-dropdown'}, [
|
return h('div', {className: 'jsoneditor-dropdown'}, [
|
||||||
h('button', {
|
h('button', {
|
||||||
key: 'button',
|
key: 'button',
|
||||||
className: 'jsoneditor-dropdown-main-button',
|
className: 'jsoneditor-dropdown-main-button',
|
||||||
title: 'Switch mode',
|
title: this.props.title,
|
||||||
onClick: this.handleOpen
|
onClick: this.handleOpen
|
||||||
}, [
|
}, [
|
||||||
toCapital(selectedText) + ' ',
|
typeof selectedText === 'string'
|
||||||
|
? toCapital(selectedText)
|
||||||
|
: selectedText,
|
||||||
|
'\u00A0\u00A0',
|
||||||
h('i', { key: 'icon', className: 'fa fa-chevron-down' })
|
h('i', { key: 'icon', className: 'fa fa-chevron-down' })
|
||||||
]),
|
]),
|
||||||
|
|
||||||
|
@ -80,12 +85,12 @@ export default class DropDown extends Component {
|
||||||
* {{open, modes, mode, onChangeMode, onRequestClose, onError}} props
|
* {{open, modes, mode, onChangeMode, onRequestClose, onError}} props
|
||||||
*/
|
*/
|
||||||
renderDropDown () {
|
renderDropDown () {
|
||||||
if (this.state.open) {
|
if (this.state.open && this.props.options) {
|
||||||
const items = this.props.options.map(option => {
|
const items = this.props.options.map(option => {
|
||||||
return h('button', {
|
return h('button', {
|
||||||
key: option.value,
|
key: option.value,
|
||||||
ref: 'button',
|
ref: 'button',
|
||||||
title: option.title || option.text || option.value,
|
title: (option.title || option.text || option.value),
|
||||||
className: 'jsoneditor-menu-item' +
|
className: 'jsoneditor-menu-item' +
|
||||||
((option.value === this.props.value) ? ' jsoneditor-menu-item-selected' : ''),
|
((option.value === this.props.value) ? ' jsoneditor-menu-item-selected' : ''),
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
|
@ -98,7 +103,7 @@ export default class DropDown extends Component {
|
||||||
this.props.onError(err)
|
this.props.onError(err)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, toCapital(option.text || option.value))
|
}, toCapital(option.text || option.value || ''))
|
||||||
})
|
})
|
||||||
|
|
||||||
return h('div', {
|
return h('div', {
|
||||||
|
|
|
@ -32,7 +32,12 @@ export default class TreeModeMenu extends PureComponent {
|
||||||
h('div', {className: 'jsoneditor-menu-group', key: 'mode'}, [
|
h('div', {className: 'jsoneditor-menu-group', key: 'mode'}, [
|
||||||
h(DropDown, {
|
h(DropDown, {
|
||||||
key: 'mode',
|
key: 'mode',
|
||||||
options: this.props.modes.map(mode => ({ value: mode })),
|
title: 'Switch mode',
|
||||||
|
options: this.props.modes.map(mode => ({
|
||||||
|
value: mode,
|
||||||
|
text: mode,
|
||||||
|
title: `Switch to ${mode} mode`
|
||||||
|
})),
|
||||||
value: this.props.mode,
|
value: this.props.mode,
|
||||||
onChange: this.props.onChangeMode,
|
onChange: this.props.onChangeMode,
|
||||||
onError: this.props.onError
|
onError: this.props.onError
|
||||||
|
|
|
@ -71,7 +71,12 @@ export default class TreeModeMenu extends PureComponent {
|
||||||
h('div', {className: 'jsoneditor-menu-group', key: 'mode'}, [
|
h('div', {className: 'jsoneditor-menu-group', key: 'mode'}, [
|
||||||
h(DropDown, {
|
h(DropDown, {
|
||||||
key: 'mode',
|
key: 'mode',
|
||||||
options: this.props.modes.map(mode => ({ value: mode })),
|
title: 'Switch mode',
|
||||||
|
options: this.props.modes.map(mode => ({
|
||||||
|
value: mode,
|
||||||
|
text: mode,
|
||||||
|
title: `Switch to ${mode} mode`
|
||||||
|
})),
|
||||||
value: this.props.mode,
|
value: this.props.mode,
|
||||||
onChange: this.props.onChangeMode,
|
onChange: this.props.onChangeMode,
|
||||||
onError: this.props.onError
|
onError: this.props.onError
|
||||||
|
@ -110,12 +115,13 @@ export default class TreeModeMenu extends PureComponent {
|
||||||
// TODO: [insert structure / insert value / insert array / insert object] / duplicate / remove
|
// TODO: [insert structure / insert value / insert array / insert object] / duplicate / remove
|
||||||
items = items.concat([
|
items = items.concat([
|
||||||
h('div', {className: 'jsoneditor-menu-group', key: 'insert-duplicate-remove'}, [
|
h('div', {className: 'jsoneditor-menu-group', key: 'insert-duplicate-remove'}, [
|
||||||
h('button', {
|
h(DropDown, {
|
||||||
key: 'insert',
|
key: 'insert',
|
||||||
className: 'jsoneditor-insert',
|
text: h('i', {className: 'fa fa-plus'}),
|
||||||
title: 'Insert new contents',
|
options: INSERT_OPTIONS,
|
||||||
onClick: this.props.onInsert
|
onChange: this.props.onInsert,
|
||||||
}, h('i', {className: 'fa fa-plus'})),
|
onError: this.props.onError
|
||||||
|
}),
|
||||||
h('button', {
|
h('button', {
|
||||||
key: 'duplicate',
|
key: 'duplicate',
|
||||||
className: 'jsoneditor-duplicate',
|
className: 'jsoneditor-duplicate',
|
||||||
|
@ -184,3 +190,10 @@ export default class TreeModeMenu extends PureComponent {
|
||||||
return h('div', {key: 'menu', className: 'jsoneditor-menu'}, items)
|
return h('div', {key: 'menu', className: 'jsoneditor-menu'}, items)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const INSERT_OPTIONS = [
|
||||||
|
{ value: 'structure', text: 'Insert structure' },
|
||||||
|
{ value: 'value', text: 'Insert value' },
|
||||||
|
{ value: 'object', text: 'Insert object' },
|
||||||
|
{ value: 'array', text: 'Insert array' }
|
||||||
|
]
|
||||||
|
|
|
@ -119,5 +119,7 @@ export function findUniqueName (name, existingProps) {
|
||||||
* @return {string}
|
* @return {string}
|
||||||
*/
|
*/
|
||||||
export function toCapital(text) {
|
export function toCapital(text) {
|
||||||
return text[0].toUpperCase() + text.substr(1).toLowerCase()
|
return text && text.length > 0
|
||||||
|
? text[0].toUpperCase() + text.substr(1).toLowerCase()
|
||||||
|
: text
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { escapeHTML, unescapeHTML, findUniqueName } from './stringUtils'
|
import { escapeHTML, unescapeHTML, findUniqueName, toCapital } from './stringUtils'
|
||||||
|
|
||||||
test('escapeHTML', () => {
|
test('escapeHTML', () => {
|
||||||
expect(escapeHTML(' hello ')).toEqual('\u00A0\u00A0 hello \u00A0')
|
expect(escapeHTML(' hello ')).toEqual('\u00A0\u00A0 hello \u00A0')
|
||||||
|
@ -23,3 +23,11 @@ test('findUniqueName', () => {
|
||||||
expect(findUniqueName('b', {'a': true, 'b': true, 'c': true, 'b (copy)': true})).toEqual('b (copy 2)')
|
expect(findUniqueName('b', {'a': true, 'b': true, 'c': true, 'b (copy)': true})).toEqual('b (copy 2)')
|
||||||
expect(findUniqueName('b', {'a': true, 'b': true, 'c': true, 'b (copy)': true, 'b (copy 2)': true})).toEqual('b (copy 3)')
|
expect(findUniqueName('b', {'a': true, 'b': true, 'c': true, 'b (copy)': true, 'b (copy 2)': true})).toEqual('b (copy 3)')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test('toCapital', () => {
|
||||||
|
expect(toCapital('hello')).toEqual('Hello')
|
||||||
|
expect(toCapital('HEllo')).toEqual('Hello')
|
||||||
|
expect(toCapital('HEllo')).toEqual('Hello')
|
||||||
|
expect(toCapital('')).toEqual('')
|
||||||
|
expect(toCapital(undefined)).toEqual(undefined)
|
||||||
|
})
|
||||||
|
|
Loading…
Reference in New Issue