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

Commit5a9928d

Browse files
authored
Merge pull request#47 from ShMcK/feature/step-no-title
Feature/step no title
2 parentsd904e6f +626aa0d commit5a9928d

File tree

7 files changed

+84
-77
lines changed

7 files changed

+84
-77
lines changed

‎web-app/.storybook/addons.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
import'@storybook/addon-actions/register'
22
import'@storybook/addon-knobs/register'
3-
import'@storybook/addon-links/register'
4-
import'@storybook/addon-viewport/register'
3+
import'@storybook/addon-links/register'

‎web-app/src/App.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import ErrorBoundary from './components/ErrorBoundary'
55
importclientfrom'./services/apollo'
66
importRoutesfrom'./Routes'
77

8+
89
constApp=()=>(
910
<ErrorBoundary>
1011
<ApolloProviderclient={client}>
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import*asReactfrom'react'
2+
import*asTfrom'typings'
3+
import{Button,Checkbox}from'@alifd/next'
4+
5+
importMarkdownfrom'../../../../../components/Markdown'
6+
7+
interfaceProps{
8+
order:number
9+
content:string
10+
status:T.ProgressStatus
11+
onLoadSolution():void
12+
}
13+
14+
conststyles={
15+
card:{
16+
display:'grid',
17+
gridTemplateColumns:'25px 1fr',
18+
padding:'1rem 1rem 1rem 0.2rem',
19+
},
20+
content:{
21+
margin:0,
22+
},
23+
}
24+
25+
constStep=(props:Props)=>{
26+
// TODO: extract or replace load solution
27+
const[loadedSolution,setLoadedSolution]=React.useState()
28+
constonClickHandler=()=>{
29+
if(!loadedSolution){
30+
setLoadedSolution(true)
31+
props.onLoadSolution()
32+
}
33+
}
34+
constshowLoadSolution=props.status==='ACTIVE'&&!loadedSolution
35+
36+
return(
37+
<divstyle={styles.card}>
38+
<div>
39+
<Checkbox
40+
checked={props.status==='COMPLETE'}
41+
indeterminate={false/* TODO: running */}
42+
disabled={props.status!=='INCOMPLETE'/* TODO: and not running */}
43+
onChange={()=>{
44+
/* do nothing */
45+
}}
46+
/>
47+
</div>
48+
<div>
49+
<Markdown>{props.content||''}</Markdown>
50+
</div>
51+
<div>{showLoadSolution&&<ButtononClick={onClickHandler}>Load Solution</Button>}</div>
52+
</div>
53+
)
54+
}
55+
56+
exportdefaultStep

‎web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx

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

‎web-app/src/containers/Tutorial/LevelPage/Level/index.tsx

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import{Button,Step}from'@alifd/next'
1+
import{Button}from'@alifd/next'
22
import*asReactfrom'react'
33
import*asGfrom'typings/graphql'
44
import*asTfrom'typings'
55

6+
importStepfrom'./Step'
67
importMarkdownfrom'../../../../components/Markdown'
7-
importStepDescriptionfrom'./StepDescription'
88

99
conststyles={
1010
card:{
@@ -56,11 +56,6 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
5656
thrownewError('No Stage steps found')
5757
}
5858

59-
// grab the active step
60-
constactiveIndex:number=level.steps.findIndex((step:G.Step&{status:T.ProgressStatus}|null)=>{
61-
returnstep&&step.status==='ACTIVE'
62-
})
63-
6459
return(
6560
<divstyle={styles.card}>
6661
<div>
@@ -76,20 +71,17 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
7671
<div>
7772
<divstyle={styles.header}>Tasks</div>
7873
<divstyle={styles.steps}>
79-
<Stepcurrent={activeIndex}direction="ver"shape="dot"animationreadOnly>
80-
{level.steps.map((step:G.Step&{status:T.ProgressStatus}|null,index:number)=>{
81-
if(!step){
82-
returnnull
83-
}
84-
return(
85-
<Step.Item
86-
key={step.id}
87-
title={step.title||`Step${index+1}`}
88-
content={<StepDescriptiontext={step.content}mode={step.status}onLoadSolution={onLoadSolution}/>}
89-
/>
90-
)
91-
})}
92-
</Step>
74+
{level.steps.map((step:G.Step&{status:T.ProgressStatus}|null,index:number)=>{
75+
if(!step){
76+
returnnull
77+
}
78+
return<Step
79+
order={index+1}
80+
status={step.status}
81+
content={step.content}
82+
onLoadSolution={onLoadSolution}
83+
/>
84+
})}
9385
</div>
9486
</div>
9587

‎web-app/src/styles/index.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ code {
1010
font-family: source-code-pro, Menlo, Monaco, Consolas,'Courier New', monospace;
1111
}
1212

13-
.hover-select:hover {
14-
cursor: pointer;
15-
}
13+
p {
14+
margin:0
15+
}

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { select, text, withKnobs } from '@storybook/addon-knobs'
55
import{storiesOf}from'@storybook/react'
66
importSideBarDecoratorfrom'./utils/SideBarDecorator'
77

8-
importStepDescriptionfrom'../src/containers/Tutorial/LevelPage/Level/StepDescription'
8+
importStepfrom'../src/containers/Tutorial/LevelPage/Level/Step'
99

1010
conststepText=
1111
'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'
@@ -33,17 +33,19 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
3333
storiesOf('Level',module)
3434
.addDecorator(SideBarDecorator)
3535
.addDecorator(withKnobs)
36-
.add('Step Description',()=>(
37-
<StepDescription
38-
text={text('text',stepText)}
39-
mode={select('mode',{ACTIVE:'ACTIVE',COMPLETE:'COMPLETE',INCOMPLETE:'INCOMPLETE'},'ACTIVE','step')}
36+
.add('Step',()=>(
37+
<Step
38+
order={1}
39+
content={text('text',stepText)}
40+
status={select('mode',{ACTIVE:'ACTIVE',COMPLETE:'COMPLETE',INCOMPLETE:'INCOMPLETE'},'COMPLETE','step')}
4041
onLoadSolution={action('onLoadSolution')}
4142
/>
4243
))
4344
.add('Step Markdown',()=>(
44-
<StepDescription
45-
text={text('text',paragraphText)}
46-
mode={select('mode',{ACTIVE:'ACTIVE',COMPLETE:'COMPLETE',INCOMPLETE:'INCOMPLETE'},'ACTIVE','step')}
45+
<Step
46+
order={2}
47+
content={text('text',paragraphText)}
48+
status={select('mode',{ACTIVE:'ACTIVE',COMPLETE:'COMPLETE',INCOMPLETE:'INCOMPLETE'},'ACTIVE','step')}
4749
onLoadSolution={action('onLoadSolution')}
4850
/>
4951
))

0 commit comments

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