@cyclops24: you might consider a more flexible alternative. By that I mean that you manage state via a parent component that automatically gets rerendered whenever you click a new menu item: https://community.onsen.io/topic/821/splitterside/3
JanvB
@JanvB
Posts made by JanvB
-
RE: manage splitterSide for use it as reusable component
-
RE: SplitterSide
@munsterlander: thank you. I managed to do it differently with three components (parent and 2 child components ( <SideMenu> and <Navigator> ). In short:
{/* Parent component with initialroute */} class Main extends Component { constructor( props ){ super( props ); this.state = { isOpen: false, route: { component: Home, key: "HOME_PAGE" } }; this.hide = this.hide.bind( this ); this.setView = this.setView.bind( this ); this.renderPage = this.renderPage.bind( this ); } ... renderPage( route, navigator ){ return <Page renderToolbar={ this.renderToolbar.bind( this ) } renderFixed={ this.renderFixed.bind( this ) } > <this.state.route.component key={ this.state.route.key } navigator={ navigator } { ...route.props } /> </Page> } ... render(){ return ( <Splitter> <SplitterSide side='left' isOpen={ this.state.isOpen } onClose={ this.hide.bind( this ) } onOpen={ this.show.bind( this ) } {/* Other options */} > <Page> <SideMenu hide={ this.hide } setView={ this.setView } /> </Page> </SplitterSide> <SplitterContent> <Navigator renderPage={ this.renderPage } initialRoute={ this.state.route } /> </SplitterContent> </Splitter>
Then in the <SideMenu> component you can alter the parents state via the setView function (accessible via this.props.setView):
{ /* Each menu-item has an id ('idx' ). MetuData is an array of objects defined outside of the React component: const menuData = [ { index: 1, title: "Home", key: "HOME_PAGE", component: Home }, { index: 2, title: "Page1", key: "PAGE1", component: Page1 }, { index: 3, title: "Page2", key: "PAGE2", component: Page2 }, { index: 4, title: "Page3", key: "PAGE3", component: Page3 } ]; The child component manages the parent state (in this example you import the Pages1/2/3 components in the <SideMenu> component). */ } export class SideMenu extends Component { constructor( props ){ super( props ); this.setRoute = this.setRoute.bind( this ); } setRoute( idx ){ const { component, key } = menuData.find( ( item ) => item.index === idx ); this.props.hide(); return this.props.setView( component, key ); } ...
Because of the state changes, React will rerender the parent component. It is probably a more React-style way of implementing this. (I already had this, it wasn’t working because I didn’t have to latest version of the react-onsenui package installed - there was an issue with the <Navigator> component: https://github.com/OnsenUI/react-onsenui/issues/94)
-
RE: SplitterSide
Hi,
You provide a very nice interactive tutorial.
Currently I am working on an app that contains a side menu. The setup is similar to the example provided in the tutorial (the navigation icon is located top-left). It is not clear to me how I should construct the navigation from the menu. Since this feature is not implemented in the tutorial for React, I was hoping that you can provide one.
Use case:
- User opens the side menu
- Clicks a menu item
- The contents of the SplitterContent component changes to that associated with the menu item that was clicked; the menu item icon should remain available in the top left corner
Many thanks
Regards,
Jan
-
RE: Navigator
The Onsen UI tutorial for React regarding the navigation via a side menu does no cover handling the click on a menu item. I do have a question about this part.
Let’s say that I have an app with a side-menu. It is a tree structure; there is no shortcut from a lower level menu item (e.g. Item 1.1) to another lower level item (e.g. Item 2.1) from a different Menu.
I am not making use of Redux by the way. In the App component I initialise the routing for the Root component. I am wondering which construct I should use to render the appropriate page given a click on a menu item (e.g. Menu item 2). Do you have any suggestions for me?
Menu structure:
MenuRoot |- Menu item 1 |- Item 1.1 |- Item 1.2 |- ... |- Menu item 2 |- Item 2.1 |- Item 2.2 |- ... |- ...
Code for the Appcomponent (top-level component), the entry-point for the side-menu code:
... // App component <Navigator renderPage={ this.renderPage } initialRoute={ { component: MenuRootPage, key: 'MENUROOT' } } /> ...
The UI component for the side menu:
... const menuData = [ { index: 1, title: "Menu item 1", component: "M1", icon: ... }, { index: 2, title: "Menu item 2", component: "M2", icon: ... }, { index: 3, title: "Menu item 3", component: "M3", icon: ... }, { index: 4, title: "Menu item 4", component: "M4", icon: ... } ]; ... <List dataSource={ menuData } renderHeader={ () => <ListHeader>Menu</ListHeader> } renderRow={ ( data ) => { return <ListItem key={ `menuItem-${data.index}` } modifier='longdivider' tappable > <Icon icon={ data.icon } size="50px" fixed-width="true" /> { `${data.title}` } </ListItem> } } />