11import * as React from 'react'
22import * as T from 'typings'
3+ import { Switch } from '@alifd/next'
34import Steps from '../components/Steps'
45import Content from '../components/Content'
56
@@ -15,7 +16,7 @@ const styles = {
1516header :{
1617display :'flex' as 'flex' ,
1718alignItems :'center' ,
18- justifyContent :'flex-start ' ,
19+ justifyContent :'space-between ' ,
1920height :'2rem' ,
2021backgroundColor :'#EBEBEB' ,
2122fontSize :'1rem' ,
@@ -25,22 +26,39 @@ const styles = {
2526title :{
2627marginLeft :'0.5rem' ,
2728} ,
29+ control :{
30+ display :'flex' as 'flex' ,
31+ alignItems :'center' ,
32+ fontSize :'70%' ,
33+ } ,
34+ levels :{
35+ paddingBottom :'2rem' ,
36+ } ,
2837}
2938
3039const ReviewPage = ( props :Props ) => {
40+ const [ stepVisibility , setStepVisibility ] = React . useState ( false )
3141return (
3242< div css = { styles . container } >
33- < div css = { styles . header } > Review</ div >
34- { props . levels . map ( ( level :T . LevelUI , index :number ) => (
35- < div key = { level . id } >
36- < div >
37- < Content title = { level . title } content = { level . content } />
38- < Steps steps = { level . steps } displayAll />
39- </ div >
40- { /* divider */ }
41- { index < props . levels . length - 1 ?< hr /> :null }
43+ < div css = { styles . header } >
44+ < div > Review</ div >
45+ < div css = { styles . control } >
46+ < span > Show steps </ span >
47+ < Switch checked = { stepVisibility } onChange = { ( checked ) => setStepVisibility ( checked ) } />
4248</ div >
43- ) ) }
49+ </ div >
50+ < div css = { styles . levels } >
51+ { props . levels . map ( ( level :T . LevelUI , index :number ) => (
52+ < div key = { level . id } >
53+ < div >
54+ < Content title = { level . title } content = { level . content } />
55+ { stepVisibility ?< Steps steps = { level . steps } displayAll /> :null }
56+ </ div >
57+ { /* divider */ }
58+ { index < props . levels . length - 1 ?< hr /> :null }
59+ </ div >
60+ ) ) }
61+ </ div >
4462</ div >
4563)
4664}