Implement tree search

fritz-c · fritz-c · commit 4916bd9e49b4 · 2016-10-03T16:57:53.000+09:00
diff --git a/src/node-renderer-default.js b/src/node-renderer-default.js
@@ -27,6 +27,8 @@ const NodeRendererDefault = ({
     draggedNode,
     path,
     treeIndex,
+    isSearchMatch,
+    isSearchFocus,
     buttons,
     className,
     style = {},
@@ -88,6 +90,8 @@ const NodeRendererDefault = ({
                         className={styles.row +
                             (isDragging && isOver ? ` ${styles.rowLandingPad}` : '') +
                             (isDragging && !isOver && canDrop ? ` ${styles.rowCancelPad}` : '') +
+                            (isSearchMatch ? ` ${styles.rowSearchMatch}` : '') +
+                            (isSearchFocus ? ` ${styles.rowSearchFocus}` : '') +
                             (className ? ` ${className}` : '')
                         }
                         style={{
@@ -136,9 +140,11 @@ const NodeRendererDefault = ({
 };
 
 NodeRendererDefault.propTypes = {
-    node:               PropTypes.object.isRequired,
-    path:               PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])).isRequired,
-    treeIndex:          PropTypes.number.isRequired,
+    node:          PropTypes.object.isRequired,
+    path:          PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])).isRequired,
+    treeIndex:     PropTypes.number.isRequired,
+    isSearchMatch: PropTypes.bool,
+    isSearchFocus: PropTypes.bool,
 
     scaffoldBlockPxWidth:     PropTypes.number.isRequired,
     toggleChildrenVisibility: PropTypes.func,
diff --git a/src/node-renderer-default.scss b/src/node-renderer-default.scss
@@ -11,6 +11,9 @@ $row-padding: 10px;
     display: flex;
 }
 
+/**
+ * The outline of where the element will go if dropped, displayed while dragging
+ */
 .rowLandingPad {
     border: none !important;
     box-shadow: none !important;
@@ -33,6 +36,9 @@ $row-padding: 10px;
     }
 }
 
+/**
+ * Alternate appearance of the landing pad when the dragged location is invalid
+ */
 .rowCancelPad {
     @extend .rowLandingPad;
 
@@ -41,6 +47,20 @@ $row-padding: 10px;
     }
 }
 
