forked from facebook/react
/
Components.js
54 lines (49 loc) · 1.83 KB
/
Components.js
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
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import * as React from 'react';
import {Suspense} from 'react';
import Tree from './Tree';
import SelectedElement from './SelectedElement';
import {InspectedElementContextController} from './InspectedElementContext';
import {NativeStyleContextController} from './NativeStyleEditor/context';
import {OwnersListContextController} from './OwnersListContext';
import portaledContent from '../portaledContent';
import {ModalDialog} from '../ModalDialog';
import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
import styles from './Components.css';
function Components(_: {||}) {
// TODO Flex wrappers below should be user resizable.
return (
<SettingsModalContextController>
<OwnersListContextController>
<InspectedElementContextController>
<div className={styles.Components}>
<div className={styles.TreeWrapper}>
<Tree />
</div>
<div className={styles.SelectedElementWrapper}>
<NativeStyleContextController>
<Suspense fallback={<Loading />}>
<SelectedElement />
</Suspense>
</NativeStyleContextController>
</div>
<ModalDialog />
<SettingsModal />
</div>
</InspectedElementContextController>
</OwnersListContextController>
</SettingsModalContextController>
);
}
function Loading() {
return <div className={styles.Loading}>Loading...</div>;
}
export default portaledContent(Components);