refactor SearchTypeahead so that to be able to specify emptyLabelExceptError

src/client/js/components/PagePathAutoComplete.jsx

@@ -15,7 +15,6 @@ export default class PagePathAutoComplete extends React.Component {
     };
     this.crowi = this.props.crowi;
 
-    this.onSearchError = this.onSearchError.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
     this.getKeywordOnInit = this.getKeywordOnInit.bind(this);
   }
@@ -26,12 +25,6 @@ export default class PagePathAutoComplete extends React.Component {
   componentWillUnmount() {
   }
 
-  onSearchError(err) {
-    this.setState({
-      searchError: err,
-    });
-  }
-
   onSubmit(query) {
     // get the closest form element
     const elem = this.refs.rootDom;
@@ -47,19 +40,14 @@ export default class PagePathAutoComplete extends React.Component {
   }
 
   render() {
-    const emptyLabel = (this.state.searchError !== null)
-      ? 'Error on searching.'
-      : 'No matches found on title...';
-
     return (
       <div ref='rootDom'>
         <SearchTypeahead
           ref={this.searchTypeaheadDom}
           crowi={this.crowi}
-          onSearchError={this.onSearchError}
           onSubmit={this.onSubmit}
           inputName='new_path'
-          emptyLabel={null}
+          emptyLabelExceptError={null}
           placeholder="Input page path"
           keywordOnInit={this.getKeywordOnInit(this.props.initializedPath)}
         />

src/client/js/components/SearchTypeahead.js

@@ -23,15 +23,15 @@ export default class SearchTypeahead extends React.Component {
       searchError: null,
     };
     this.crowi = this.props.crowi;
-    this.emptyLabel = props.emptyLabel;
 
+    this.restoreInitialData = this.restoreInitialData.bind(this);
     this.search = this.search.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.dispatchSubmit = this.dispatchSubmit.bind(this);
+    this.getEmptyLabel = this.getEmptyLabel.bind(this);
     this.getRestoreFormButton = this.getRestoreFormButton.bind(this);
     this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);
-    this.restoreInitialData = this.restoreInitialData.bind(this);
     this.getTypeahead = this.getTypeahead.bind(this);
   }
 
@@ -48,6 +48,14 @@ export default class SearchTypeahead extends React.Component {
   componentWillUnmount() {
   }
 
+  /**
+   * Initialize keyword
+   */
+  restoreInitialData() {
+    this.refs.typeahead.getInstance().clear();
+    this.refs.typeahead.getInstance()._updateText(this.props.keywordOnInit);
+  }
+
   search(keyword) {
 
     if (keyword === '') {
@@ -110,23 +118,20 @@ export default class SearchTypeahead extends React.Component {
     }
   }
 
-  renderMenuItemChildren(option, props, index) {
-    const page = option;
-    return (
-      <span>
-      <UserPicture user={page.lastUpdateUser} size="sm" />
-      <PagePath page={page} />
-      <PageListMeta page={page} />
-      </span>
-    );
-  }
+  getEmptyLabel() {
+    // use props.emptyLabel as is if defined
+    if (this.props.emptyLabel !== undefined) {
+      return this.props.emptyLabel;
+    }
 
-  /**
-   * Initialize keyword
-   */
-  restoreInitialData() {
-    this.refs.typeahead.getInstance().clear();
-    this.refs.typeahead.getInstance()._updateText(this.props.keywordOnInit);
+    let emptyLabelExceptError = 'No matches found on title...';
+    if (this.props.emptyLabelExceptError !== undefined) {
+      emptyLabelExceptError = this.props.emptyLabelExceptError;
+    }
+
+    return (this.state.searchError !== null)
+      ? 'Error on searching.'
+      : emptyLabelExceptError;
   }
 
   /**
@@ -142,11 +147,18 @@ export default class SearchTypeahead extends React.Component {
     );
   }
 
+  renderMenuItemChildren(option, props, index) {
+    const page = option;
+    return (
+      <span>
+      <UserPicture user={page.lastUpdateUser} size="sm" />
+      <PagePath page={page} />
+      <PageListMeta page={page} />
+      </span>
+    );
+  }
+
   render() {
-    const emptyLabel = (this.state.searchError !== null)
-      ? 'Error on searching.'
-      : 'No matches found on title...';
-    const restoreFormButton = this.getRestoreFormButton();
     const defaultSelected = (this.props.keywordOnInit != '')
       ? [{path: this.props.keywordOnInit}]
       : [];
@@ -155,6 +167,8 @@ export default class SearchTypeahead extends React.Component {
       inputProps.name = this.props.inputName;
     }
 
+    const restoreFormButton = this.getRestoreFormButton();
+
     return (
       <div className="search-typeahead">
         <AsyncTypeahead
@@ -165,7 +179,7 @@ export default class SearchTypeahead extends React.Component {
           labelKey="path"
           minLength={0}
           options={this.state.pages} // Search result (Some page names)
-          emptyLabel={this.emptyLabel ? this.emptyLabel : emptyLabel}
+          emptyLabel={this.getEmptyLabel()}
           align='left'
           submitFormOnEnter={true}
           onSearch={this.search}
@@ -194,6 +208,7 @@ SearchTypeahead.propTypes = {
   onInputChange:   PropTypes.func,
   inputName:       PropTypes.string,
   emptyLabel:      PropTypes.string,
+  emptyLabelExceptError: PropTypes.string,
   placeholder:     PropTypes.string,
   keywordOnInit:   PropTypes.string,
   promptText:      PropTypes.object,
@@ -206,7 +221,6 @@ SearchTypeahead.defaultProps = {
   onSearchSuccess: noop,
   onSearchError:   noop,
   onChange:        noop,
-  emptyLabel:      null,
   placeholder:     '',
   keywordOnInit:   '',
   onInputChange: () => {},