@Fran-Diox
I’m hitting some (maybe basic) issue. You mentioned before that the the Splitter should be the parent of Navigator for this to work. But then, how can I pass the APP Navigator instance to the Page within the SplitterSide component?
Am I missing something simple?
J.
@Fran-Diox @Onsen-UI
That was it! Thanks for the input!
As I said, I spent few hours digging into this. I’d be happy for the community to find this info in the React DOC (which is already excellent!).
J.
I just tried this in App.js:
...
const App = ({splitterOpen, actions}) => (
<Splitter>
<SplitterSide
style={{ boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }}
side='left'
width={250}
collapse={true}
isSwipeable={true}
isOpen={splitterOpen}
onClose={() => actions.splitterSetClose()}
onOpen={() => actions.splitterSetOpen()}
>
<Page>
<List
dataSource={[{title: 'Sign out', action: () => { console.log('sign out...'); }}]
}
renderRow={(menu) => (
<ListItem key={menu.title} onClick={menu.action} tappable>{menu.title}</ListItem>
)}
/>
</Page>
</SplitterSide>
<SplitterContent>
<Navigator
key='TOTO'
renderPage={renderPage}
initialRoute={{component: MainPage, key: 'MAIN_PAGE'}}
/>
</SplitterContent>
</Splitter>
);
...
And the back button now appears.
I think this should be added to the doc.
I’ll update my own code later and let you know the outcome.
J.
in main index.js:
...
render(
<AppContainer>
<Provider store={store}>
<App />
</Provider>
</AppContainer>,
rootElement
))
...
in App.js:
...
const renderPage = (route, navigator) => (
<route.component key={route.key} navigator={navigator} />
);
const App = () => (
<Navigator
key='TOTO'
renderPage={renderPage}
initialRoute={{component: MainPage, key: 'MAIN_PAGE'}}
/>
);
...
Finally the MainPage.js:
...
const MainPage = ({navigator, splitterOpen, actions}) => (
<Splitter>
<SplitterSide
style={{ boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }}
side='left'
width={250}
collapse={true}
isSwipeable={true}
isOpen={splitterOpen}
onClose={() => actions.splitterSetClose()}
onOpen={() => actions.splitterSetOpen()}
>
<Page>
<List
dataSource={[{title: 'Sign out', action: () => { console.log('sign out...'); }}]
}
renderRow={(menu) => (
<ListItem key={menu.title} onClick={menu.action} tappable>{menu.title}</ListItem>
)}
/>
</Page>
</SplitterSide>
<SplitterContent>
<Page renderToolbar={() => <NavBar title='Onsen Weather' navigator={navigator} />}>
<LocationList navigator={navigator} />
<AddLocation />
</Page>
</SplitterContent>
</Splitter>
);
...
J.
@munsterlander @Fran-Diox
I’m able to supply full code that shows the issue. The code is based on @argelius code https://github.com/argelius/react-onsenui-redux-weather
I made a tiny change by adding the side menu Splitter component and the above described behavior happens.
It is now clear that there is a BUG in the REACT side menu Splitter component.
Would this help in the debug process?
Thanks
J.
@munsterlander
Some news… I added a button in the toolbar whose action is
onClick={() => navigator.popPage()}
Here is the result in the console:
I’m puzzled… This shows that there is a Navigator instance “somewhere” that is not the one I believe i’m using.
How can I further debug this?
Thanks for any help.
J.
Hi,
Thanks for your input. Here is the “navigator” console.log dump:
I can see a length of 2. Is it what you want me to dump?
Thanks for your help,
J.
Happy New Year to everyone!
I’m having an unexpected behavior using the <Splitter> menu. I’m using React and intend to setup an HOC that adds the <Splitter> Menu to any page. Here is the HOC (most parts inspired from [great!] documentation):
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as Actions from '../actions';
import {Page, Splitter, SplitterSide, SplitterContent, List, ListItem} from 'react-onsenui';
import SignIn from '../components/auth/SignIn';
export default function (ComposedComponent) {
class AddSplitterContent extends Component {
constructor (props) {
super(props);
}
render () {
const {splitterOpen, actions, navigator} = this.props;
return(
<Splitter>
<SplitterSide
style={{
boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
}}
side='left'
width={250}
collapse={true}
isSwipeable={true}
isOpen={splitterOpen}
onClose={() => actions.splitterSetClose()}
onOpen={() => actions.splitterSetOpen()}
>
<Page>
<List
dataSource={
[{title: 'Sign out', action: () => {
actions.signOutUser();
}}]
}
renderRow={(menu) => (
<ListItem key={menu.title} onClick={menu.action} tappable>{menu.title}</ListItem>
)}
/>
</Page>
</SplitterSide>
<SplitterContent>
<ComposedComponent {...this.props} />
</SplitterContent>
</Splitter>
);
}
}
const mapStateToProps = (state) => ({
splitterOpen: state.ui.splitterOpen
});
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(Actions, dispatch)
};
};
return connect(
mapStateToProps, mapDispatchToProps
)(AddSplitterContent);
}
This HOC works well and I can plug in the <Splitter> wherever I need.
Having said that, the behavior I’m observing is following.
export default addSplitterContent(MainPage);
The Navigator’s next page has the “Back” Button on top left of the Page (that is the expected behavior).
export default addSplitterContent(MainPage);
The Navigator’s next page doesn’t have the “Back” Button on top left of the Page (that is the expected behavior).
What I noticed when inspecting the components within Chrome is that there is a tiny difference between both cases:
Does this have something to do with the Navigator stack? I read from the doc that when the stack is empty then the “Back” Button will not show up. I checked that in my code and there are 2 elements in the stack (which is expected!).
Sorry to be so verbose but the problematic is bit difficult to describe in a shorter way.
Thanks for any hint/support the community can provide,
J.