Implv/125 Selective batch deletion in search result page

* Delete SearchResultInput component and incorporate into SearchResult component.

resource/js/components/SearchPage/SearchResult.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 import Page from '../PageList/Page';
 import SearchResultList from './SearchResultList';
-import SearchResultInput from './SearchResultInput';
 import DeletePageListModal from './DeletePageListModal';
 
 // Search.SearchResult
@@ -16,7 +15,6 @@ export default class SearchResult extends React.Component {
       isDeleteConfirmModalShown: false,
       errorMessageForDeleting: undefined,
     }
-    this.toggleCheckbox = this.toggleCheckbox.bind(this);
     this.deleteSelectedPages = this.deleteSelectedPages.bind(this);
     this.closeDeleteConfirmModal = this.closeDeleteConfirmModal.bind(this);
   }
@@ -164,10 +162,12 @@ export default class SearchResult extends React.Component {
           excludePathString={excludePathString}
           >
           { this.state.deletionMode &&
-            <SearchResultInput
-              page={page}
-              handleCheckboxChange={this.toggleCheckbox}/>
-          }
+            <input
+              type="checkbox"
+              value={pageId}
+              checked={this.state.selectedPages.has(page)}
+              onClick={() => this.toggleCheckbox(page)} />
+            }
           <div className="page-list-option">
             <a href={page.path}><i className="fa fa-arrow-circle-right" /></a>
           </div>
@@ -175,12 +175,6 @@ export default class SearchResult extends React.Component {
       );
     });
 
-    const selectedList = Array.from(this.state.selectedPages).map((page) => {
-        return (
-          <li key={page._id}>{page.path}</li>
-        );
-    });
-
     // TODO あとでなんとかする
     setTimeout(() => {
       $('#search-result-list > nav').affix({ offset: { top: 120 }});
@@ -210,11 +204,11 @@ export default class SearchResult extends React.Component {
           </div>
         </div>
         <DeletePageListModal
-        isShown={this.state.isDeleteConfirmModalShown}
-        pages={Array.from(this.state.selectedPages)}
-        errorMessage={this.state.errorMessageForDeleting}
-        cancel={this.closeDeleteConfirmModal}
-        confirmedToDelete={this.deleteSelectedPages}
+          isShown={this.state.isDeleteConfirmModalShown}
+          pages={Array.from(this.state.selectedPages)}
+          errorMessage={this.state.errorMessageForDeleting}
+          cancel={this.closeDeleteConfirmModal}
+          confirmedToDelete={this.deleteSelectedPages}
         />
 
       </div>//content-main

resource/js/components/SearchPage/SearchResultInput.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class SearchResultInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: false,
-    }
-    this.toggleCheckboxChange = this.toggleCheckboxChange.bind(this);
-  }
-
-  /**
-   * checkbox の選択切り替えを行い、
-   * 親コンポーネントに定義されたメソッドを呼び出します
-   *
-   * @memberof SearchResultInput
-   */
-  toggleCheckboxChange() {
-    const { handleCheckboxChange, page } = this.props;
-
-    this.setState(({ isChecked }) => (
-      {
-        isChecked: !isChecked,
-      }
-    ));
-
-    this.props.handleCheckboxChange(page);
-  }
-
-  render() {
-    let pageId = this.props.page.id;
-    const { isChecked } = this.state;
-
-    return (
-      <input
-        type="checkbox"
-        value={pageId}
-        checked={isChecked}
-        onChange={this.toggleCheckboxChange} />
-    );
-  }
-}
-
-SearchResultInput.propTypes = {
-  page: PropTypes.object.isRequired,
-  handleCheckboxChange: PropTypes.func.isRequired,
-};