refactor

src/client/js/components/PageDuplicateModal.jsx

@@ -64,7 +64,15 @@ const PageDuplicateModal = (props) => {
             </div>
             {isReachable
               // GW-2355 refactor typeahead
-              ? <PagePathAutoComplete crowi={appContainer} initializedPath={path} addTrailingSlash />
+              ? (
+                <PagePathAutoComplete
+                  crowi={appContainer}
+                  initializedPath={path}
+                  addTrailingSlash
+                  onClickSubmit={clickDuplicateButtonHandler}
+                  onInputChange={onChangePageNameInputHandler}
+                />
+              )
               : (
                 <input
                   type="text"

src/client/js/components/PagePathAutoComplete.jsx

@@ -5,65 +5,43 @@ import { pathUtils } from 'growi-commons';
 
 import SearchTypeahead from './SearchTypeahead';
 
-export default class PagePathAutoComplete extends React.Component {
+const PagePathAutoComplete = (props) => {
 
-  constructor(props) {
+  const {
+    addTrailingSlash, onClickSubmit, onInputChange, initializedPath,
+  } = props;
 
-    super(props);
-
-    this.state = {
-    };
-
-    this.crowi = this.props.crowi;
-
-    this.onSubmit = this.onSubmit.bind(this);
-    this.getKeywordOnInit = this.getKeywordOnInit.bind(this);
-  }
-
-  componentDidMount() {
-  }
-
-  componentWillUnmount() {
-  }
-
-  onSubmit(query) {
-    // get the closest form element
-    const elem = this.rootDom;
-    const form = elem.closest('form');
-    // submit with jQuery
-    $(form).submit();
-  }
-
-  getKeywordOnInit(path) {
-    return this.props.addTrailingSlash
+  function getKeywordOnInit(path) {
+    return addTrailingSlash
       ? pathUtils.addTrailingSlash(path)
       : pathUtils.removeTrailingSlash(path);
   }
 
-  render() {
-    return (
-      <div ref={(c) => { this.rootDom = c }}>
-        <SearchTypeahead
-          ref={this.searchTypeaheadDom}
-          crowi={this.crowi}
-          onSubmit={this.onSubmit}
-          inputName="new_path"
-          emptyLabelExceptError={null}
-          placeholder="Input page path"
-          keywordOnInit={this.getKeywordOnInit(this.props.initializedPath)}
-        />
-      </div>
-    );
-  }
+  return (
+    <SearchTypeahead
+      crowi={props.crowi}
+      onSubmit={onClickSubmit}
+      onInputChange={onInputChange}
+      inputName="new_path"
+      emptyLabelExceptError={null}
+      placeholder="Input page path"
+      keywordOnInit={getKeywordOnInit(initializedPath)}
+    />
+  );
 
-}
+};
 
 PagePathAutoComplete.propTypes = {
   crowi:            PropTypes.object.isRequired,
   initializedPath:  PropTypes.string,
   addTrailingSlash: PropTypes.bool,
+
+  onClickSubmit:    PropTypes.func.isRequired,
+  onInputChange:    PropTypes.func.isRequired,
 };
 
 PagePathAutoComplete.defaultProps = {
   initializedPath: '/',
 };
+
+export default PagePathAutoComplete;