Fixed: Rework Artist Index and VirtualTable

frontend/src/AddArtist/ImportArtist/Import/ImportArtist.js

@@ -22,16 +22,15 @@ class ImportArtist extends Component {
       allUnselected: false,
       lastToggled: null,
       selectedState: {},
-      contentBody: null,
-      scrollTop: 0
+      scroller: null
     };
   }
 
   //
   // Control
 
-  setContentBodyRef = (ref) => {
-    this.setState({ contentBody: ref });
+  setScrollerRef = (ref) => {
+    this.setState({ scroller: ref });
   }
 
   //
@@ -72,10 +71,6 @@ class ImportArtist extends Component {
     this.props.onImportPress(this.getSelectedIds());
   }
 
-  onScroll = ({ scrollTop }) => {
-    this.setState({ scrollTop });
-  }
-
   //
   // Render
 
@@ -94,13 +89,13 @@ class ImportArtist extends Component {
       allSelected,
       allUnselected,
       selectedState,
-      contentBody
+      scroller
     } = this.state;
 
     return (
       <PageContent title="Import Artist">
         <PageContentBodyConnector
-          ref={this.setContentBodyRef}
+          registerScroller={this.setScrollerRef}
           onScroll={this.onScroll}
         >
           {
@@ -121,20 +116,18 @@ class ImportArtist extends Component {
           }
 
           {
-            !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length && contentBody &&
+            !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length && scroller &&
               <ImportArtistTableConnector
                 rootFolderId={rootFolderId}
                 unmappedFolders={unmappedFolders}
                 allSelected={allSelected}
                 allUnselected={allUnselected}
                 selectedState={selectedState}
-                contentBody={contentBody}
+                scroller={scroller}
                 showMetadataProfile={showMetadataProfile}
-                scrollTop={this.state.scrollTop}
                 onSelectAllChange={this.onSelectAllChange}
                 onSelectedChange={this.onSelectedChange}
                 onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
-                onScroll={this.onScroll}
               />
           }
         </PageContentBodyConnector>

frontend/src/AddArtist/ImportArtist/Import/ImportArtistRow.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { inputTypes } from 'Helpers/Props';
 import FormInputGroup from 'Components/Form/FormInputGroup';
-import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import ImportArtistSelectArtistConnector from './SelectArtist/ImportArtistSelectArtistConnector';
@@ -10,7 +9,6 @@ import styles from './ImportArtistRow.css';
 
 function ImportArtistRow(props) {
   const {
-    style,
     id,
     monitor,
     qualityProfileId,
@@ -25,7 +23,7 @@ function ImportArtistRow(props) {
   } = props;
 
   return (
-    <VirtualTableRow style={style}>
+    <>
       <VirtualTableSelectCell
         inputClassName={styles.selectInput}
         id={id}
@@ -82,12 +80,11 @@ function ImportArtistRow(props) {
           isExistingArtist={isExistingArtist}
         />
       </VirtualTableRowCell>
-    </VirtualTableRow>
+    </>
   );
 }
 
 ImportArtistRow.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.string.isRequired,
   monitor: PropTypes.string.isRequired,
   qualityProfileId: PropTypes.number.isRequired,

frontend/src/AddArtist/ImportArtist/Import/ImportArtistTable.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import VirtualTable from 'Components/Table/VirtualTable';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import ImportArtistHeader from './ImportArtistHeader';
 import ImportArtistRowConnector from './ImportArtistRowConnector';
 
@@ -110,15 +111,20 @@ class ImportArtistTable extends Component {
     const item = items[rowIndex];
 
     return (
-      <ImportArtistRowConnector
+      <VirtualTableRow
         key={key}
         style={style}
-        rootFolderId={rootFolderId}
-        showMetadataProfile={showMetadataProfile}
-        isSelected={selectedState[item.id]}
-        onSelectedChange={onSelectedChange}
-        id={item.id}
-      />
+      >
+        <ImportArtistRowConnector
+          key={item.id}
+          style={style}
+          rootFolderId={rootFolderId}
+          showMetadataProfile={showMetadataProfile}
+          isSelected={selectedState[item.id]}
+          onSelectedChange={onSelectedChange}
+          id={item.id}
+        />
+      </VirtualTableRow>
     );
   }
 
@@ -131,12 +137,10 @@ class ImportArtistTable extends Component {
       allSelected,
       allUnselected,
       isSmallScreen,
-      contentBody,
       showMetadataProfile,
-      scrollTop,
+      scroller,
       selectedState,
-      onSelectAllChange,
-      onScroll
+      onSelectAllChange
     } = this.props;
 
     if (!items.length) {
@@ -146,10 +150,9 @@ class ImportArtistTable extends Component {
     return (
       <VirtualTable
         items={items}
-        contentBody={contentBody}
         isSmallScreen={isSmallScreen}
+        scroller={scroller}
         rowHeight={52}
-        scrollTop={scrollTop}
         overscanRowCount={2}
         rowRenderer={this.rowRenderer}
         header={
@@ -161,7 +164,6 @@ class ImportArtistTable extends Component {
           />
         }
         selectedState={selectedState}
-        onScroll={onScroll}
       />
     );
   }
@@ -180,15 +182,14 @@ ImportArtistTable.propTypes = {
   selectedState: PropTypes.object.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
   allArtists: PropTypes.arrayOf(PropTypes.object),
-  contentBody: PropTypes.object.isRequired,
+  scroller: PropTypes.instanceOf(Element).isRequired,
   showMetadataProfile: PropTypes.bool.isRequired,
   scrollTop: PropTypes.number.isRequired,
   onSelectAllChange: PropTypes.func.isRequired,
   onSelectedChange: PropTypes.func.isRequired,
   onRemoveSelectedStateItem: PropTypes.func.isRequired,
   onArtistLookup: PropTypes.func.isRequired,
-  onSetImportArtistValue: PropTypes.func.isRequired,
-  onScroll: PropTypes.func.isRequired
+  onSetImportArtistValue: PropTypes.func.isRequired
 };
 
 export default ImportArtistTable;