blob: d2cdf3eb3c1bcb6f949985deb7e4eb5744052fd2 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import { inject, observer } from 'mobx-react';
import { Component, ReactElement, ReactPortal } from 'react';
import ReactDOM from 'react-dom';
import { Outlet } from 'react-router-dom';
import { StoresProps } from '../../@types/ferdium-components.types';
import Navigation from '../../components/settings/navigation/SettingsNavigation';
import Layout from '../../components/settings/SettingsLayout';
import ErrorBoundary from '../../components/util/ErrorBoundary';
import { workspaceStore } from '../../features/workspaces';
interface IProps extends Partial<StoresProps> {}
@inject('stores', 'actions')
@observer
class SettingsContainer extends Component<IProps> {
portalRoot: HTMLElement | null;
el: HTMLDivElement;
constructor(props: IProps) {
super(props);
this.portalRoot = document.querySelector('#portalContainer');
this.el = document.createElement('div');
}
componentDidMount(): void {
if (this.portalRoot) {
this.portalRoot.append(this.el);
}
}
componentWillUnmount(): void {
this.el.remove();
}
render(): ReactPortal {
const { stores } = this.props;
const { closeSettings } = this.props.actions!.ui;
const navigation: ReactElement = (
<Navigation
serviceCount={stores!.services.all.length}
workspaceCount={workspaceStore.workspaces.length}
/>
);
return ReactDOM.createPortal(
<ErrorBoundary>
<Layout navigation={navigation} closeSettings={closeSettings}>
<Outlet />
</Layout>
</ErrorBoundary>,
this.el,
);
}
}
export default SettingsContainer;
|