diff options
author | 2022-06-27 18:21:31 +0200 | |
---|---|---|
committer | 2022-06-27 17:21:31 +0100 | |
commit | 0bf13689d53bd493fb4d0a4213c1801013b5aa8a (patch) | |
tree | 2b5ae44e4f1aa73b49c011954ff1cb47e3959bad /src/containers/settings/SettingsWindow.tsx | |
parent | chore: recommend specific vscode extensions to setup development [skip ci] (#... (diff) | |
download | ferdium-app-0bf13689d53bd493fb4d0a4213c1801013b5aa8a.tar.gz ferdium-app-0bf13689d53bd493fb4d0a4213c1801013b5aa8a.tar.zst ferdium-app-0bf13689d53bd493fb4d0a4213c1801013b5aa8a.zip |
chore: transform containers/settings from js to tsx (#384)
Diffstat (limited to 'src/containers/settings/SettingsWindow.tsx')
-rw-r--r-- | src/containers/settings/SettingsWindow.tsx | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/src/containers/settings/SettingsWindow.tsx b/src/containers/settings/SettingsWindow.tsx new file mode 100644 index 000000000..fb1e2fd2d --- /dev/null +++ b/src/containers/settings/SettingsWindow.tsx | |||
@@ -0,0 +1,58 @@ | |||
1 | import { Component, ReactNode, ReactPortal } from 'react'; | ||
2 | import ReactDOM from 'react-dom'; | ||
3 | import { observer, inject } from 'mobx-react'; | ||
4 | |||
5 | import { StoresProps } from 'src/@types/ferdium-components.types'; | ||
6 | |||
7 | import Layout from '../../components/settings/SettingsLayout'; | ||
8 | import Navigation from '../../components/settings/navigation/SettingsNavigation'; | ||
9 | import ErrorBoundary from '../../components/util/ErrorBoundary'; | ||
10 | import { workspaceStore } from '../../features/workspaces'; | ||
11 | |||
12 | interface SettingsContainerProps extends StoresProps { | ||
13 | children: ReactNode; | ||
14 | } | ||
15 | |||
16 | class SettingsContainer extends Component<SettingsContainerProps> { | ||
17 | portalRoot: any; | ||
18 | |||
19 | el: HTMLDivElement; | ||
20 | |||
21 | constructor(props: SettingsContainerProps) { | ||
22 | super(props); | ||
23 | |||
24 | this.portalRoot = document.querySelector('#portalContainer'); | ||
25 | this.el = document.createElement('div'); | ||
26 | } | ||
27 | |||
28 | componentDidMount(): void { | ||
29 | this.portalRoot.append(this.el); | ||
30 | } | ||
31 | |||
32 | componentWillUnmount(): void { | ||
33 | this.el.remove(); | ||
34 | } | ||
35 | |||
36 | render(): ReactPortal { | ||
37 | const { children, stores } = this.props; | ||
38 | const { closeSettings } = this.props.actions.ui; | ||
39 | |||
40 | const navigation = ( | ||
41 | <Navigation | ||
42 | serviceCount={stores.services.all.length} | ||
43 | workspaceCount={workspaceStore.workspaces.length} | ||
44 | /> | ||
45 | ); | ||
46 | |||
47 | return ReactDOM.createPortal( | ||
48 | <ErrorBoundary> | ||
49 | <Layout navigation={navigation} closeSettings={closeSettings}> | ||
50 | {children} | ||
51 | </Layout> | ||
52 | </ErrorBoundary>, | ||
53 | this.el, | ||
54 | ); | ||
55 | } | ||
56 | } | ||
57 | |||
58 | export default inject('stores', 'actions')(observer(SettingsContainer)); | ||