fix(Panes): Height should always take full screen
This commit is contained in:
@ -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%'
|
||||
};
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
Reference in New Issue
Block a user