11import React from 'react'
22import { Collapse , Icon } from '@alifd/next'
3+ import Button from '../Button'
34import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
45import './transition.css'
56
@@ -26,7 +27,33 @@ const styles = {
2627 } ,
2728}
2829
29- const NewUserExperienceTutorialCollapsible = ( ) => {
30+ type LoadSolutionButtonProps = {
31+ onLoadSolution : ( ) => void
32+ close : ( ) => void
33+ }
34+
35+ const LoadSolutionButton = ( props : LoadSolutionButtonProps ) => {
36+ const [ loadedSolution , setLoadedSolution ] = React . useState ( false )
37+ const onClickHandler = ( ) => {
38+ props . close ( )
39+ if ( ! loadedSolution ) {
40+ setLoadedSolution ( true )
41+ props . onLoadSolution ( )
42+ }
43+ }
44+ return (
45+ < Button type = "secondary" onClick = { onClickHandler } disabled = { loadedSolution } >
46+ Load Solution
47+ </ Button >
48+ )
49+ }
50+
51+ type NuxProps = {
52+ onClose : ( ) => void
53+ onLoadSolution : ( ) => void
54+ }
55+
56+ const NewUserExperienceTutorialCollapsible = ( props : NuxProps ) => {
3057 const [ expandedKeys , setExpandedKeys ] = React . useState < string [ ] > ( [ ] )
3158 return (
3259 < Collapse onExpand = { setExpandedKeys } expandedKeys = { expandedKeys } >
@@ -88,8 +115,17 @@ const NewUserExperienceTutorialCollapsible = () => {
88115 </ li >
89116 < br />
90117 < li >
91- Load the solution. Each step in CodeRoad is stored as a Git commit - including the solution. Load the
92- solution by pressing the help icon under the current task, and select the option "load solution".
118+ Still stuck? Load the solution. Each step in CodeRoad is stored as a Git commit - including the solution.
119+ Load the solution commit by pressing the button below.
120+ < br />
121+ < br />
122+ < LoadSolutionButton
123+ onLoadSolution = { props . onLoadSolution }
124+ close = { ( ) => {
125+ setExpandedKeys ( [ ] )
126+ props . onClose ( )
127+ } }
128+ />
93129 </ li >
94130 </ ol >
95131 </ Panel >
@@ -103,6 +139,7 @@ const NewUserExperienceTutorialCollapsible = () => {
103139
104140interface Props {
105141 css ?: React . CSSProperties
142+ onLoadSolution : ( ) => void
106143}
107144
108145const NewUserExperienceTutorial = ( props : Props ) => {
@@ -117,7 +154,12 @@ const NewUserExperienceTutorial = (props: Props) => {
117154 < span css = { styles . title } > Help</ span >
118155 </ div >
119156 < ReactCSSTransitionGroup transitionName = "slide" transitionEnterTimeout = { 500 } transitionLeaveTimeout = { 300 } >
120- { isOpen && < NewUserExperienceTutorialCollapsible /> }
157+ { isOpen && (
158+ < NewUserExperienceTutorialCollapsible
159+ onLoadSolution = { props . onLoadSolution }
160+ onClose = { ( ) => setIsOpen ( false ) }
161+ />
162+ ) }
121163 </ ReactCSSTransitionGroup >
122164 </ div >
123165 )
0 commit comments