fix(Panes): Height should always take full screen

This commit is contained in:
Berkeley Martinez
2018-01-08 12:00:56 -08:00
parent d86eba998b
commit 552f51624e
3 changed files with 7 additions and 33 deletions

View File

@ -7,7 +7,6 @@ import {
panesSelector,
panesByNameSelector,
panesMounted,
heightSelector,
widthSelector
} from './redux';
import Pane from './Pane.jsx';
@ -16,9 +15,8 @@ import Divider from './Divider.jsx';
const mapStateToProps = createSelector(
panesSelector,
panesByNameSelector,
heightSelector,
widthSelector,
(panes, panesByName, height) => {
(panes, panesByName) => {
let lastDividerPosition = 0;
return {
panes: panes
@ -33,8 +31,7 @@ const mapStateToProps = createSelector(
left: index === 0 ? 0 : left,
right: index + 1 === numOfPanes ? 0 : 100 - dividerLeft
};
}, {}),
height
}, {})
};
}
);
@ -42,7 +39,6 @@ const mapStateToProps = createSelector(
const mapDispatchToProps = { panesMounted };
const propTypes = {
height: PropTypes.number.isRequired,
panes: PropTypes.array,
panesMounted: PropTypes.func.isRequired,
render: PropTypes.func.isRequired
@ -83,9 +79,8 @@ export class Panes extends PureComponent {
}
render() {
const { height } = this.props;
const outerStyle = {
height,
height: '100%',
position: 'relative',
width: '100%'
};

View File

@ -27,11 +27,7 @@ export const types = createTypes([
'dividerClicked',
'dividerMoved',
'mouseReleased',
'windowResized',
// commands
'hidePane',
'updateNavHeight'
'windowResized'
], ns);
export const panesMapUpdated = createAction(
@ -49,24 +45,14 @@ export const dividerMoved = createAction(types.dividerMoved);
export const mouseReleased = createAction(types.mouseReleased);
export const windowResized = createAction(types.windowResized);
// commands
export const hidePane = createAction(types.hidePane);
export const updateNavHeight = createAction(types.updateNavHeight);
const defaultState = {
height: 600,
width: 800,
navHeight: 50,
panes: [],
panesByName: {},
panesMap: {},
pressedDivider: null
};
export const getNS = state => state[ns];
export const heightSelector = state => {
const { navHeight, height } = getNS(state);
return height - navHeight;
};
export const panesSelector = state => getNS(state).panes;
export const panesByNameSelector = state => getNS(state).panesByName;
@ -142,9 +128,8 @@ export default function createPanesAspects({ createPanesMap }) {
};
},
[types.mouseReleased]: state => ({ ...state, pressedDivider: null }),
[types.windowResized]: (state, { payload: { height, width } }) => ({
[types.windowResized]: (state, { payload: { width } }) => ({
...state,
height,
width
}),
// used to clear bin buttons
@ -153,10 +138,6 @@ export default function createPanesAspects({ createPanesMap }) {
panes: [],
panesByName: {},
pressedDivider: null
}),
[types.updateNavHeight]: (state, { payload: navHeight }) => ({
...state,
navHeight
})
}),
defaultState

View File

@ -10,12 +10,10 @@ export default function windowEpic(actions, _, { window }) {
return actions::ofType(types.panesMounted)
.switchMap(() => {
return Observable.fromEvent(window, 'resize', () => windowResized({
width: window.innerWidth,
height: window.innerHeight
width: window.innerWidth
}))
.startWith(windowResized({
width: window.innerWidth,
height: window.innerHeight
width: window.innerWidth
}));
});
}