186 lines
8.5 KiB
JavaScript
186 lines
8.5 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import { withRouter, Link } from 'react-router-dom';
|
|
|
|
import clsx from 'clsx';
|
|
|
|
import tutorials from './tutorials.json';
|
|
|
|
import { fade } from '@material-ui/core/styles/colorManipulator';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import Button from '@material-ui/core/Button';
|
|
import Stepper from '@material-ui/core/Stepper';
|
|
import Step from '@material-ui/core/Step';
|
|
import StepLabel from '@material-ui/core/StepLabel';
|
|
import Tooltip from '@material-ui/core/Tooltip';
|
|
import LinearProgress from '@material-ui/core/LinearProgress';
|
|
|
|
const styles = (theme) => ({
|
|
verticalStepper: {
|
|
padding: 0,
|
|
width: '30px',
|
|
},
|
|
stepIconSmall: {
|
|
border: `2px solid ${theme.palette.primary.main}`,
|
|
borderRadius: '50%',
|
|
width: '12px',
|
|
height: '12px',
|
|
margin: '0 auto'
|
|
},
|
|
stepIconMedium: {
|
|
border: `2px solid ${theme.palette.primary.main}`,
|
|
borderRadius: '50%',
|
|
width: '18px',
|
|
height: '18px',
|
|
margin: '0 auto'
|
|
},
|
|
stepIconLarge: {
|
|
border: `2px solid ${theme.palette.primary.main}`,
|
|
borderRadius: '50%',
|
|
width: '24px',
|
|
height: '24px'
|
|
},
|
|
stepIconTransparent: {
|
|
border: `2px solid transparent`,
|
|
cursor: 'default'
|
|
},
|
|
stepIconActive: {
|
|
backgroundColor: fade(theme.palette.primary.main, 0.6)
|
|
},
|
|
progress: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
marginRight: '5px',
|
|
width: '3px',
|
|
},
|
|
progressForeground: {
|
|
backgroundColor: theme.palette.primary.main
|
|
},
|
|
progressBackground: {
|
|
backgroundColor: fade(theme.palette.primary.main, 0.2),
|
|
height: '100%'
|
|
}
|
|
});
|
|
|
|
class StepperVertical extends Component {
|
|
|
|
state={
|
|
tutorialArray: Number(this.props.match.params.tutorialId) === 1 ?
|
|
tutorials.slice(Number(this.props.match.params.tutorialId)-1, Number(this.props.match.params.tutorialId)+4)
|
|
: Number(this.props.match.params.tutorialId) === 2 ?
|
|
tutorials.slice(Number(this.props.match.params.tutorialId)-1-1, Number(this.props.match.params.tutorialId)+3)
|
|
: Number(this.props.match.params.tutorialId) === tutorials.length ?
|
|
tutorials.slice(Number(this.props.match.params.tutorialId)-4-1, Number(this.props.match.params.tutorialId)+4)
|
|
: Number(this.props.match.params.tutorialId) === tutorials.length-1 ?
|
|
tutorials.slice(Number(this.props.match.params.tutorialId)-3-1, Number(this.props.match.params.tutorialId)+3)
|
|
: tutorials.slice(Number(this.props.match.params.tutorialId)-2-1,Number(this.props.match.params.tutorialId)+2),
|
|
tutorialId: Number(this.props.match.params.tutorialId),
|
|
verticalTutorialId: Number(this.props.match.params.tutorialId)
|
|
}
|
|
|
|
componentDidUpdate(props, state){
|
|
if(state.tutorialId !== Number(this.props.match.params.tutorialId)){
|
|
this.setState({
|
|
tutorialArray: Number(this.props.match.params.tutorialId) === 1 ?
|
|
tutorials.slice(Number(this.props.match.params.tutorialId)-1, Number(this.props.match.params.tutorialId)+4)
|
|
: Number(this.props.match.params.tutorialId) === 2 ?
|
|
tutorials.slice(Number(this.props.match.params.tutorialId)-1-1, Number(this.props.match.params.tutorialId)+3)
|
|
: Number(this.props.match.params.tutorialId) === tutorials.length ?
|
|
tutorials.slice(Number(this.props.match.params.tutorialId)-4-1, Number(this.props.match.params.tutorialId)+4)
|
|
: Number(this.props.match.params.tutorialId) === tutorials.length-1 ?
|
|
tutorials.slice(Number(this.props.match.params.tutorialId)-3-1, Number(this.props.match.params.tutorialId)+3)
|
|
: tutorials.slice(Number(this.props.match.params.tutorialId)-2-1,Number(this.props.match.params.tutorialId)+2),
|
|
tutorialId: Number(this.props.match.params.tutorialId),
|
|
verticalTutorialId: Number(this.props.match.params.tutorialId)
|
|
})
|
|
}
|
|
}
|
|
|
|
verticalStepper = (step) => {
|
|
var newTutorialId = this.state.verticalTutorialId + step;
|
|
var tutorialArray = Number(newTutorialId) === 1 ?
|
|
tutorials.slice(newTutorialId-1, newTutorialId+4)
|
|
: newTutorialId === 2 ?
|
|
tutorials.slice(newTutorialId-1-1, newTutorialId+3)
|
|
: newTutorialId === tutorials.length ?
|
|
tutorials.slice(newTutorialId-4-1, newTutorialId+4)
|
|
: newTutorialId === tutorials.length-1 ?
|
|
tutorials.slice(newTutorialId-3-1, newTutorialId+3)
|
|
: tutorials.slice(newTutorialId-2-1, newTutorialId+2);
|
|
this.setState({ tutorialArray: tutorialArray, verticalTutorialId: newTutorialId });
|
|
}
|
|
|
|
render() {
|
|
var tutorialId = this.state.tutorialId;
|
|
var verticalTutorialId = this.state.verticalTutorialId;
|
|
return (
|
|
<div style={{marginRight: '10px'}}>
|
|
<Button
|
|
style={{minWidth: '30px', margin: 'auto', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
|
|
disabled={this.state.verticalTutorialId === 1}
|
|
onClick={() => {this.verticalStepper(-1)}}
|
|
>
|
|
{'<'}
|
|
</Button>
|
|
<div style={{display: 'flex', height: 'calc(100% - 25px - 25px)', width: 'max-content'}}>
|
|
<div style={{position: 'relative'}}>
|
|
<div
|
|
className={clsx(this.props.classes.progress, this.props.classes.progressForeground)}
|
|
style={{ zIndex: 1, borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`, height: `${(verticalTutorialId/tutorials.length)*100}%`}}>
|
|
</div>
|
|
<div
|
|
className={clsx(this.props.classes.progress, this.props.classes.progressBackground)}
|
|
style={{borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`}}>
|
|
</div>
|
|
</div>
|
|
<Stepper
|
|
activeStep={tutorialId}
|
|
orientation="vertical"
|
|
connector={<div style={{height: '10px'}}></div>}
|
|
classes={{root: this.props.classes.verticalStepper}}
|
|
>
|
|
{this.state.tutorialArray.map((tutorial, i) => {
|
|
var index = this.state.tutorialArray.indexOf(tutorials[verticalTutorialId-1]);
|
|
return (
|
|
<Step key={i}>
|
|
<Tooltip title={Object.keys(tutorial).length > 0 ? tutorial.title : ''} placement='right' arrow >
|
|
<Link to={`/tutorial/${i === index ? verticalTutorialId : verticalTutorialId - index + i}`}>
|
|
<StepLabel
|
|
StepIconComponent={'div'}
|
|
classes={{
|
|
root: tutorial === tutorials[verticalTutorialId-1] ?
|
|
tutorial === tutorials[tutorialId-1] ?
|
|
clsx(this.props.classes.stepIconLarge, this.props.classes.stepIconActive)
|
|
: this.props.classes.stepIconLarge
|
|
: tutorial === tutorials[verticalTutorialId-2] || tutorial === tutorials[verticalTutorialId] ?
|
|
tutorial === tutorials[tutorialId-1] ?
|
|
clsx(this.props.classes.stepIconMedium, this.props.classes.stepIconActive)
|
|
: this.props.classes.stepIconMedium
|
|
: tutorial === tutorials[tutorialId-1] ?
|
|
clsx(this.props.classes.stepIconSmall, this.props.classes.stepIconActive)
|
|
: this.props.classes.stepIconSmall
|
|
}}
|
|
>
|
|
</StepLabel>
|
|
</Link>
|
|
</Tooltip>
|
|
</Step>
|
|
)})}
|
|
</Stepper>
|
|
</div>
|
|
<Button
|
|
style={{minWidth: '30px', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
|
|
disabled={this.state.verticalTutorialId === tutorials.length}
|
|
onClick={() => {this.verticalStepper(1)}}
|
|
>
|
|
{'>'}
|
|
</Button>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
export default withRouter(withStyles(styles, {withTheme: true})(StepperVertical));
|