|
1 | 1 | import*asReactfrom'react'
|
2 | 2 | import*asTfrom'typings'
|
3 |
| -import{Switch}from'@alifd/next' |
4 |
| -importStepsfrom'../components/Steps' |
| 3 | +import{Button,Icon}from'@alifd/next' |
| 4 | +importStepfrom'../components/Step' |
| 5 | +importHintsfrom'../components/Hints' |
5 | 6 | importContentfrom'../components/Content'
|
6 | 7 | import{Theme}from'../../../styles/theme'
|
| 8 | +importAdminContextfrom'../../../services/admin/context' |
7 | 9 |
|
8 | 10 | interfaceProps{
|
9 | 11 | levels:T.LevelUI[]
|
| 12 | +onResetToPosition(position:T.Position):void |
10 | 13 | }
|
11 | 14 |
|
12 | 15 | conststyles={
|
@@ -36,28 +39,88 @@ const styles = {
|
36 | 39 | fontSize:'70%',
|
37 | 40 | },
|
38 | 41 | levels:{},
|
| 42 | +steps:{ |
| 43 | +padding:'1rem 1rem', |
| 44 | +}, |
| 45 | +adminNav:{ |
| 46 | +position:'absolute'as'absolute', |
| 47 | +right:'1rem', |
| 48 | +lineHeight:'16px', |
| 49 | +}, |
39 | 50 | }
|
40 | 51 |
|
41 | 52 | constReviewPage=(props:Props)=>{
|
42 |
| -const[stepVisibility,setStepVisibility]=React.useState(true) |
| 53 | +const{ |
| 54 | +state:{ adminMode}, |
| 55 | +}=React.useContext(AdminContext) |
| 56 | +constshow=(status:T.ProgressStatus):boolean=>{ |
| 57 | +returnadminMode||status!=='INCOMPLETE' |
| 58 | +} |
43 | 59 | return(
|
44 | 60 | <divcss={styles.container}>
|
45 | 61 | <divcss={styles.header}>
|
46 | 62 | <div>Review</div>
|
47 |
| -<divcss={styles.control}> |
48 |
| -<span>Show steps </span> |
49 |
| -<Switchchecked={stepVisibility}onChange={(checked)=>setStepVisibility(checked)}/> |
50 |
| -</div> |
51 | 63 | </div>
|
52 | 64 |
|
53 | 65 | <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 |
| -))} |
| 66 | +{props.levels.map((level:T.LevelUI,index:number)=> |
| 67 | +show(level.status) ?( |
| 68 | +<divkey={level.id}> |
| 69 | +{adminMode&&( |
| 70 | +<divcss={styles.adminNav}> |
| 71 | +<Button |
| 72 | +type="normal" |
| 73 | +warning |
| 74 | +onClick={()=> |
| 75 | +props.onResetToPosition({ |
| 76 | +levelId:level.id, |
| 77 | +stepId:level.steps.length ?level.steps[0].id :null, |
| 78 | +}) |
| 79 | +} |
| 80 | +> |
| 81 | +{level.id} |
| 82 | +<Icontype="refresh"/> |
| 83 | +</Button> |
| 84 | +</div> |
| 85 | +)} |
| 86 | +<Contenttitle={level.title}content={level.content}/> |
| 87 | + |
| 88 | +<divcss={styles.steps}> |
| 89 | +{level.steps.map((step:T.StepUI)=>{ |
| 90 | +if(!step){ |
| 91 | +returnnull |
| 92 | +} |
| 93 | +returnshow(step.status) ?( |
| 94 | +<divkey={step.id}> |
| 95 | +{adminMode&&( |
| 96 | +<divcss={styles.adminNav}> |
| 97 | +<Button |
| 98 | +type="normal" |
| 99 | +warning |
| 100 | +onClick={()=>props.onResetToPosition({levelId:level.id,stepId:step.id})} |
| 101 | +> |
| 102 | +{step.id} |
| 103 | +<Icontype="refresh"/> |
| 104 | +</Button> |
| 105 | +</div> |
| 106 | +)} |
| 107 | +<Step |
| 108 | +key={step.id} |
| 109 | +status={step.status} |
| 110 | +displayAll={true} |
| 111 | +content={step.content} |
| 112 | +subtasks={step.subtasks} |
| 113 | +/> |
| 114 | +<Hintshints={step.hints||[]}/> |
| 115 | +</div> |
| 116 | +) :null |
| 117 | +})} |
| 118 | +</div> |
| 119 | + |
| 120 | +{index<props.levels.length-1 ?<hr/> :null} |
| 121 | +</div> |
| 122 | +) :null, |
| 123 | +)} |
61 | 124 | </div>
|
62 | 125 | </div>
|
63 | 126 | )
|
|