+/**
+ * Nodes matching the search conditions are highlighted
+ */
+.rowSearchMatch {
+    outline: solid 3px #0080FF;
+}
+
+/**
+ * The node that matches the search conditions and is currently focused
+ */
+.rowSearchFocus {
+    outline: solid 3px #FC6421;
+}
+
 %rowItem {
     display: inline-block;
     vertical-align: middle;
diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js
@@ -15,6 +15,7 @@ import {
     removeNodeAtPath,
     insertNode,
     getDescendantCount,
+    find,
 } from './utils/tree-data-utils';
 import {
     swapRows,
@@ -23,6 +24,7 @@ import {
     defaultGetNodeKey,
     defaultToggleChildrenVisibility,
     defaultMoveNode,
+    defaultSearchMethod,
 } from './utils/default-handlers';
 import {
     dndWrapRoot,
@@ -63,6 +65,8 @@ class ReactSortableTree extends Component {
             swapLength: null,
             swapDepth: null,
             rows: this.getRows(props.treeData),
+            searchMatches: [],
+            searchFocusTreeIndex: null,
         };
 
         this.startDrag = this.startDrag.bind(this);
@@ -72,12 +76,21 @@ class ReactSortableTree extends Component {
 
     componentWillMount() {
         this.loadLazyChildren();
+        this.search(this.props, false, false);
+        this.ignoreOneTreeUpdate = false;
     }
 
     componentWillReceiveProps(nextProps) {
+        this.setState({ searchFocusTreeIndex: null });
         if (this.props.treeData !== nextProps.treeData) {
-            // Load any children defined by a function
-            this.loadLazyChildren(nextProps);
+            // Ignore updates caused by search, in order to avoid infinite looping
+            if (this.ignoreOneTreeUpdate) {
+                this.ignoreOneTreeUpdate = false;
+            } else {
+                this.loadLazyChildren(nextProps);
+                // Load any children defined by a function
+                this.search(nextProps, false, false);
+            }
 
             // Calculate the rows to be shown from the new tree data
             this.setState({
@@ -87,6 +100,12 @@ class ReactSortableTree extends Component {
                 swapDepth: null,
                 rows: this.getRows(nextProps.treeData),
             });
+        } else if (this.props.searchQuery !== nextProps.searchQuery ||
+            this.props.searchMethod !== nextProps.searchMethod
+        ) {
+            this.search(nextProps);
+        } else if (this.props.searchFocusOffset !== nextProps.searchFocusOffset) {
+            this.search(nextProps, true, true, true);
         }
     }
 
@@ -98,6 +117,68 @@ class ReactSortableTree extends Component {
         });
     }
 
+    search(props = this.props, seekIndex = true, expand = true, singleSearch = false) {
+        const {
+            treeData,
+            updateTreeData,
+            searchFinishCallback,
+            searchQuery,
+            searchMethod,
+            searchFocusOffset,
+        } = props;
+
+        // Skip search if no conditions are specified
+        if ((searchQuery === null || typeof searchQuery === 'undefined' || String(searchQuery) === '') &&
+            !searchMethod
+        ) {
+            this.setState({
+                searchMatches: [],
+            });
+
+            if (searchFinishCallback) {
+                searchFinishCallback([]);
+            }
+
+            return;
+        }
+
+        const {
+            treeData: expandedTreeData,
+            matches: searchMatches,
+        } = find({
+            getNodeKey: this.getNodeKey,
+            treeData,
+            searchQuery,
+            searchMethod: searchMethod || defaultSearchMethod,
+            searchFocusOffset,
+            expandAllMatchPaths: expand && !singleSearch,
+            expandFocusMatchPaths: expand && true,
+        });
+
+        // Update the tree with data leaving all paths leading to matching nodes open
+        if (expand) {
+            this.ignoreOneTreeUpdate = true; // Prevents infinite loop
+            updateTreeData(expandedTreeData);
+        }
+
+        if (searchFinishCallback) {
+            searchFinishCallback(searchMatches);
+        }
+
+        let searchFocusTreeIndex = null;
+        if (seekIndex &&
+            searchFocusOffset !== null &&
+            searchFocusOffset < searchMatches.length
+        ) {
+            searchFocusTreeIndex = searchMatches[searchFocusOffset].treeIndex;
+        }
+
+        this.setState({
+            searchMatches,
+            searchFocusTreeIndex,
+        });
+    }
+
     startDrag({ path }) {
         const draggingTreeData = removeNodeAtPath({
             treeData: this.props.treeData,
@@ -198,7 +279,18 @@ class ReactSortableTree extends Component {
             innerStyle,
             rowHeight,
         } = this.props;
-        const { rows } = this.state;
+        const {
+            rows,
+            searchMatches,
+            searchFocusTreeIndex,
+        } = this.state;
+
+        // Get indices for rows that match the search conditions
+        const matchIndices = {};
+        searchMatches.forEach(({ treeIndex: tIndex }, i) => { matchIndices[tIndex] = i; });
+
+        // Seek to the focused search result if there is one specified
+        const scrollToInfo = searchFocusTreeIndex !== null ? { scrollToIndex: searchFocusTreeIndex } : {};
 
         return (
             <div
@@ -208,6 +300,8 @@ class ReactSortableTree extends Component {
                 <AutoSizer>
                     {({height, width}) => (
                         <List
+                            {...scrollToInfo}
+                            scrollToAlignment="start"
                             className={styles.virtualScrollOverride}
                             width={width}
                             height={height}
@@ -220,7 +314,8 @@ class ReactSortableTree extends Component {
                                 index,
                                 key,
                                 rowStyle,
-                                () => (rows[index - 1] || null)
+                                () => (rows[index - 1] || null),
+                                matchIndices
                             )}
                         />
                     )}
@@ -229,13 +324,19 @@ class ReactSortableTree extends Component {
         );
     }
 
-    renderRow({ node, path, lowerSiblingCounts, treeIndex }, listIndex, key, style, getPrevRow) {
+    renderRow({ node, path, lowerSiblingCounts, treeIndex }, listIndex, key, style, getPrevRow, matchIndices) {
         const NodeContentRenderer = this.nodeContentRenderer;
+        const isSearchMatch = treeIndex in matchIndices;
+        const isSearchFocus = isSearchMatch &&
+            matchIndices[treeIndex] === this.props.searchFocusOffset;
+
         const nodeProps = !this.props.generateNodeProps ? {} : this.props.generateNodeProps({
             node,
             path,
             lowerSiblingCounts,
             treeIndex,
+            isSearchMatch,
+            isSearchFocus,
         });
 
         return (
@@ -258,6 +359,8 @@ class ReactSortableTree extends Component {
                 <NodeContentRenderer
                     node={node}
                     path={path}
+                    isSearchMatch={isSearchMatch}
+                    isSearchFocus={isSearchFocus}
                     treeIndex={treeIndex}
                     startDrag={this.startDrag}
                     endDrag={this.endDrag}
@@ -291,6 +394,12 @@ ReactSortableTree.propTypes = {
 
     maxDepth: PropTypes.number,
 
+    // Search stuff
+    searchQuery:          PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
+    searchFocusOffset:    PropTypes.number,
+    searchMethod:         PropTypes.func,
+    searchFinishCallback: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
+
     nodeContentRenderer: PropTypes.any,
     generateNodeProps:   PropTypes.func,
 
@@ -305,6 +414,7 @@ ReactSortableTree.defaultProps = {
     innerStyle: {},
     scaffoldBlockPxWidth: 44,
     loadCollapsedLazyChildren: false,
+    searchQuery: null,
 };
 
 export default dndWrapRoot(ReactSortableTree);
diff --git a/src/utils/default-handlers.js b/src/utils/default-handlers.js
@@ -25,3 +25,40 @@ export function defaultMoveNode({ node: newNode, depth, minimumTreeIndex }) {
         expandParent: true,
     }).treeData);
 }
+
+// Cheap hack to get the text of a react object
+function getReactElementText(parent) {
+    if (typeof parent === 'string') {
+        return parent;
+    }
+
+    if (typeof parent !== 'object' ||
+        !parent.props ||
+        !parent.props.children ||
+        (typeof parent.props.children !== 'string' && typeof parent.props.children !== 'object')
+    ) {
+        return '';
+    }
+
+    if (typeof parent.props.children === 'string') {
+        return parent.props.children;
+    }
+
+    return parent.props.children.map(child => getReactElementText(child)).join('');
+}
+
+// Search for a query string inside a node property
+function stringSearch(key, searchQuery, node, path, treeIndex) {
+    if (typeof node[key] === 'function') {
+        return String(node[key]({ node, path, treeIndex })).indexOf(searchQuery) > -1;
+    } else if (typeof node[key] === 'object') {
+        return getReactElementText(node[key]).indexOf(searchQuery) > -1;
+    }
+
+    return node[key] && String(node[key]).indexOf(searchQuery) > -1;
+}
+
+export function defaultSearchMethod({ node, path, treeIndex, searchQuery }) {
+    return stringSearch('title', searchQuery, node, path, treeIndex) ||
+        stringSearch('subtitle', searchQuery, node, path, treeIndex);
+}
