make new component for wrapping SearchTypeahead

src/client/js/components/HeaderSearchBox.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import SearchForm from './HeaderSearchBox/SearchForm';
+import HeaderSearchForm from './HeaderSearchBox/HeaderSearchForm';
 // import SearchSuggest from './HeaderSearchBox/SearchSuggest'; // omit since using react-bootstrap-typeahead in SearchForm
 
 export default class SearchBox extends React.Component {
@@ -14,7 +14,7 @@ export default class SearchBox extends React.Component {
   render() {
     return (
       <div className="search-box">
-        <SearchForm />
+        <HeaderSearchForm />
         {/* omit since using react-bootstrap-typeahead in SearchForm
         <SearchSuggest
           searchingKeyword={this.state.searchingKeyword}

src/client/js/components/HeaderSearchBox/HeaderSearchForm.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import FormGroup from 'react-bootstrap/es/FormGroup';
+import Button from 'react-bootstrap/es/Button';
+import InputGroup from 'react-bootstrap/es/InputGroup';
+
+import SearchForm from '../SearchForm';
+
+
+// Header.SearchForm
+export default class HeaderSearchForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.crowi = window.crowi; // FIXME
+
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  onSubmit(query) {
+    this.refs.form.submit(query);
+  }
+
+  render() {
+    return (
+      <form
+        ref='form'
+        action='/_search'
+        className='search-form form-group input-group search-input-group hidden-print'
+      >
+        <FormGroup>
+          <InputGroup>
+            <SearchForm
+              crowi={this.crowi}
+              onSubmit={this.onSubmit}
+              placeholder="Search ..."
+              keyword=''
+            />
+            <InputGroup.Button>
+              <Button type="submit" bsStyle="link">
+                <i className="icon-magnifier"></i>
+              </Button >
+            </InputGroup.Button>
+          </InputGroup>
+        </FormGroup>
+
+      </form>
+
+    );
+  }
+}
+
+HeaderSearchForm.propTypes = {
+};
+
+HeaderSearchForm.defaultProps = {
+};

src/client/js/components/HeaderSearchBox/SearchForm.js → src/client/js/components/SearchForm.js

@@ -1,27 +1,20 @@
 import React from 'react';
 
-import FormGroup from 'react-bootstrap/es/FormGroup';
-import Button from 'react-bootstrap/es/Button';
-import InputGroup from 'react-bootstrap/es/InputGroup';
-
 import SearchTypeahead from '../SearchTypeahead';
 
-
-// Header.SearchForm
+// SearchTypeahead wrapper
 export default class SearchForm extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.crowi = window.crowi; // FIXME
-
     this.state = {
+      keyword: this.props.keyword,
       searchError: null,
     };
 
     this.onSearchError = this.onSearchError.bind(this);
     this.onChange = this.onChange.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
   }
 
   componentDidMount() {
@@ -69,41 +62,22 @@ export default class SearchForm extends React.Component {
     );
   }
 
-  onSubmit(query) {
-    this.refs.form.submit(query);
-  }
-
   render() {
     const emptyLabel = (this.state.searchError !== null)
       ? 'Error on searching.'
       : 'No matches found on title... Hit [Enter] key so that search on contents.';
 
     return (
-      <form
-        ref='form'
-        action='/_search'
-        className='search-form form-group input-group search-input-group hidden-print'
-      >
-        <FormGroup>
-          <InputGroup>
-            <SearchTypeahead
-              crowi={this.crowi}
-              onChange={this.onChange}
-              onSubmit={this.onSubmit}
-              emptyLabel={emptyLabel}
-              placeholder="Search ..."
-              promptText={this.getHelpElement()}
-            />
-            <InputGroup.Button>
-              <Button type="submit" bsStyle="link">
-                <i className="icon-magnifier"></i>
-              </Button >
-            </InputGroup.Button>
-          </InputGroup>
-        </FormGroup>
-
-      </form>
-
+      <SearchTypeahead
+        crowi={this.props.crowi}
+        onChange={this.onChange}
+        onSubmit={this.props.onSubmit}
+        onSearchError={this.onSearchError}
+        emptyLabel={emptyLabel}
+        placeholder="Search ..."
+        promptText={this.getHelpElement()}
+        keywordOnInit={this.state.keyword}
+      />
     );
   }
 }

src/client/js/components/SearchPage.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import SearchForm from './SearchPage/SearchForm';
+import SearchPageForm from './SearchPage/SearchPageForm';
 import SearchResult from './SearchPage/SearchResult';
 
 export default class SearchPage extends React.Component {
@@ -92,7 +92,7 @@ export default class SearchPage extends React.Component {
     return (
       <div>
         <div className="search-page-input">
-          <SearchForm
+          <SearchPageForm
             crowi={this.props.crowi}
             onSearchFormChanged={this.search}
             keyword={this.state.searchingKeyword}

src/client/js/components/SearchPage/SearchForm.js

@@ -1,110 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SearchTypeahead from '../SearchTypeahead';
-
-// Search.SearchForm
-export default class SearchForm extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      keyword: this.props.keyword,
-      searchedKeyword: this.props.keyword,
-      searchError: null,
-    };
-
-    this.onSearchError = this.onSearchError.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  search(keyword) {
-    if (this.state.searchedKeyword != keyword) {
-      this.props.onSearchFormChanged({keyword: keyword});
-      this.setState({searchedKeyword: keyword});
-    }
-  }
-
-  onSearchError(err) {
-    this.setState({
-      searchError: err,
-    });
-  }
-
-  onSubmit(event) {
-    if (event !== '') {
-      event.preventDefault(); // prevent refreshing page of form tag
-    }
-    const input = this.refs.searchTypeahead.state.input;
-    this.setState({keyword: input});
-    this.search(input);
-  }
-
-  onChange(selected) {
-    const page = selected[0];
-
-    // navigate to page
-    if (page != null) {
-      window.location = page.path;
-    }
-  }
-
-  getHelpElement() {
-    return (
-      <table className="table m-1 search-help">
-        <caption className="text-left text-primary p-2 mb-2">
-          <h5 className="m-1"><i className="icon-magnifier pr-2 mb-2"/>Search Help</h5>
-        </caption>
-        <tbody>
-          <tr>
-            <td className="text-right mt-0 pr-2 p-1"><code>keyword</code></td>
-            <th className="mr-2"><h6 className="pr-2 m-0 pt-1">記事名 or 本文に<samp>"keyword"</samp>を含む</h6></th>
-          </tr>
-          <tr>
-            <td className="text-right mt-0 pr-2 p-1"><code>a b</code></td>
-            <th><h6 className="m-0 pt-1">文字列<samp>"a"</samp>と<samp>"b"</samp>を含む (スペース区切り)</h6></th>
-          </tr>
-          <tr>
-            <td className="text-right mt-0 pr-2 p-1"><code>-keyword</code></td>
-            <th><h6 className="m-0 pt-1">文字列<samp>"keyword"</samp>を含まない</h6></th>
-          </tr>
-        </tbody>
-      </table>
-    );
-  }
-
-  render() {
-    const emptyLabel = (this.state.searchError !== null)
-      ? 'Error on searching.'
-      : 'No matches found on title... Hit [Enter] key so that search on contents.';
-
-    return (
-      <form ref='form' className="form form-group input-group" onSubmit={this.onSubmit}>
-        <SearchTypeahead
-          ref='searchTypeahead'
-          crowi={this.props.crowi}
-          onChange={this.onChange}
-          onSubmit={this.onSubmit}
-          onSearchError={this.onSearchError}
-          emptyLabel={emptyLabel}
-          promptText={this.getHelpElement()}
-          keywordOnInit={this.state.keyword}
-        />
-          <span className="input-group-btn">
-            <button type="submit" className="btn btn-default">
-              <i className="search-top-icon icon-magnifier"></i>
-            </button>
-          </span>
-      </form>
-    );
-  }
-}
-
-SearchForm.propTypes = {
-  crowi: PropTypes.object.isRequired,
-  keyword: PropTypes.string,
-  onSearchFormChanged: PropTypes.func.isRequired,
-};
-SearchForm.defaultProps = {
-};

src/client/js/components/SearchPage/SearchPageForm.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SearchForm from '../SearchForm';
+
+// Search.SearchForm
+export default class SearchPageForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      keyword: this.props.keyword,
+      searchedKeyword: this.props.keyword,
+      searchError: null,
+    };
+
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  search(keyword) {
+    if (this.state.searchedKeyword != keyword) {
+      this.props.onSearchFormChanged({keyword: keyword});
+      this.setState({searchedKeyword: keyword});
+    }
+  }
+
+  onSubmit(event) {
+    if (event !== '') {
+      event.preventDefault(); // prevent refreshing page of form tag
+    }
+    const input = this.refs.searchTypeahead.state.input;
+    this.setState({keyword: input});
+    this.search(input);
+  }
+
+  render() {
+    return (
+      <form ref='form'
+      className="form form-group input-group"
+       onSubmit={this.onSubmit}>
+        <SearchForm
+          ref='searchTypeahead'
+          crowi={this.props.crowi}
+          onSubmit={this.onSubmit}
+          keyword={this.state.keyword}
+        />
+          <span className="input-group-btn">
+            <button type="submit" className="btn btn-default">
+              <i className="search-top-icon icon-magnifier"></i>
+            </button>
+          </span>
+      </form>
+    );
+  }
+}
+
+SearchPageForm.propTypes = {
+  crowi: PropTypes.object.isRequired,
+  keyword: PropTypes.string,
+  onSearchFormChanged: PropTypes.func.isRequired,
+};
+SearchPageForm.defaultProps = {
+};