Refactoring Navigation to get search working (required removing state for now)

Author: skipjack

components/navigation/navigation.jsx

@@ -1,35 +1,17 @@
 import React from 'react';
-import CustomEvent from 'custom-event';
 import Link from '../link/link';
 import Container from '../container/container';
 import Logo from '../logo/logo';
 import './navigation-style';
 
 export default class Navigation extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      searchMode: false
-    };
-  }
-
-  componentDidMount() {
-    window.docsearch({
-      apiKey: 'fac401d1a5f68bc41f01fb6261661490',
-      indexName: 'webpack-js-org',
-      inputSelector: '.navigation__search-input'
-    });
-  }
-
   render() {
     let { pageUrl, sections } = this.props;
     let isIndex = pageUrl === '/index';
     let transparentClass = isIndex ? 'navigation--transparent' : '';
-    let searchClass = this.state.searchMode ? 'navigation--search-mode' : '';
 
     return (
-      <header className={ `navigation ${transparentClass} ${searchClass}` }>
+      <header className={ `navigation ${transparentClass}` }>
         <Container className="navigation__inner">
           <div className="navigation__mobile" onClick={ this._toggleSidebar }>
             <i className="icon-menu" />
@@ -56,7 +38,7 @@ export default class Navigation extends React.Component {
               })
             }
 
-            <Link className="navigation__link" to={ '//opencollective.com/webpack' }>
+            <Link className="navigation__link" to="//opencollective.com/webpack">
               Donate
             </Link>
           </nav>
@@ -65,13 +47,10 @@ export default class Navigation extends React.Component {
             <input 
               type="text" 
               className="navigation__search-input"
-              ref={ ref => this.searchInput = ref }
-              placeholder="Search documentation…"
-              onFocus={ this._handleFocus.bind(this) }
-              onChange={ this._handleSearch.bind(this) } />
+              placeholder="Search documentation…" />
             <button 
               className="navigation__search-icon"
-              onClick={ this._toggleSearch.bind(this, !this.state.searchMode) }>
+              onClick={ this._toggleSearch.bind(this) }>
               &#9906;
             </button>
           </div>
@@ -80,6 +59,24 @@ export default class Navigation extends React.Component {
     );
   }
 
+  componentDidMount() {
+    if (typeof window !== 'undefined') {
+      // Initialize DocSearch/Algolia
+      window.docsearch({
+        apiKey: 'fac401d1a5f68bc41f01fb6261661490',
+        indexName: 'webpack-js-org',
+        inputSelector: '.navigation__search-input'
+      });
+
+      // Open the search on tabbing for usability
+      window.addEventListener('keyup', e => {
+        if (e.which === 9 && e.target.classList.contains('navigation__search-input')) {
+          this._openSearch();
+        }
+      });
+    }
+  }
+
   /**
    * Toggle the SidebarMobile component
    * 
@@ -93,43 +90,22 @@ export default class Navigation extends React.Component {
   }
 
   /**
-   * Toggle search mode
-   * 
-   * @param {boolean} state - True/false or null to toggle
-   */
-  _toggleSearch(state) {
-    this.setState({
-      searchMode: state
-    }, () => {
-      if (state) this.searchInput.focus();
-    });
-  }
-
-  /**
-   * Handle focus events on the search input
+   * Toggle the search input
    * 
-   * @param {object} e - Native focus event
    */
-  _handleFocus(e) {
-    this._toggleSearch(true);
+  _toggleSearch() {
+    let container = document.querySelector('.navigation');
+    let input = document.querySelector('.navigation__search-input');
+    let state = container.classList.toggle('navigation--search-mode');
 
-    if (e.target.value.length) {
-      this._handleSearch(e);
-    }
+    if ( state === true ) input.focus();
   }
 
   /**
-   * Handle searching
+   * Expand the search input
    * 
-   * @param {object} - Native click event
    */
-  _handleSearch(e) {
-    window.dispatchEvent(
-      new CustomEvent('search', {
-        detail: {
-          text: e.target.value
-        }
-      })
-    );
+  _openSearch() {
+    container.classList.add('navigation--search-mode');
   }
 }

package.json

@@ -91,7 +91,6 @@
     "yaml-frontmatter-loader": "0.0.3"
   },
   "dependencies": {
-    "custom-event": "^1.0.1",
     "d3": "^4.2.7",
     "filesize": "^3.3.0",
     "preact": "^6.2.1",