From 533f67c41892aba3cbf15d231ca6e559bd95baa2 Mon Sep 17 00:00:00 2001 From: XieZongChen <46394163+amadeus711@users.noreply.github.com> Date: Tue, 6 Jul 2021 23:47:16 +0800 Subject: [PATCH] fix(select): fix NSelect bug in using custom label (#382) * fix(select): fix NSelect bug in using custom label * feat: optimization * feat: optimization * feat: fix changelog * Apply suggestions from code review Co-authored-by: 07akioni <07akioni2@gmail.com> --- CHANGELOG.en-US.md | 3 ++ CHANGELOG.zh-CN.md | 2 + src/_internal/selection/src/Selection.tsx | 49 +++++++++++++------ .../selection/src/styles/index.cssr.ts | 7 ++- src/select/src/Select.tsx | 1 + 5 files changed, 47 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index e15c99c58..5a1031907 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -2,6 +2,9 @@ ## Pending + +- Fix `n-select` bug in using custom label, closes [#352](https://github.com/TuSimple/naive-ui/issues/352). + ### Feats - `n-tree` exports `TreeDragInfo` & `TreeDropInfo` type. diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 41251fd0e..07346e224 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -2,6 +2,8 @@ ## Pending +- 修复 `n-select` 自定义 label 的显示问题，关闭 [#352](https://github.com/TuSimple/naive-ui/issues/352) + ### Feats - `n-tree` 导出 `TreeDragInfo` & `TreeDropInfo` 类型 diff --git a/src/_internal/selection/src/Selection.tsx b/src/_internal/selection/src/Selection.tsx index 2b2760617..4dca5829b 100644 --- a/src/_internal/selection/src/Selection.tsx +++ b/src/_internal/selection/src/Selection.tsx @@ -20,12 +20,13 @@ import { NPopover } from '../../../popover' import { NTag } from '../../../tag' import { useTheme } from '../../../_mixins' import type { ThemeProps } from '../../../_mixins' -import { createKey, getTitleAttribute } from '../../../_utils' +import { createKey, getTitleAttribute, render } from '../../../_utils' import Suffix from '../../suffix' import { internalSelectionLight } from '../styles' import type { InternalSelectionTheme } from '../styles' import { RenderTag } from './interface' import style from './styles/index.cssr' +import type { RenderLabel, RenderLabelImpl } from '../../select-menu/src/interface' export interface InternalSelectionInst { focus: () => void @@ -83,7 +84,8 @@ export default defineComponent({ onDeleteOption: Function, maxTagCount: [String, Number] as PropType, onClear: Function as PropType<(e: MouseEvent) => void>, - onPatternInput: Function as PropType<(e: InputEvent) => void> + onPatternInput: Function as PropType<(e: InputEvent) => void>, + renderLabel: Function as PropType }, setup (props) { const patternInputMirrorRef = ref(null) @@ -115,7 +117,7 @@ export default defineComponent({ }) const filterablePlaceholderRef = computed(() => { return props.selectedOption - ? props.selectedOption.label + ? render(props.selectedOption.label, props.selectedOption, true) : props.placeholder }) const labelRef = computed(() => { @@ -354,6 +356,7 @@ export default defineComponent({ updateCounter, getCounter, getTail, + renderLabel: props.renderLabel as RenderLabelImpl, cssVars: computed(() => { const { size } = props const { @@ -466,7 +469,8 @@ export default defineComponent({ maxTagCount, bordered, clsPrefix, - renderTag + renderTag, + renderLabel } = this const maxTagCountResponsive = maxTagCount === 'responsive' const maxTagCountNumeric = typeof maxTagCount === 'number' @@ -501,7 +505,12 @@ export default defineComponent({ internalStopClickPropagation onClose={() => this.handleDeleteOption(option)} > - {{ default: () => option.label }} + {{ + default: () => + renderLabel + ? renderLabel(option, true) + : render(option.label, option, true) + }} )} @@ -641,7 +650,9 @@ export default defineComponent({ : null const placeholder = !this.selected && !this.pattern && !this.isCompositing ? ( -
+
{this.placeholder}
) : null @@ -713,11 +724,7 @@ export default defineComponent({ ref="patternInputRef" class={`${clsPrefix}-base-selection-label__input`} value={ - showPlaceholder - ? '' - : this.patternInputFocused && this.active - ? this.pattern - : String(this.label) + this.patternInputFocused && this.active ? this.pattern : '' } placeholder="" readonly={disabled} @@ -730,8 +737,20 @@ export default defineComponent({ onCompositionstart={this.handleCompositionStart} onCompositionend={this.handleCompositionEnd} /> + {showPlaceholder ? null : this.patternInputFocused && + this.active ? null : ( +
+ {renderLabel + ? renderLabel(this.selectedOption as SelectBaseOption, true) + : render(this.label, this.selectedOption, true)} +
+ )} {showPlaceholder ? ( -
+
{this.filterablePlaceholder}
) : null} @@ -751,11 +770,13 @@ export default defineComponent({ title={getTitleAttribute(this.label)} key="input" > - {this.label} + {renderLabel + ? renderLabel(this.selectedOption as SelectBaseOption, true) + : render(this.label, this.selectedOption, true)}
) : (
{this.placeholder} diff --git a/src/_internal/selection/src/styles/index.cssr.ts b/src/_internal/selection/src/styles/index.cssr.ts index 7b616f85f..5eaad6856 100644 --- a/src/_internal/selection/src/styles/index.cssr.ts +++ b/src/_internal/selection/src/styles/index.cssr.ts @@ -85,7 +85,7 @@ export default c([ transition: color .3s var(--bezier); `) ]), - cB('base-selection-placeholder', ` + cB('base-render-dom', ` white-space: nowrap; overflow: hidden; height: var(--height); @@ -98,6 +98,8 @@ export default c([ left: 0; padding: var(--padding-single); transition: color .3s var(--bezier); + `), + cB('base-selection-placeholder', ` color: var(--placeholder-color); `), cB('base-selection-tags', ` @@ -150,6 +152,9 @@ export default c([ color: var(--text-color); transition: color .3s var(--bezier); caret-color: var(--caret-color); + `), + cE('render-label', ` + color: var(--text-color); `) ]), cNotM('disabled', [ diff --git a/src/select/src/Select.tsx b/src/select/src/Select.tsx index 665a3bad2..116d3e849 100644 --- a/src/select/src/Select.tsx +++ b/src/select/src/Select.tsx @@ -690,6 +690,7 @@ export default defineComponent({ selectedOptions={this.selectedOptions} multiple={this.multiple} renderTag={this.renderTag} + renderLabel={this.renderLabel} filterable={this.filterable} clearable={this.clearable} disabled={this.disabled}