Search suggest mock

resource/css/_search.scss

@@ -29,12 +29,12 @@
   // => dicided by JS
   // top: 43px;
   // left: 125px;
-  display: none;
+  //display: none;
   position: fixed;
   width: 500px;
   background: #fff;
   border: solid 1px #ccc;
-  box-shadow: 0 0 2px #ccc;
+  box-shadow: 0 0 1px rgba(0,0,0,.3);
   padding: 16px;
 
 }

resource/js/app.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import HeaderSearchBox from './components/Header/SearchBox';
+import  SearchBox  from './components/Header/SearchBox';
 
 /*
 class Crowi extends React.Component {
@@ -20,7 +20,7 @@ class Crowi extends React.Component {
 */
 
 var componentMappings = {
-  'search-top': <HeaderSearchBox />,
+  'search-top': <SearchBox />,
 };
 
 Object.keys(componentMappings).forEach((key) => {

resource/js/components/Header/SearchBox.js

@@ -2,23 +2,46 @@
 
 import React from 'react';
 
+import SearchForm from './SearchForm';
 import SearchSuggest from './SearchSuggest';
 
-export default class extends React.Component {
+export default class SearchBox extends React.Component {
 
-  getInitialState() {
-    return {data: []};
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      searchingKeyword: '',
+      suggestedPages: [],
+    }
+
+    this.search = this.search.bind(this);
+  }
+
+  search(data) {
+    console.log('search doing ... ', data);
+    //this.loadCommentsFromServer();
+    this.setState({
+      suggestedPages: [
+        { path: '/hoge/fuga ' + data.keyword, author: '@sotarok'},
+        { path: '/hoge/piyo', author: '@riaf'},
+      ]
+    });
   }
 
   render() {
     return (
-      <div className="form-group input-group search-top-input-group">
-        <input type="text" id="search-top-input" className="search-top-input form-control" placeholder="Search ..." />
-        <span className="input-group-btn">
-          <button className="btn btn-default" type="button"><i className="search-top-icon fa fa-search"></i></button>
-        </span>
-        <SearchSuggest />
+      <div className="search-box">
+        <SearchForm onSearchFormChanged={this.search} />
+        <SearchSuggest suggestedPages={this.state.suggestedPages} />
       </div>
     );
   }
 }
+
+SearchBox.propTypes = {
+  //pollInterval: React.PropTypes.number,
+};
+SearchBox.defaultProps = {
+  //pollInterval: 1000,
+};

resource/js/components/Header/SearchForm.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+export default class SearchForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      keyword: '',
+      searchedKeyword: '',
+    };
+
+    this.handleSubmit= this.handleSubmit.bind(this);
+    this.handleChange= this.handleChange.bind(this);
+  }
+
+  componentDidMount() {
+    setInterval(this.searchFieldTicker.bind(this), this.props.pollInterval);
+  }
+
+  searchFieldTicker() {
+    if (this.state.searchedKeyword != this.state.keyword) {
+      this.props.onSearchFormChanged({keyword: this.state.keyword});
+      this.setState({searchedKeyword: this.state.keyword});
+    }
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+  }
+
+  handleChange(event) {
+    const keyword = event.target.value;
+    this.setState({keyword});
+  }
+
+  render() {
+    return (
+      <form
+        className="search-form form-group input-group search-top-input-group"
+        onSubmit={this.handleSubmit}
+      >
+        <input type="text" className="search-top-input form-control" placeholder="Search ..."
+          value={this.state.keyword}
+          onChange={this.handleChange}
+        />
+        <span className="input-group-btn">
+          <button type="submit" className="btn btn-default" type="button">
+            <i className="search-top-icon fa fa-search"></i>
+          </button>
+        </span>
+      </form>
+    );
+  }
+}
+
+SearchForm.propTypes = {
+  onSearchFormChanged: React.PropTypes.func.isRequired,
+  pollInterval: React.PropTypes.number,
+};
+SearchForm.defaultProps = {
+  pollInterval: 1000,
+};

resource/js/components/Header/SearchSuggest.js

@@ -1,11 +1,29 @@
 import React from 'react';
 
-export default class extends React.Component {
+import ListView from '../PageList/ListView';
+
+export default class SearchSuggest extends React.Component {
 
   render() {
+    console.log('suggestedPages', this.props.suggestedPages);
+
+    if (this.props.suggestedPages.length < 1) {
+      return <div></div>;
+    }
+
     return (
       <div className="search-suggest" id="search-suggest">
+        <ListView pages={this.props.suggestedPages} />
       </div>
     );
   }
+
 }
+
+SearchSuggest.propTypes = {
+  suggestedPages: React.PropTypes.array.isRequired,
+};
+
+SearchSuggest.defaultProps = {
+  suggestedPages: [],
+};

resource/js/components/PageList/ListView.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default class ListView extends React.Component {
+
+  render() {
+    const listView = this.props.pages.map(function(page) {
+      return (
+        <div key={page.path}>
+          {page.path} by {page.author}
+        </div>
+      );
+    });
+
+    return (
+      <div className="page-list">
+        {listView}
+      </div>
+    );
+  }
+}
+
+ListView.propTypes = {
+  pages: React.PropTypes.array.isRequired,
+};
+
+ListView.defaultProps = {
+  pages: [],
+};