xref: /MusicFree/src/components/panels/index.tsx (revision 2aa881935ca35b8fb1abc4206e0dc35149231456) 
1import React, {useEffect, useRef} from 'react';
2import {BackHandler, NativeEventSubscription} from 'react-native';
3import {Portal} from 'react-native-paper';
4import panels from './types';
5import usePanel, {panelInfoStore} from './usePanel';
6
7function Panels() {
8    const {unmountPanel} = usePanel();
9    const panelInfoState = panelInfoStore.useValue();
10
11    const Component = panelInfoState.name ? panels[panelInfoState.name] : null;
12
13    const backHandlerRef = useRef<NativeEventSubscription>();
14
15    useEffect(() => {
16        if (backHandlerRef.current) {
17            backHandlerRef.current?.remove();
18            backHandlerRef.current = undefined;
19        }
20        if (panelInfoState.name) {
21            backHandlerRef.current = BackHandler.addEventListener(
22                'hardwareBackPress',
23                () => {
24                    unmountPanel();
25                    return true;
26                },
27            );
28        }
29        return () => {
30            if (backHandlerRef.current) {
31                backHandlerRef.current?.remove();
32                backHandlerRef.current = undefined;
33            }
34        };
35    }, [panelInfoState]);
36
37    return (
38        <Portal>
39            {Component ? (
40                <Component {...(panelInfoState.payload ?? {})} />
41            ) : null}
42        </Portal>
43    );
44}
45
46export default React.memo(Panels, () => true);
47