Wrapping MenuItem or SubMenu wasn't possible anymore

[codeart1st]

Sorry for all the PRs 😄
With my previous added implementation it wasn't possible anymore to wrap e.g. the MenuItem in an custom component like this:

export default MyCoolCustomMenuItemAction = () => (
  <MenuItem onClick={e => alert('fancy stuff')}>
    <CoolCustomIcon /><span>Menu Entry</span>
  </MenuItem>
)

<ContextMenu>
  <MyCoolCustomMenuItemAction />
</ContextMenu>

Now I implemented a simple recursive way to render and select the MenuItems/SubMenus.

[vkbansal]

Sorry for all the PRs 😄

No issues.

[codeart1st]

Mh... the code works with elements like div, but not with react components. Need to debug it...

[codeart1st]

my example was quite bad.

export default MyCoolCustomMenuItemAction = () => (
  <MenuItem onClick={e => alert('fancy stuff')}>
    <CoolCustomIcon /><span>Menu Entry</span>
  </MenuItem>
)
<ContextMenu>
  <MyCoolCustomMenuItemAction />
</ContextMenu>

With this PR I iterate through props.children and the MyCoolCustomMenuItemAction has no children 😄

I haven't any ideas yet to achive the above example working

[codeart1st]

import React from 'react'
import PropTypes from 'prop-types'
import { MenuItem } from 'react-contextmenu'
import FaPlus from 'react-icons/lib/fa/plus'

const AddMarkerAction = ({ children }) => (
  <div>{ children }</div>
)

AddMarkerAction.propTypes = {
  children: PropTypes.node
}

AddMarkerAction.defaultProps = {
  children: (
    <MenuItem>
      <FaPlus />
      <span>Hinweispunkt setzen</span>
    </MenuItem>
  )
}

export default AddMarkerAction

This works 👍

[vkbansal]

Can I merge this now?

[codeart1st]

Yes, tested it in my local project. Works great.