import React, { PureComponent, PropTypes } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import {
panesSelector,
panesByNameSelector,
heightSelector,
widthSelector
} from './redux';
import Pane from './Pane.jsx';
import Divider from './Divider.jsx';
const mapStateToProps = createSelector(
panesSelector,
panesByNameSelector,
heightSelector,
widthSelector,
(panes, panesByName, height) => {
let lastDividerPosition = 0;
return {
panes: panes
.map(name => panesByName[name])
.filter(({ isHidden })=> !isHidden)
.map((pane, index, { length: numOfPanes }) => {
const dividerLeft = pane.dividerLeft || 0;
const left = lastDividerPosition;
lastDividerPosition = dividerLeft;
return {
...pane,
left: index === 0 ? 0 : left,
right: index + 1 === numOfPanes ? 0 : 100 - dividerLeft
};
}, {}),
height
};
}
);
const mapDispatchToProps = null;
const propTypes = {
height: PropTypes.number.isRequired,
nameToComponent: PropTypes.object.isRequired,
panes: PropTypes.array
};
export class Panes extends PureComponent {
renderPanes() {
const {
nameToComponent,
panes
} = this.props;
return panes.map(({ name, left, right, dividerLeft }) => {
const { Component } = nameToComponent[name] || {};
const FinalComponent = Component ? Component : 'span';
const divider = dividerLeft ?
(