Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Left Nav Routes and event handlers #1787

Closed
hackingbeauty opened this issue Oct 2, 2015 · 8 comments
Closed

Left Nav Routes and event handlers #1787

hackingbeauty opened this issue Oct 2, 2015 · 8 comments
Labels
component: menu This is the name of the generic UI component, not the React module!

Comments

@hackingbeauty
Copy link
Contributor

Hi, I'm trying to specify an action when a user clicks on an item in the LeftNav component; however, nothing is happening.

How do I attach behavior to a link in the LeftNav?

render() {
    var styles = this.getStyles();
    var authData = this.state.authData;

    var menuItems = [  
      { type: MenuItem.Types.SUBHEADER, text: 'Settings' },
      {
         type: MenuItem.Types.LINK,
         route: 'root',
         text: 'Root'
      }
    ];
}

    return (
      <div id="app-left-nav">
        <LeftNav ref="leftNav" docked={false} menuItems={menuItems} onNavOpen={this.onNavOpen} onChange={this.onChange}/>
      </div>
    );
}
@shaurya947
Copy link
Contributor

@hackingbeauty you have defined an onChange function right? If you haven't, that's what you need. Here's an example:

onChange(e, key, payload) {
    <some_instance_of_react_router>.transitionTo(payload.route);
  }

Of course, you need to set up React router and define the routes. Here's a basic example on how to do so. You can also look at how routing is done in the source code for the docs, namely the app.jsx, app-routes.jsx and app-left-nav.jsx files.

@hackingbeauty
Copy link
Contributor Author

Yes, I have defined onChange; however, onChange doesn't seem to work.

onChange(e, key, payload){
    alert('hi');
    transitionTo(payload.route);
  },

  render() {
    var menuItems = [  
      { type: MenuItem.Types.SUBHEADER, text: 'Settings' },
      {
         type: MenuItem.Types.LINK,
         route: 'all-videos',
         text: 'All videos'
      },
      {
         type: MenuItem.Types.LINK,
         route: 'tagged-videos',
         text: 'Tagged videos'
      }
    ];

    return (
      <div id="app-left-nav">
        <LeftNav ref="leftNav" docked={false} menuItems={menuItems} onChange={this.onChange}/>
      </div>
    );
  }

Any ideas?

@shaurya947
Copy link
Contributor

If you debug with developer tools on Chrome or something, does the console say anything? (warnings / errors)

@jason-henriksen
Copy link

Did anything ever come of this? I cannot get any item in LeftNav to respond to a click either.

@shaurya947
Copy link
Contributor

Also, adding @oliviertassinari and @hai-cea so they can look into this..

@alitaheri
Copy link
Member

LeftNav now supports nested children, which is the preferred usage. the actionJSON will soon be deprecated.

@hackingbeauty
Copy link
Contributor Author

So how can we use this? Can I put React components inside of the LeftNav now?

@alitaheri
Copy link
Member

Yes, you can pretty much put anything in it, just like a div.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: menu This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

5 participants