Created insert dropdown

src/jsoneditor/components/TreeMode.js

@@ -570,9 +570,9 @@ export default class TreeMode extends PureComponent {
     }
   }
 
-  handleInsertBefore = () => {
+  handleInsertBefore = (insertType) => {
     // FIXME: implement handleInsertBefore
-    console.error('Insert not yet implemented...')
+    console.error('Insert not yet implemented...', insertType)
   }
 
   /**

src/jsoneditor/components/menu/DropDown.js

@@ -14,6 +14,8 @@ export default class DropDown extends Component {
 
   static propTypes = {
     value: PropTypes.string,
+    text: PropTypes.string,
+    title: PropTypes.string,
     options: PropTypes.arrayOf(PropTypes.shape({
       value: PropTypes.string.isRequired,
       text: PropTypes.string,
@@ -45,17 +47,20 @@ export default class DropDown extends Component {
 
     const selectedText = selected
         ? (selected.text || selected.value)
-        : ''
+        : this.props.text
 
     return h('div', {className: 'jsoneditor-dropdown'}, [
       h('button', {
         key: 'button',
         className: 'jsoneditor-dropdown-main-button',
-        title: 'Switch mode',
+        title: this.props.title,
         onClick: this.handleOpen
       }, [
-          toCapital(selectedText) + '  ',
+        typeof selectedText === 'string'
-          h('i', { key: 'icon', className: 'fa fa-chevron-down' })
+            ? toCapital(selectedText)
+            : selectedText,
+        '\u00A0\u00A0',
+        h('i', { key: 'icon', className: 'fa fa-chevron-down' })
       ]),
 
       this.renderDropDown()
@@ -80,12 +85,12 @@ export default class DropDown extends Component {
    * {{open, modes, mode, onChangeMode, onRequestClose, onError}} props
    */
   renderDropDown () {
-    if (this.state.open) {
+    if (this.state.open && this.props.options) {
       const items = this.props.options.map(option => {
         return h('button', {
           key: option.value,
           ref: 'button',
-          title: option.title || option.text || option.value,
+          title: (option.title || option.text || option.value),
           className: 'jsoneditor-menu-item' +
               ((option.value === this.props.value) ? ' jsoneditor-menu-item-selected' : ''),
           onClick: () => {
@@ -98,7 +103,7 @@ export default class DropDown extends Component {
               this.props.onError(err)
             }
           }
-        }, toCapital(option.text || option.value))
+        }, toCapital(option.text || option.value || ''))
       })
 
       return h('div', {

src/jsoneditor/components/menu/TextModeMenu.js

@@ -32,7 +32,12 @@ export default class TreeModeMenu extends PureComponent {
         h('div', {className: 'jsoneditor-menu-group', key: 'mode'}, [
           h(DropDown, {
             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,
             onChange: this.props.onChangeMode,
             onError: this.props.onError

src/jsoneditor/components/menu/TreeModeMenu.js

@@ -71,7 +71,12 @@ export default class TreeModeMenu extends PureComponent {
         h('div', {className: 'jsoneditor-menu-group', key: 'mode'}, [
           h(DropDown, {
             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,
             onChange: this.props.onChangeMode,
             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
     items = items.concat([
       h('div', {className: 'jsoneditor-menu-group', key: 'insert-duplicate-remove'}, [
-        h('button', {
+        h(DropDown, {
           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', {
           key: 'duplicate',
           className: 'jsoneditor-duplicate',
@@ -183,4 +189,11 @@ export default class TreeModeMenu extends PureComponent {
 
     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' }
+]

src/jsoneditor/utils/stringUtils.js

@@ -119,5 +119,7 @@ export function findUniqueName (name, existingProps) {
  * @return {string}
  */
 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
 }

src/jsoneditor/utils/stringUtils.test.js

@@ -1,4 +1,4 @@
-import { escapeHTML, unescapeHTML, findUniqueName } from './stringUtils'
+import { escapeHTML, unescapeHTML, findUniqueName, toCapital } from './stringUtils'
 
 test('escapeHTML', () => {
   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, '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)
+})