|
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 | ) |
|