From b4a0dd6a3d790128bc08688e390ecdceb8b0f460 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 19 Sep 2018 13:27:36 +0200 Subject: [PATCH] Created insert dropdown --- src/jsoneditor/components/TreeMode.js | 4 +-- src/jsoneditor/components/menu/DropDown.js | 19 ++++++++----- .../components/menu/TextModeMenu.js | 7 ++++- .../components/menu/TreeModeMenu.js | 27 ++++++++++++++----- src/jsoneditor/utils/stringUtils.js | 4 ++- src/jsoneditor/utils/stringUtils.test.js | 10 ++++++- 6 files changed, 52 insertions(+), 19 deletions(-) diff --git a/src/jsoneditor/components/TreeMode.js b/src/jsoneditor/components/TreeMode.js index 4c04c44..200e008 100644 --- a/src/jsoneditor/components/TreeMode.js +++ b/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) } /** diff --git a/src/jsoneditor/components/menu/DropDown.js b/src/jsoneditor/components/menu/DropDown.js index ce5cec1..9f541e3 100644 --- a/src/jsoneditor/components/menu/DropDown.js +++ b/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) + ' ', - h('i', { key: 'icon', className: 'fa fa-chevron-down' }) + typeof selectedText === 'string' + ? 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', { diff --git a/src/jsoneditor/components/menu/TextModeMenu.js b/src/jsoneditor/components/menu/TextModeMenu.js index 868adf2..1707c0e 100644 --- a/src/jsoneditor/components/menu/TextModeMenu.js +++ b/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 diff --git a/src/jsoneditor/components/menu/TreeModeMenu.js b/src/jsoneditor/components/menu/TreeModeMenu.js index 0735fb5..abdea0e 100644 --- a/src/jsoneditor/components/menu/TreeModeMenu.js +++ b/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', - title: 'Insert new contents', - onClick: this.props.onInsert - }, h('i', {className: 'fa fa-plus'})), + text: h('i', {className: 'fa fa-plus'}), + options: INSERT_OPTIONS, + onChange: this.props.onInsert, + 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) } -} \ No newline at end of file +} + +const INSERT_OPTIONS = [ + { value: 'structure', text: 'Insert structure' }, + { value: 'value', text: 'Insert value' }, + { value: 'object', text: 'Insert object' }, + { value: 'array', text: 'Insert array' } +] diff --git a/src/jsoneditor/utils/stringUtils.js b/src/jsoneditor/utils/stringUtils.js index 98bd658..c6c6386 100644 --- a/src/jsoneditor/utils/stringUtils.js +++ b/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 } diff --git a/src/jsoneditor/utils/stringUtils.test.js b/src/jsoneditor/utils/stringUtils.test.js index 40b25e9..623a5e0 100644 --- a/src/jsoneditor/utils/stringUtils.test.js +++ b/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) +})