102 lines
3.1 KiB
JavaScript
102 lines
3.1 KiB
JavaScript
![]() |
import React, { PropTypes } from 'react';
|
||
|
import { createSelector } from 'reselect';
|
||
|
import { connect } from 'react-redux';
|
||
|
|
||
|
import PureComponent from 'react-pure-render/component';
|
||
|
import { Col, Row } from 'react-bootstrap';
|
||
|
|
||
|
import TestSuite from './Test-Suite.jsx';
|
||
|
import Output from './Output.jsx';
|
||
|
import ToolPanel from './Tool-Panel.jsx';
|
||
|
|
||
|
const mapStateToProps = createSelector(
|
||
|
state => state.app.windowHeight,
|
||
|
state => state.app.navHeight,
|
||
|
(windowHeight, navHeight) => ({ height: windowHeight - navHeight - 50 })
|
||
|
);
|
||
|
|
||
|
/* eslint-disable max-len */
|
||
|
const description = [
|
||
|
'Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.',
|
||
|
'There are two ways to write comments in JavaScript:',
|
||
|
'Using <code>//</code> will tell JavaScript to ignore the remainder of the text on the current line:',
|
||
|
'<blockquote>// This is an in-line comment.</blockquote>',
|
||
|
'You can make a multi-line comment beginning with <code>/*</code> and ending with <code>*/</code>:',
|
||
|
'<blockquote>/* This is a <br> multi-line comment */</blockquote>',
|
||
|
'<strong>Best Practice</strong><br>As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code—both for others <em>and</em> for your future self.',
|
||
|
'<h4>Instructions</h4>',
|
||
|
'Try creating one of each type of comment.'
|
||
|
];
|
||
|
/* eslint-enable max-len */
|
||
|
|
||
|
export class SidePanel extends PureComponent {
|
||
|
constructor(...args) {
|
||
|
super(...args);
|
||
|
this.descriptionRegex = /\<blockquote|\<ol|\<h4|\<table/;
|
||
|
}
|
||
|
static displayName = 'SidePanel';
|
||
|
|
||
|
static propTypes = {
|
||
|
description: PropTypes.arrayOf(PropTypes.string),
|
||
|
height: PropTypes.number
|
||
|
};
|
||
|
|
||
|
static defaultProps = {
|
||
|
description
|
||
|
};
|
||
|
|
||
|
renderDescription(description, descriptionRegex) {
|
||
|
return description.map((line, index) => {
|
||
|
if (descriptionRegex.test(line)) {
|
||
|
return (
|
||
|
<div
|
||
|
dangerouslySetInnerHTML={{ __html: line }}
|
||
|
key={ line.slice(-6) + index } />
|
||
|
);
|
||
|
}
|
||
|
return (
|
||
|
<p
|
||
|
className='wrappable'
|
||
|
dangerouslySetInnerHTML= {{ __html: line }}
|
||
|
key={ line.slice(-6) + index }/>
|
||
|
);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
const { height } = this.props;
|
||
|
const style = {
|
||
|
overflowX: 'hidden',
|
||
|
overflowY: 'auto'
|
||
|
};
|
||
|
if (height) {
|
||
|
style.height = height + 'px';
|
||
|
}
|
||
|
return (
|
||
|
<div
|
||
|
ref='panel'
|
||
|
style={ style }>
|
||
|
<div>
|
||
|
<h4 className='text-center challenge-instructions-title'>
|
||
|
Build JavaScript Objects
|
||
|
</h4>
|
||
|
<hr />
|
||
|
<Row>
|
||
|
<Col
|
||
|
className='challenge-instructions'
|
||
|
xs={ 12 }>
|
||
|
{ this.renderDescription(description, this.descriptionRegex) }
|
||
|
</Col>
|
||
|
</Row>
|
||
|
</div>
|
||
|
<ToolPanel />
|
||
|
<Output />
|
||
|
<br />
|
||
|
<TestSuite />
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export default connect(mapStateToProps)(SidePanel);
|