</Link>
</li>
}
- <li>
- <a href='#' onClick={this.openTutorial}>
- {navIcon('tutorial', styles)}
- {lang === 'zh' ? '教程' : 'Tutorial'}
- </a>
- </li>
</ul>
{ this.props.showNavAdvance && <ul className={styles.navigation}>
}
},
(dispatch) => ({
- openTutorial: () => dispatch({type: 'OPEN_TUTORIAL'}),
setLang: (event) => {
dispatch({
type: 'UPDATE_CORE_LANGUAGE',
import React from 'react'
import TutorialInfo from './TutorialInfo/TutorialInfo'
import TutorialForm from './TutorialForm/TutorialForm'
-import TutorialModal from './TutorialModal/TutorialModal'
const components = {
TutorialInfo,
TutorialForm
- // TutorialModal
}
class Tutorial extends React.Component {
render() {
- // const userInput = this.props.tutorial.userInputs
- //
const tutorialOpen = !this.props.tutorial.location.isVisited
- //
- // const tutorialRoute = this.props.currentStep['route']
const tutorialTypes = this.props.types
const TutorialComponent = components[this.props.content['component']]
- // const TutorialComponent = components[0]
-
return (
<div>
- {/*{tutorialOpen && (tutorialTypes.includes(this.props.currentStep['component'])) &&*/}
- {/*tutorialOpen &&*/}
- {/*<TutorialComponent*/}
- {/*// userInput={userInput}*/}
- {/*// {...this.props.currentStep}*/}
- {/*// handleNext={() => this.props.showNextStep(tutorialRoute)}*/}
- {/*{...this.props.content}*/}
- {/*/>}*/}
{tutorialOpen && (tutorialTypes.includes(this.props.content['component'])) &&
<TutorialComponent
- // userInput={userInput}
- // {...this.props.currentStep}
- // handleNext={() => this.props.showNextStep(tutorialRoute)}
{...this.props.content}
/>}
</div>
}
}
-import { actions } from 'features/tutorial'
import { connect } from 'react-redux'
const mapStateToProps = (state) => ({
- // currentStep: state.tutorial.currentStep,
content: state.tutorial.content,
tutorial: state.tutorial
})
-const mapDispatchToProps = ( dispatch ) => ({
- showNextStep: (route) => dispatch(actions.tutorialNextStep(route))
-})
-
export default connect(
- mapStateToProps,
- mapDispatchToProps
+ mapStateToProps
)(Tutorial)
class TutorialForm extends React.Component {
render() {
- const userInput = this.props.userInput
-
return (
<div className={styles.container}>
<div className={`${styles.tutorialContainer} ${styles.fixedTutorial}`}>
<table className={styles.listItemContainer}>
{this.props.content['steps'].map(function (contentLine, i){
let title = contentLine['title']
- if (contentLine['type']) {
- let replacement = userInput[contentLine['type']]
- if ('index' in contentLine){
- replacement = replacement[contentLine['index']]
- }
- title = contentLine['title'].replace('STRING', replacement['alias'])
- }
let rows = [
<tr key={`item-title-${i}`}>
<td className={styles.listBullet}>{i+1}</td>
let description = descriptionLine
if (description['line']) { description = description['line'] }
- if (descriptionLine['type']) {
- let replacement = userInput[descriptionLine['type']] || descriptionLine['type']
- if ('index' in descriptionLine){
- replacement = replacement[descriptionLine['index']]
- }
-
- if (replacement.hasOwnProperty('alias')) {
- replacement = replacement['alias'] || ''
- }
-
- description.split('STRING').forEach( (item, k, arr) => {
- descriptionResult.push(item)
- let replacementText = k < arr.length - 1 && <span key={`item-input-${j}-${k}`} className={styles.userInputData}>"{replacement}"</span>
- descriptionResult.push(replacementText)
- })
- } else {
- descriptionResult.push(description)
- }
+ descriptionResult.push(description)
})
rows.push(<tr key={`item-description-${i}`} className={styles.listItemDescription}>
<td></td>
import React from 'react'
-import { Link } from 'react-router'
import styles from './TutorialHeader.scss'
class TutorialHeader extends React.Component {
}
render() {
- // if(!this.props.tutorial.isShowing || this.props.currentStep.component == 'TutorialModal'){
- // if(!this.props.isVisited){
- // return (
- // <div>
- // {this.props.children}
- // </div>
- // )
- // }
- // else {
- return (
- !this.props.isVisited && <div className={`${styles.main} ${!this.props.isVisited && styles.collapsed}`} ref={element => this.tutorialContainer = element}>
- <div className={styles.header}>
- {this.props.content && this.props.content.title }
- <div className={styles.skip}>
- {/*{!this.props.showTutorial && <Link to={this.props.tutorial.route}>*/}
- {/*Resume tutorial*/}
- {/*</Link>}*/}
- {!this.props.isVisited &&
- <a onClick={this.props.dismissTutorial}>close</a>}
- {/*<a onClick={this.props.dismissTutorial}>{this.props.currentStep.dismiss || 'End tutorial'}</a>*/}
- </div>
+ return (
+ !this.props.isVisited && <div className={`${styles.main} ${!this.props.isVisited && styles.collapsed}`} ref={element => this.tutorialContainer = element}>
+ <div className={styles.header}>
+ {this.props.content && this.props.content.title }
+ <div className={styles.skip}>
+ {!this.props.isVisited &&
+ <a onClick={this.props.dismissTutorial}>close</a>}
</div>
- {!this.props.isVisited && this.props.children}
</div>
- )
- // }
+ {!this.props.isVisited && this.props.children}
+ </div>
+ )
}
}
visitedLocation: state.tutorial.location.visited,
isVisited: state.tutorial.location.isVisited,
content: state.tutorial.content,
-
tutorial: state.tutorial,
- currentStep: state.tutorial.currentStep,
- showTutorial: state.routing.locationBeforeTransitions.pathname.includes(state.tutorial.route)
})
const mapDispatchToProps = ( dispatch ) => ({
objectImage = require(`images/empty/${this.props.image}.svg`)
} catch (err) { /* do nothing */ }
- // const userInput = this.props.userInput
- // const nextButton = <Link to={this.props.route} className={styles.nextWrapper}>
- // <button key='showNext' className={`btn ${styles.next}`} onClick={this.props.handleNext}>
- // Next: {this.props.button}
- // </button>
- // </Link>
-
return (
<div>
<div className={styles.container}>
<tbody>{list}</tbody>
</table>
}
- if (contentLine['type']){
- let replacement = userInput[contentLine['type']]
- if ('index' in contentLine){
- replacement = replacement[contentLine['index']]
- }
- str = str.replace('STRING', replacement['alias'])
- }
-
return <p key={i}>{str}</p>
})}
</div>
- {/*{nextButton}*/}
</div>
</div>
)
-import steps from './steps.json'
import introduction from './introduction.json'
export const location = (state = { visited: [], isVisited: false }, action) => {
return{ ...state, isVisited:true }
}
}
- return state
-}
-
-// export const step = (state = 0, action) => {
-// if (action.type == 'TUTORIAL_NEXT_STEP') return state + 1
-// if (action.type == 'UPDATE_TUTORIAL' && steps[state].objectType == action.object) {
-// return state + 1
-// }
-// if (action.type == 'DISMISS_TUTORIAL') return 0
-// return state
-// }
+ if (action.type == 'DISMISS_TUTORIAL') return{ ...state, isVisited:true }
-export const isShowing = (state = true, action) => {
- if (action.type == 'DISMISS_TUTORIAL') return false
- if (action.type == 'OPEN_TUTORIAL') return true
return state
}
-// export const route = (currentStep) => (state = 'transactions', action) => {
-// if (action.type == 'TUTORIAL_NEXT_STEP') return action.route
-// if (action.type == 'UPDATE_TUTORIAL' && currentStep.objectType == action.object) {
-// return action.object + 's'
-// }
-// if (action.type == 'DISMISS_TUTORIAL') return 'transactions'
-// return state
-// }
-//
-// export const userInputs = (currentStep) => (state = { accounts: [] }, action) => {
-// if (action.type == 'UPDATE_TUTORIAL' && currentStep.objectType == action.object) {
-// if (action.object == 'key') return { ...state, key: action.data }
-// if (action.object == 'asset') return { ...state, asset: action.data }
-// if (action.object == 'account') {
-// return { ...state, accounts: [...state.accounts, action.data] }
-// }
-// return state
-// }
-// if (action.type == 'DISMISS_TUTORIAL') return { accounts: [] }
-// return state
-// }
-
export default (state = {}, action) => {
const newState = {
- // step: step(state.step, action),
- // isShowing: isShowing(state.isShowing, action),
location: location(state.location, action)
}
newState.content = introduction[newState.location.visited[0]]
- // newState.currentStep = steps[newState.step]
- // // newState.userInputs = userInputs(newState.currentStep)(state.userInputs, action)
- // newState.route = route(newState.currentStep)(state.route, action)
-
return newState
}
OSDN Git Service
