-
Notifications
You must be signed in to change notification settings - Fork 26
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor(money-input): use hooks #964
Conversation
} | ||
} | ||
}; | ||
}, [props.id, props.name, props.value.amount]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we include the props.value.currencyCode
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes we should include all the props used within the hook.
PS: do we have the eslint rules for hooks enabled?
amountInputRef.current.focus(); | ||
} | ||
}, | ||
[props.id, props.name] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we add props.value.currencyCode
and props.value.amount
?
display: flex; | ||
`} | ||
data-testid="money-input-container" | ||
onBlur={event => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nitpick: our this event handler into a useCallback
options={options} | ||
placeholder="" | ||
styles={currencySelectStyles} | ||
onFocus={() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here
a029e11
to
6400aa4
Compare
handleAmountBlur = () => { | ||
const amount = this.props.value.amount.trim(); | ||
this.setState({ amountHasFocus: false }); | ||
const { onChange } = props; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same drill here again
props.name, | ||
props.value.amount, | ||
props.value.currencyCode, | ||
]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All required hooks deps 👆
}); | ||
} | ||
}, | ||
[onChange, props.id, props.name] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All required hooks deps 👆
props.name, | ||
props.value.amount, | ||
props.value.currencyCode, | ||
] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All required hooks deps 👆
6400aa4
to
4d41155
Compare
FYI: the only thing blocking this is approving the VRTs. Let's wait for @montezume maybe regarding that. |
Ah ok, I missed that issue I think. Thanks! |
Summary
Refactors the
MoneyInput
component to use react hooks.