jeff/pvpokemon
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fix scroll to active stats

Browse Source
This commit is contained in:
Jeff Colombo 2019-02-23 00:46:09 -05:00
parent a8b83710b6
commit 2f68a9e3dd
3 changed files with 56 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx
View File

@ -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<IStats>;
@ -21,7 +21,11 @@ export interface ILeagueStatsListProps {
}
interface IState {
activePokemonId : POGOProtos.Enums.PokemonId;
activePokemonForm : POGOProtos.Enums.Form;
listRef : React.RefObject<FixedSizeList>;
activeIndex : number;
hasSetActiveStats : boolean;
dimensions : {
width : number;
height : number;
@ -34,40 +38,32 @@ interface IRowFactory {
}
export class LeagueStatsList extends React.Component<ILeagueStatsListProps, IState> {
private listRef : React.RefObject<FixedSizeList>;
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<ILeagueStatsListProps, ISta
});
}
if (activeIndex > -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<ILeagueStatsListProps, ISta
({ measureRef }) => (
<div ref={ measureRef }>
<FixedSizeList
ref={ this.listRef }
ref={ this.state.listRef }
height={ height }
itemCount={ this.props.leagueStatsList.length }
itemSize={ 35 }
@ -150,7 +164,10 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
);
const onClick = () => {
this.props.handleActivateLeagueStats(stats);
this.setState({ activeIndex: index });
this.setState({
hasSetActiveStats: true,
activeIndex: index
});
};
return (

2
src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss
View File

@ -110,7 +110,7 @@
}
.ivsContainer {
flex: 0 2 auto;
flex: 0 999 auto;
display: flex;
flex-flow: column nowrap;

1
src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss
View File

@ -11,6 +11,7 @@
flex: 1 1 auto;
display: flex;
padding: 0;
overflow: hidden;
& > * {
width: 100%;