New: Combine mass editor and author editor, enable book editor

frontend/src/Book/Index/Overview/BookIndexOverview.css

@@ -19,6 +19,13 @@ $hoverScale: 1.05;
   left: 0;
 }
 
+.editorSelect {
+  position: absolute;
+  top: 0;
+  left: 5px;
+  z-index: 3;
+}
+
 .posterContainer {
   position: relative;
   overflow: hidden;

frontend/src/Book/Index/Overview/BookIndexOverview.js

@@ -5,6 +5,7 @@ import AuthorPoster from 'Author/AuthorPoster';
 import DeleteAuthorModal from 'Author/Delete/DeleteAuthorModal';
 import EditAuthorModalConnector from 'Author/Edit/EditAuthorModalConnector';
 import BookIndexProgressBar from 'Book/Index/ProgressBar/BookIndexProgressBar';
+import CheckInput from 'Components/Form/CheckInput';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
@@ -67,6 +68,15 @@ class BookIndexOverview extends Component {
     this.setState({ isDeleteAuthorModalOpen: false });
   }
 
+  onChange = ({ value, shiftKey }) => {
+    const {
+      id,
+      onSelectedChange
+    } = this.props;
+
+    onSelectedChange({ id, value, shiftKey });
+  }
+
   //
   // Render
 
@@ -95,6 +105,8 @@ class BookIndexOverview extends Component {
       isSearchingBook,
       onRefreshBookPress,
       onSearchPress,
+      isEditorActive,
+      isSelected,
       ...otherProps
     } = this.props;
 
@@ -125,6 +137,17 @@ class BookIndexOverview extends Component {
       <div className={styles.container}>
         <div className={styles.content}>
           <div className={styles.posterContainer}>
+            {
+              isEditorActive &&
+                <div className={styles.editorSelect}>
+                  <CheckInput
+                    className={styles.checkInput}
+                    name={id.toString()}
+                    value={isSelected}
+                    onChange={this.onChange}
+                  />
+                </div>
+            }
             {
               status === 'ended' &&
                 <div
@@ -264,7 +287,10 @@ BookIndexOverview.propTypes = {
   isRefreshingBook: PropTypes.bool.isRequired,
   isSearchingBook: PropTypes.bool.isRequired,
   onRefreshBookPress: PropTypes.func.isRequired,
-  onSearchPress: PropTypes.func.isRequired
+  onSearchPress: PropTypes.func.isRequired,
+  isEditorActive: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
+  onSelectedChange: PropTypes.func.isRequired
 };
 
 BookIndexOverview.defaultProps = {

frontend/src/Book/Index/Overview/BookIndexOverviews.js

@@ -73,7 +73,9 @@ class BookIndexOverviews extends Component {
       sortKey,
       overviewOptions,
       jumpToCharacter,
-      scrollTop
+      scrollTop,
+      isEditorActive,
+      selectedState
     } = this.props;
 
     const {
@@ -91,6 +93,8 @@ class BookIndexOverviews extends Component {
         (prevState.width !== width ||
             prevState.rowHeight !== rowHeight ||
             hasDifferentItemsOrOrder(prevProps.items, items) ||
+            prevProps.isEditorActive !== isEditorActive ||
+            prevProps.selectedState !== selectedState ||
             prevProps.overviewOptions !== overviewOptions)) {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
@@ -148,7 +152,10 @@ class BookIndexOverviews extends Component {
       shortDateFormat,
       longDateFormat,
       timeFormat,
-      isSmallScreen
+      isSmallScreen,
+      selectedState,
+      isEditorActive,
+      onSelectedChange
     } = this.props;
 
     const {
@@ -183,6 +190,9 @@ class BookIndexOverviews extends Component {
           isSmallScreen={isSmallScreen}
           bookId={book.id}
           authorId={book.authorId}
+          isSelected={selectedState[book.id]}
+          onSelectedChange={onSelectedChange}
+          isEditorActive={isEditorActive}
         />
       </div>
     );
@@ -263,7 +273,10 @@ BookIndexOverviews.propTypes = {
   shortDateFormat: PropTypes.string.isRequired,
   longDateFormat: PropTypes.string.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
-  timeFormat: PropTypes.string.isRequired
+  timeFormat: PropTypes.string.isRequired,
+  selectedState: PropTypes.object.isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  isEditorActive: PropTypes.bool.isRequired
 };
 
 export default BookIndexOverviews;