feat(select): add menuProps prop (#1480)

* feat(n-select): add menuProps prop * feat(n-select): add menuProps prop * feat: update Co-authored-by: yugang.cao <[email protected]>
tusen-ai · Oct 31, 2021 · ea80180 · ea80180
1 parent b32f475
commit ea80180
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 8 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -2,11 +2,15 @@
 
 ## Pending
 
-## Fixes
+### Fixes
 
 - Fix `n-tabs` switch tab does not work when adding a new tab, closes [#1417](https://github.com/TuSimple/naive-ui/issues/1417).
 - Fix `n-tree`'s `filter` prop does not work when assigned `children-field` , closes [#1477](https://github.com/TuSimple/naive-ui/issues/1477).
 
+### Feats
+
+- `n-select` add `menu-props` prop, closes [#1475](https://github.com/TuSimple/naive-ui/issues/1475).
+
 ## 2.20.0 (2021-10-28)
 
 ### Breaking Changes

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -2,11 +2,15 @@
 
 ## Pending
 
-## Fixes
+### Fixes
 
 - 修复 `n-tabs` 在新增 tab 后切换 tab 无法生效，关闭 [#1417](https://github.com/TuSimple/naive-ui/issues/1417)
 - 修复 `n-tree` 当指定`children-field`时过滤不生效，关闭 [#1477](https://github.com/TuSimple/naive-ui/issues/1477)
 
+### Feats
+
+- `n-select` 新增 `menu-props` 属性，关闭 [#1475](https://github.com/TuSimple/naive-ui/issues/1475)
+
 ## 2.20.0 (2021-10-28)
 
 ### Breaking Changes

diff --git a/src/_internal/select-menu/src/SelectMenu.tsx b/src/_internal/select-menu/src/SelectMenu.tsx
@@ -23,7 +23,8 @@ import type {
   SelectGroupOption,
   SelectIgnoredOption,
   Value,
-  SelectTreeMate
+  SelectTreeMate,
+  SelectMenuProps
 } from '../../../select/src/interface'
 import { formatLength } from '../../../_utils'
 import { createKey } from '../../../_utils/cssr'
@@ -63,6 +64,7 @@ export default defineComponent({
       required: true
     },
     multiple: Boolean,
+    menuProps: Object as PropType<SelectMenuProps>,
     size: {
       type: String as PropType<Size>,
       default: 'medium'
@@ -159,7 +161,7 @@ export default defineComponent({
       return tmNodes && tmNodes.length === 0
     })
     const styleRef = computed(() => {
-      return [{ width: formatLength(props.width) }, cssVarsRef.value]
+      return [{ width: formatLength(props.width) }, cssVarsRef.value, props.menuProps?.style]
     })
     watch(toRef(props, 'treeMate'), () => {
       if (props.autoPending) {
@@ -368,7 +370,8 @@ export default defineComponent({
         tabindex={this.focusable ? 0 : -1}
         class={[
           `${clsPrefix}-base-select-menu`,
-          this.multiple && `${clsPrefix}-base-select-menu--multiple`
+          this.multiple && `${clsPrefix}-base-select-menu--multiple`,
+          this.menuProps?.class
         ]}
         style={this.style as any}
         onFocusin={this.handleFocusin}

diff --git a/src/select/demos/enUS/index.demo-entry.md b/src/select/demos/enUS/index.demo-entry.md
@@ -43,6 +43,7 @@ render-person
 | input-props | `HTMLInputAttributes` | `undefined` | The attributes of input element in the trigger. It only works when the select is filterable. |
 | loading | `boolean` | `false` | Whether to show a loading state. |
 | max-tag-count | `number \| 'responsive'` | `undefined` | Maximum selected values to display while in `multiple` mode. `responsive` will keep all the tags in single line. |
+| menu-props | `SelectMenuProps` | `undefined` | The menu's props when menu is show. |
 | multiple | `boolean` | `false` | Whether to allow selecting multiple values. |
 | options | `Array<SelectOption \| SelectGroupOption>` | `[]` | Options that can be selected. For more details see SelectOption Properties (below). |
 | placeholder | `string` | `'Please Select'` | Placeholder. |

diff --git a/src/select/demos/zhCN/index.demo-entry.md b/src/select/demos/zhCN/index.demo-entry.md
@@ -49,6 +49,7 @@ options-change-debug
 | input-props | `HTMLInputAttributes` | `undefined` | 触发器中 input 元素的属性，只在可过滤时有意义 |
 | loading | `boolean` | `false` | 是否为加载状态 |
 | max-tag-count | `number \| 'responsive'` | `undefined` | 多选标签的最大显示数量，`responsive` 会将所有标签保持在一行 |
+| menu-props | `SelectMenuProps` | `undefined` | 菜单展示时接收的 props |
 | multiple | `boolean` | `false` | 是否为多选 |
 | options | `Array<SelectOption \| SelectGroupOption>` | `[]` | 配置选项内容，详情见 SelectOption Properties |
 | placeholder | `string` | `'请选择'` | 提示信息 |

diff --git a/src/select/index.ts b/src/select/index.ts
@@ -1,3 +1,3 @@
 export { default as NSelect } from './src/Select'
 export type { SelectProps } from './src/Select'
-export type { SelectGroupOption, SelectOption } from './src/interface'
+export type { SelectGroupOption, SelectOption, SelectMenuProps } from './src/interface'
diff --git a/src/select/src/Select.tsx b/src/select/src/Select.tsx
@@ -55,7 +55,8 @@ import type {
   OnUpdateValueImpl,
   Value,
   Size,
-  ValueAtom
+  ValueAtom,
+  SelectMenuProps
 } from './interface'
 
 const selectProps = {
@@ -76,6 +77,7 @@ const selectProps = {
   },
   value: [String, Number, Array] as PropType<Value | null>,
   placeholder: String,
+  menuProps: Object as PropType<SelectMenuProps>,
   multiple: Boolean,
   size: String as PropType<Size>,
   filterable: Boolean,
@@ -778,7 +780,7 @@ export default defineComponent({
                               }
                               treeMate={this.treeMate}
                               multiple={this.multiple}
-                              size="medium"
+                              size={this.menuProps?.size ?? 'medium'}
                               renderOption={this.renderOption}
                               renderLabel={this.renderLabel}
                               value={this.mergedValue}
@@ -792,6 +794,7 @@ export default defineComponent({
                               onTabOut={this.handleMenuTabOut}
                               onMousedown={this.handleMenuMousedown}
                               show={this.mergedShow}
+                              menuProps={this.menuProps}
                             >
                               {$slots}
                             </NInternalSelectMenu>,

diff --git a/src/select/src/interface.ts b/src/select/src/interface.ts
@@ -82,3 +82,9 @@ export type SelectGroupOption =
   | (SelectGroupOptionBase & {
     key: string | number
   })
+
+export interface SelectMenuProps {
+  class?: string
+  style?: string | CSSProperties
+  size?: Size
+}
diff --git a/src/select/tests/Select.spec.tsx b/src/select/tests/Select.spec.tsx
@@ -339,4 +339,22 @@ describe('n-select', () => {
         .attributes('style')
     ).toContain('--text-color: #4fb233;')
   })
+
+  it('should work with `menuProps` prop', () => {
+    const menuProps = {
+      class: 'menu-test',
+      style: {
+        background: 'rgb(79, 178, 51)'
+      }
+    }
+    const wrapper = mount(NSelect, {
+      props: {
+        menuProps: menuProps,
+        show: true
+      }
+    })
+    const menuWrapper = wrapper.findComponent(NInternalSelectMenu)
+    expect(menuWrapper.attributes('style')).toContain('background: rgb(79, 178, 51);')
+    expect(menuWrapper.classes()).toContain('menu-test')
+  })
 })