63 lines
1.3 KiB
JavaScript
63 lines
1.3 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { bindActionCreators } from 'redux';
|
|
import { connect } from 'react-redux';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { previewMounted } from '../redux';
|
|
|
|
import './preview.css';
|
|
|
|
const mainId = 'fcc-main-frame';
|
|
|
|
const mapDispatchToProps = dispatch =>
|
|
bindActionCreators(
|
|
{
|
|
previewMounted
|
|
},
|
|
dispatch
|
|
);
|
|
|
|
const propTypes = {
|
|
className: PropTypes.string,
|
|
disableIframe: PropTypes.bool,
|
|
previewMounted: PropTypes.func.isRequired
|
|
};
|
|
|
|
class Preview extends Component {
|
|
constructor(...props) {
|
|
super(...props);
|
|
|
|
this.state = {
|
|
iframeStatus: props.disableIframe
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.props.previewMounted();
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (this.props.disableIframe !== prevProps.disableIframe) {
|
|
// eslint-disable-next-line react/no-did-update-set-state
|
|
this.setState({ iframeStatus: !this.state.iframeStatus });
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const iframeToggle = this.state.iframeStatus ? 'disable' : 'enable';
|
|
return (
|
|
<div className={`challenge-preview ${iframeToggle}-iframe`}>
|
|
<iframe className={'challenge-preview-frame'} id={mainId} title='Challenge Preview'/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Preview.displayName = 'Preview';
|
|
Preview.propTypes = propTypes;
|
|
|
|
export default connect(
|
|
null,
|
|
mapDispatchToProps
|
|
)(Preview);
|