From 4c539cb4f5579280dfba4e3466d6553a26498c9b Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 19 Sep 2018 10:39:46 +0200 Subject: [PATCH] Implement most menu functionality --- src/jsoneditor/components/TreeMode.js | 56 +++++++++++++++---- .../components/menu/MenuButton.scss | 4 ++ src/jsoneditor/components/menu/ModeButton.js | 3 +- .../components/menu/TreeModeMenu.js | 29 +++++++--- 4 files changed, 72 insertions(+), 20 deletions(-) diff --git a/src/jsoneditor/components/TreeMode.js b/src/jsoneditor/components/TreeMode.js index 32326a2..98781de 100644 --- a/src/jsoneditor/components/TreeMode.js +++ b/src/jsoneditor/components/TreeMode.js @@ -24,8 +24,7 @@ import { insertInside, remove, removeAll, - replace, - sort + replace } from '../actions' import JSONNode from './JSONNode' import JSONNodeView from './JSONNodeView' @@ -271,6 +270,12 @@ export default class TreeMode extends PureComponent { } renderMenu () { + const hasCursor = true // FIXME: implement hasCursor + const hasSelection = !!this.state.selection + const hasClipboard = this.state.clipboard + ? this.state.clipboard.length > 0 + : false + return h(TreeModeMenu, { key: 'menu', @@ -278,13 +283,32 @@ export default class TreeMode extends PureComponent { modes: this.props.modes, onChangeMode: this.props.onChangeMode, + canCut: hasSelection, + canCopy: hasSelection, + canPaste: hasClipboard && hasCursor, + onCut: this.handleCut, + onCopy: this.handleCopy, + onPaste: this.handlePaste, + + canInsert: hasCursor, + canDuplicate: hasSelection, + canRemove: hasSelection, + onInsert: this.handleInsertBefore, + onDuplicate: this.handleDuplicate, + onRemove: this.handleRemove, + + canSort: hasSelection || hasCursor, + canTransform: hasSelection || hasCursor, + canSearch: this.props.search, + onSort: this.handleSort, + onTransform: this.handleTransform, + onToggleSearch: this.toggleSearch, + enableHistory: this.props.history, canUndo: this.canUndo(), canRedo: this.canRedo(), onUndo: this.undo, onRedo: this.redo, - - onToggleSearch: this.toggleSearch }) } @@ -541,6 +565,14 @@ export default class TreeMode extends PureComponent { // TODO: select the pasted contents } + else { + // TODO: paste before current line => selection must contain current line + } + } + + handleInsertBefore = () => { + // FIXME: implement handleInsertBefore + console.error('Insert not yet implemented...') } /** @@ -569,13 +601,15 @@ export default class TreeMode extends PureComponent { }) } - /** - * Handle sorting a path - * @param {Path} path - * @param {string | null} [order] - */ - handleSort = (path, order = null) => { - this.handlePatch(sort(this.state.eson, path, order)) + handleSort = () => { + // FIXME: implement handle sort from selection or caret + console.error('sort not yet implemented...') + // this.handlePatch(sort(this.state.eson, path, order)) + } + + handleTransform = () => { + // FIXME: implement handleTransform + console.error('transform not yet implemented...') } /** diff --git a/src/jsoneditor/components/menu/MenuButton.scss b/src/jsoneditor/components/menu/MenuButton.scss index aa1ea84..7647893 100644 --- a/src/jsoneditor/components/menu/MenuButton.scss +++ b/src/jsoneditor/components/menu/MenuButton.scss @@ -20,6 +20,10 @@ font-family: arial, sans-serif; font-size: 16px; + + &.current-mode { + font-weight: bold; + } } button:hover { diff --git a/src/jsoneditor/components/menu/ModeButton.js b/src/jsoneditor/components/menu/ModeButton.js index 2b01660..d340cf0 100644 --- a/src/jsoneditor/components/menu/ModeButton.js +++ b/src/jsoneditor/components/menu/ModeButton.js @@ -29,11 +29,12 @@ export default class ModeButton extends Component { return h('div', {className: 'jsoneditor-modes'}, [ h('button', { key: 'button', + className: 'current-mode', title: 'Switch mode', onClick: this.handleOpen }, [ toCapital(props.mode) + ' ', - h('i', { className: 'fa fa-chevron-down' }) + h('i', { key: 'icon', className: 'fa fa-chevron-down' }) ]), h(ModeSelector, { diff --git a/src/jsoneditor/components/menu/TreeModeMenu.js b/src/jsoneditor/components/menu/TreeModeMenu.js index 63feb91..3ed9fa9 100644 --- a/src/jsoneditor/components/menu/TreeModeMenu.js +++ b/src/jsoneditor/components/menu/TreeModeMenu.js @@ -41,13 +41,25 @@ export default class TreeModeMenu extends PureComponent { onCopy: PropTypes.func.isRequired, onPaste: PropTypes.func.isRequired, + canInsert: PropTypes.bool.isRequired, + canDuplicate: PropTypes.bool.isRequired, + canRemove: PropTypes.bool.isRequired, + onInsert: PropTypes.func.isRequired, + onDuplicate: PropTypes.func.isRequired, + onRemove: PropTypes.func.isRequired, + + canSort: PropTypes.bool.isRequired, + canTransform: PropTypes.bool.isRequired, + canSearch: PropTypes.bool.isRequired, + onSort: PropTypes.func.isRequired, + onTransform: PropTypes.func.isRequired, + onToggleSearch: PropTypes.func, + enableHistory: PropTypes.bool, canUndo: PropTypes.bool, canRedo: PropTypes.bool, onUndo: PropTypes.func, - onRedo: PropTypes.func, - - onToggleSearch: PropTypes.func + onRedo: PropTypes.func } render () { @@ -82,14 +94,14 @@ export default class TreeModeMenu extends PureComponent { key: 'copy', className: 'jsoneditor-copy', title: 'Copy current selection', - // disabled: !this.props.canPaste, - onClick: this.props.onPaste + disabled: !this.props.canCopy, + onClick: this.props.onCopy }, h('i', {className: 'fa fa-copy'})), h('button', { key: 'paste', className: 'jsoneditor-paste', title: 'Paste copied selection', - // disabled: !this.props.canPaste, + disabled: !this.props.canPaste, onClick: this.props.onPaste }, h('i', {className: 'fa fa-paste'})) ]) @@ -128,13 +140,14 @@ export default class TreeModeMenu extends PureComponent { key: 'sort', className: 'jsoneditor-sort', title: 'Sort contents', - onClick: this.props.onSort // TODO: implement onSort + // disabled: !this.props.canSort, // TODO: can sort + onClick: this.props.onSort }, h('i', {className: 'fa fa-sort-amount-down'})), h('button', { key: 'transform', className: 'jsoneditor-transform', title: 'Transform contents', - // disabled: !this.props.canPaste, + // disabled: !this.props.canTransform, // TODO canTransform onClick: this.props.onTransform }, h('i', {className: 'fa fa-filter'})), h('button', {