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

Merge remote-tracking branch 'origin/main' into sync-feat-74

Browse Source
This commit is contained in:
Liam DeBeasi
2023-09-11 09:23:16 -04:00
parent 19f3bb23fd e0542a7867
commit 474308618d
100 changed files with 709 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/react/src/components/IonOverlayManager.tsx
View File

@ -40,7 +40,6 @@ export const IonOverlayManager: React.FC<IonOverlayManagerProps> = ({ onAddOverl
*/
const [overlays, setOverlays] = useState<OverlaysList>({});
const overlaysRef = useRef<OverlaysList>({});
overlaysRef.current = overlays;
useEffect(() => {
/* Setup the callbacks that get called from <IonApp /> */
@ -51,12 +50,50 @@ export const IonOverlayManager: React.FC<IonOverlayManagerProps> = ({ onAddOverl
const addOverlay = (id: string, component: ReactComponentOrElement, containerElement: HTMLDivElement) => {
const newOverlays = { ...overlaysRef.current };
newOverlays[id] = { component, containerElement };
/**
* In order for this function to use the latest data
* we need to update the ref synchronously.
* However, updating a ref does not cause a re-render
* which is why we still update the state.
*
* Note that updating the ref in the body
* of IonOverlayManager is not sufficient
* because that relies on overlaysRef being
* updated as part of React's render loop. State updates
* are batched, so updating the state twice in quick succession does
* not necessarily result in 2 separate render calls.
* This means if two modals are added one after the other,
* the first modal will not have been added to
* overlaysRef since React has not re-rendered yet.
* More info: https://react.dev/reference/react/useState#setstate-caveats
*/
overlaysRef.current = newOverlays;
setOverlays(newOverlays);
};
const removeOverlay = (id: string) => {
const newOverlays = { ...overlaysRef.current };
delete newOverlays[id];
/**
* In order for this function to use the latest data
* we need to update the ref synchronously.
* However, updating a ref does not cause a re-render
* which is why we still update the state.
*
* Note that updating the ref in the body
* of IonOverlayManager is not sufficient
* because that relies on overlaysRef being
* updated as part of React's render loop. State updates
* are batched, so updating the state twice in quick succession does
* not necessarily result in 2 separate render calls.
* This means if two modals are added one after the other,
* the first modal will not have been added to
* overlaysRef since React has not re-rendered yet.
* More info: https://react.dev/reference/react/useState#setstate-caveats
*/
overlaysRef.current = newOverlays;
setOverlays(newOverlays);
};