feat(select): rename option.render => option.renderLabel (#296)

CHANGELOG.en-US.md

@@ -2,11 +2,14 @@
 
 ## Pending
 
-- `n-input` add standard property `input-props`
+### Breaking Changes
+
+- Rename `n-select`'s `SelectOption`'s `render` prop to `renderLabel`.
 
 ### Feats
 
 - `n-carousel` supports touch operation, closes [#271](https://github.com/TuSimple/naive-ui/issues/271).
+- `n-input` add `input-props` prop.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -2,11 +2,15 @@
 
 ## Pending
 
-- `n-input` 添加原生属性 `input-props`
+
+### Breaking Changes
+
+- `n-select` 的 `SelectOption` `render` 属性被重命名为 `renderLabel`
 
 ### Feats
 
 - `n-carousel` 支持触控操作，关闭 [#271](https://github.com/TuSimple/naive-ui/issues/271)
+- `n-input` 新增 `input-props` 属性
 
 ### Fixes
 

src/_internal/select-menu/src/SelectGroupHeader.tsx

@@ -36,8 +36,8 @@ export default defineComponent({
     if (renderLabel) {
       children = renderLabel(rawNode, false)
     } else {
-      children = rawNode.render
-        ? rawNode.render(rawNode)
+      children = rawNode.renderLabel
+        ? rawNode.renderLabel(rawNode)
         : render(rawNode.label ?? rawNode.name, rawNode)
     }
     return <div class={`${clsPrefix}-base-select-group-header`}>{children}</div>

src/_internal/select-menu/src/SelectOption.tsx

@@ -57,7 +57,7 @@ export default defineComponent({
     if (__DEV__ && props.tmNode.rawNode.render) {
       warn(
         'select',
-        'render prop in select option is deprecated, please use `render-label` prop in `n-select`.'
+        'render prop in select option is removed, please use `renderLabel` on option or`render-label` prop in `n-select`.'
       )
     }
     const {
@@ -138,8 +138,8 @@ export default defineComponent({
     if (renderLabel) {
       children = [renderLabel(rawNode, isSelected), checkmark]
     } else {
-      children = rawNode.render
-        ? [rawNode.render(rawNode, isSelected), checkmark]
+      children = rawNode.renderLabel
+        ? [rawNode.renderLabel(rawNode, isSelected), checkmark]
         : [render(rawNode.label, rawNode, isSelected), checkmark]
     }
     return (

src/select/src/interface.ts

@@ -13,7 +13,7 @@ export interface SelectBaseOption<V = string | number> {
   class?: string
   style?: string | CSSProperties
   disabled?: boolean
-  render?: (option: SelectBaseOption<V>, selected: boolean) => VNodeChild
+  renderLabel?: (option: SelectBaseOption<V>, selected: boolean) => VNodeChild
   [k: string]: unknown
 }
 
@@ -22,7 +22,7 @@ export interface SelectGroupOptionBase {
   label: string
   type: 'group'
   children: SelectBaseOption[]
-  render?: (option: SelectGroupOption) => VNodeChild
+  renderLabel?: (option: SelectGroupOption) => VNodeChild
   [k: string]: unknown
 }
 

src/select/tests/Select.spec.tsx

@@ -1,11 +1,31 @@
 import { h } from 'vue'
 import { mount } from '@vue/test-utils'
 import { NSelect, SelectProps } from '../index'
+import { NInternalSelection, NInternalSelectMenu } from '../../_internal'
 
 describe('n-select', () => {
   it('should work with import on demand', () => {
     mount(NSelect)
   })
+  it('show menu when trigger clicked', async () => {
+    const wrapper = mount(NSelect)
+    const inputWrapper = wrapper.findComponent(NInternalSelection)
+    expect(wrapper.findComponent(NInternalSelectMenu).exists()).toEqual(false)
+    await inputWrapper.trigger('click')
+    expect(wrapper.findComponent(NInternalSelectMenu).isVisible()).toEqual(true)
+    await inputWrapper.trigger('click')
+    expect(wrapper.findComponent(NInternalSelectMenu).isVisible()).toEqual(
+      false
+    )
+  })
+  it('props.show', () => {
+    const wrapper = mount(NSelect, {
+      props: {
+        show: true
+      }
+    })
+    expect(wrapper.findComponent(NInternalSelectMenu).exists()).toEqual(true)
+  })
   describe('props.option', () => {
     it('has correct type', () => {
       const options: SelectProps['options'] = [
@@ -27,5 +47,40 @@ describe('n-select', () => {
       ]
       mount(() => <NSelect options={options} />).unmount()
     })
+    it('renderLabel', () => {
+      const options: SelectProps['options'] = [
+        {
+          label: 'cool1',
+          value: 'cool1',
+          renderLabel: () => 'cool1+1'
+        },
+        {
+          type: 'group',
+          label: 'cool',
+          key: 'group cool',
+          renderLabel: () => 'cool1+2',
+          children: [
+            {
+              label: 'cool2',
+              value: 'cool2',
+              renderLabel: () => 'cool1+3'
+            }
+          ]
+        }
+      ]
+      const wrapper = mount(NSelect, {
+        props: {
+          options,
+          show: true,
+          virtualScroll: false
+        }
+      })
+      const menuWrapper = wrapper.findComponent(NInternalSelectMenu)
+      expect(
+        ['cool1+1', 'cool1+2', 'cool1+3'].every((label) =>
+          menuWrapper.text().includes(label)
+        )
+      ).toEqual(true)
+    })
   })
 })