fix(react): improve component compatibility with preact (#24132)

resolves #23516
This commit is contained in:
Liam DeBeasi
2021-11-03 09:25:08 -04:00
committed by GitHub
parent ff25ac14fa
commit 15fc293d75
5 changed files with 182 additions and 180 deletions

View File

@ -95,6 +95,7 @@ export const config: Config = {
'ion-popover',
'ion-toast',
'ion-app',
'ion-icon'
]
}),

View File

@ -13,7 +13,8 @@ type Props = LocalJSX.IonApp &
ref?: React.Ref<HTMLIonAppElement>;
};
export class IonApp extends React.Component<Props> {
export const IonApp = /*@__PURE__*/ (() =>
class extends React.Component<Props> {
addOverlayCallback?: (id: string, overlay: any, containerElement: HTMLDivElement) => void;
removeOverlayCallback?: (id: string) => void;
@ -60,4 +61,4 @@ export class IonApp extends React.Component<Props> {
static get displayName() {
return 'IonApp';
}
}
})();

View File

@ -12,7 +12,8 @@ type Props = LocalJSX.IonTabButton &
onClick?: (e: any) => void;
};
export class IonTabButton extends React.Component<Props> {
export const IonTabButton = /*@__PURE__*/ (() =>
class extends React.Component<Props> {
constructor(props: Props) {
super(props);
this.handleIonTabButtonClick = this.handleIonTabButtonClick.bind(this);
@ -45,4 +46,4 @@ export class IonTabButton extends React.Component<Props> {
static get displayName() {
return 'IonTabButton';
}
}
})();

View File

@ -56,7 +56,8 @@ const tabsInner: React.CSSProperties = {
contain: 'layout size style',
};
export class IonTabs extends React.Component<Props> {
export const IonTabs = /*@__PURE__*/ (() =>
class extends React.Component<Props> {
context!: React.ContextType<typeof NavContext>;
routerOutletRef: React.Ref<HTMLIonRouterOutletElement> = React.createRef();
selectTabHandler?: (tag: string) => boolean;
@ -177,4 +178,4 @@ export class IonTabs extends React.Component<Props> {
static get contextType() {
return NavContext;
}
}
})();

View File

@ -7,7 +7,6 @@ import type { JSX } from '@ionic/core/components';
import { IonAccordion as IonAccordionCmp } from '@ionic/core/components/ion-accordion.js';
import { IonAccordionGroup as IonAccordionGroupCmp } from '@ionic/core/components/ion-accordion-group.js';
import { IonApp as IonAppCmp } from '@ionic/core/components/ion-app.js';
import { IonAvatar as IonAvatarCmp } from '@ionic/core/components/ion-avatar.js';
import { IonBackdrop as IonBackdropCmp } from '@ionic/core/components/ion-backdrop.js';
import { IonBadge as IonBadgeCmp } from '@ionic/core/components/ion-badge.js';
@ -76,7 +75,6 @@ import { IonVirtualScroll as IonVirtualScrollCmp } from '@ionic/core/components/
export const IonAccordion = /*@__PURE__*/createReactComponent<JSX.IonAccordion, HTMLIonAccordionElement>('ion-accordion', undefined, undefined, IonAccordionCmp);
export const IonAccordionGroup = /*@__PURE__*/createReactComponent<JSX.IonAccordionGroup, HTMLIonAccordionGroupElement>('ion-accordion-group', undefined, undefined, IonAccordionGroupCmp);
export const IonApp = /*@__PURE__*/createReactComponent<JSX.IonApp, HTMLIonAppElement>('ion-app', undefined, undefined, IonAppCmp);
export const IonAvatar = /*@__PURE__*/createReactComponent<JSX.IonAvatar, HTMLIonAvatarElement>('ion-avatar', undefined, undefined, IonAvatarCmp);
export const IonBackdrop = /*@__PURE__*/createReactComponent<JSX.IonBackdrop, HTMLIonBackdropElement>('ion-backdrop', undefined, undefined, IonBackdropCmp);
export const IonBadge = /*@__PURE__*/createReactComponent<JSX.IonBadge, HTMLIonBadgeElement>('ion-badge', undefined, undefined, IonBadgeCmp);