Fixed: Don't repeatedly re-render cells

pull/1689/head
ta264 5 years ago committed by Qstick
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…
Cancel
Save