Set menu icon - Githubissues

rctx-contextmenu version: 1.3.5
node version: 16.13.2
npm (or yarn) version: 8.1.2

Relevant code or config

<Submenu title="排序" icon={<EditOutlined />}>
  <ContextMenuItem>无</ContextMenuItem>
  <ContextMenuItem>升序</ContextMenuItem>
  <ContextMenuItem>降序</ContextMenuItem>
</Submenu>

What you did: I want to add Icon to Submenu。

What happened: Invalid

Reproduction repository:

Problem description: I want to add Icon to Submenu。But it invalid.

Suggested solution: In contentMenuItem

<div
  className={classnames(
    'contextmenu__item',
    {
      'contextmenu__item--disabled': disabled,
    },
    ...className.split(' ')
  )}
  onClick={handleClickEvent}
  {...attributes}
  ref={contextMenuItem}
>
  /* change next line */
  {icon && <div className="contextmenu__icon">{icon}</div>}
  {children}
</div>

In Submenu

<div
  className={classnames('submenu', ...className.split(' '))}
  onMouseOver={() => calculateSubmenuPos()}
  onMouseOut={() => hideSubmenu()}
  onFocus={() => null}
  onBlur={() => null}
  ref={submenuItem}
  {...attributes}
>
  /* change next line */
  <ContextMenuItem icon={icon}>{title}</ContextMenuItem>
  <div className="submenu__item" ref={submenuEl} style={submenuStyle}>
    {children}
  </div>
</div>

In index.scss


  &__icon {
    margin-right: 15px;
  }
  .submenu {
    $submenu: '.submenu';

It may work. Thanks!!!

reachtokish / rctx-contextmenu

Set menu icon #31