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

frontend/src/Book/Index/Posters/BookIndexPoster.css

@@ -78,6 +78,13 @@ $hoverScale: 1.05;
   color: $white;
 }
 
+.editorSelect {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 4;
+}
+
 .controls {
   position: absolute;
   bottom: 10px;

frontend/src/Book/Index/Posters/BookIndexPoster.js

@@ -5,6 +5,7 @@ import DeleteAuthorModal from 'Author/Delete/DeleteAuthorModal';
 import EditAuthorModalConnector from 'Author/Edit/EditAuthorModalConnector';
 import EditBookModalConnector from 'Book/Edit/EditBookModalConnector';
 import BookIndexProgressBar from 'Book/Index/ProgressBar/BookIndexProgressBar';
+import CheckInput from 'Components/Form/CheckInput';
 import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
@@ -73,6 +74,15 @@ class BookIndexPoster extends Component {
     }
   }
 
+  onChange = ({ value, shiftKey }) => {
+    const {
+      id,
+      onSelectedChange
+    } = this.props;
+
+    onSelectedChange({ id, value, shiftKey });
+  }
+
   //
   // Render
 
@@ -103,6 +113,9 @@ class BookIndexPoster extends Component {
       isSearchingBook,
       onRefreshBookPress,
       onSearchPress,
+      isEditorActive,
+      isSelected,
+      onSelectedChange,
       ...otherProps
     } = this.props;
 
@@ -132,6 +145,18 @@ class BookIndexPoster extends Component {
       <div>
         <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>
+            }
+
             <Label className={styles.controls}>
               <SpinnerIconButton
                 className={styles.action}
@@ -309,7 +334,10 @@ BookIndexPoster.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
 };
 
 BookIndexPoster.defaultProps = {

frontend/src/Book/Index/Posters/BookIndexPosters.js

@@ -121,7 +121,9 @@ class BookIndexPosters extends Component {
       posterOptions,
       jumpToCharacter,
       isSmallScreen,
-      scrollTop
+      isEditorActive,
+      scrollTop,
+      selectedState
     } = this.props;
 
     const {
@@ -142,7 +144,9 @@ class BookIndexPosters extends Component {
             prevState.columnWidth !== columnWidth ||
             prevState.columnCount !== columnCount ||
             prevState.rowHeight !== rowHeight ||
-            hasDifferentItemsOrOrder(prevProps.items, items))) {
+            hasDifferentItemsOrOrder(prevProps.items, items)) ||
+            prevProps.isEditorActive !== isEditorActive ||
+            prevProps.selectedState !== selectedState) {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
     }
@@ -202,7 +206,10 @@ class BookIndexPosters extends Component {
       posterOptions,
       showRelativeDates,
       shortDateFormat,
-      timeFormat
+      timeFormat,
+      selectedState,
+      isEditorActive,
+      onSelectedChange
     } = this.props;
 
     const {
@@ -251,6 +258,9 @@ class BookIndexPosters extends Component {
           style={style}
           bookId={book.id}
           authorId={book.authorId}
+          isSelected={selectedState[book.id]}
+          onSelectedChange={onSelectedChange}
+          isEditorActive={isEditorActive}
         />
       </div>
     );
@@ -333,7 +343,10 @@ BookIndexPosters.propTypes = {
   showRelativeDates: PropTypes.bool.isRequired,
   shortDateFormat: 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 BookIndexPosters;