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

scroll selected mon into view

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-08 21:19:51 -05:00
parent e50ff2ce72
commit db1b91c40f
2 changed files with 74 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
dist/main-bundle.js vendored
View File

@ -38659,27 +38659,28 @@ function (_react_1$default$Comp) {
_this.handleChangeFilter = function (event) {
_this.props.handleChangeFilter(event.currentTarget.value).then(function () {
if (_this.listRef.current !== null) {
_this.listRef.current.resetAfterIndex(0, true);
if (_this.state.listRef.current !== null) {
_this.state.listRef.current.resetAfterIndex(0, true);
}
});
};
_this.handleClickClearFilter = function () {
_this.props.handleChangeFilter('').then(function () {
if (_this.listRef.current !== null) {
_this.listRef.current.resetAfterIndex(0, true);
if (_this.state.listRef.current !== null) {
_this.state.listRef.current.resetAfterIndex(0, true);
}
});
};
_this.state = {
isListOpen: false,
listRef: react_1.default.createRef(),
dimensions: {
width: -1,
height: -1
}
};
_this.listRef = react_1.default.createRef();
_this.activatePokemonClickHandlers = new Map();
return _this;
}
@ -38733,7 +38734,7 @@ function (_react_1$default$Comp) {
return react_1.default.createElement("div", {
ref: measureRef
}, react_1.default.createElement(react_window_1.VariableSizeList, {
ref: _this2.listRef,
ref: _this2.state.listRef,
height: height,
itemKey: _this2.getListItemKey,
itemCount: listLength,
@ -38784,6 +38785,37 @@ function (_react_1$default$Comp) {
className: formCss
}, formatter_1.formatForm(pokemon.form), " Form"));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, previousState) {
var wasOpen = previousState.isListOpen;
var isOpen = nextProps.isListOpen;
var listCurrent = previousState.listRef.current;
if (isOpen && !wasOpen) {
if (listCurrent !== null) {
var pokemonIndex = -1;
nextProps.pokemonList.some(function (pokemon, index) {
if (pokemon.id === nextProps.activePokemonId && pokemon.form === nextProps.activePokemonForm) {
pokemonIndex = index;
return true;
}
return false;
});
if (pokemonIndex >= 0) {
setTimeout(function () {
return listCurrent.scrollToItem(pokemonIndex, 'center');
}, 0);
}
}
}
return {
isListOpen: isOpen && listCurrent !== null
};
}
}]);
return PokemonSelectList;

43
src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx
View File

@ -27,6 +27,8 @@ export interface IPokemonSelectListProps {
}
interface IState {
isListOpen : boolean;
listRef : React.RefObject<VariableSizeList>;
dimensions : {
width : number;
height : number;
@ -39,20 +41,47 @@ interface IRowFactory {
}
export class PokemonSelectList extends React.Component<IPokemonSelectListProps, IState> {
private listRef : React.RefObject<VariableSizeList>;
public static getDerivedStateFromProps(nextProps : IPokemonSelectListProps, previousState : IState) {
const wasOpen = previousState.isListOpen;
const isOpen = nextProps.isListOpen;
const listCurrent = previousState.listRef.current;
if (isOpen && !wasOpen) {
if (listCurrent !== null) {
let pokemonIndex : number = -1;
nextProps.pokemonList.some((pokemon, index) => {
if (pokemon.id === nextProps.activePokemonId && pokemon.form === nextProps.activePokemonForm) {
pokemonIndex = index;
return true;
}
return false;
});
if (pokemonIndex >= 0) {
setTimeout(() => listCurrent.scrollToItem(pokemonIndex, 'center'), 0);
}
}
}
return {
isListOpen: isOpen && listCurrent !== null,
};
}
private activatePokemonClickHandlers : Map<string, () => void>;
constructor(props : IPokemonSelectListProps) {
super(props);
this.state = {
isListOpen: false,
listRef: React.createRef(),
dimensions: {
width: -1,
height: -1,
}
};
this.listRef = React.createRef();
this.activatePokemonClickHandlers = new Map();
}
@ -117,7 +146,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
({ measureRef }) => (
<div ref={ measureRef }>
<VariableSizeList
ref={ this.listRef }
ref={ this.state.listRef }
height={ height }
itemKey={ this.getListItemKey }
itemCount={ listLength }
@ -215,8 +244,8 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
private readonly handleChangeFilter = (event : React.ChangeEvent<HTMLInputElement>) => {
this.props.handleChangeFilter(event.currentTarget.value)
.then(() => {
if (this.listRef.current !== null) {
this.listRef.current.resetAfterIndex(0, true);
if (this.state.listRef.current !== null) {
this.state.listRef.current.resetAfterIndex(0, true);
}
});
}
@ -224,8 +253,8 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
private readonly handleClickClearFilter = () => {
this.props.handleChangeFilter('')
.then(() => {
if (this.listRef.current !== null) {
this.listRef.current.resetAfterIndex(0, true);
if (this.state.listRef.current !== null) {
this.state.listRef.current.resetAfterIndex(0, true);
}
});
}