import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import FA from 'react-fontawesome';
import { Panel } from 'react-bootstrap';
import ns from './ns.json';
import Block from './Block.jsx';
import {
toggleThisPanel,
makePanelOpenSelector,
makePanelHiddenSelector
} from './redux';
import { makeSuperBlockSelector } from '../entities';
const dispatchActions = { toggleThisPanel };
// make selectors unique to each component
// see
// reactjs/reselect
// sharing-selectors-with-props-across-multiple-components
function makeMapStateToProps(_, { dashedName }) {
return createSelector(
makeSuperBlockSelector(dashedName),
makePanelOpenSelector(dashedName),
makePanelHiddenSelector(dashedName),
(superBlock, isOpen, isHidden) => ({
isOpen,
isHidden,
dashedName,
title: superBlock.title || dashedName,
blocks: superBlock.blocks || [],
message: superBlock.message
})
);
}
const propTypes = {
blocks: PropTypes.array,
dashedName: PropTypes.string,
isHidden: PropTypes.bool,
isOpen: PropTypes.bool,
message: PropTypes.string,
title: PropTypes.string,
toggleThisPanel: PropTypes.func
};
export class SuperBlock extends PureComponent {
constructor(...props) {
super(...props);
this.handleSelect = this.handleSelect.bind(this);
}
handleSelect(eventKey, e) {
e.preventDefault();
this.props.toggleThisPanel(eventKey);
}
renderBlocks(blocks) {
if (!Array.isArray(blocks) || !blocks.length) {
return null;
}
return blocks.map(dashedName => (