@mpxjs/webpack-plugin
Version:
mpx compile core
41 lines (40 loc) • 1.41 kB
JSX
import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
import { View, StyleSheet } from 'react-native';
const _PortalManager = forwardRef((props, ref) => {
const [state, setState] = useState({
portals: []
});
const mount = useCallback((key, children) => {
setState((prevState) => ({
portals: [...prevState.portals, { key, children }]
}));
}, [state]);
const update = useCallback((key, children) => {
setState((prevState) => ({
portals: prevState.portals.map((item) => {
if (item.key === key) {
return Object.assign({}, item, { children });
}
return item;
})
}));
}, [state]);
const unmount = useCallback((key) => {
setState((prevState) => ({
portals: prevState.portals.filter((item) => item.key !== key)
}));
}, []);
useImperativeHandle(ref, () => ({
mount,
update,
unmount,
portals: state.portals
}));
return (<>
{state.portals.map(({ key, children }, i) => (<View key={key} collapsable={false} // Need collapsable=false here to clip the elevations
style={[StyleSheet.absoluteFill, { zIndex: 1000 + i, pointerEvents: 'box-none' }]}>
{children}
</View>))}
</>);
});
export default _PortalManager;