diff --git a/src/js/components/folder/index.jsx b/src/js/components/folder/index.jsx index d250431..ccdd13d 100644 --- a/src/js/components/folder/index.jsx +++ b/src/js/components/folder/index.jsx @@ -7,12 +7,28 @@ class Folder extends React.Component { this.state = {} } + getHighlight ({ nodeLabel, filter, index }) { + const prefix = nodeLabel.substring(0, index) + const middle = nodeLabel.substring(index, index + filter.length) + const suffix = nodeLabel.substring(index + filter.length) + return ( + <> + {prefix} + {middle ? {middle} : null} + {suffix} + + ) + } + render () { - const { children, nodeLabel, isViewed } = this.props + const { children, nodeLabel, isViewed, filter } = this.props + + const index = filter ? (nodeLabel.toLowerCase() || '').indexOf(filter.toLowerCase()) : -1 + const displayName = (index === -1) ? nodeLabel : this.getHighlight({ nodeLabel, filter, index }) const display = (
- {nodeLabel} + {displayName} {isViewed ? (
{ this.resizer = node }} /> @@ -189,11 +191,11 @@ class Tree extends React.Component { onFullWidth={this.handleFullWidth} onOptions={this.handleOptions} onClose={this.handleClose} - onReloadTree={this.onReloadTree} + onReloadTree={this.handleReloadTree} />
- {root.list.map(node => ( + {filtered.list.map(node => ( {createTree({ ...node, visibleElement, filter })} diff --git a/src/js/createTree.js b/src/js/createTree.js index 25fcaca..a1dc8d4 100644 --- a/src/js/createTree.js +++ b/src/js/createTree.js @@ -26,7 +26,12 @@ export const createTree = ({ nodeLabel, list, href, hasComments, isDeleted, diff const rawChildren = list.map(node => createTree({ ...node, visibleElement, filter })) return ( - child.props.isViewed)}> + child.props.isViewed)} + filter={filter} + > {rawChildren.map(node => ( {node} diff --git a/src/js/lib.js b/src/js/lib.js index e459cd0..995e129 100644 --- a/src/js/lib.js +++ b/src/js/lib.js @@ -126,9 +126,9 @@ export const createFileTree = (filter = EMPTY_FILTER) => { diffElements: [] } - files.forEach(({ parts, href }) => { + files.forEach(({ title, parts, href }) => { let location = tree - if (filterItem(parts[parts.length - 1], filter)) { + if (filterItem(title, filter)) { parts.forEach((part, index) => { let node = location.list.find(node => node.nodeLabel === part) if (!node) {