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

text input QOL improvements

Browse Source
This commit is contained in:
Jeff Colombo 2019-05-02 21:34:58 -04:00
parent 72478d68d2
commit 37ab51a6dc
3 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dist/main-bundle.js vendored
View File

File diff suppressed because one or more lines are too long

17
src/ts/app/components/PokemonExplorer/IvForm.tsx
View File

@ -3,12 +3,14 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { IIndividualValues, IndividualValueKey } from 'app/components/PokemonExplorer/types'; import { IIndividualValues, IndividualValueKey } from 'app/components/PokemonExplorer/types';
import { CaptureSource } from 'app/models/Pokemon';
import * as styles from 'app/components/PokemonExplorer/styles/IvForm.scss'; import * as styles from 'app/components/PokemonExplorer/styles/IvForm.scss';
export interface IIvFormProps { export interface IIvFormProps {
ivs : IIndividualValues; ivs : IIndividualValues;
placeholder : IIndividualValues; placeholder : IIndividualValues;
captureSource : CaptureSource;
handleChangeIndividualValue : (stat : IndividualValueKey, value : number | null) => void; handleChangeIndividualValue : (stat : IndividualValueKey, value : number | null) => void;
handleMaximizeLevel : () => void; handleMaximizeLevel : () => void;
@ -49,6 +51,7 @@ export class IvForm extends React.Component<IIvFormProps, IState> {
const { const {
ivs, ivs,
placeholder, placeholder,
captureSource,
} = this.props; } = this.props;
const idIvLevelInput = 'iv-level-input'; const idIvLevelInput = 'iv-level-input';
@ -91,9 +94,10 @@ export class IvForm extends React.Component<IIvFormProps, IState> {
type="number" type="number"
id={ idIvHpInput } id={ idIvHpInput }
className={ inputTextCss } className={ inputTextCss }
min={ this.MIN_IV } min={ Math.max(this.MIN_IV, captureSource) }
max={ this.MAX_IV } max={ this.MAX_IV }
maxLength={ 2 } maxLength={ 2 }
onFocus={ this.handleFocusField }
onChange={ this.handleChangeHp } onChange={ this.handleChangeHp }
value={ ivs.ivHp !== null ? ivs.ivHp : '' } value={ ivs.ivHp !== null ? ivs.ivHp : '' }
placeholder={ showPlaceholder ? '' + placeholder.ivHp : '' } placeholder={ showPlaceholder ? '' + placeholder.ivHp : '' }
@ -104,9 +108,10 @@ export class IvForm extends React.Component<IIvFormProps, IState> {
type="number" type="number"
id={ idIvAtkInput } id={ idIvAtkInput }
className={ inputTextCss } className={ inputTextCss }
min={ this.MIN_IV } min={ Math.max(this.MIN_IV, captureSource) }
max={ this.MAX_IV } max={ this.MAX_IV }
maxLength={ 2 } maxLength={ 2 }
onFocus={ this.handleFocusField }
onChange={ this.handleChangeAtk } onChange={ this.handleChangeAtk }
value={ ivs.ivAtk !== null ? ivs.ivAtk : '' } value={ ivs.ivAtk !== null ? ivs.ivAtk : '' }
placeholder={ showPlaceholder ? '' + placeholder.ivAtk : '' } placeholder={ showPlaceholder ? '' + placeholder.ivAtk : '' }
@ -117,9 +122,10 @@ export class IvForm extends React.Component<IIvFormProps, IState> {
type="number" type="number"
id={ idIvDefInput } id={ idIvDefInput }
className={ inputTextCss } className={ inputTextCss }
min={ this.MIN_IV } min={ Math.max(this.MIN_IV, captureSource) }
max={ this.MAX_IV } max={ this.MAX_IV }
maxLength={ 2 } maxLength={ 2 }
onFocus={ this.handleFocusField }
onChange={ this.handleChangeDef } onChange={ this.handleChangeDef }
value={ ivs.ivDef !== null ? ivs.ivDef : '' } value={ ivs.ivDef !== null ? ivs.ivDef : '' }
placeholder={ showPlaceholder ? '' + placeholder.ivDef : '' } placeholder={ showPlaceholder ? '' + placeholder.ivDef : '' }
@ -137,6 +143,7 @@ export class IvForm extends React.Component<IIvFormProps, IState> {
min={ this.MIN_LEVEL } min={ this.MIN_LEVEL }
max={ this.MAX_LEVEL } max={ this.MAX_LEVEL }
step={ 0.5 } step={ 0.5 }
onFocus={ this.handleFocusField }
onChange={ this.handleChangeLevel } onChange={ this.handleChangeLevel }
value={ ivLevel !== null ? ivLevel : '' } value={ ivLevel !== null ? ivLevel : '' }
placeholder={ showPlaceholder ? '' + placeholder.level : '' } placeholder={ showPlaceholder ? '' + placeholder.level : '' }
@ -154,6 +161,10 @@ export class IvForm extends React.Component<IIvFormProps, IState> {
)]; )];
} }
private readonly handleFocusField = (event : React.FocusEvent<HTMLInputElement>) => {
event.target.select();
}
private readonly handleChangeLevel = (event : React.ChangeEvent<HTMLInputElement>) => { private readonly handleChangeLevel = (event : React.ChangeEvent<HTMLInputElement>) => {
const raw = event.currentTarget.value; const raw = event.currentTarget.value;
const value = parseFloat(raw); const value = parseFloat(raw);

1
src/ts/app/components/PokemonExplorer/LeagueIvExplorer.tsx
View File

@ -230,6 +230,7 @@ export class LeagueIvExplorer extends React.Component<ILeagueIvExplorerProps, IS
<IvForm <IvForm
ivs={ individualValues } ivs={ individualValues }
placeholder={ leaguePokemon.pvp[activeLeague][captureSource][0] } placeholder={ leaguePokemon.pvp[activeLeague][captureSource][0] }
captureSource={ captureSource }
handleChangeIndividualValue={ handleChangeIndividualValue } handleChangeIndividualValue={ handleChangeIndividualValue }
handleMaximizeLevel={ handleMaximizeLevel } handleMaximizeLevel={ handleMaximizeLevel }
/> />