50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
|
|
import Hardware from './Hardware';
|
|
import Requirement from './Requirement';
|
|
import BlocklyWindow from '../Blockly/BlocklyWindow';
|
|
|
|
import Grid from '@material-ui/core/Grid';
|
|
import Typography from '@material-ui/core/Typography';
|
|
|
|
class Instruction extends Component {
|
|
|
|
render() {
|
|
var step = this.props.step;
|
|
var isHardware = step.hardware && step.hardware.length > 0;
|
|
var areRequirements = step.requirements && step.requirements.length > 0;
|
|
return (
|
|
<div>
|
|
<Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
|
|
<Typography style={isHardware ? {} : {marginBottom: '5px'}}>{step.text}</Typography>
|
|
{isHardware ?
|
|
<Hardware picture={step.hardware}/> : null}
|
|
{areRequirements > 0 ?
|
|
<Requirement tutorialIds={step.requirements}/> : null}
|
|
{step.xml ?
|
|
<Grid container spacing={2} style={{marginBottom: '5px'}}>
|
|
<Grid item xs={12}>
|
|
<BlocklyWindow
|
|
svg
|
|
initialXml={step.xml}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
: null }
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
Instruction.propTypes = {
|
|
currentTutorialId: PropTypes.number,
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
currentTutorialId: state.tutorial.currentId
|
|
});
|
|
|
|
export default connect(mapStateToProps, null)(Instruction);
|