Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. JanvB
    J
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    JanvB

    @JanvB

    1
    Reputation
    4
    Posts
    1559
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    JanvB Follow

    Posts made by JanvB

    • RE: manage splitterSide for use it as reusable component

      @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

      posted in Onsen UI
      J
      JanvB
    • 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)

      posted in React
      J
      JanvB
    • 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

      posted in React
      J
      JanvB
    • 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>
      			}
      		}
      	/>
      
      posted in React
      J
      JanvB