11// @flow
22
3- import { DOM as dom , PropTypes , Component , createFactory } from "react" ;
3+ import React , { PropTypes , Component } from "react" ;
44import { connect } from "react-redux" ;
55import { bindActionCreators } from "redux" ;
66import actions from "../actions" ;
@@ -18,29 +18,21 @@ import "./App.css";
1818import "./shared/menu.css" ;
1919import "./shared/reps.css" ;
2020
21- import _SplitBox from "devtools-splitter" ;
22- const SplitBox = createFactory ( _SplitBox ) ;
21+ import SplitBox from "devtools-splitter" ;
2322
24- import _ProjectSearch from "./ProjectSearch" ;
25- const ProjectSearch = createFactory ( _ProjectSearch ) ;
23+ import ProjectSearch from "./ProjectSearch" ;
2624
27- import _PrimaryPanes from "./PrimaryPanes" ;
28- const PrimaryPanes = createFactory ( _PrimaryPanes ) ;
25+ import PrimaryPanes from "./PrimaryPanes" ;
2926
30- import _Editor from "./Editor" ;
31- const Editor = createFactory ( _Editor ) ;
27+ import Editor from "./Editor" ;
3228
33- import _SecondaryPanes from "./SecondaryPanes" ;
34- const SecondaryPanes = createFactory ( _SecondaryPanes ) ;
29+ import SecondaryPanes from "./SecondaryPanes" ;
3530
36- import _WelcomeBox from "./WelcomeBox" ;
37- const WelcomeBox = createFactory ( _WelcomeBox ) ;
31+ import WelcomeBox from "./WelcomeBox" ;
3832
39- import _EditorTabs from "./Editor/Tabs" ;
40- const EditorTabs = createFactory ( _EditorTabs ) ;
33+ import EditorTabs from "./Editor/Tabs" ;
4134
42- import _SymbolModal from "./SymbolModal" ;
43- const SymbolModal = createFactory ( _SymbolModal ) ;
35+ import SymbolModal from "./SymbolModal" ;
4436
4537type Props = {
4638 selectSource : Function ,
@@ -97,21 +89,28 @@ class App extends Component {
9789 renderEditorPane ( ) {
9890 const { startPanelCollapsed, endPanelCollapsed } = this . props ;
9991 const { horizontal, endPanelSize, startPanelSize } = this . state ;
100- return dom . div (
101- { className : "editor-pane" } ,
102- dom . div (
103- { className : "editor-container" } ,
104- EditorTabs ( {
105- startPanelCollapsed,
106- endPanelCollapsed,
107- horizontal,
108- endPanelSize,
109- startPanelSize
110- } ) ,
111- Editor ( { horizontal, startPanelSize, endPanelSize } ) ,
112- ! this . props . selectedSource ? WelcomeBox ( { horizontal } ) : null ,
113- ProjectSearch ( )
114- )
92+
93+ return (
94+ < div className = "editor-pane" >
95+ < div className = "editor-container" >
96+ < EditorTabs
97+ startPanelCollapsed = { startPanelCollapsed }
98+ endPanelCollapsed = { endPanelCollapsed }
99+ horizontal = { horizontal }
100+ startPanelSize = { startPanelSize }
101+ endPanelSize = { endPanelSize }
102+ />
103+ < Editor
104+ horizontal = { horizontal }
105+ startPanelSize = { startPanelSize }
106+ endPanelSize = { endPanelSize }
107+ />
108+ { ! this . props . selectedSource
109+ ? < WelcomeBox horizontal = { horizontal } />
110+ : null }
111+ < ProjectSearch />
112+ </ div >
113+ </ div >
115114 ) ;
116115 }
117116
@@ -121,66 +120,78 @@ class App extends Component {
121120
122121 const overflowX = endPanelCollapsed ? "hidden" : "auto" ;
123122
124- return SplitBox ( {
125- style : { width : "100vw" } ,
126- initialSize : "250px" ,
127- minSize : 10 ,
128- maxSize : "50%" ,
129- splitterSize : 1 ,
130- onResizeEnd : size => this . setState ( { startPanelSize : size } ) ,
131- startPanel : PrimaryPanes ( { horizontal } ) ,
132- startPanelCollapsed,
133- endPanel : SplitBox ( {
134- style : { overflowX } ,
135- initialSize : "300px" ,
136- minSize : 10 ,
137- maxSize : "80%" ,
138- splitterSize : 1 ,
139- onResizeEnd : size => this . setState ( { endPanelSize : size } ) ,
140- endPanelControl : true ,
141- startPanel : this . renderEditorPane ( ) ,
142- endPanel : SecondaryPanes ( { horizontal } ) ,
143- endPanelCollapsed,
144- vert : horizontal
145- } )
146- } ) ;
123+ return (
124+ < SplitBox
125+ style = { { width : "100vw" } }
126+ initialSize = "250px"
127+ minSize = { 10 }
128+ maxSize = "50%"
129+ splitterSize = { 1 }
130+ onResizeEnd = { size => this . setState ( { startPanelSize : size } ) }
131+ startPanel = { < PrimaryPanes horizontal = { horizontal } /> }
132+ startPanelCollapsed = { startPanelCollapsed }
133+ endPanel = {
134+ < SplitBox
135+ style = { { overflowX } }
136+ initialSize = "300px"
137+ minSize = { 10 }
138+ maxSize = "80%"
139+ splitterSize = { 1 }
140+ onResizeEnd = { size => this . setState ( { endPanelSize : size } ) }
141+ endPanelControl = { true }
142+ startPanel = { this . renderEditorPane ( ) }
143+ endPanel = { < SecondaryPanes horizontal = { horizontal } /> }
144+ endPanelCollapsed = { endPanelCollapsed }
145+ vert = { horizontal }
146+ />
147+ }
148+ />
149+ ) ;
147150 }
148151
149152 renderVerticalLayout ( ) {
150153 const { startPanelCollapsed, endPanelCollapsed } = this . props ;
151154 const { horizontal } = this . state ;
152155
153- return SplitBox ( {
154- style : { width : "100vw" } ,
155- initialSize : "300px" ,
156- minSize : 30 ,
157- maxSize : "99%" ,
158- splitterSize : 1 ,
159- vert : horizontal ,
160- startPanel : SplitBox ( {
161- style : { width : "100vw" } ,
162- initialSize : "250px" ,
163- minSize : 10 ,
164- maxSize : "40%" ,
165- splitterSize : 1 ,
166- startPanelCollapsed,
167- startPanel : PrimaryPanes ( { horizontal } ) ,
168- endPanel : this . renderEditorPane ( )
169- } ) ,
170- endPanel : SecondaryPanes ( { horizontal } ) ,
171- endPanelCollapsed
172- } ) ;
156+ return (
157+ < SplitBox
158+ style = { { width : "100vw" } }
159+ initialSize = "300px"
160+ minSize = { 30 }
161+ maxSize = "99%"
162+ splitterSize = { 1 }
163+ vert = { horizontal }
164+ startPanel = {
165+ < SplitBox
166+ style = { { width : "100vw" } }
167+ initialSize = "250px"
168+ minSize = { 10 }
169+ maxSize = "40%"
170+ splitterSize = { 1 }
171+ startPanelCollapsed = { startPanelCollapsed }
172+ startPanel = { < PrimaryPanes horizontal = { horizontal } /> }
173+ endPanel = { this . renderEditorPane ( ) }
174+ />
175+ }
176+ endPanel = { < SecondaryPanes horizontal = { horizontal } /> }
177+ endPanelCollapsed = { endPanelCollapsed }
178+ />
179+ ) ;
173180 }
174181
175182 render ( ) {
176183 const { selectSource, selectedSource } = this . props ;
177184
178- return dom . div (
179- { className : "debugger" } ,
180- this . state . horizontal
181- ? this . renderHorizontalLayout ( )
182- : this . renderVerticalLayout ( ) ,
183- SymbolModal ( { selectSource, selectedSource } )
185+ return (
186+ < div className = "debugger" >
187+ { this . state . horizontal
188+ ? this . renderHorizontalLayout ( )
189+ : this . renderVerticalLayout ( ) }
190+ < SymbolModal
191+ selectSource = { selectSource }
192+ selectedSource = { selectedSource }
193+ />
194+ </ div >
184195 ) ;
185196 }
186197}
0 commit comments