refactors and enhances tip modal
This commit is contained in:
parent
923fac18d2
commit
85163ad2aa
1 changed files with 25 additions and 15 deletions
|
@ -18,7 +18,7 @@ type Props = {
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
tipAmount: number,
|
tipAmount: number,
|
||||||
newTipError: string,
|
tipError: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
class WalletSendTip extends React.PureComponent<Props, State> {
|
class WalletSendTip extends React.PureComponent<Props, State> {
|
||||||
|
@ -27,9 +27,8 @@ class WalletSendTip extends React.PureComponent<Props, State> {
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
tipAmount: 0,
|
tipAmount: 0,
|
||||||
newTipError: '',
|
tipError: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
(this: any).handleSendButtonClicked = this.handleSendButtonClicked.bind(this);
|
(this: any).handleSendButtonClicked = this.handleSendButtonClicked.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -48,26 +47,32 @@ class WalletSendTip extends React.PureComponent<Props, State> {
|
||||||
|
|
||||||
handleSupportPriceChange(event: SyntheticInputEvent<*>) {
|
handleSupportPriceChange(event: SyntheticInputEvent<*>) {
|
||||||
const { balance } = this.props;
|
const { balance } = this.props;
|
||||||
|
const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
|
||||||
|
const validTipInput = regexp.test(event.target.value);
|
||||||
const tipAmount = parseFloat(event.target.value);
|
const tipAmount = parseFloat(event.target.value);
|
||||||
let newTipError;
|
let tipError;
|
||||||
if (!String(tipAmount).match(/^(\d*([.]\d{0,8})?)$/)) {
|
|
||||||
newTipError = __('Tip must be a valid number with no more than 8 decimal places');
|
if (!tipAmount) {
|
||||||
}
|
tipError = __('Tip must be a number');
|
||||||
if (tipAmount === balance) {
|
} else if (tipAmount <= 0) {
|
||||||
newTipError = __('Please decrease your tip to account for transaction fees');
|
tipError = __('Tip must be a positive number');
|
||||||
|
} else if (!validTipInput) {
|
||||||
|
tipError = __('Tip must have no more than 8 decimal places');
|
||||||
|
} else if (tipAmount === balance) {
|
||||||
|
tipError = __('Please decrease your tip to account for transaction fees');
|
||||||
} else if (tipAmount > balance) {
|
} else if (tipAmount > balance) {
|
||||||
newTipError = __('Not enough credits');
|
tipError = __('Not enough credits');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
tipAmount,
|
tipAmount,
|
||||||
newTipError,
|
tipError,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { title, isPending, uri, onCancel, balance } = this.props;
|
const { title, isPending, uri, onCancel, balance } = this.props;
|
||||||
const { tipAmount, newTipError } = this.state;
|
const { tipAmount, tipError } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -78,10 +83,15 @@ class WalletSendTip extends React.PureComponent<Props, State> {
|
||||||
</div>
|
</div>
|
||||||
<div className="card__content">
|
<div className="card__content">
|
||||||
<FormField
|
<FormField
|
||||||
label={__('Amount')}
|
label={
|
||||||
|
(tipAmount &&
|
||||||
|
tipAmount !== 0 &&
|
||||||
|
`Tip ${tipAmount.toFixed(8).replace(/\.?0+$/, '')} LBC`) ||
|
||||||
|
__('Amount')
|
||||||
|
}
|
||||||
postfix={__('LBC')}
|
postfix={__('LBC')}
|
||||||
className="input--price-amount"
|
className="input--price-amount"
|
||||||
error={newTipError}
|
error={tipError}
|
||||||
min="0"
|
min="0"
|
||||||
step="any"
|
step="any"
|
||||||
type="number"
|
type="number"
|
||||||
|
@ -98,7 +108,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
|
||||||
<Button
|
<Button
|
||||||
button="primary"
|
button="primary"
|
||||||
label={__('Send')}
|
label={__('Send')}
|
||||||
disabled={isPending || tipAmount <= 0 || tipAmount > balance || tipAmount === balance}
|
disabled={isPending || tipError}
|
||||||
onClick={this.handleSendButtonClicked}
|
onClick={this.handleSendButtonClicked}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
|
Loading…
Reference in a new issue