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

Commitd12b7dd

Browse files
committed
setup step using step components
1 parent3505bc3 commitd12b7dd

File tree

6 files changed

+79
-75
lines changed

6 files changed

+79
-75
lines changed
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import{Checkbox}from'@alifd/next'
2+
import*asReactfrom'react'
3+
// import CC from '../../typings/client'
4+
importCRfrom'typings'
5+
importMarkdownfrom'../../Markdown'
6+
7+
conststyles={
8+
// active: {
9+
// backgroundColor: '#e6f7ff',
10+
// },
11+
card:{
12+
paddingRight:'1rem',
13+
},
14+
}
15+
16+
interfaceProps{
17+
content:CR.TutorialStepContent
18+
status:any// CC.StageStepStatus
19+
}
20+
21+
constStepDescription=({ content, status}:Props)=>{
22+
consthidden=!status.active&&!status.complete
23+
if(hidden){
24+
returnnull
25+
}
26+
return(
27+
<divstyle={styles.card}>
28+
<Markdown>{content.text}</Markdown>
29+
</div>
30+
)
31+
}
32+
33+
exportdefaultStepDescription

‎web-app/src/components/Stage/index.tsx

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import{Button}from'@alifd/next'
1+
import{Button,Step}from'@alifd/next'
22
import*asReactfrom'react'
33
importCRfrom'typings'
44

5-
importDividerfrom'../Divider'
65
importMarkdownfrom'../Markdown'
7-
importStepfrom'../Step'
6+
importStepDescriptionfrom'./StepDescription'
87

98
conststyles={
109
card:{
@@ -17,6 +16,9 @@ const styles = {
1716
options:{
1817
padding:'0rem 1rem',
1918
},
19+
steps:{
20+
padding:'1rem 0rem',
21+
},
2022
title:{},
2123
}
2224

@@ -30,19 +32,33 @@ interface Props {
3032
}
3133

3234
constStage=({ stage, steps, onNextStage, complete}:Props)=>{
33-
const{ title, text}=stage.content
35+
const{ stepList, content}=stage
36+
const{ title, text}=content
37+
// grab the active step
38+
constactiveIndex=stepList.findIndex((stepId:string)=>{
39+
returnsteps[stepId].status.active
40+
})
41+
// only display up until the active step
42+
constfilteredStepList=stepList.slice(0,activeIndex+1)
3443
return(
3544
<divstyle={styles.card}>
3645
<divstyle={styles.content}>
3746
<h2style={styles.title}>{title}</h2>
3847
<Markdown>{text}</Markdown>
3948
</div>
40-
<Divider/>
41-
<div>
42-
{stage.stepList.map((stepId:string)=>{
43-
conststep=steps[stepId]
44-
return<Stepkey={stepId}content={step.content}status={step.status}/>
45-
})}
49+
<divstyle={styles.steps}>
50+
<Stepcurrent={activeIndex}direction="ver"shape="dot"animation>
51+
{filteredStepList.map((stepId:string,index:number)=>{
52+
conststep=steps[stepId]
53+
return(
54+
<Step.Item
55+
key={stepId}
56+
title={step.content.title||`Step${index+1}`}
57+
content={<StepDescriptioncontent={step.content}status={step.status}/>}
58+
/>
59+
)
60+
})}
61+
</Step>
4662
</div>
4763

4864
{complete&&(

‎web-app/src/components/Step/index.tsx

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎web-app/src/tutorials/basic.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const basic: CR.Tutorial = {
4141
step1Id:{
4242
content:{
4343
title:'Sum',
44-
text:'Write a function that adds two numbers together',
44+
text:'Write a function`add`that adds two numbers together',
4545
},
4646
actions:{
4747
setup:{
@@ -58,7 +58,7 @@ const basic: CR.Tutorial = {
5858
step2Id:{
5959
content:{
6060
title:'Multiply',
61-
text:'Write a function that multiplies two numbers together',
61+
text:'Write a function`multiply`that multiplies two numbers together',
6262
},
6363
actions:{
6464
setup:{
@@ -74,7 +74,7 @@ const basic: CR.Tutorial = {
7474
step3Id:{
7575
content:{
7676
title:'Divide',
77-
text:'Write a function that divides',
77+
text:'Write a function`divide`that divides',
7878
},
7979
actions:{
8080
setup:{

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
importReactfrom'react'
22

3-
import{storiesOf}from'@storybook/react'
43
import{action}from'@storybook/addon-actions'
5-
import{withKnobs,object,boolean}from'@storybook/addon-knobs'
6-
importSideBarDecoratorfrom'./utils/SideBarDecorator'
4+
import{boolean,object,withKnobs}from'@storybook/addon-knobs'
5+
import{storiesOf}from'@storybook/react'
76
importdemofrom'./data/basic'
7+
importSideBarDecoratorfrom'./utils/SideBarDecorator'
88

99
importStagefrom'../src/components/Stage'
1010

@@ -17,7 +17,7 @@ storiesOf('Tutorial SideBar', module)
1717
step1Id:{
1818
content:{
1919
title:'Sum',
20-
text:'Write a function that adds two numbers together',
20+
text:'Write a function`sum`that adds two numbers together',
2121
},
2222
hints:[],
2323
status:{
@@ -28,21 +28,28 @@ storiesOf('Tutorial SideBar', module)
2828
step2Id:{
2929
content:{
3030
title:'Multiply',
31-
text:'Write a function that multiplies two numbers together',
31+
text:`Write a function \`multiply\` that multiplies two numbers together
32+
33+
\`\`\`
34+
function someExample(a) {
35+
return a * 1
36+
}
37+
\`\`\`
38+
`,
3239
},
3340
hints:[],
34-
status:{active:true,complete:false},
41+
status:{active:false,complete:true},
3542
},
3643
step3Id:{
3744
content:{
3845
title:'Divide',
39-
text:'Write a function that divides',
46+
text:'Write a function`divide`that divides',
4047
},
4148
hints:[],
42-
status:{active:false,complete:false},
49+
status:{active:true,complete:false},
4350
},
4451
})}
45-
stage={object('stage',demo.data.stages['stage1Id'])}
52+
stage={object('stage',demo.data.stages.stage1Id)}
4653
complete={boolean('complete',false)}
4754
onNextStage={action('onNextStage')}
4855
/>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { object, withKnobs } from '@storybook/addon-knobs'
44
import{storiesOf}from'@storybook/react'
55
importSideBarDecoratorfrom'./utils/SideBarDecorator'
66

7-
importStepfrom'../src/components/Step'
7+
importStepfrom'../src/components/Stage/StepDescription'
88

99
conststepText=
1010
'This is a long paragraph of step text intended to wrap around the side after a short period of writing to demonstrate text wrap among other things'

0 commit comments

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