StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved tree mode menu in a separate component

This commit is contained in:
jos 2018-09-12 11:16:04 +02:00
parent 3028617ff7
commit 0fb816d074
6 changed files with 141 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/jsoneditor/components/TreeMode.js
View File

@ -63,6 +63,7 @@ import {
search,
syncEson
} from '../eson'
import TreeModeMenu from './menu/TreeModeMenu'
const AJV_OPTIONS = {
allErrors: true,
@ -71,7 +72,6 @@ const AJV_OPTIONS = {
}
const MAX_HISTORY_ITEMS = 1000 // maximum number of undo/redo items to be kept in memory
const SEARCH_DEBOUNCE = 300 // milliseconds
const SCROLL_DURATION = 400 // milliseconds
export default class TreeMode extends PureComponent {
@ -268,74 +268,28 @@ export default class TreeMode extends PureComponent {
}
renderMenu () {
let items = [
h('button', {
key: 'expand-all',
className: 'jsoneditor-expand-all',
title: 'Expand all objects and arrays',
onClick: this.handleExpandAll
}),
h('button', {
key: 'collapse-all',
className: 'jsoneditor-collapse-all',
title: 'Collapse all objects and arrays',
onClick: this.handleCollapseAll
})
]
if (this.props.mode !== 'view' && this.props.history !== false) {
items = items.concat([
h('div', {key: 'history-separator', className: 'jsoneditor-vertical-menu-separator'}),
h('button', {
key: 'undo',
className: 'jsoneditor-undo',
title: 'Undo last action',
disabled: !this.canUndo(),
onClick: this.undo
}),
h('button', {
key: 'redo',
className: 'jsoneditor-redo',
title: 'Redo',
disabled: !this.canRedo(),
onClick: this.redo
})
])
}
if (this.props.modes ) {
items = items.concat([
h('div', {key: 'mode-separator', className: 'jsoneditor-vertical-menu-separator'}),
h(ModeButton, {
key: 'mode',
modes: this.props.modes,
return h(TreeModeMenu, {
mode: this.props.mode,
modes: this.props.modes,
onChangeMode: this.props.onChangeMode,
onError: this.props.onError
})
])
}
if (this.props.searchResult !== false) {
// option search is true or undefined
items = items.concat([
h('div', {key: 'search', className: 'jsoneditor-menu-panel-right'},
h(Search, {
text: this.state.searchResult.text,
resultCount: this.state.searchResult.matches ? this.state.searchResult.matches.length : 0,
onChange: this.handleSearch,
onNext: this.handleNext,
onPrevious: this.handlePrevious,
onExpandAll: this.handleExpandAll,
onCollapseAll: this.handleCollapseAll,
enableHistory: this.props.history,
canUndo: this.canUndo(),
canRedo: this.canRedo(),
onUndo: this.undo,
onRedo: this.redo,
enableSearch: this.props.search,
searchResult: this.state.searchResult,
onSearch: this.handleSearch,
onSearchNext: this.handleNext,
onSearchPrevious: this.handlePrevious,
findKeyBinding: this.findKeyBinding,
delay: SEARCH_DEBOUNCE
})
)
])
}
return h('div', {key: 'menu', className: 'jsoneditor-menu'}, items)
}
/**

15
src/jsoneditor/components/jsoneditor.scss
View File

@ -1,19 +1,6 @@
@import './style.scss';
@import './popover.scss';
$fontFamily: "dejavu sans mono", "droid sans mono", consolas, monaco, "lucida console", "courier new", courier, monospace, sans-serif;
$fontSize: 10pt;
$black: #1A1A1A;
$contentsMinHeight: 150px;
$theme-color: #3883fa; // TODO: create a central file with the theme colors
$floating-menu-background: #4d4d4d;
$floating-menu-color: #fff;
$selectedColor: #ffed99;
$hoverColor: #d3d3d3;
$hoverAndSelectedColor: #ffdb80;
$gray: #9d9d9d;
$light-gray: #c0c0c0;
$input-padding: 5px;
// TODO: split this scss file into separate files per React component
$line-height: 20px;

4
src/jsoneditor/components/menu/ModeButton.js
View File

@ -1,5 +1,5 @@
import { createElement as h, Component } from 'react'
import ModeMenu from './ModeMenu'
import ModeSelector from './ModeSelector'
import { toCapital } from '../../utils/stringUtils'
export default class ModeButton extends Component {
@ -24,7 +24,7 @@ export default class ModeButton extends Component {
onClick: this.handleOpen
}, `${toCapital(props.mode)} \u25BC`),
h(ModeMenu, {
h(ModeSelector, {
key: 'menu',
...props,
open: state.open,

2
src/jsoneditor/components/menu/ModeMenu.js → src/jsoneditor/components/menu/ModeSelector.js
View File

@ -5,7 +5,7 @@ import { keyComboFromEvent } from '../../utils/keyBindings'
const MENU_CLASS_NAME = 'jsoneditor-actionmenu'
const MODE_MENU_CLASS_NAME = MENU_CLASS_NAME + ' jsoneditor-modemenu'
export default class ModeMenu extends Component {
export default class ModeSelector extends Component {
/**
* {{open, modes, mode, onChangeMode, onRequestClose, onError}} props
*/

103
src/jsoneditor/components/menu/TreeModeMenu.js Normal file
View File

@ -0,0 +1,103 @@
import { createElement as h, PureComponent } from 'react'
import ModeButton from './ModeButton'
import Search from './Search'
import PropTypes from 'prop-types'
const SEARCH_DEBOUNCE = 300 // milliseconds
export default class TreeModeMenu extends PureComponent {
static propTypes = {
mode: PropTypes.string.isRequired,
modes: PropTypes.arrayOf(PropTypes.string),
onChangeMode: PropTypes.func.isRequired,
onExpandAll: PropTypes.func.isRequired,
onCollapseAll: PropTypes.func.isRequired,
enableHistory: PropTypes.bool,
canUndo: PropTypes.bool,
canRedo: PropTypes.bool,
onUndo: PropTypes.func,
onRedo: PropTypes.func,
enableSearch: PropTypes.bool,
searchResult: PropTypes.string,
onSearch: PropTypes.func,
onSearchNext: PropTypes.func,
onSearchPrevious: PropTypes.func,
findKeyBinding: PropTypes.func.isRequired,
}
render () {
let items = [
h('button', {
key: 'expand-all',
className: 'jsoneditor-expand-all',
title: 'Expand all objects and arrays',
onClick: this.props.onExpandAll
}),
h('button', {
key: 'collapse-all',
className: 'jsoneditor-collapse-all',
title: 'Collapse all objects and arrays',
onClick: this.props.onCollapseAll
})
]
if (this.props.mode !== 'view' && this.props.enableHistory !== false) {
items = items.concat([
h('div', {key: 'history-separator', className: 'jsoneditor-vertical-menu-separator'}),
h('button', {
key: 'undo',
className: 'jsoneditor-undo',
title: 'Undo last action',
disabled: !this.props.canUndo,
onClick: this.props.onUndo
}),
h('button', {
key: 'redo',
className: 'jsoneditor-redo',
title: 'Redo',
disabled: !this.props.canRedo,
onClick: this.props.onRedo
})
])
}
if (this.props.modes ) {
items = items.concat([
h('div', {key: 'mode-separator', className: 'jsoneditor-vertical-menu-separator'}),
h(ModeButton, {
key: 'mode',
modes: this.props.modes,
mode: this.props.mode,
onChangeMode: this.props.onChangeMode,
onError: this.props.onError
})
])
}
if (this.props.enableSearch !== false) {
// option search is true or undefined
items = items.concat([
h('div', {key: 'search', className: 'jsoneditor-menu-panel-right'},
h(Search, {
text: this.props.searchResult.text,
resultCount: this.props.searchResult.matches ? this.props.searchResult.matches.length : 0,
onChange: this.props.onSearch,
onNext: this.props.onSearchNext,
onPrevious: this.props.onSearchPrevious,
findKeyBinding: this.props.findKeyBinding,
delay: SEARCH_DEBOUNCE
})
)
])
}
return h('div', {key: 'menu', className: 'jsoneditor-menu'}, items)
}
}

15
src/jsoneditor/components/style.scss Normal file
View File

@ -0,0 +1,15 @@
$fontFamily: "dejavu sans mono", "droid sans mono", consolas, monaco, "lucida console", "courier new", courier, monospace, sans-serif;
$fontSize: 10pt;
$black: #1A1A1A;
$contentsMinHeight: 150px;
$theme-color: #3883fa;
$theme-color-light: lighten($theme-color, 5);
$floating-menu-background: #4d4d4d;
$floating-menu-color: #fff;
$selectedColor: #ffed99;
$hoverColor: #d3d3d3;
$hoverAndSelectedColor: #ffdb80;
$gray: #9d9d9d;
$light-gray: #c0c0c0;
$input-padding: 5px;