refactor SearchPageForm

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

@@ -1,5 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
+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';
 
 // Search.SearchForm
@@ -14,20 +19,13 @@ export default class SearchPageForm extends React.Component {
     };
 
     this.search = this.search.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
   }
 
-  search(keyword) {
-    if (this.state.searchedKeyword != keyword) {
-      this.props.onSearchFormChanged({keyword: keyword});
-      this.setState({searchedKeyword: keyword});
-    }
-  }
-
-  onSubmit(event) { // submit with button
-    event.preventDefault(); // prevent refreshing page
-    this.search(this.state.keyword);
+  search() {
+    const keyword = this.state.keyword;
+    this.props.onSearchFormChanged({keyword: keyword});
+    this.setState({searchedKeyword: keyword});
   }
 
   onInputChange(input) { // for only submitting with button
@@ -35,24 +33,21 @@ export default class SearchPageForm extends React.Component {
   }
 
   render() {
-    return (
-      <form ref='form'
-        className="form form-group input-group"
-        onSubmit={this.onSubmit}
-      >
+    return <FormGroup>
+      <InputGroup>
         <SearchForm
           crowi={this.props.crowi}
           onSubmit={this.search}
           keyword={this.state.searchedKeyword}
           onInputChange={this.onInputChange}
         />
-        <span className="input-group-btn">
-          <button type="submit" className="btn btn-default">
-            <i className="search-top-icon icon-magnifier"></i>
-          </button>
-        </span>
-      </form>
-    );
+        <InputGroup.Button className="">
+          <Button onClick={this.search}>
+            <i className="icon-magnifier"></i>
+          </Button >
+        </InputGroup.Button>
+      </InputGroup>
+    </FormGroup>;
   }
 }
 

src/client/styles/scss/_search.scss

@@ -176,18 +176,13 @@
   }
 }
 
-.search-page-input{
+.search-page-input {
   padding: 10px 0;
   position: sticky;
   top: 0;
   z-index: 99;
-  .form{
-    margin: 0;
-    .input-group .form-control{
-      height: 100%;
-    }
-    .input-group-btn .btn{
-      height: 34px;
-    }
+  .input-group-btn .btn{
+    padding: 0px 10px;
+    height: 34px;
   }
 }