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:
- Without HOC
<ons-back-button class=“back-button” style=“display: inline-block;”><span class=“back-button__icon”></span><span class=“back-button__label”>Back</span></ons-back-button>
- With HOC
<ons-back-button class=“back-button” style=“display: none;”><span class=“back-button__icon”></span><span class=“back-button__label”>Back</span></ons-back-button>
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.