javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): adding multiple subscriptions to lifecycle events, fixes #19792 (#19858)

Browse Source
This commit is contained in:
Ely Lucas
2019-11-07 11:55:47 -07:00
committed by Ely Lucas
parent 9864c17c1c
commit 3e14a57f84
2 changed files with 35 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/react/src/contexts/IonLifeCycleContext.tsx
View File

@ -22,52 +22,46 @@ export const IonLifeCycleContext = /*@__PURE__*/React.createContext<IonLifeCycle
ionViewDidLeave: () => { return; }, ionViewDidLeave: () => { return; },
}); });
type LifeCycleCallback = () => void;
export const DefaultIonLifeCycleContext = class implements IonLifeCycleContextInterface { export const DefaultIonLifeCycleContext = class implements IonLifeCycleContextInterface {
ionViewWillEnterCallback?: () => void; ionViewWillEnterCallbacks: LifeCycleCallback[] = [];
ionViewDidEnterCallback?: () => void; ionViewDidEnterCallbacks: LifeCycleCallback[] = [];
ionViewWillLeaveCallback?: () => void; ionViewWillLeaveCallbacks: LifeCycleCallback[] = [];
ionViewDidLeaveCallback?: () => void; ionViewDidLeaveCallbacks: LifeCycleCallback[] = [];
componentCanBeDestroyedCallback?: () => void; componentCanBeDestroyedCallback?: () => void;
onIonViewWillEnter(callback: () => void) { onIonViewWillEnter(callback: LifeCycleCallback) {
this.ionViewWillEnterCallback = callback; this.ionViewWillEnterCallbacks.push(callback);
} }
ionViewWillEnter() { ionViewWillEnter() {
if (this.ionViewWillEnterCallback) { this.ionViewWillEnterCallbacks.forEach(cb => cb());
this.ionViewWillEnterCallback();
}
} }
onIonViewDidEnter(callback: () => void) { onIonViewDidEnter(callback: LifeCycleCallback) {
this.ionViewDidEnterCallback = callback; this.ionViewDidEnterCallbacks.push(callback);
} }
ionViewDidEnter() { ionViewDidEnter() {
if (this.ionViewDidEnterCallback) { this.ionViewDidEnterCallbacks.forEach(cb => cb());
this.ionViewDidEnterCallback();
}
} }
onIonViewWillLeave(callback: () => void) { onIonViewWillLeave(callback: LifeCycleCallback) {
this.ionViewWillLeaveCallback = callback; this.ionViewWillLeaveCallbacks.push(callback);
} }
ionViewWillLeave() { ionViewWillLeave() {
if (this.ionViewWillLeaveCallback) { this.ionViewWillLeaveCallbacks.forEach(cb => cb());
this.ionViewWillLeaveCallback();
}
} }
onIonViewDidLeave(callback: () => void) { onIonViewDidLeave(callback: LifeCycleCallback) {
this.ionViewDidLeaveCallback = callback; this.ionViewDidLeaveCallbacks.push(callback);
} }
ionViewDidLeave() { ionViewDidLeave() {
if (this.ionViewDidLeaveCallback) { this.ionViewDidLeaveCallbacks.forEach(cb => cb());
this.ionViewDidLeaveCallback();
}
this.componentCanBeDestroyed(); this.componentCanBeDestroyed();
} }

26
packages/react/src/lifecycle/hooks.ts
View File

@ -1,23 +1,31 @@
import { useContext } from 'react'; import { useContext, useEffect } from 'react';
import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext'; import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext';
export const useIonViewWillEnter = (callback: () => void) => { export const useIonViewWillEnter = (callback: () => void) => {
const value = useContext(IonLifeCycleContext); const context = useContext(IonLifeCycleContext);
value.onIonViewWillEnter(callback); useEffect(() => {
context.onIonViewWillEnter(callback);
}, []);
}; };
export const useIonViewDidEnter = (callback: () => void) => { export const useIonViewDidEnter = (callback: () => void) => {
const value = useContext(IonLifeCycleContext); const context = useContext(IonLifeCycleContext);
value.onIonViewDidEnter(callback); useEffect(() => {
context.onIonViewDidEnter(callback);
}, []);
}; };
export const useIonViewWillLeave = (callback: () => void) => { export const useIonViewWillLeave = (callback: () => void) => {
const value = useContext(IonLifeCycleContext); const context = useContext(IonLifeCycleContext);
value.onIonViewWillLeave(callback); useEffect(() => {
context.onIonViewWillLeave(callback);
}, []);
}; };
export const useIonViewDidLeave = (callback: () => void) => { export const useIonViewDidLeave = (callback: () => void) => {
const value = useContext(IonLifeCycleContext); const context = useContext(IonLifeCycleContext);
value.onIonViewDidLeave(callback); useEffect(() => {
context.onIonViewDidLeave(callback);
}, []);
}; };