feat(react): fixing support for react 19, adding test app for react 19 (#30217)

Issue number: resolves #29991

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
This commit is contained in:
Shane
2025-03-03 08:50:05 -08:00
committed by GitHub
parent 521d077376
commit f4941f2639
20 changed files with 11057 additions and 288 deletions

View File

@ -13,41 +13,45 @@ type Props = LocalJSX.IonTabButton &
onPointerDown?: React.PointerEventHandler<HTMLIonTabButtonElement>;
onTouchEnd?: React.TouchEventHandler<HTMLIonTabButtonElement>;
onTouchMove?: React.TouchEventHandler<HTMLIonTabButtonElement>;
children?: React.ReactNode;
};
export const IonTabButton = /*@__PURE__*/ (() =>
class extends React.Component<Props> {
constructor(props: Props) {
super(props);
this.handleIonTabButtonClick = this.handleIonTabButtonClick.bind(this);
}
export class IonTabButton extends React.Component<Props> {
shouldComponentUpdate(): boolean {
return true;
}
handleIonTabButtonClick() {
if (this.props.onClick) {
this.props.onClick(
new CustomEvent('ionTabButtonClick', {
detail: {
tab: this.props.tab,
href: this.props.href,
routeOptions: this.props.routerOptions,
},
})
);
}
}
constructor(props: Props) {
super(props);
this.handleIonTabButtonClick = this.handleIonTabButtonClick.bind(this);
}
render() {
/**
* onClick is excluded from the props, since it has a custom
* implementation within IonTabBar.tsx. Calling onClick within this
* component would result in duplicate handler calls.
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onClick, ...rest } = this.props;
return <IonTabButtonInner onIonTabButtonClick={this.handleIonTabButtonClick} {...rest}></IonTabButtonInner>;
handleIonTabButtonClick() {
if (this.props.onClick) {
this.props.onClick(
new CustomEvent('ionTabButtonClick', {
detail: {
tab: this.props.tab,
href: this.props.href,
routeOptions: this.props.routerOptions,
},
})
);
}
}
static get displayName() {
return 'IonTabButton';
}
})();
render() {
/**
* onClick is excluded from the props, since it has a custom
* implementation within IonTabBar.tsx. Calling onClick within this
* component would result in duplicate handler calls.
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onClick, ...rest } = this.props;
return <IonTabButtonInner onIonTabButtonClick={this.handleIonTabButtonClick} {...rest}></IonTabButtonInner>;
}
static get displayName() {
return 'IonTabButton';
}
}