Commit a1514133 authored by Benjamin Bouvier's avatar Benjamin Bouvier
Browse files

Store screen size state in the top-level component and pass it down;

parent 3c96be43
......@@ -21,8 +21,8 @@ import SyncButton from './sync-button';
const OPERATION_BALLAST = 10;
// Keep in sync with style.css.
function computeOperationHeight() {
return window.innerWidth < 768 ? 41 : 54;
function computeOperationHeight(isSmallScreen) {
return isSmallScreen ? 41 : 54;
}
function filterOperationsThisMonth(operations) {
......@@ -50,7 +50,7 @@ class OperationsComponent extends React.Component {
this.getOperationHeight = this.getOperationHeight.bind(this);
this.getNumItems = this.getNumItems.bind(this);
this.operationHeight = computeOperationHeight();
this.operationHeight = computeOperationHeight(this.props.isSmallScreen);
this.selectModalOperation = this.selectModalOperation.bind(this);
......@@ -92,7 +92,7 @@ class OperationsComponent extends React.Component {
this.heightAbove = heightAbove;
this.operationHeight = computeOperationHeight();
this.operationHeight = computeOperationHeight(this.props.isSmallScreen);
}
computeHeightAbove() {
......
......@@ -22,29 +22,60 @@ import WeboobInstallReadme from './components/init/weboob-readme';
import AccountWizard from './components/init/account-wizard';
import Loading from './components/ui/loading';
const IS_SMALL_SCREEN = 768;
const SMALL_SCREEN_MAX_WIDTH = 768;
function computeIsSmallScreen(width = null) {
let actualWidth = width;
if (width === null) {
// Mocha does not know window, tests fail without testing window != undefined.
actualWidth = typeof window !== 'undefined' ? window.innerWidth : +Infinity;
}
return actualWidth <= SMALL_SCREEN_MAX_WIDTH;
}
// Now this really begins.
class BaseApp extends React.Component {
constructor(props) {
super(props);
let isSmallScreen = computeIsSmallScreen();
this.state = {
isMenuHidden: window.innerWidth < IS_SMALL_SCREEN
isMenuHidden: isSmallScreen,
isSmallScreen
};
this.menu = null;
this.handleMenuToggle = this.handleMenuToggle.bind(this);
this.handleWindowResize = this.handleWindowResize.bind(this);
this.resizeTimer = null;
}
handleMenuToggle() {
this.setState({ isMenuHidden: !this.state.isMenuHidden });
}
handleWindowResize(event) {
clearTimeout(this.resizeTimer);
this.resizeTimer = setTimeout(() => {
this.setState({
isSmallScreen: computeIsSmallScreen(event.target.innerWidth)
});
}, 500);
}
componentDidMount() {
window.addEventListener('resize', this.handleWindowResize);
}
componentWillUnMount() {
window.removeEventListener('resize', this.handleWindowResize);
}
render() {
let { currentAccountId, initialAccountId, location, maybeCurrentAccount } = this.props;
let handleContentClick = null;
if (window.innerWidth < IS_SMALL_SCREEN) {
if (this.props.isSmallScreen) {
handleContentClick = () => {
this.setState({ isMenuHidden: true });
};
......@@ -75,6 +106,13 @@ class BaseApp extends React.Component {
return <Redirect to='/' />;
};
const makeOperationList = props => (
<OperationList
{ ...props }
isSmallScreen={ this.state.isSmallScreen }
/>
);
const renderMain = () => {
if (!this.props.isWeboobInstalled) {
return (
......@@ -135,7 +173,7 @@ class BaseApp extends React.Component {
<Switch>
<Route
path={ '/reports/:currentAccountId' }
component={ OperationList }
render={ makeOperationList }
/>
<Route
path={ '/budget/:currentAccountId' }
......@@ -185,7 +223,7 @@ class BaseApp extends React.Component {
}
BaseApp.propTypes = {
// True if weboob 1.1 (at least) is installed.
// True if an adequate version of weboob is installed.
isWeboobInstalled: React.PropTypes.bool.isRequired,
// True if the user has at least one bank access.
......
......@@ -11,7 +11,6 @@ import {
// Basic action creators
const basic = {
setSearchField(field, value) {
return {
type: SET_SEARCH_FIELD,
......@@ -51,7 +50,6 @@ export function setSearchFields(fieldsMap) {
export function resetSearch(showDetails) {
return basic.resetSearch(showDetails);
}
export function toggleSearchDetails(show) {
return basic.toggleSearchDetails(show);
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment