Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit314e71b

Browse files
committed
setup pages
1 parent5a02b79 commit314e71b

File tree

10 files changed

+83
-38
lines changed

10 files changed

+83
-38
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"compile":"tsc -p ./",
3333
"watch":"tsc -watch -p ./",
3434
"postinstall":"node ./node_modules/vscode/bin/install",
35+
"storybook":"cd web-app && npm run storybook",
3536
"test":"npm run build && node ./node_modules/vscode/bin/test"
3637
},
3738
"devDependencies": {

‎web-app/src/App.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,12 @@ import * as CR from 'typings'
33

44
importDebuggerfrom'./components/Debugger'
55
importRoutesfrom'./Routes'
6+
importDataContext,{initialState,initialData}from'./utils/DataContext'
67

78
interfaceReceivedEvent{
89
data:CR.Action
910
}
1011

11-
constinitialState={SelectTutorial:'Initial '}
12-
constinitialData:CR.MachineContext={
13-
position:{levelId:'',stageId:'',stepId:''},
14-
data:{
15-
summary:{
16-
title:'',
17-
description:'',
18-
levelList:[],
19-
},
20-
levels:{},
21-
stages:{},
22-
steps:{},
23-
},
24-
progress:{levels:{},stages:{},steps:{},complete:false},
25-
}
26-
27-
constDataContext=React.createContext({state:initialState, ...initialData})
28-
29-
30-
3112
constApp=()=>{
3213
const[state,setState]=React.useState(initialState)
3314
const[data,setData]:[CR.MachineContext,(data:CR.MachineContext)=>void]=React.useState(initialData)

‎web-app/src/Routes.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import*asReactfrom'react'
2-
import{send}from'./utils/vscode'
32

43
importCondfrom'./components/Cond'
54
importNewPagefrom'./containers/New'
65
importContinuePagefrom'./containers/Continue'
6+
importTutorialPagefrom'./containers/Tutorial'
77

88

99
interfaceProps{
@@ -14,11 +14,19 @@ const Routes = ({ state }: Props) => {
1414
// TODO: refactor cond to user <Router><Route> and accept first route as if/else if
1515
return(
1616
<div>
17+
<Condstate={state}path="SelectTutorial.Startup">
18+
<divstyle={{backgroundColor:'red'}}>
19+
<h3>Starting...</h3>
20+
</div>
21+
</Cond>
1722
<Condstate={state}path="SelectTutorial.NewTutorial">
18-
<NewPageonNew={()=>send('TUTORIAL_START')}/>
23+
<NewPage/>
1924
</Cond>
2025
<Condstate={state}path="SelectTutorial.ContinueTutorial">
21-
<ContinuePageonContinue={()=>console.log('continue!')}tutorials={[]}/>
26+
<ContinuePage/>
27+
</Cond>
28+
<Condstate={state}path="Tutorial">
29+
<TutorialPage/>
2230
</Cond>
2331
</div>
2432
)

‎web-app/src/components/Cond/utils/state.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
exportfunctionstateMatch(state:any,statePath:string){
22
letcurrent=state
33
letpaths=statePath.split('.')
4+
letcomplete=false
45
try{
56
for(constpofpaths){
6-
current=current[p]
7+
if(p===current&&!complete){
8+
// handle strings
9+
complete=true
10+
}else{
11+
// handle objects
12+
current=current[p]
13+
}
714
}
815
}catch(error){
916
returnfalse

‎web-app/src/containers/Continue/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@ interface Props {
99
// onReset(): void
1010
}
1111

12-
constContinuePage=(props:Props)=>{
12+
exportconstContinuePage=(props:Props)=>{
1313
// context
1414
return(
1515
<div>
16+
<h3>Continue</h3>
1617
{props.tutorials.map((tutorial:CR.Tutorial)=>(
1718
<ContinueItem
1819
key={tutorial.id}
@@ -25,4 +26,4 @@ const ContinuePage = (props: Props) => {
2526
)
2627
}
2728

28-
exportdefaultContinuePage
29+
exportdefault()=><ContinuePagetutorials={[]}onContinue={(id:string)=>console.log(id)}/>
Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
11
import*asReactfrom'react'
22
import{Button}from'@alifd/next'
3+
importCondfrom'../../components/Cond'
4+
importDataContextfrom'../../utils/DataContext'
5+
import{send}from'../../utils/vscode'
36

47
interfaceProps{
58
onNew(tutorialId:string):void
69
}
710

8-
constNewPage=(props:Props)=>{
11+
exportconstNewPage=(props:Props)=>{
12+
const{ state}=React.useContext(DataContext)
913
const[tutorialList,setTutorialList]=React.useState([{id:'1',title:'Demo',description:'A basic demo'}])
1014
// context
1115
return(
1216
<div>
13-
<h2>Start a new Project</h2>
14-
{tutorialList.map(tutorial=>(
17+
<Condstate={state}path="SelectTutorial.NewTutorial.SelectTutorial">
1518
<div>
16-
<h3>{tutorial.title}</h3>
17-
<p>{tutorial.description}</p>
18-
<ButtononClick={()=>props.onNew(tutorial.id)}>Start</Button>
19+
<h2>Start a new Project</h2>
20+
{tutorialList.map(tutorial=>(
21+
<div>
22+
<h3>{tutorial.title}</h3>
23+
<p>{tutorial.description}</p>
24+
<ButtononClick={()=>props.onNew(tutorial.id)}>Start</Button>
25+
</div>
26+
))}
1927
</div>
20-
))}
28+
</Cond>
29+
<Condstate={state}path='SelectTutorial.NewTutorial.InitializeTutorial'>
30+
<div>Initializing tutorial...</div>
31+
</Cond>
2132
</div>
2233
)
2334
}
2435

25-
exportdefaultNewPage
36+
exportdefault()=><NewPageonNew={()=>send('TUTORIAL_START')}/>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import*asReactfrom'react'
2+
3+
interfaceProps{}
4+
5+
constTutorial=(props:Props)=>{
6+
// useContext
7+
return(
8+
<div>
9+
<h3>Tutorial</h3>
10+
</div>
11+
)
12+
}
13+
14+
exportdefaultTutorial

‎web-app/src/utils/DataContext.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import*asReactfrom'react'
2+
import*asCRfrom'typings'
3+
4+
exportconstinitialState={SelectTutorial:'Initial '}
5+
exportconstinitialData:CR.MachineContext={
6+
position:{levelId:'',stageId:'',stepId:''},
7+
data:{
8+
summary:{
9+
title:'',
10+
description:'',
11+
levelList:[],
12+
},
13+
levels:{},
14+
stages:{},
15+
steps:{},
16+
},
17+
progress:{levels:{},stages:{},steps:{},complete:false},
18+
}
19+
20+
constDataContext=React.createContext({state:initialState, ...initialData})
21+
22+
exportdefaultDataContext

‎web-app/stories/Continue.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
import{storiesOf}from'@storybook/react'
44
import{action}from'@storybook/addon-actions'
55

6-
importContinuefrom'../src/containers/Continue'
6+
import{ContinuePage}from'../src/containers/Continue'
77
importdemofrom'./data/basic'
88

9-
storiesOf('Continue',module).add('Page',()=><Continuetutorials={[demo]}onContinue={action('onContinue')}/>)
9+
storiesOf('Continue',module).add('Page',()=><ContinuePagetutorials={[demo]}onContinue={action('onContinue')}/>)

‎web-app/stories/New.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ import React from 'react'
33
import{storiesOf}from'@storybook/react'
44
import{action}from'@storybook/addon-actions'
55

6-
importNewfrom'../src/containers/New'
6+
import{NewPage}from'../src/containers/New'
77

8-
storiesOf('New',module).add('Page',()=><NewonNew={action('onNew')}/>)
8+
storiesOf('New',module).add('Page',()=><NewPageonNew={action('onNew')}/>)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp