feat(menu): add render-extra prop (#723)

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -6,6 +6,7 @@
 
 - `n-scrollbar` add `scrollbarWidth`, `scrollbarHeight` and `scrollbarBorderRadius` common theme variables, closes [#649](https://github.com/TuSimple/naive-ui/issues/649).
 - `n-menu` doesn't should icon placeholder when `render-icon` returns falsy value, closes [#722](https://github.com/TuSimple/naive-ui/issues/722).
+- `n-menu` add `render-extra` prop.
 - Cancel `n-loading-bar` components `finish`'s logic that the default event.
 
 ## 2.15.11 (2021-07-29)

CHANGELOG.zh-CN.md

@@ -6,7 +6,9 @@
 
 - `n-scrollbar` 增加 `scrollbarWidth`、`scrollbarHeight` 和　`scrollbarBorderRadius`　公共主题变量，关闭 [#649](https://github.com/TuSimple/naive-ui/issues/649)
 - `n-menu` 在 `render-icon` 返回 falsy 值的时候不渲染 icon 的占位符，关闭 [#722](https://github.com/TuSimple/naive-ui/issues/722)
+- `n-menu` 新增 `render-extra` 属性
 - 取消 `n-loading-bar` 中 `finish` 方法的兜底逻辑
+
 ## 2.15.11 (2021-07-29)
 
 ### Fixes

src/menu/demos/enUS/index.demo-entry.md

@@ -37,6 +37,7 @@ long-label
 | inverted | `boolean` | `false` | Use inverted style. |
 | options | `Array<MenuOption \| MenuOptionGroup>` | `[]` | Items data of menu. |
 | mode | `'vertical' \| 'horizontal'` | `'vertical'` | Menu layout. |
+| render-extra | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | Render function that renders all extras. |
 | render-icon | `(option: MenuOption) => VNodeChild` | `undefined` | Render function that renders all icons. |
 | render-label | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | Render function that renders all labels. |
 | root-indent | `number` | `undefined` | The indent of menu's first level children. If not set, menu will use `indent` in place of it. |

src/menu/demos/zhCN/index.demo-entry.md

@@ -37,6 +37,7 @@ long-label
 | inverted | `boolean` | `false` | 使用反转样式 |
 | options | `Array<MenuOption \| MenuOptionGroup>` | `[]` | 菜单的数据 |
 | mode | `'vertical' \| 'horizontal'` | `'vertical'` | 菜单的布局方式 |
+| render-extra | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | 批量处理菜单额外部分渲染 |
 | render-icon | `(option: MenuOption) => VNodeChild` | `undefined` | 批量处理菜单图标渲染 |
 | render-label | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | 批量处理菜单标签渲染 |
 | root-indent | `number` | `32` | 菜单第一级的缩进，如果没有设定，使用 `indent` 代替 |

src/menu/src/Menu.tsx

@@ -154,6 +154,9 @@ const menuProps = {
   renderLabel: Function as PropType<
   (option: MenuOption | MenuGroupOption) => VNodeChild
   >,
+  renderExtra: Function as PropType<
+  (option: MenuOption | MenuGroupOption) => VNodeChild
+  >,
   dropdownPlacement: {
     type: String as PropType<FollowerPlacement>,
     default: 'bottom'

src/menu/src/MenuOptionContent.tsx

@@ -63,7 +63,7 @@ export default defineComponent({
     const {
       clsPrefix,
       tmNode,
-      menuProps: { renderIcon, renderLabel, expandIcon }
+      menuProps: { renderIcon, renderLabel, renderExtra, expandIcon }
     } = this
     const icon = renderIcon ? renderIcon(tmNode.rawNode) : render(this.icon)
     return (
@@ -92,10 +92,10 @@ export default defineComponent({
         )}
         <div class={`${clsPrefix}-menu-item-content-header`} role="none">
           {renderLabel ? renderLabel(tmNode.rawNode) : render(this.title)}
-          {this.extra ? (
+          {this.extra || renderExtra ? (
             <span class={`${clsPrefix}-menu-item-content-header__extra`}>
               {' '}
-              {render(this.extra)}
+              {renderExtra ? renderExtra(tmNode.rawNode) : render(this.extra)}
             </span>
           ) : null}
         </div>

src/menu/tests/Menu.spec.ts

@@ -260,3 +260,46 @@ describe('n-menu', () => {
     expect(wrapper.find('.expand-icon').text()).toEqual('1')
   })
 })
+
+it('should dropdown work with `render-extra` props', async () => {
+  const options = [
+    {
+      label: 'jj',
+      key: 'jj'
+    },
+    {
+      label: 'jay',
+      key: 'jay',
+      children: [
+        {
+          type: 'group',
+          label: 'song-group',
+          key: 'group',
+          children: [
+            {
+              label: 'fantasy',
+              key: 'fantasy'
+            },
+            {
+              label: 'mojito',
+              key: 'mojito'
+            }
+          ]
+        }
+      ]
+    }
+  ]
+  function renderMenuExtra (): any {
+    return 'test'
+  }
+  const wrapper = mount(NMenu, {
+    props: {
+      defaultExpandAll: true,
+      options: options,
+      renderExtra: renderMenuExtra
+    }
+  })
+  expect(wrapper.findAll('.n-menu-item-content-header__extra').length).toEqual(
+    4
+  )
+})