From 2f68a9e3dd7772700d2a228c26f87ef56351c327 Mon Sep 17 00:00:00 2001 From: Jeff Colombo Date: Sat, 23 Feb 2019 00:46:09 -0500 Subject: [PATCH] fix scroll to active stats --- .../PokemonExplorer/LeagueStatsList.tsx | 91 +++++++++++-------- .../styles/PokemonExplorer.scss | 2 +- .../styles/PokemonSelectList.scss | 1 + 3 files changed, 56 insertions(+), 38 deletions(-) diff --git a/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx b/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx index a7da9a2..8e02d89 100644 --- a/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx +++ b/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx @@ -13,7 +13,7 @@ import * as styles from './styles/LeagueStatsList.scss'; export interface ILeagueStatsListProps { activePokemonId : POGOProtos.Enums.PokemonId; - activePokemonForm : POGOProtos.Enums.Form | null; + activePokemonForm : POGOProtos.Enums.Form; activeIndividualValues : IIndividualValues; leagueStatsList : Array; @@ -21,7 +21,11 @@ export interface ILeagueStatsListProps { } interface IState { + activePokemonId : POGOProtos.Enums.PokemonId; + activePokemonForm : POGOProtos.Enums.Form; + listRef : React.RefObject; activeIndex : number; + hasSetActiveStats : boolean; dimensions : { width : number; height : number; @@ -34,40 +38,32 @@ interface IRowFactory { } export class LeagueStatsList extends React.Component { - private listRef : React.RefObject; - constructor(props : ILeagueStatsListProps) { - super(props); - - this.state = { + public static getDerivedStateFromProps(nextProps : ILeagueStatsListProps, previousState : IState) { + const nextState : IState = { + ...previousState, + activePokemonId: nextProps.activePokemonId, + activePokemonForm: nextProps.activePokemonForm, activeIndex: -1, - dimensions: { - width: -1, - height: -1, - } }; - - this.listRef = React.createRef(); - } - - public componentWillReceiveProps(nextProps : ILeagueStatsListProps) { const activeIvs = nextProps.activeIndividualValues; - if (nextProps.activePokemonId !== this.props.activePokemonId || nextProps.activePokemonForm !== this.props.activePokemonForm) { - this.setState({ activeIndex: -1 }); - if (this.listRef.current !== null) { - this.listRef.current.scrollToItem(0); + + if (nextProps.activePokemonId !== previousState.activePokemonId || nextProps.activePokemonForm !== previousState.activePokemonForm) { + if (previousState.listRef.current !== null) { + previousState.listRef.current.scrollToItem(0); } + } else if (activeIvs.level !== null && activeIvs.ivHp !== null && activeIvs.ivAtk !== null && activeIvs.ivDef !== null) { - let activeIndex = this.state.activeIndex; + let activeIndex = previousState.activeIndex; if (activeIndex === -1) { // there is no current index, wich means the user is entering in the IVs by hand // now we will look through the list to see if we can find a match - this.props.leagueStatsList.some((stats, index) => { + nextProps.leagueStatsList.some((stats, index) => { if (activeIvs.ivHp === stats.ivHp && activeIvs.ivAtk === stats.ivAtk && - activeIvs.ivDef === stats.ivDef + activeIvs.ivDef === stats.ivDef && + activeIvs.level === stats.level ) { - this.setState({ activeIndex: index }); activeIndex = index; return true; } @@ -75,21 +71,39 @@ export class LeagueStatsList extends React.Component -1) { - const stateStats = this.props.leagueStatsList[activeIndex]; - if (activeIvs.ivHp === stateStats.ivHp && activeIvs.ivAtk === stateStats.ivAtk && activeIvs.ivDef === stateStats.ivDef) { - // the current IVs belong to the stats at the active index, so scroll to active stats - if (this.listRef.current !== null) { - this.listRef.current.scrollToItem(activeIndex, 'center'); - } - } else { - // the current IVs have changed since we last scrolled to the active stats, so unset the active index - this.setState({ activeIndex: -1 }); + if (activeIndex > -1 && !previousState.hasSetActiveStats) { + // the current IVs belong to the stats at the active index, so scroll to active stats + if (previousState.listRef.current !== null) { + previousState.listRef.current.scrollToItem(activeIndex, 'center'); } } - } else { - this.setState({ activeIndex: -1 }); + + if (activeIndex === -1) { + if (previousState.listRef.current !== null) { + previousState.listRef.current.scrollToItem(0); + } + } + + nextState.activeIndex = activeIndex; } + + return nextState; + } + + constructor(props : ILeagueStatsListProps) { + super(props); + + this.state = { + activePokemonId: POGOProtos.Enums.PokemonId.MISSINGNO, + activePokemonForm: POGOProtos.Enums.Form.FORM_UNSET, + listRef: React.createRef(), + hasSetActiveStats: false, + activeIndex: -1, + dimensions: { + width: -1, + height: -1, + } + }; } public render() { @@ -110,7 +124,7 @@ export class LeagueStatsList extends React.Component (
{ this.props.handleActivateLeagueStats(stats); - this.setState({ activeIndex: index }); + this.setState({ + hasSetActiveStats: true, + activeIndex: index + }); }; return ( diff --git a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss index 2f8e559..cf5c397 100644 --- a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss +++ b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss @@ -110,7 +110,7 @@ } .ivsContainer { - flex: 0 2 auto; + flex: 0 999 auto; display: flex; flex-flow: column nowrap; diff --git a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss index baa6407..627a8f2 100644 --- a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss +++ b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss @@ -11,6 +11,7 @@ flex: 1 1 auto; display: flex; padding: 0; + overflow: hidden; & > * { width: 100%;