From ea801803081e1db09ca68c18215b88e369f630e8 Mon Sep 17 00:00:00 2001 From: Yugang Cao <34439652+Talljack@users.noreply.github.com> Date: Sun, 31 Oct 2021 23:26:13 +0800 Subject: [PATCH] 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 --- CHANGELOG.en-US.md | 6 +++++- CHANGELOG.zh-CN.md | 6 +++++- src/_internal/select-menu/src/SelectMenu.tsx | 9 ++++++--- src/select/demos/enUS/index.demo-entry.md | 1 + src/select/demos/zhCN/index.demo-entry.md | 1 + src/select/index.ts | 2 +- src/select/src/Select.tsx | 7 +++++-- src/select/src/interface.ts | 6 ++++++ src/select/tests/Select.spec.tsx | 18 ++++++++++++++++++ 9 files changed, 48 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 725e0f674ad..df08ba51f02 100644 --- 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 index bcc7cdcc19f..052002794a1 100644 --- 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 index 9040030b7ae..7358e11274c 100644 --- 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, size: { type: String as PropType, 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 index a3eaaf52387..337cc465f83 100644 --- 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` | `[]` | 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 index 22cbfb2bbd8..9d80ac1dbdb 100644 --- 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 Properties | | placeholder | `string` | `'请选择'` | 提示信息 | diff --git a/src/select/index.ts b/src/select/index.ts index ac0d1c6dfdd..464e5e56b24 100644 --- 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 index 272e2ca79e2..a95508edc6d 100644 --- 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, placeholder: String, + menuProps: Object as PropType, multiple: Boolean, size: String as PropType, 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} , diff --git a/src/select/src/interface.ts b/src/select/src/interface.ts index b134e07653a..7d9fc98a7b7 100644 --- 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 index 9e8a870a76e..ba48d06e960 100644 --- 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') + }) })