React-Onsen: Navigator inside Splitter

[William Rosa]

Hello,

I have been trying a hand moving my app to React Onsen but I have hit a wall on how to properly have the Splitter have access to the Navigator:

Here bellow is the entry point for my app:

import React from 'react';
import ReactDOM from 'react-dom';
import { Navigator, Splitter, SplitterSide, SplitterContent } from 'react-onsenui';

import { Menu } from './components';
import { store, closeMenuActionCreator, openMenuActionCreator } from './store';
import { routes } from './routes';

const el = React.createElement;

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false, menuOpened: false, initialRoute: routes.home };
        this.unsubscribe;

        this.setStateFromStore = this.setStateFromStore.bind(this);
        this.renderPage = this.renderPage.bind(this);
        this.closeMenu = this.closeMenu.bind(this);
        this.openMenu = this.openMenu.bind(this);
    }

    componentWillMount() {
        this.setStateFromStore();
        this.unsubscribe = store.subscribe(() => {
            this.setStateFromStore();
        });
    }

    componentWillUnmount() {
        this.unsubscribe();
    }

    componentDidMount() {
        document.addEventListener('deviceready', () => {
            console.log("Cordova is ready");
        }, false);
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });
        console.error(error, info);
    }

    setStateFromStore() {
        const state = store.getState();
        this.setState({
            menuOpened: state.menu.open,
            initialRoute: state.nav.initialRoute
        });
    }

    closeMenu() {
        store.dispatch(closeMenuActionCreator());
    }

    openMenu() {
        store.dispatch(openMenuActionCreator());
    }

    renderPage(route, navigator) {
        route.props = route.props || {};
        route.props.navigator = navigator;
        return el(route.component, route.props);
    }

    render() {
        console.log(this.state);
        let content;
        if (this.state.hasError)
            content = el('p', null, "App Crashed!");
        else
            content = el(Navigator, { initialRoute: this.state.initialRoute, renderPage: this.renderPage });

        return el(Splitter, null,
            el(SplitterSide, {
                side: "left",
                width: 300,
                collapse: "(max-width: 768px)",
                isOpen: this.state.menuOpened,
                onClose: this.closeMenu,
                onOpen: this.openMenu
            },
                el(Menu)
            ),
            el(SplitterContent, null, content)
        );
    }
}

ReactDOM.render(el(App), document.getElementById('app'));

After banging my head against this code for a while the best I could get to was to have the ‘initialRoute’ of Navigator be reset by Redux, so that the Splitter menu items could simply fire an action containing the new route. But this does nothing…

I did try moving the Splitter down to inside the Navigator and part of each Page I create, but this broke animation and started causing duplicate key errors inside Navigator when moving back and forth between the menu items in the Splitter.

This seems like a relly basic app feature to be so damn hard to implement in Onsen, so I can use any help you can give.

Thank you.

[Fran Diox]

@William-Rosa There is an example like that in the playground site: http://tutorial.onsen.io/?framework=react&category=common patterns&module=splitter_navigator

[William Rosa]

I was so close… Thank you so much for this!