2017-12-15 21:53:32 +00:00
|
|
|
import React, { PureComponent } from 'react';
|
2017-11-10 01:10:30 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2016-06-22 21:55:35 +00:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { createSelector } from 'reselect';
|
2016-03-23 05:13:05 +00:00
|
|
|
import FA from 'react-fontawesome';
|
|
|
|
import { Panel } from 'react-bootstrap';
|
|
|
|
|
2017-08-01 03:04:01 +00:00
|
|
|
import ns from './ns.json';
|
2018-01-06 23:27:13 +00:00
|
|
|
import Blocks from './Blocks.jsx';
|
2016-07-15 00:13:48 +00:00
|
|
|
import {
|
2017-08-01 03:04:01 +00:00
|
|
|
toggleThisPanel,
|
|
|
|
|
2018-01-03 01:11:27 +00:00
|
|
|
makePanelOpenSelector
|
2017-08-01 03:04:01 +00:00
|
|
|
} from './redux';
|
|
|
|
import { makeSuperBlockSelector } from '../entities';
|
2016-03-23 05:13:05 +00:00
|
|
|
|
2018-01-06 23:27:13 +00:00
|
|
|
const mapDispatchToProps = { toggleThisPanel };
|
2016-07-15 00:13:48 +00:00
|
|
|
// make selectors unique to each component
|
|
|
|
// see
|
|
|
|
// reactjs/reselect
|
|
|
|
// sharing-selectors-with-props-across-multiple-components
|
2018-01-06 23:27:13 +00:00
|
|
|
function mapStateToProps(_, { dashedName }) {
|
2016-07-15 00:13:48 +00:00
|
|
|
return createSelector(
|
2017-08-01 03:04:01 +00:00
|
|
|
makeSuperBlockSelector(dashedName),
|
|
|
|
makePanelOpenSelector(dashedName),
|
2018-01-03 01:11:27 +00:00
|
|
|
(superBlock, isOpen) => ({
|
2016-07-15 00:13:48 +00:00
|
|
|
isOpen,
|
|
|
|
dashedName,
|
2017-08-01 03:04:01 +00:00
|
|
|
title: superBlock.title || dashedName,
|
2018-02-20 13:45:43 +00:00
|
|
|
blocks: superBlock.blocks || []
|
2016-07-15 00:13:48 +00:00
|
|
|
})
|
|
|
|
);
|
2017-08-01 03:04:01 +00:00
|
|
|
}
|
2016-07-15 00:13:48 +00:00
|
|
|
|
2017-01-12 06:54:43 +00:00
|
|
|
const propTypes = {
|
|
|
|
blocks: PropTypes.array,
|
|
|
|
dashedName: PropTypes.string,
|
|
|
|
isOpen: PropTypes.bool,
|
|
|
|
title: PropTypes.string,
|
|
|
|
toggleThisPanel: PropTypes.func
|
|
|
|
};
|
|
|
|
|
2016-06-22 21:55:35 +00:00
|
|
|
export class SuperBlock extends PureComponent {
|
|
|
|
constructor(...props) {
|
|
|
|
super(...props);
|
|
|
|
this.handleSelect = this.handleSelect.bind(this);
|
2016-06-21 23:28:13 +00:00
|
|
|
}
|
|
|
|
handleSelect(eventKey, e) {
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.toggleThisPanel(eventKey);
|
|
|
|
}
|
|
|
|
|
2016-06-23 03:25:49 +00:00
|
|
|
renderHeader(isOpen, title, isCompleted) {
|
|
|
|
return (
|
2017-08-01 03:04:01 +00:00
|
|
|
<div className={ isCompleted ? 'faded' : '' }>
|
2016-06-23 03:25:49 +00:00
|
|
|
<FA
|
2017-08-01 03:04:01 +00:00
|
|
|
className={ `${ns}-caret` }
|
2016-06-23 03:25:49 +00:00
|
|
|
name={ isOpen ? 'caret-down' : 'caret-right' }
|
2017-08-01 03:04:01 +00:00
|
|
|
size='lg'
|
2016-06-23 03:25:49 +00:00
|
|
|
/>
|
|
|
|
{ title }
|
2017-08-01 03:04:01 +00:00
|
|
|
</div>
|
2016-06-23 03:25:49 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-03-23 05:13:05 +00:00
|
|
|
render() {
|
2016-06-22 21:55:35 +00:00
|
|
|
const {
|
|
|
|
title,
|
|
|
|
dashedName,
|
|
|
|
blocks,
|
2018-01-03 01:11:27 +00:00
|
|
|
isOpen
|
2016-06-22 21:55:35 +00:00
|
|
|
} = this.props;
|
2016-03-23 05:13:05 +00:00
|
|
|
return (
|
|
|
|
<Panel
|
2017-08-01 03:04:01 +00:00
|
|
|
bsClass={ `${ns}-accordion-panel` }
|
2016-03-23 05:13:05 +00:00
|
|
|
collapsible={ true }
|
2016-06-21 23:28:13 +00:00
|
|
|
eventKey={ dashedName || title }
|
2016-06-22 21:55:35 +00:00
|
|
|
expanded={ isOpen }
|
2016-06-23 03:25:49 +00:00
|
|
|
header={ this.renderHeader(isOpen, title) }
|
2016-03-23 05:13:05 +00:00
|
|
|
id={ title }
|
2016-06-21 23:28:13 +00:00
|
|
|
key={ dashedName || title }
|
|
|
|
onSelect={ this.handleSelect }
|
2016-06-09 23:02:51 +00:00
|
|
|
>
|
2018-01-06 23:27:13 +00:00
|
|
|
<Blocks blocks={ blocks } />
|
2016-03-23 05:13:05 +00:00
|
|
|
</Panel>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2016-06-22 21:55:35 +00:00
|
|
|
|
2017-01-12 06:54:43 +00:00
|
|
|
SuperBlock.displayName = 'SuperBlock';
|
|
|
|
SuperBlock.propTypes = propTypes;
|
|
|
|
|
2016-06-22 21:55:35 +00:00
|
|
|
export default connect(
|
2018-01-06 23:27:13 +00:00
|
|
|
mapStateToProps,
|
|
|
|
mapDispatchToProps
|
2016-06-22 21:55:35 +00:00
|
|
|
)(SuperBlock);
|