File tree Expand file tree Collapse file tree 14 files changed +135
-39
lines changed Expand file tree Collapse file tree 14 files changed +135
-39
lines changed Original file line number Diff line number Diff line change 1
1
import * as React from 'react'
2
2
3
- import Cond from './components/Cond '
4
- import Loading from
EDBE
span> './components/Loading '
3
+ import Router from './components/Router '
4
+ import LoadingPage from './containers/LoadingPage '
5
5
import ContinuePage from './containers/Continue'
6
6
import NewPage from './containers/New'
7
7
import TutorialPage from './containers/Tutorial'
8
8
9
+ const { Route } = Router
10
+
9
11
interface Props {
10
12
state : any
11
13
}
@@ -37,21 +39,22 @@ const Routes = ({ state }: Props) => {
37
39
}
38
40
} )
39
41
40
- // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
41
42
return (
42
43
< div style = { { ...styles . page , ...dimensions } } >
43
- < Cond state = { state } path = "SelectTutorial.Startup" >
44
- < Loading />
45
- </ Cond >
46
- < Cond state = { state } path = "SelectTutorial.NewTutorial" >
47
- < NewPage />
48
- </ Cond >
49
- < Cond state = { state } path = "SelectTutorial.ContinueTutorial" >
50
- < ContinuePage />
51
- </ Cond >
52
- < Cond state = { state } path = "Tutorial" >
53
- < TutorialPage state = { state } />
54
- </ Cond >
44
+ < Router state = { state } >
45
+ < Route path = "SelectTutorial.Startup" >
46
+ < LoadingPage text = "Launching..." />
47
+ </ Route >
48
+ < Route path = "SelectTutorial.NewTutorial" >
49
+ < NewPage />
50
+ </ Route >
51
+ < Route path = "SelectTutorial.ContinueTutorial" >
52
+ < ContinuePage />
53
+ </ Route >
54
+ < Route path = "Tutorial" >
55
+ < TutorialPage state = { state } />
56
+ </ Route >
57
+ </ Router >
55
58
</ div >
56
59
)
57
60
}
Original file line number Diff line number Diff line change 1
1
export function stateMatch ( state : any , statePath : string ) {
2
2
let current = state
3
- let paths = statePath . split ( '.' )
3
+ const paths = statePath . split ( '.' )
4
4
let complete = false
5
5
try {
6
6
for ( const p of paths ) {
Original file line number Diff line number Diff line change 1
1
import * as React from 'react'
2
+ import { Loading } from '@alifd/next'
2
3
3
- const Loading = ( ) => {
4
- return < div > Loading... </ div >
4
+ interface Props {
5
+ text : string
5
6
}
6
7
7
- export default Loading
8
+ const LoadingComponent = ( { text } : Props ) => {
9
+ return < Loading tip = { text } />
10
+ }
11
+
12
+ export default LoadingComponent
Original file line number Diff line number Diff line change
1
+ import * as React from 'react'
2
+
3
+ interface Props {
4
+ children : any
5
+ path : string
6
+ }
7
+
8
+ const Route = ( { children } : Props ) => children
9
+
10
+ export default Route
Original file line number Diff line number Diff line change
1
+ import * as React from 'react'
2
+ import Route from './Route'
3
+ import { stateMatch } from '../Cond/utils/state'
4
+
5
+ interface Props {
6
+ state : string
7
+ children : any
8
+ }
9
+
10
+ // router finds first state match of <Route path='' />
11
+ const Router = ( { state, children } : Props ) => {
12
+ const childArray = React . Children . toArray ( children )
13
+ for ( const child of childArray ) {
14
+ if ( stateMatch ( state , child . props . path ) ) {
15
+ return child . props . children
16
+ }
17
+ }
18
+ console . warn ( `No Route matches for ${ state } ` )
19
+ return null
20
+ }
21
+
22
+ Router . Route = Route
23
+
24
+ export default Router
Original file line number Diff line number Diff line change
1
+ import * as React from 'react'
2
+ import Loading from '../components/Loading'
3
+
4
+ interface Props {
5
+ text : string
6
+ }
7
+
8
+ const styles = {
9
+ page : {
10
+ display : 'flex' ,
11
+ alignItems : 'center' ,
12
+ justifyContent : 'center' ,
13
+ width : '100%' ,
14
+ height : '100%' ,
15
+ } ,
16
+ }
17
+
18
+ const LoadingPage = ( { text } : Props ) => (
19
+ < div style = { styles . page } >
20
+ < Loading text = { text } />
21
+ </ div >
22
+ )
23
+
24
+ export default LoadingPage
Original file line number Diff line number Diff line change 1
1
import * as React from 'react'
2
2
import { Button } from '@alifd/next'
3
+
3
4
import Cond from '../../components/Cond'
4
5
import DataContext from '../../utils/DataContext'
5
6
import { send } from '../../utils/vscode'
7
+ import LoadingPage from '../../containers/LoadingPage'
6
8
7
9
interface Props {
8
10
onNew ( tutorialId : string ) : void
@@ -27,7 +29,7 @@ export const NewPage = (props: Props) => {
27
29
</ div >
28
30
</ Cond >
29
31
< Cond state = { state } path = "SelectTutorial.NewTutorial.InitializeTutorial" >
30
- < div > Initializing tutorial ...</ div >
32
+ < LoadingPage text = "Launching Tutorial ..." / >
31
33
</ Cond >
32
34
</ div >
33
35
)
Original file line number Diff line number Diff line change @@ -4,7 +4,6 @@ import Level from '../../components/Level'
4
4
5
5
interface LevelProps {
6
6
send ( action : string ) : void
7
- state : any
8
7
}
9
8
10
9
const LevelPage = ( props : LevelProps ) => {
Original file line number Diff line number Diff line change @@ -3,7 +3,6 @@ import DataContext from '../../utils/DataContext'
3
3
import Stage from '../../components/Stage'
4
4
5
5
interface PageProps {
6
- state : any
7
6
send ( action : string ) : void
8
7
}
9
8
Original file line number Diff line number Diff line change @@ -4,7 +4,6 @@ import Summary from '../../components/Summary'
4
4
5
5
interface PageProps {
6
6
send ( action : string ) : void
7
- state : any
8
7
}
9
8
10
9
const SummaryPage = ( props : PageProps ) => {
You can’t perform that action at this time.
0 commit comments