diff options
Diffstat (limited to 'packages/website/ts/components/inputs')
3 files changed, 21 insertions, 15 deletions
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index 68b77cfc3..72a246280 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -14,6 +14,7 @@ interface BalanceBoundedInputProps { amount?: BigNumber; hintText?: string; onChange: ValidatedBigNumberCallback; + onErrorMsgChange?: (errorMsg: React.ReactNode) => void; shouldShowIncompleteErrs?: boolean; shouldCheckBalance: boolean; validate?: (amount: BigNumber) => InputErrMsg; @@ -36,6 +37,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp isDisabled: false, shouldShowErrs: true, hintText: 'amount', + onErrorMsgChange: utils.noop, shouldShowUnderline: true, }; constructor(props: BalanceBoundedInputProps) { @@ -63,17 +65,11 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp } if (shouldResetState) { const amountString = nextProps.amount.toString(); - this.setState({ - errMsg: this._validate(amountString, nextProps.balance), - amountString, - }); + this._setAmountState(amountString, nextProps.balance); } } else if (isCurrentAmountNumeric) { const amountString = ''; - this.setState({ - errMsg: this._validate(amountString, nextProps.balance), - amountString, - }); + this._setAmountState(amountString, nextProps.balance); } } public render(): React.ReactNode { @@ -105,14 +101,11 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp ); } private _onValueChange(e: any, amountString: string): void { - const errMsg = this._validate(amountString, this.props.balance); - this.setState( - { - amountString, - errMsg, - }, + this._setAmountState( + amountString, + this.props.balance, () => { - const isValid = _.isUndefined(errMsg); + const isValid = _.isUndefined(this._validate(amountString, this.props.balance)); if (utils.isNumeric(amountString) && !_.includes(amountString, '-')) { this.props.onChange(isValid, new BigNumber(amountString)); } else { @@ -161,4 +154,13 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp ); } } + + private _setAmountState(amount: string, balance: BigNumber, callback: () => void = utils.noop): void { + const errorMsg = this._validate(amount, balance); + this.props.onErrorMsgChange(errorMsg); + this.setState({ + amountString: amount, + errMsg: this._validate(amount, balance), + }, callback); + } } diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index c3822a80b..862ba25f8 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -12,6 +12,7 @@ interface EthAmountInputProps { amount?: BigNumber; hintText?: string; onChange: ValidatedBigNumberCallback; + onErrorMsgChange?: (errorMsg: React.ReactNode) => void; shouldShowIncompleteErrs: boolean; onVisitBalancesPageClick?: () => void; shouldCheckBalance: boolean; @@ -40,6 +41,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou balance={this.props.balance} amount={amount} onChange={this._onChange.bind(this)} + onErrorMsgChange={this.props.onErrorMsgChange} shouldCheckBalance={this.props.shouldCheckBalance} shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs} onVisitBalancesPageClick={this.props.onVisitBalancesPageClick} diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index 9a74bdd51..3ff2c5440 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -20,6 +20,7 @@ interface TokenAmountInputProps { shouldCheckBalance: boolean; shouldCheckAllowance: boolean; onChange: ValidatedBigNumberCallback; + onErrorMsgChange?: (errorMsg: React.ReactNode) => void; onVisitBalancesPageClick?: () => void; lastForceTokenStateRefetch: number; shouldShowErrs?: boolean; @@ -85,6 +86,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok amount={amount} balance={ZeroEx.toUnitAmount(this.state.balance, this.props.token.decimals)} onChange={this._onChange.bind(this)} + onErrorMsgChange={this.props.onErrorMsgChange} validate={this._validate.bind(this)} shouldCheckBalance={this.props.shouldCheckBalance} shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs} |