Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Don't rerender all cells each scroll

This commit is contained in:
ta264 2020-01-05 21:45:01 +00:00 committed by Mark McDowall
parent 108f6fe393
commit 466d4fba9e
10 changed files with 197 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/Series/Index/Overview/SeriesIndexOverview.css
View File

@ -1,13 +1,5 @@
$hoverScale: 1.05;
.container {
&:hover {
.content {
background-color: $tableRowHoverBackgroundColor;
}
}
}
.content {
display: flex;
flex-grow: 1;

4
frontend/src/Series/Index/Overview/SeriesIndexOverview.js
View File

@ -70,7 +70,6 @@ class SeriesIndexOverview extends Component {
render() {
const {
style,
id,
title,
overview,
@ -121,7 +120,7 @@ class SeriesIndexOverview 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}>
@ -242,7 +241,6 @@ class SeriesIndexOverview extends Component {
}
SeriesIndexOverview.propTypes = {
style: PropTypes.object.isRequired,
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
overview: PropTypes.string.isRequired,

8
frontend/src/Series/Index/Overview/SeriesIndexOverviews.css
View File

@ -1,3 +1,11 @@
.grid {
flex: 1 0 auto;
}
.container {
&:hover {
.content {
background-color: $tableRowHoverBackgroundColor;
}
}
}

9
frontend/src/Series/Index/Overview/SeriesIndexOverviews.js
View File

@ -185,8 +185,13 @@ class SeriesIndexOverviews extends Component {
}
return (
<SeriesIndexItemConnector
<div
className={styles.container}
key={key}
style={style}
>
<SeriesIndexItemConnector
key={series.id}
component={SeriesIndexOverview}
sortKey={sortKey}
posterWidth={posterWidth}
@ -203,6 +208,7 @@ class SeriesIndexOverviews extends Component {
languageProfileId={series.languageProfileId}
qualityProfileId={series.qualityProfileId}
/>
</div>
);
}
@ -258,6 +264,7 @@ class SeriesIndexOverviews extends Component {
overscanRowCount={2}
cellRenderer={this.cellRenderer}
onSectionRendered={this.onSectionRendered}
isScrollingOptOut={true}
/>
);
}

4
frontend/src/Series/Index/Posters/SeriesIndexPoster.css
View File

@ -1,9 +1,5 @@
$hoverScale: 1.05;
.container {
padding: 10px;
}
.content {
transition: all 200ms ease-in;

4
frontend/src/Series/Index/Posters/SeriesIndexPoster.js
View File

@ -67,7 +67,6 @@ class SeriesIndexPoster extends Component {
render() {
const {
style,
id,
title,
monitored,
@ -115,7 +114,6 @@ class SeriesIndexPoster extends Component {
};
return (
<div className={styles.container} style={style}>
<div className={styles.content}>
<div className={styles.posterContainer}>
<Label className={styles.controls}>
@ -249,13 +247,11 @@ class SeriesIndexPoster extends Component {
onModalClose={this.onDeleteSeriesModalClose}
/>
</div>
</div>
);
}
}
SeriesIndexPoster.propTypes = {
style: PropTypes.object.isRequired,
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
monitored: PropTypes.bool.isRequired,

4
frontend/src/Series/Index/Posters/SeriesIndexPosters.css
View File

@ -1,3 +1,7 @@
.grid {
flex: 1 0 auto;
}
.container {
padding: 10px;
}

9
frontend/src/Series/Index/Posters/SeriesIndexPosters.js
View File

@ -220,8 +220,13 @@ class SeriesIndexPosters extends Component {
}
return (
<SeriesIndexItemConnector
<div
className={styles.container}
key={key}
style={style}
>
<SeriesIndexItemConnector
key={series.id}
component={SeriesIndexPoster}
sortKey={sortKey}
posterWidth={posterWidth}
@ -238,6 +243,7 @@ class SeriesIndexPosters extends Component {
languageProfileId={series.languageProfileId}
qualityProfileId={series.qualityProfileId}
/>
</div>
);
}
@ -297,6 +303,7 @@ class SeriesIndexPosters extends Component {
overscanRowCount={2}
cellRenderer={this.cellRenderer}
onSectionRendered={this.onSectionRendered}
isScrollingOptOut={true}
/>
);
}

7
frontend/src/Series/Index/Table/SeriesIndexRow.js
View File

@ -12,7 +12,6 @@ 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 SeriesTitleLink from 'Series/SeriesTitleLink';
@ -79,7 +78,6 @@ class SeriesIndexRow extends Component {
render() {
const {
style,
id,
monitored,
status,
@ -126,7 +124,7 @@ class SeriesIndexRow extends Component {
} = this.state;
return (
<VirtualTableRow style={style}>
<>
{
columns.map((column) => {
const {
@ -494,13 +492,12 @@ class SeriesIndexRow extends Component {
seriesId={id}
onModalClose={this.onDeleteSeriesModalClose}
/>
</VirtualTableRow>
</>
);
}
}
SeriesIndexRow.propTypes = {
style: PropTypes.object.isRequired,
id: PropTypes.number.isRequired,
monitored: PropTypes.bool.isRequired,
status: PropTypes.string.isRequired,

10
frontend/src/Series/Index/Table/SeriesIndexTable.js
View File

@ -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 SeriesIndexItemConnector from 'Series/Index/SeriesIndexItemConnector';
import SeriesIndexHeaderConnector from './SeriesIndexHeaderConnector';
import SeriesIndexRow from './SeriesIndexRow';
@ -50,16 +51,20 @@ class SeriesIndexTable extends Component {
const series = items[rowIndex];
return (
<SeriesIndexItemConnector
<VirtualTableRow
key={key}
component={SeriesIndexRow}
style={style}
>
<SeriesIndexItemConnector
key={series.id}
component={SeriesIndexRow}
columns={columns}
seriesId={series.id}
languageProfileId={series.languageProfileId}
qualityProfileId={series.qualityProfileId}
showBanners={showBanners}
/>
</VirtualTableRow>
);
}
@ -108,6 +113,7 @@ class SeriesIndexTable extends Component {
sortDirection={sortDirection}
onRender={onRender}
onScroll={onScroll}
isScrollingOptOut={true}
/>
);
}