Files
freeCodeCamp/common/app/routes/challenges/components/map/Super-Block.jsx

71 lines
1.7 KiB
JavaScript
Raw Normal View History

import React, { PropTypes } from 'react';
import PureComponent from 'react-pure-render/component';
import FA from 'react-fontawesome';
import { Panel } from 'react-bootstrap';
import Block from './Block.jsx';
export default class SuperBlock extends PureComponent {
2016-06-21 16:28:13 -07:00
constructor(...props) {
super(...props);
this.handleSelect = this.handleSelect.bind(this);
}
static displayName = 'SuperBlock';
static propTypes = {
title: PropTypes.string,
2016-06-21 16:28:13 -07:00
dashedName: PropTypes.string,
message: PropTypes.string,
2016-06-21 16:28:13 -07:00
blocks: PropTypes.array,
mapUi: PropTypes.object,
toggleThisPanl: PropTypes.func
};
2016-06-21 16:28:13 -07:00
handleSelect(eventKey, e) {
e.preventDefault();
this.props.toggleThisPanel(eventKey);
}
renderBlocks(blocks) {
if (!Array.isArray(blocks) || !blocks.length) {
return <div>No Blocks Found</div>;
}
return blocks.map(block => {
return (
<Block
key={ block.title }
2016-06-09 16:02:51 -07:00
{ ...block }
/>
);
});
}
render() {
2016-06-21 16:28:13 -07:00
const { title, dashedName, blocks, message, mapUi = {} } = this.props;
return (
<Panel
bsClass='map-accordion-panel'
collapsible={ true }
2016-06-21 16:28:13 -07:00
eventKey={ dashedName || title }
expanded={ dashedName ? mapUi[dashedName] : true }
header={ <h2><FA name='caret-right' />{ title }</h2> }
id={ title }
2016-06-21 16:28:13 -07:00
key={ dashedName || title }
onSelect={ this.handleSelect }
2016-06-09 16:02:51 -07:00
>
{
message ?
<div className='challenge-block-description'>
{ message }
</div> :
''
}
<div
2016-06-09 16:02:51 -07:00
className='map-accordion-block'
>
{ this.renderBlocks(blocks) }
</div>
</Panel>
);
}
}