|
1 | 1 | import*asReactfrom'react' |
2 | 2 | import*asTfrom'typings' |
3 | | -import{Switch}from'@alifd/next' |
4 | | -importStepsfrom'../components/Steps' |
| 3 | +importStepfrom'../components/Step' |
| 4 | +importHintsfrom'../components/Hints' |
5 | 5 | importContentfrom'../components/Content' |
6 | 6 | import{Theme}from'../../../styles/theme' |
| 7 | +importAdminContextfrom'../../../services/admin/context' |
7 | 8 |
|
8 | 9 | interfaceProps{ |
9 | 10 | levels:T.LevelUI[] |
@@ -36,28 +37,52 @@ const styles = { |
36 | 37 | fontSize:'70%', |
37 | 38 | }, |
38 | 39 | levels:{}, |
| 40 | +steps:{ |
| 41 | +padding:'1rem 1rem', |
| 42 | +}, |
39 | 43 | } |
40 | 44 |
|
41 | 45 | constReviewPage=(props:Props)=>{ |
42 | | -const[stepVisibility,setStepVisibility]=React.useState(true) |
| 46 | +const{state:adminState}=React.useContext(AdminContext) |
| 47 | +constshow=(status:T.ProgressStatus):boolean=>{ |
| 48 | +returnadminState.adminMode||status!=='INCOMPLETE' |
| 49 | +} |
43 | 50 | return( |
44 | 51 | <divcss={styles.container}> |
45 | 52 | <divcss={styles.header}> |
46 | 53 | <div>Review</div> |
47 | | -<divcss={styles.control}> |
48 | | -<span>Show steps </span> |
49 | | -<Switchchecked={stepVisibility}onChange={(checked)=>setStepVisibility(checked)}/> |
50 | | -</div> |
51 | 54 | </div> |
52 | 55 |
|
53 | 56 | <divcss={styles.levels}> |
54 | | -{props.levels.map((level:T.LevelUI,index:number)=>( |
55 | | -<> |
56 | | -<Contenttitle={level.title}content={level.content}/> |
57 | | -{stepVisibility ?<Stepssteps={level.steps}displayAll/> :null} |
58 | | -{index<props.levels.length-1 ?<hr/> :null} |
59 | | -</> |
60 | | -))} |
| 57 | +{props.levels.map((level:T.LevelUI,index:number)=> |
| 58 | +show(level.status) ?( |
| 59 | +<divkey={level.id}> |
| 60 | +<Contenttitle={level.title}content={level.content}/> |
| 61 | + |
| 62 | +<divcss={styles.steps}> |
| 63 | +{level.steps.map((step:T.StepUI)=>{ |
| 64 | +if(!step){ |
| 65 | +returnnull |
| 66 | +} |
| 67 | +returnshow(step.status) ?( |
| 68 | +<divkey={step.id}> |
| 69 | +<Step |
| 70 | +key={step.id} |
| 71 | +status={step.status} |
| 72 | +displayAll={true} |
| 73 | +content={step.content} |
| 74 | +subtasks={step.subtasks} |
| 75 | +/> |
| 76 | +<Hintshints={step.hints||[]}/> |
| 77 | +</div> |
| 78 | +) :null |
| 79 | +})} |
| 80 | +</div> |
| 81 | + |
| 82 | +{index<props.levels.length-1 ?<hr/> :null} |
| 83 | +</div> |
| 84 | +) :null, |
| 85 | +)} |
61 | 86 | </div> |
62 | 87 | </div> |
63 | 88 | ) |
|