import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import {
panesSelector,
panesByNameSelector,
panesMounted,
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 = { panesMounted };
const propTypes = {
height: PropTypes.number.isRequired,
panes: PropTypes.array,
panesMounted: PropTypes.func.isRequired,
render: PropTypes.func.isRequired
};
export class Panes extends PureComponent {
componentDidMount() {
this.props.panesMounted();
}
renderPanes() {
const {
render,
panes
} = this.props;
return panes.map(({ name, left, right, dividerLeft }) => {
const divider = dividerLeft ?
(