diff --git a/src/scss/sprites.scss b/src/scss/sprites.scss index ae66d1c..4c20221 100644 --- a/src/scss/sprites.scss +++ b/src/scss/sprites.scss @@ -16,6 +16,7 @@ $scale: 4; // sprites from https://pokemondb.net/sprites // alolan sprites from https://www.pokecommunity.com/showthread.php?t=368703 // TODO: check and update from https://github.com/ZeChrales/PogoAssets/tree/master/pixels +// TODO: add missing forms from https://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_with_form_differences#In_other_languages .pokemon-001, .pokemon-002, .pokemon-003, diff --git a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx index 8e12203..0728aa1 100644 --- a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx +++ b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx @@ -236,7 +236,7 @@ export class PokemonExplorer extends React.Component

No.{ dex }

{ leaguePokemon.form && -
{ leaguePokemon.form.toLowerCase().replace('_', ' ') } Forme
+
{ leaguePokemon.form.toLowerCase().replace('_', ' ') } Form
}
{ type1 } diff --git a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx index 9074585..f4a2717 100644 --- a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx +++ b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx @@ -77,14 +77,22 @@ export class PokemonSelectList extends React.Component - +
+ + { this.props.filterTerm !== '' && + + } +
{ listLength > 0 && { pokemon.name } #{ dex } { pokemon.form && - { pokemon.form.toLowerCase().replace('_', ' ') } Forme + { pokemon.form.toLowerCase().replace('_', ' ') } Form } ); @@ -171,4 +179,13 @@ export class PokemonSelectList extends React.Component { + this.props.handleChangeFilter('') + .then(() => { + if (this.listRef.current !== null) { + this.listRef.current.resetAfterIndex(0, true); + } + }); + } } diff --git a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss index 206252a..47161fe 100644 --- a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss +++ b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss @@ -36,9 +36,20 @@ } } +.filterWrapper { + position: relative; + + :global(.close) { + position: absolute; + top: 1em; + right: 1em; + } +} + .filterInput { margin-left: 0; margin-right: 0; + padding-right: 3em; } .dex, diff --git a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts index 58e3d96..b85a327 100644 --- a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts +++ b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts @@ -4,6 +4,7 @@ export const dex: string; export const emptyList: string; export const emptyState: string; export const filterInput: string; +export const filterWrapper: string; export const form: string; export const leftPanel: string; export const listWrapper: string;