From 598fe63d80baa19289407e3990a9dbc8a18a5aea Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 8 Sep 2017 10:29:09 +0200 Subject: [PATCH] Don't expand search result itself when focusing it --- .gitignore | 1 + src/components/JSONNode.js | 4 ++-- src/components/JSONNodeForm.js | 2 +- src/components/TextMode.js | 3 ++- src/components/TreeMode.js | 14 ++++++++------ src/components/menu/Search.js | 2 +- src/jsonData.js | 23 +++++------------------ src/utils/arrayUtils.js | 7 +++++++ 8 files changed, 27 insertions(+), 29 deletions(-) diff --git a/.gitignore b/.gitignore index b6e2196..a9bb56b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .idea +.vscode dist lib downloads diff --git a/src/components/JSONNode.js b/src/components/JSONNode.js index 9d5cf14..0f0c38e 100644 --- a/src/components/JSONNode.js +++ b/src/components/JSONNode.js @@ -8,7 +8,7 @@ import { getInnerText, insideRect, findParentWithAttribute } from '../utils/domU import { stringConvert, valueType, isUrl } from '../utils/typeUtils' import { compileJSONPointer } from '../jsonData' -import type { PropertyData, JSONData, SearchResultStatus } from '../types' +import type { PropertyData, JSONData, SearchResultStatus, Path } from '../types' export default class JSONNode extends Component { static URL_TITLE = 'Ctrl+Click or Ctrl+Enter to open url' @@ -165,7 +165,7 @@ export default class JSONNode extends Component { } // TODO: simplify the method renderProperty - renderProperty (prop: ?PropertyData, index: ?number, data: JSONData, options: {escapeUnicode: boolean, isPropertyEditable: (path: string) => boolean}) { + renderProperty (prop: ?PropertyData, index: ?number, data: JSONData, options: {escapeUnicode: boolean, isPropertyEditable: (Path) => boolean}) { const isIndex = typeof index === 'number' if (!prop && !isIndex) { diff --git a/src/components/JSONNodeForm.js b/src/components/JSONNodeForm.js index 29d5ec5..af353fa 100644 --- a/src/components/JSONNodeForm.js +++ b/src/components/JSONNodeForm.js @@ -2,7 +2,7 @@ import JSONNode from './JSONNode' -import type { PropertyData, JSONData } from '../types' +import type { PropertyData, JSONData, Path } from '../types' /** * JSONNodeForm diff --git a/src/components/TextMode.js b/src/components/TextMode.js index a7ca75e..906fea7 100644 --- a/src/components/TextMode.js +++ b/src/components/TextMode.js @@ -262,6 +262,8 @@ export default class TextMode extends Component { // do nothing... } + findKeyBinding = createFindKeyBinding(KEY_BINDINGS) + handleKeyDown = (event) => { const keyBinding = this.findKeyBinding(event) const action = this.keyDownActions[keyBinding] @@ -382,4 +384,3 @@ export default class TextMode extends Component { } // TODO: define propTypes - diff --git a/src/components/TreeMode.js b/src/components/TreeMode.js index 5658a3f..9e2d262 100644 --- a/src/components/TreeMode.js +++ b/src/components/TreeMode.js @@ -6,6 +6,7 @@ import Ajv from 'ajv' import { updateIn, getIn, setIn } from '../utils/immutabilityHelpers' import { parseJSON } from '../utils/jsonUtils' +import { allButLast } from '../utils/arrayUtils' import { enrichSchemaError } from '../utils/schemaUtils' import { jsonToData, dataToJson, toDataPath, patchData, pathExists, @@ -189,7 +190,7 @@ export default class TreeMode extends Component { ]) } - renderMenu (searchResults: Array) { + renderMenu (searchResults: [] | null) { let items = [ h('button', { key: 'expand-all', @@ -277,6 +278,8 @@ export default class TreeMode extends Component { return [] } + findKeyBinding = createFindKeyBinding(KEY_BINDINGS) + handleKeyDown = (event) => { const keyBinding = this.findKeyBinding(event) const action = this.keyDownActions[keyBinding] @@ -408,7 +411,7 @@ export default class TreeMode extends Component { this.setState({ search: { text, active }, - data: expandPath(this.state.data, active.path) + data: expandPath(this.state.data, allButLast(active.path)) }) // scroll to active search result (on next tick, after this path has been expanded) @@ -429,7 +432,7 @@ export default class TreeMode extends Component { this.setState({ search: setIn(this.state.search, ['active'], next), - data: expandPath(this.state.data, next && next.path) + data: next ? expandPath(this.state.data, allButLast(next.path)) : this.state.data }) // scroll to the active result (on next tick, after this path has been expanded) @@ -453,7 +456,7 @@ export default class TreeMode extends Component { this.setState({ search: setIn(this.state.search, ['active'], previous), - data: expandPath(this.state.data, previous && previous.path) + data: previous ? expandPath(this.state.data, allButLast(previous.path)) : this.state.data }) // scroll to the active result (on next tick, after this path has been expanded) @@ -757,5 +760,4 @@ export default class TreeMode extends Component { } } - -// TODO: describe PropTypes \ No newline at end of file +// TODO: describe PropTypes diff --git a/src/components/menu/Search.js b/src/components/menu/Search.js index 8241efa..13ccf3b 100644 --- a/src/components/menu/Search.js +++ b/src/components/menu/Search.js @@ -54,7 +54,7 @@ export default class Search extends Component { ]) } - renderResultsCount (searchResults : Array) { + renderResultsCount (searchResults : []) { if (!searchResults) { return null } diff --git a/src/jsonData.js b/src/jsonData.js index 69f5ad2..9e5acc2 100644 --- a/src/jsonData.js +++ b/src/jsonData.js @@ -7,6 +7,7 @@ import { setIn, updateIn, getIn, deleteIn, insertAt } from './utils/immutabilityHelpers' import { isObject } from './utils/typeUtils' +import { last, allButLast } from './utils/arrayUtils' import isEqual from 'lodash/isEqual' import type { @@ -14,6 +15,8 @@ import type { JSONPatch, JSONPatchAction, PatchOptions, JSONPatchResult } from './types' +type RecurseCallback = (value: JSONData, path: Path, root: JSONData) => JSONData + /** * Expand function which will expand all nodes * @param {Path} path @@ -519,7 +522,7 @@ export function expand (data: JSONData, callback: Path | (Path) => boolean, expa // console.log('expand', callback, expand) if (typeof callback === 'function') { - return transform (data, function (value, path) { + return transform(data, function (value: JSONData, path: Path, root: JSONData) : JSONData { if (value.type === 'Array' || value.type === 'Object') { if (callback(path)) { return setIn(value, ['expanded'], expanded) @@ -694,8 +697,6 @@ export function containsCaseInsensitive (text: string, search: string): boolean return String(text).toLowerCase().indexOf(search.toLowerCase()) !== -1 } -type RecurseCallback = (JSONData, Path, JSONData) => JSONData - /** * Recursively transform JSONData: a recursive "map" function * @param {JSONData} data @@ -714,7 +715,7 @@ export function transform (data: JSONData, callback: RecurseCallback) { * @param {function(value: JSONData, path: Path, root: JSONData)} callback * @return {JSONData} Returns the transformed data */ -function recurseTransform (value: JSONData, path: Path, root: JSONData, callback: RecurseCallback) : JSONData{ +function recurseTransform (value: JSONData, path: Path, root: JSONData, callback: RecurseCallback) : JSONData { let updatedValue = callback(value, path, root) if (value.type === 'Array') { @@ -912,17 +913,3 @@ let _id = 0 function createUniqueId (array) { return Math.max(...array.map(item => item.id)) + 1 } - -/** - * Returns the last item of an array - */ -function last (array: []): any { - return array[array.length - 1] -} - -/** - * Returns a copy of the array having the last item removed - */ -function allButLast (array: []): any { - return array.slice(0, array.length - 1) -} diff --git a/src/utils/arrayUtils.js b/src/utils/arrayUtils.js index a0a3114..212d4ac 100644 --- a/src/utils/arrayUtils.js +++ b/src/utils/arrayUtils.js @@ -7,6 +7,13 @@ export function last (array) { return array[array.length - 1] } +/** + * Returns a copy of the array having the last item removed + */ +export function allButLast (array: []): [] { + return array.slice(0, -1) +} + /** * Comparator to sort an array in ascending order *