Implement most menu functionality

This commit is contained in:
jos 2018-09-19 10:39:46 +02:00
parent 702dc5ed20
commit 4c539cb4f5
4 changed files with 72 additions and 20 deletions

View File

@ -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...')
}
/**

View File

@ -20,6 +20,10 @@
font-family: arial, sans-serif;
font-size: 16px;
&.current-mode {
font-weight: bold;
}
}
button:hover {

View File

@ -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, {

View File

@ -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', {