refs #238

- CSS スタイルを調整して横幅の変更に伴ってページ名入力input boxサイズを変更できるように修正
- 初回modal作成時にページ名入力input boxにplaceholder が表示されるようfocusさせる処理を追加
- NewPageInputter.js を SearchForm から継承するよう書き直し

[TODO]
- 新規作成ページ名入力欄に表示中のページ名を予め記入する (修正出来たらデバッグ用表示は削除すること)

lib/views/modal/create_page.html

@@ -34,7 +34,7 @@
             </div>
             <div class="col-xs-10">
               {% if searchConfigured() %}
-              <div id="page-name-inputter"></div>
+              <div class="clearfix" id="page-name-inputter"></div>
               {% else %}
               <input type="text" value="{{ parentPath(path) }}" class="page-name-input form-control " placeholder="{{ t('Input page name') }}" required />
               {% endif %}

resource/css/crowi.scss

@@ -165,9 +165,6 @@ footer {
         // width: 100%;
         display: inline-block;
       }
-      .rbt-input input, #page-name-inputter {
-        width: 538px !important;
-      }
     }
   }
 }

resource/js/app.js

@@ -73,7 +73,7 @@ const componentMappings = {
   'seen-user-list': <SeenUserList pageId={pageId} crowi={crowi} />,
   'bookmark-button': <BookmarkButton pageId={pageId} crowi={crowi} />,
 
-  'page-name-inputter': <NewPageNameInputter crowi={crowi} />,
+  'page-name-inputter': <NewPageNameInputter crowi={crowi} keyword={pagePath} />,
 };
 // additional definitions if pagePath exists
 if (pagePath) {

resource/js/components/NewPageNameInputter.js

@@ -1,99 +1,23 @@
+// This is the root component for #search-top
+
 import React from 'react';
 import { FormGroup, Button, InputGroup } from 'react-bootstrap';
 
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 
-import UserPicture from './User/UserPicture';
-import PageListMeta from './PageList/PageListMeta';
+import SearchForm from './HeaderSearchBox/SearchForm';
+// import SearchSuggest from './HeaderSearchBox/SearchSuggest'; // omit since using react-bootstrap-typeahead in SearchForm
+
 import PagePath from './PageList/PagePath';
+
 import PropTypes from 'prop-types';
 
-// Header.SearchForm
-export default class NewPageNameInputter extends React.Component {
+export default class NewPageNameInputter extends SearchForm {
 
   constructor(props) {
     super(props);
 
-    this.crowi = window.crowi; // FIXME
-
-    this.state = {
-      input: '',
-      keyword: '',
-      searchedKeyword: '',
-      pages: [],
-      isLoading: false,
-      searchError: null,
-    };
-
-    this.search = this.search.bind(this);
-    this.clearForm = this.clearForm.bind(this);
-    this.getFormClearComponent = this.getFormClearComponent.bind(this);
-    this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);
-    this.onInputChange = this.onInputChange.bind(this);
-  }
-
-  componentDidMount() {
-  }
-
-  componentWillUnmount() {
-  }
-
-  search(keyword) {
-
-    if (keyword === '') {
-      this.setState({
-        keyword: '',
-        searchedKeyword: '',
-      });
-      return;
-    }
-
-    this.setState({isLoading: true});
-
-    this.crowi.apiGet('/search', {q: keyword})
-      .then(res => {
-        this.setState({
-          isLoading: false,
-          keyword: '',
-          pages: res.data,
-        });
-      })
-      .catch(err => {
-        this.setState({
-          isLoading: false,
-          searchError: err,
-        });
-      });
-  }
-
-  getFormClearComponent() {
-    let isHidden = (this.state.input.length === 0);
-
-    return isHidden ? <span></span> : (
-      <a className="btn btn-link search-top-clear" onClick={this.clearForm} hidden={isHidden}>
-        <i className="fa fa-times-circle" />
-      </a>
-    );
-  }
-
-  clearForm() {
-    this._typeahead.getInstance().clear();
-    this.setState({keyword: ''});
-  }
-
-  onInputChange(text) {
-    this.setState({input: text});
-  }
-
-  renderMenuItemChildren(option, props, index) {
-    const page = option;
-    return (
-      <span>
-        <UserPicture user={page.revision.author} />
-        <PagePath page={page} />
-        <PageListMeta page={page} />
-      </span>
-    );
+    this.state.keyword = props.keyword
   }
 
   render() {
@@ -101,13 +25,13 @@ export default class NewPageNameInputter extends React.Component {
         ? 'Error on searching.'
         : 'No matches found on title...';
     const formClear = this.getFormClearComponent();
+    const keyword = "hoge";
 
     return (
       <form
         action="/_search"
-        className="search-form input-group"
+        className=""
       >
-        <InputGroup>
         <AsyncTypeahead
             ref={ref => this._typeahead = ref}
             inputProps={{name: "q", autoComplete: "off"}}
@@ -122,13 +46,11 @@ export default class NewPageNameInputter extends React.Component {
             onSearch={this.search}
             onInputChange={this.onInputChange}
             renderMenuItemChildren={this.renderMenuItemChildren}
+            caseSensitive={false}
+            keyword={keyword} // 検索キーワードを表示中のページの親ページにしたいがやり方不明。[TODO]
         />
         {formClear}
-        <input
-            type="hidden"
-            value={this.state.searchedKeyword}
-            required />
-        </InputGroup>
+        <span>page: {this.state.keyword}</span> {/* 検索キーワードを表示デバッグ用 */ }
 
       </form>
 
@@ -137,7 +59,8 @@ export default class NewPageNameInputter extends React.Component {
 }
 
 NewPageNameInputter.propTypes = {
+  keyword: PropTypes.string.isRequired,
 };
-
 NewPageNameInputter.defaultProps = {
+  keyword: "",
 };

resource/js/legacy/crowi.js

@@ -239,8 +239,8 @@ $(function() {
       - $('#create-page-today .page-today-suffix').outerWidth()
       - 42
       ;
+    $('#page-name-inputter .form-control').focus(); // focus() を実行しないと placeholder が表示されない。
     $('#create-page-today .form-control.page-today-input2').css({width: newWidth}).focus();
-
   });
 
   $('#create-page-today').submit(function(e) {