instructure-react / react-menu Goto Github PK

Is it possible to change the pointer type when hovering over the trigger. It currently shows a text cursor instead of a finger/hand/link pointer like for the options.

I tried going into node_modules and commenting out mouseover events, but it didn't work.

Any ideas?

Most reusable React components I have seen offer a CommonJS-compatible distribution that has the JSX files transpiled to ES5. You do have a version of these files in dist, but they rely on having a global React reference instead of it being required.

In our environment (where we render on the server and use webpack to prepare files for the browser), we cannot directly require either react-menu or react-menu/dist/react-menu. The first fails, because the files in lib include JSX and the second fails because we do not expose React globally.

Do you have a suggestion? I'm happy to offer a pull request with your guidance.

I opened your example on an iPhone and was surprised that the menu does not open when clicked on.

Are mobile devices intentionally not supported, or is this a bug?

I want to remove the border on the MenuTrigger. I have tried everything I can think of, but I just can't seem to affect the properties of the trigger.

What I've tried:
Menu.injectCSS({border: 'none'})
Menu.injectCSS({'border-style': 'none'})
Menu.injectCSS({Menu__MenuTrigger: {border: 'none'}})
Menu.injectCSS({MenuTrigger: {border: 'none'}})
Menu.injectCSS({Menu__MenuTrigger: {'border-style': 'none'}})
Menu.injectCSS({MenuTrigger: {'border-style': 'none'}})
Menu.injectCSS({".Menu__MenuTrigger": {border: 'none'}})
Menu.injectCSS({".Menu__MenuTrigger": {'border-style': 'none'}})
MenuTrigger.injectCSS({border: 'none'})
MenuTrigger.injectCSS({'border-style': 'none'})
Menu__MenuTrigger.injectCSS({border: 'none'})

It's quite frustrating not having an example of how to use the function in the readme.
I see you use jss, but doesn't seem to use the same signature as their injectSheet function

Please help, thanks

It doesn't look like there were any breaking changes in 0.12.x -> 0.13.x that would stop react-menu from working with react 0.13.

I want to jump to the Google home page in nav, where to add links. Please.

var React = require('react');
var ReactDOM = require('react-dom');

var Menu = require('react-menu');
var MenuTrigger = Menu.MenuTrigger;
var MenuOptions = Menu.MenuOptions;
var MenuOption = Menu.MenuOption;

var App = React.createClass({

render: function() {
return (

      <MenuOption>
        1st Option
      </MenuOption>

      <MenuOption onSelect={this.someHandler}>
        2nd Option
      </MenuOption>

      <div className='a-non-interactive-menu-item'>
        non-selectable item
      </div>

      <MenuOption disabled={true} onDisabledSelect={this.otherHanlder}>
        disabled option
      </MenuOption>

    </MenuOptions>
  </Menu>
);

}
});

ReactDOM.render(, document.body);

it seems that the latest version of the code creates the menu options and insert them into the DOM before the user clicks on the trigger.

This is a waste of DOM nodes if there is a lot of menu triggers on the page.

Should only create the DOM when the user clicks on the menu trigger.

i install your component by npm install --save react-menu and use it according your demo.
but it throw error when i build my project by webpack.
ERROR in ./~/react-menu/lib/components/MenuOption.js
Module parse failed: F:\src\tencentGit\mad-ui-richinput\node_modules\react-menu\lib\components\MenuOption.js Line 68: Unexpected token <
You may need an appropriate loader to handle this file type.
| render: function() {
| return (
| <div
| onClick={this.handleClick}
| onKeyUp={this.handleKeyUp}

maybe your component should't not include the jsx or webpack don't support to build npm dependence.

Hi,

I am using the "master" branch, because the "reactify" browserify-transform is specified in package.json.

But it looks like last commit (3a012ab) prevents from building using browserify: required files in lib/index.js can't be found (probably because of the .js to .jsx renaming).
@trungpham could you please have a look at this?

Thanks,

For some reason, my project cannot import react-menu.

It complains about:

/Users/trungpham/projects/edcast-ui/node_modules/react-menu/lib/components/Menu.js:139
    return (<div>
            ^
SyntaxError: Unexpected token <
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/trungpham/projects/edcast-ui/node_modules/react-menu/lib/index.js:1:74)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

Shouldn't the package.json's main property be "main": "./dist/react-menu", ?

As it is, I get an error:

/Users/rkoberg/Sites/tp/node_modules/react-menu/lib/components/Menu.js:139
      <div
      ^

SyntaxError: Unexpected token <
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:413:25)

I have 2 components using React Menu and when I open one and then the other, they both are open and I'd like to have the ability to close the unfocused menu when I open the other.

If that is built in with the blur event, it doesn't seem to be working.

we should switch from js-style to react-style. that project has more momentum.

Steps to reproduce:

• Have two or more menus showing
• Open one of the menus
• Click something else on the page
  • Menu should close
• Open one of the menus
• Click the trigger of the second menu
  • previous menu should close, but stays open

See lib/components/Menu.js. Code is only checking that the newly focused item has a Menu__ className. In this case the second menu also has the appropriate className. As such the first menu, although it looses focus, stays open.

Seen behavior on Chrome, does not appear to happen on other browsers.

Steps to reproduce:

• On Chrome, have a page that is long enough to have a scrollbar
• Open the menu
• Navigate the menu options using up/down arrow keys
• Notice the entire page moves along with it

go mess with http://instructure.github.io/ic-menu/ and inspect the generated html to see which attributes need to be on all the elements

What is the best option to attach it to an image, so after clicking the image it will trigger the opening of the selection box.

Something similar to this -

See example at http://knomedia.github.io/react-menu/