Commitf4f6e1c

committed

outline hints component

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

1 parent137d07b commitf4f6e1cCopy full SHA for f4f6e1c

File tree

+50

-0

lines changed

+50

-0

lines changed

Lines changed: 34 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,34 @@`
	`1`	`+import*asReactfrom'react'`
	`2`	`+importButtonfrom'../../../components/Button'`
	`3`	`+`
	`4`	`+interfaceProps{`
	`5`	`+hints:string[]`
	`6`	`+}`
	`7`	`+`
	`8`	`+constHints=(props:Props)=>{`
	`9`	`+const[hintIndex,setHintIndex]=React.useState(0)`
	`10`	`+constisFinalHint=props.hints.length-1===hintIndex`
	`11`	`+console.log(hintIndex)`
	`12`	`+constnextHint=()=>{`
	`13`	`+console.log(hintIndex)`
	`14`	`+if(!isFinalHint){`
	`15`	`+setHintIndex((currentHintIndex)=>currentHintIndex+1)`
	`16`	`+}`
	`17`	`+}`
	`18`	`+return(`
	`19`	`+<div>`
	`20`	`+{props.hints.map((h,i)=>{`
	`21`	`+returni<=hintIndex ?(`
	`22`	`+<divkey={i}style={{backgroundColor:'red'}}>`
	`23`	`+{h}`
	`24`	`+</div>`
	`25`	`+) :null`
	`26`	`+})}`
	`27`	`+<ButtononClick={nextHint}disabled={isFinalHint}>`
	`28`	`+ Next Hint`
	`29`	`+</Button>`
	`30`	`+</div>`
	`31`	`+)`
	`32`	`+}`
	`33`	`+`
	`34`	`+exportdefaultHints`

Lines changed: 6 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,13 +2,15 @@ import * as React from 'react'`
`2`	`2`	`import*asTfrom'typings'`
`3`	`3`	`import{css,jsx}from'@emotion/core'`
`4`	`4`	`importTestStatusIconfrom'./TestStatusIcon'`
	`5`	`+importHintsfrom'./Hints'`
`5`	`6`	`importMarkdownfrom'../../../components/Markdown'`
`6`	`7`
`7`	`8`	`interfaceProps{`
`8`	`9`	`order:number`
`9`	`10`	`content:string`
`10`	`11`	`status:T.ProgressStatus`
`11`	`12`	`subtasks:{name:string;pass:boolean}[]\|null`
	`13`	`+hints?:string[]`
`12`	`14`	`onLoadSolution():void`
`13`	`15`	`}`
`14`	`16`
`@@ -54,9 +56,11 @@ const Step = (props: Props) => {`
`54`	`56`	`{props.status==='COMPLETE'&&<TestStatusIconsize="small"checked/>}`
`55`	`57`	`</div>`
`56`	`58`	`<div>`
	`59`	`+{/* content */}`
`57`	`60`	`<divcss={styles.content}>`
`58`	`61`	`<Markdown>{props.content\|\|''}</Markdown>`
`59`	`62`	`</div>`
	`63`	`+{/* subtasks */}`
`60`	`64`	`{props.subtasks ?(`
`61`	`65`	`<ulcss={styles.subtasks}>`
`62`	`66`	`{props.subtasks.map((subtask)=>(`
`@@ -68,6 +72,8 @@ const Step = (props: Props) => {`
`68`	`72`	`))}`
`69`	`73`	`</ul>`
`70`	`74`	`) :null}`
	`75`	`+{/* hints */}`
	`76`	`+{props.hints&&props.hints.length ?<Hintshints={props.hints}/> :null}`
`71`	`77`	`</div>`
`72`	`78`	`</div>`
`73`	`79`	`</div>`

Lines changed: 10 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -98,3 +98,13 @@ storiesOf('Step', module)`
`98`	`98`	`]}`
`99`	`99`	`/>`
`100`	`100`	`))`
	`101`	`+.add('Hints',()=>(`
	`102`	`+<Step`
	`103`	`+order={1}`
	`104`	`+content={text('text',stepText)}`
	`105`	`+status="ACTIVE"`
	`106`	`+onLoadSolution={action('onLoadSolution')}`
	`107`	`+subtasks={null}`
	`108`	`+hints={['First hint!','Second hint!']}`
	`109`	`+/>`
	`110`	`+))`

Comments

(0)