mirror of https://github.com/lidarr/Lidarr
Fixed: Don't repeatedly re-render cells
This commit is contained in:
parent
25e4e30520
commit
4036b2ade2
|
@ -54,7 +54,6 @@ class ArtistIndexBanner extends Component {
|
|||
|
||||
render() {
|
||||
const {
|
||||
style,
|
||||
id,
|
||||
artistName,
|
||||
monitored,
|
||||
|
@ -102,7 +101,7 @@ class ArtistIndexBanner extends Component {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container} style={style}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.bannerContainer}>
|
||||
<Label className={styles.controls}>
|
||||
|
@ -234,7 +233,6 @@ class ArtistIndexBanner extends Component {
|
|||
}
|
||||
|
||||
ArtistIndexBanner.propTypes = {
|
||||
style: PropTypes.object.isRequired,
|
||||
id: PropTypes.number.isRequired,
|
||||
artistName: PropTypes.string.isRequired,
|
||||
monitored: PropTypes.bool.isRequired,
|
||||
|
|
|
@ -219,24 +219,28 @@ class ArtistIndexBanners extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<ArtistIndexItemConnector
|
||||
key={key}
|
||||
component={ArtistIndexBanner}
|
||||
sortKey={sortKey}
|
||||
bannerWidth={bannerWidth}
|
||||
bannerHeight={bannerHeight}
|
||||
detailedProgressBar={detailedProgressBar}
|
||||
showTitle={showTitle}
|
||||
showMonitored={showMonitored}
|
||||
showQualityProfile={showQualityProfile}
|
||||
showRelativeDates={showRelativeDates}
|
||||
shortDateFormat={shortDateFormat}
|
||||
timeFormat={timeFormat}
|
||||
<div
|
||||
style={style}
|
||||
artistId={artist.id}
|
||||
qualityProfileId={artist.qualityProfileId}
|
||||
metadataProfileId={artist.metadataProfileId}
|
||||
/>
|
||||
key={key}
|
||||
>
|
||||
<ArtistIndexItemConnector
|
||||
key={artist.id}
|
||||
component={ArtistIndexBanner}
|
||||
sortKey={sortKey}
|
||||
bannerWidth={bannerWidth}
|
||||
bannerHeight={bannerHeight}
|
||||
detailedProgressBar={detailedProgressBar}
|
||||
showTitle={showTitle}
|
||||
showMonitored={showMonitored}
|
||||
showQualityProfile={showQualityProfile}
|
||||
showRelativeDates={showRelativeDates}
|
||||
shortDateFormat={shortDateFormat}
|
||||
timeFormat={timeFormat}
|
||||
artistId={artist.id}
|
||||
qualityProfileId={artist.qualityProfileId}
|
||||
metadataProfileId={artist.metadataProfileId}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -296,6 +300,7 @@ class ArtistIndexBanners extends Component {
|
|||
overscanRowCount={2}
|
||||
cellRenderer={this.cellRenderer}
|
||||
onSectionRendered={this.onSectionRendered}
|
||||
isScrollingOptOut={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -70,7 +70,6 @@ class ArtistIndexOverview extends Component {
|
|||
|
||||
render() {
|
||||
const {
|
||||
style,
|
||||
id,
|
||||
artistName,
|
||||
overview,
|
||||
|
@ -122,7 +121,7 @@ class ArtistIndexOverview extends Component {
|
|||
const overviewHeight = contentHeight - titleRowHeight;
|
||||
|
||||
return (
|
||||
<div className={styles.container} style={style}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.poster}>
|
||||
<div className={styles.posterContainer}>
|
||||
|
@ -245,7 +244,6 @@ class ArtistIndexOverview extends Component {
|
|||
}
|
||||
|
||||
ArtistIndexOverview.propTypes = {
|
||||
style: PropTypes.object.isRequired,
|
||||
id: PropTypes.number.isRequired,
|
||||
artistName: PropTypes.string.isRequired,
|
||||
overview: PropTypes.string.isRequired,
|
||||
|
|
|
@ -185,24 +185,28 @@ class ArtistIndexOverviews extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<ArtistIndexItemConnector
|
||||
<div
|
||||
key={key}
|
||||
component={ArtistIndexOverview}
|
||||
sortKey={sortKey}
|
||||
posterWidth={posterWidth}
|
||||
posterHeight={posterHeight}
|
||||
rowHeight={rowHeight}
|
||||
overviewOptions={overviewOptions}
|
||||
showRelativeDates={showRelativeDates}
|
||||
shortDateFormat={shortDateFormat}
|
||||
longDateFormat={longDateFormat}
|
||||
timeFormat={timeFormat}
|
||||
isSmallScreen={isSmallScreen}
|
||||
style={style}
|
||||
artistId={artist.id}
|
||||
qualityProfileId={artist.qualityProfileId}
|
||||
metadataProfileId={artist.metadataProfileId}
|
||||
/>
|
||||
>
|
||||
<ArtistIndexItemConnector
|
||||
key={artist.id}
|
||||
component={ArtistIndexOverview}
|
||||
sortKey={sortKey}
|
||||
posterWidth={posterWidth}
|
||||
posterHeight={posterHeight}
|
||||
rowHeight={rowHeight}
|
||||
overviewOptions={overviewOptions}
|
||||
showRelativeDates={showRelativeDates}
|
||||
shortDateFormat={shortDateFormat}
|
||||
longDateFormat={longDateFormat}
|
||||
timeFormat={timeFormat}
|
||||
isSmallScreen={isSmallScreen}
|
||||
artistId={artist.id}
|
||||
qualityProfileId={artist.qualityProfileId}
|
||||
metadataProfileId={artist.metadataProfileId}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -258,6 +262,7 @@ class ArtistIndexOverviews extends Component {
|
|||
overscanRowCount={2}
|
||||
cellRenderer={this.cellRenderer}
|
||||
onSectionRendered={this.onSectionRendered}
|
||||
isScrollingOptOut={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -67,7 +67,6 @@ class ArtistIndexPoster extends Component {
|
|||
|
||||
render() {
|
||||
const {
|
||||
style,
|
||||
id,
|
||||
artistName,
|
||||
monitored,
|
||||
|
@ -116,7 +115,7 @@ class ArtistIndexPoster extends Component {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container} style={style}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.posterContainer}>
|
||||
<Label className={styles.controls}>
|
||||
|
@ -257,7 +256,6 @@ class ArtistIndexPoster extends Component {
|
|||
}
|
||||
|
||||
ArtistIndexPoster.propTypes = {
|
||||
style: PropTypes.object.isRequired,
|
||||
id: PropTypes.number.isRequired,
|
||||
artistName: PropTypes.string.isRequired,
|
||||
monitored: PropTypes.bool.isRequired,
|
||||
|
|
|
@ -212,31 +212,36 @@ class ArtistIndexPosters extends Component {
|
|||
showQualityProfile
|
||||
} = posterOptions;
|
||||
|
||||
const artist = items[rowIndex * columnCount + columnIndex];
|
||||
const artistIdx = rowIndex * columnCount + columnIndex;
|
||||
const artist = items[artistIdx];
|
||||
|
||||
if (!artist) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ArtistIndexItemConnector
|
||||
<div
|
||||
key={key}
|
||||
component={ArtistIndexPoster}
|
||||
sortKey={sortKey}
|
||||
posterWidth={posterWidth}
|
||||
posterHeight={posterHeight}
|
||||
detailedProgressBar={detailedProgressBar}
|
||||
showTitle={showTitle}
|
||||
showMonitored={showMonitored}
|
||||
showQualityProfile={showQualityProfile}
|
||||
showRelativeDates={showRelativeDates}
|
||||
shortDateFormat={shortDateFormat}
|
||||
timeFormat={timeFormat}
|
||||
style={style}
|
||||
artistId={artist.id}
|
||||
qualityProfileId={artist.qualityProfileId}
|
||||
metadataProfileId={artist.metadataProfileId}
|
||||
/>
|
||||
>
|
||||
<ArtistIndexItemConnector
|
||||
key={artist.id}
|
||||
component={ArtistIndexPoster}
|
||||
sortKey={sortKey}
|
||||
posterWidth={posterWidth}
|
||||
posterHeight={posterHeight}
|
||||
detailedProgressBar={detailedProgressBar}
|
||||
showTitle={showTitle}
|
||||
showMonitored={showMonitored}
|
||||
showQualityProfile={showQualityProfile}
|
||||
showRelativeDates={showRelativeDates}
|
||||
shortDateFormat={shortDateFormat}
|
||||
timeFormat={timeFormat}
|
||||
artistId={artist.id}
|
||||
qualityProfileId={artist.qualityProfileId}
|
||||
metadataProfileId={artist.metadataProfileId}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -296,6 +301,7 @@ class ArtistIndexPosters extends Component {
|
|||
overscanRowCount={2}
|
||||
cellRenderer={this.cellRenderer}
|
||||
onSectionRendered={this.onSectionRendered}
|
||||
isScrollingOptOut={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -10,8 +10,6 @@ import Link from 'Components/Link/Link';
|
|||
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
|
||||
import ProgressBar from 'Components/ProgressBar';
|
||||
import TagListConnector from 'Components/TagListConnector';
|
||||
// import CheckInput from 'Components/Form/CheckInput';
|
||||
import VirtualTableRow from 'Components/Table/VirtualTableRow';
|
||||
import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
|
||||
import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
|
||||
import ArtistNameLink from 'Artist/ArtistNameLink';
|
||||
|
@ -79,7 +77,6 @@ class ArtistIndexRow extends Component {
|
|||
|
||||
render() {
|
||||
const {
|
||||
style,
|
||||
id,
|
||||
monitored,
|
||||
status,
|
||||
|
@ -121,7 +118,7 @@ class ArtistIndexRow extends Component {
|
|||
} = this.state;
|
||||
|
||||
return (
|
||||
<VirtualTableRow style={style}>
|
||||
<>
|
||||
{
|
||||
columns.map((column) => {
|
||||
const {
|
||||
|
@ -436,13 +433,12 @@ class ArtistIndexRow extends Component {
|
|||
artistId={id}
|
||||
onModalClose={this.onDeleteArtistModalClose}
|
||||
/>
|
||||
</VirtualTableRow>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ArtistIndexRow.propTypes = {
|
||||
style: PropTypes.object.isRequired,
|
||||
id: PropTypes.number.isRequired,
|
||||
monitored: PropTypes.bool.isRequired,
|
||||
status: PropTypes.string.isRequired,
|
||||
|
|
|
@ -3,6 +3,7 @@ import React, { Component } from 'react';
|
|||
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
|
||||
import { sortDirections } from 'Helpers/Props';
|
||||
import VirtualTable from 'Components/Table/VirtualTable';
|
||||
import VirtualTableRow from 'Components/Table/VirtualTableRow';
|
||||
import ArtistIndexItemConnector from 'Artist/Index/ArtistIndexItemConnector';
|
||||
import ArtistIndexHeaderConnector from './ArtistIndexHeaderConnector';
|
||||
import ArtistIndexRow from './ArtistIndexRow';
|
||||
|
@ -50,16 +51,21 @@ class ArtistIndexTable extends Component {
|
|||
const artist = items[rowIndex];
|
||||
|
||||
return (
|
||||
<ArtistIndexItemConnector
|
||||
<VirtualTableRow
|
||||
key={key}
|
||||
component={ArtistIndexRow}
|
||||
style={style}
|
||||
columns={columns}
|
||||
artistId={artist.id}
|
||||
qualityProfileId={artist.qualityProfileId}
|
||||
metadataProfileId={artist.metadataProfileId}
|
||||
showBanners={showBanners}
|
||||
/>
|
||||
>
|
||||
<ArtistIndexItemConnector
|
||||
key={artist.id}
|
||||
component={ArtistIndexRow}
|
||||
style={style}
|
||||
columns={columns}
|
||||
artistId={artist.id}
|
||||
qualityProfileId={artist.qualityProfileId}
|
||||
metadataProfileId={artist.metadataProfileId}
|
||||
showBanners={showBanners}
|
||||
/>
|
||||
</VirtualTableRow>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -108,6 +114,7 @@ class ArtistIndexTable extends Component {
|
|||
sortDirection={sortDirection}
|
||||
onRender={onRender}
|
||||
onScroll={onScroll}
|
||||
isScrollingOptOut={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue