fix(react): onIonTabsWillChange and onIonTabsDidChange event handlers are now properly bound to IonTabs (#22233)

Co-authored-by: Hansu Kim <khsily@users.noreply.github.com>
This commit is contained in:
Ely Lucas
2021-02-11 12:50:07 -07:00
committed by GitHub
parent c05476b88e
commit b064fdebef

View File

@ -85,6 +85,7 @@ export class IonTabs extends React.Component<Props> {
render() { render() {
let outlet: React.ReactElement<{}> | undefined; let outlet: React.ReactElement<{}> | undefined;
let tabBar: React.ReactElement | undefined; let tabBar: React.ReactElement | undefined;
const { className, onIonTabsDidChange, onIonTabsWillChange, ...props } = this.props;
const children = const children =
typeof this.props.children === 'function' typeof this.props.children === 'function'
@ -101,7 +102,7 @@ export class IonTabs extends React.Component<Props> {
outlet = child.props.children[0]; outlet = child.props.children[0];
} }
if (child.type === IonTabBar || child.type.isTabBar) { if (child.type === IonTabBar || child.type.isTabBar) {
const { onIonTabsDidChange, onIonTabsWillChange } = this.props;
tabBar = React.cloneElement(child, { tabBar = React.cloneElement(child, {
onIonTabsDidChange, onIonTabsDidChange,
onIonTabsWillChange, onIonTabsWillChange,
@ -111,7 +112,7 @@ export class IonTabs extends React.Component<Props> {
child.type === Fragment && child.type === Fragment &&
(child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar) (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar)
) { ) {
const { onIonTabsDidChange, onIonTabsWillChange } = this.props;
tabBar = React.cloneElement(child.props.children[1], { tabBar = React.cloneElement(child.props.children[1], {
onIonTabsDidChange, onIonTabsDidChange,
onIonTabsWillChange, onIonTabsWillChange,
@ -127,8 +128,6 @@ export class IonTabs extends React.Component<Props> {
throw new Error('IonTabs needs a IonTabBar'); throw new Error('IonTabs needs a IonTabBar');
} }
const { className, ...props } = this.props;
return ( return (
<IonTabsContext.Provider value={this.ionTabContextState}> <IonTabsContext.Provider value={this.ionTabContextState}>
{this.context.hasIonicRouter() ? ( {this.context.hasIonicRouter() ? (