Skip to content
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

Merged
merged 2 commits into from
Jul 29, 2019
Merged

refactor(money-input): use hooks #964

merged 2 commits into from
Jul 29, 2019

Conversation

montezume
Copy link
Contributor

Summary

Refactors the MoneyInput component to use react hooks.

}
}
};
}, [props.id, props.name, props.value.amount]);
Copy link
Contributor

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?

Copy link
Member

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]
Copy link
Contributor

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 => {
Copy link
Member

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={() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

@emmenko emmenko force-pushed the ml-money-input-hook branch from a029e11 to 6400aa4 Compare July 29, 2019 08:21
handleAmountBlur = () => {
const amount = this.props.value.amount.trim();
this.setState({ amountHasFocus: false });
const { onChange } = props;
Copy link
Member

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,
]);
Copy link
Member

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]
Copy link
Member

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,
]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All required hooks deps 👆

@emmenko
Copy link
Member

emmenko commented Jul 29, 2019

The VRTs now render the menuPortalZIndex prop in the description...not sure why.

image

@emmenko emmenko force-pushed the ml-money-input-hook branch from 6400aa4 to 4d41155 Compare July 29, 2019 09:17
@emmenko
Copy link
Member

emmenko commented Jul 29, 2019

FYI: the only thing blocking this is approving the VRTs. Let's wait for @montezume maybe regarding that.

@montezume
Copy link
Contributor Author

montezume commented Jul 29, 2019

@emmenko it does this because we removed a wrapper... that's why we opened #875

so I'll approve the VRTs

@montezume montezume merged commit ae737d3 into master Jul 29, 2019
@montezume montezume deleted the ml-money-input-hook branch July 29, 2019 16:32
@emmenko
Copy link
Member

emmenko commented Jul 29, 2019

Ah ok, I missed that issue I think. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants