mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
export type State = {
|
|
portals: {
|
|
key: number;
|
|
children: React.ReactNode;
|
|
}[];
|
|
};
|
|
interface PortalManagerProps {
|
|
renderManagerView: (children: React.ReactNode) => React.ReactElement;
|
|
}
|
|
export interface PortalManagerState {
|
|
portals: any[];
|
|
}
|
|
/**
|
|
* Portal host is the component which actually renders all Portals.
|
|
*/
|
|
export class PortalManager extends React.PureComponent<
|
|
PortalManagerProps,
|
|
PortalManagerState
|
|
> {
|
|
state: State = {
|
|
portals: [],
|
|
};
|
|
|
|
mount = (key: number, children: React.ReactNode) => {
|
|
this.setState((state) => ({
|
|
portals: [...state.portals, { key, children }],
|
|
}));
|
|
};
|
|
|
|
update = (key: number, children: React.ReactNode) => {
|
|
this.setState((state) => ({
|
|
portals: state.portals.map((item) => {
|
|
if (item.key === key) {
|
|
return { ...item, children };
|
|
}
|
|
return item;
|
|
}),
|
|
}));
|
|
};
|
|
|
|
unmount = (key: number) => {
|
|
this.setState((state) => ({
|
|
portals: state.portals.filter((item) => item.key !== key),
|
|
}));
|
|
};
|
|
|
|
render() {
|
|
const { renderManagerView } = this.props;
|
|
return this.state.portals.map(({ key, children }, i) => (
|
|
<React.Fragment key={key}>{renderManagerView(children)}</React.Fragment>
|
|
// <View
|
|
// key={key}
|
|
// collapsable={
|
|
// false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
|
|
// }
|
|
// pointerEvents="box-none"
|
|
// style={[StyleSheet.absoluteFill, { zIndex: 1000 + i }]}
|
|
// >
|
|
// {children}
|
|
// </View>
|
|
));
|
|
}
|
|
}
|