ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

More control on the poster component update

Browse Source
This commit is contained in:
Grégoire Delattre 2017-06-02 22:26:01 +02:00
parent 643bd3aa9a
commit e2445bc287
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/public/js/components/list/poster.js
View File

@ -1,9 +1,15 @@
import React from "react" import React from "react"
export default class ListPoster extends React.PureComponent { export default class Poster extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
shouldComponentUpdate(nextProps) {
if (nextProps.index !== this.props.index) { return true }
if (nextProps.selected !== this.props.selected) { return true }
if (nextProps.data.get("poster_url") !== this.props.data.get("poster_url")) { return true }
return false;
}
render() { render() {
const selected = this.props.selected ? " thumbnail-selected" : ""; const selected = this.props.selected ? " thumbnail-selected" : "";
const imgClass = "thumbnail" + selected; const imgClass = "thumbnail" + selected;

16
src/public/js/components/list/posters.js
View File

@ -5,7 +5,7 @@ import InfiniteScroll from "react-infinite-scroller";
import ListFilter from "./filter" import ListFilter from "./filter"
import ExplorerOptions from "./explorerOptions" import ExplorerOptions from "./explorerOptions"
import ListPoster from "./poster" import Poster from "./poster"
import Loader from "../loader/loader" import Loader from "../loader/loader"
@ -58,12 +58,12 @@ export default class ListPosters extends React.PureComponent {
const listSize = elmts !== undefined ? elmts.size : 0; const listSize = elmts !== undefined ? elmts.size : 0;
const colSize = (listSize !== 0) ? "col-xs-5 col-md-8" : "col-xs-12"; const colSize = (listSize !== 0) ? "col-xs-5 col-md-8" : "col-xs-12";
// Filter the list of elements // Filter the list of elements
if (this.props.filter !== "") { if (this.props.filter !== "") {
elmts = elmts.filter((v) => fuzzy.test(this.props.filter, v.get("title")), this); elmts = elmts.filter((v) => fuzzy.test(this.props.filter, v.get("title")), this);
} else { } else {
elmts = elmts.slice(0, this.state.items); elmts = elmts.slice(0, this.state.items);
} }
// Chose when to display filter / explore options // Chose when to display filter / explore options
let displayFilter = true; let displayFilter = true;
@ -132,7 +132,7 @@ class Posters extends React.PureComponent {
const imdbId = movie.get("imdb_id"); const imdbId = movie.get("imdb_id");
const selected = (imdbId === this.props.selectedImdbId) ? true : false; const selected = (imdbId === this.props.selectedImdbId) ? true : false;
return ( return (
<ListPoster <Poster
index={index} index={index}
data={movie} data={movie}
key={imdbId} key={imdbId}