From f38e68d2981aa21b165342a467e688cfe0f631c8 Mon Sep 17 00:00:00 2001 From: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Date: Tue, 31 May 2022 20:37:02 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20Select=E7=BB=84=E4=BB=B6=E9=80=89?= =?UTF-8?q?=E9=A1=B9=E5=86=85=E5=AE=B9=E8=BF=87=E9=95=BF=E6=97=B6=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E9=94=99=E4=BD=8D=20(#4508)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/event-action/dialog.test.tsx | 2 +- .../Form/__snapshots__/repeat.test.tsx.snap | 45 ++++++++++++--- .../Form/__snapshots__/select.test.tsx.snap | 55 +++++++++++++++---- docs/zh-CN/components/form/select.md | 1 + docs/zh-CN/components/tpl.md | 11 ++-- scss/components/form/_select.scss | 10 ++++ src/components/Select.tsx | 7 ++- src/renderers/Form/Select.tsx | 10 +++- src/renderers/Tpl.tsx | 12 +++- 9 files changed, 124 insertions(+), 29 deletions(-) diff --git a/__tests__/event-action/dialog.test.tsx b/__tests__/event-action/dialog.test.tsx index df00b5bd4cf..228394a06f9 100644 --- a/__tests__/event-action/dialog.test.tsx +++ b/__tests__/event-action/dialog.test.tsx @@ -214,7 +214,7 @@ test('EventAction:dialog', async () => { expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument(); }); expect(container).toMatchSnapshot(); -}); +}, 7000); // test('EventAction:alert', async () => { // const alert = jest.fn(); diff --git a/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap index 9309be99bbf..bf7bf239d9c 100644 --- a/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap +++ b/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap @@ -232,7 +232,10 @@ exports[`Renderer:repeat 1`] = ` id="downshift-0-item-0" role="option" > - + 不重复 @@ -242,7 +245,10 @@ exports[`Renderer:repeat 1`] = ` id="downshift-0-item-1" role="option" > - + 秒 @@ -252,7 +258,10 @@ exports[`Renderer:repeat 1`] = ` id="downshift-0-item-2" role="option" > - + 分 @@ -262,7 +271,10 @@ exports[`Renderer:repeat 1`] = ` id="downshift-0-item-3" role="option" > - + 时 @@ -272,7 +284,10 @@ exports[`Renderer:repeat 1`] = ` id="downshift-0-item-4" role="option" > - + 天 @@ -282,7 +297,10 @@ exports[`Renderer:repeat 1`] = ` id="downshift-0-item-5" role="option" > - + 周中 @@ -292,7 +310,10 @@ exports[`Renderer:repeat 1`] = ` id="downshift-0-item-6" role="option" > - + 周 @@ -302,7 +323,10 @@ exports[`Renderer:repeat 1`] = ` id="downshift-0-item-7" role="option" > - + 月 @@ -312,7 +336,10 @@ exports[`Renderer:repeat 1`] = ` id="downshift-0-item-8" role="option" > - + 年 diff --git a/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap index 4afe9b0fa50..949725e42a4 100644 --- a/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap +++ b/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap @@ -1634,7 +1634,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 0px; left: 0px; width: auto; height: 35px;" > - + option0 @@ -1645,7 +1648,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 35px; left: 0px; width: auto; height: 35px;" > - + option1 @@ -1656,7 +1662,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 70px; left: 0px; width: auto; height: 35px;" > - + option2 @@ -1667,7 +1676,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 105px; left: 0px; width: auto; height: 35px;" > - + option3 @@ -1678,7 +1690,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 140px; left: 0px; width: auto; height: 35px;" > - + option4 @@ -1689,7 +1704,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 175px; left: 0px; width: auto; height: 35px;" > - + option5 @@ -1700,7 +1718,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 210px; left: 0px; width: auto; height: 35px;" > - + option6 @@ -1711,7 +1732,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 245px; left: 0px; width: auto; height: 35px;" > - + option7 @@ -1722,7 +1746,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 280px; left: 0px; width: auto; height: 35px;" > - + option8 @@ -1733,7 +1760,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 315px; left: 0px; width: auto; height: 35px;" > - + option9 @@ -1744,7 +1774,10 @@ exports[`Renderer:select virtual 1`] = ` role="option" style="position: absolute; top: 350px; left: 0px; width: auto; height: 35px;" > - + option10 diff --git a/docs/zh-CN/components/form/select.md b/docs/zh-CN/components/form/select.md index 368191954cb..c49cf769907 100755 --- a/docs/zh-CN/components/form/select.md +++ b/docs/zh-CN/components/form/select.md @@ -1034,6 +1034,7 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le | rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 | | maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 | | overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 收纳浮层的配置属性，详细配置参考[Tooltip](../tooltip#属性表) | +| optionClassName | `string` | | 选项 CSS 类名 | ## 事件表 diff --git a/docs/zh-CN/components/tpl.md b/docs/zh-CN/components/tpl.md index 2b77c0a3286..3068680387c 100755 --- a/docs/zh-CN/components/tpl.md +++ b/docs/zh-CN/components/tpl.md @@ -52,8 +52,9 @@ order: 70 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| --------- | ------------------------------------ | ------- | --------------- | -| type | `string` | `"tpl"` | 指定为 Tpl 组件 | -| className | `string` | | 外层 Dom 的类名 | -| tpl | [模板](../../docs/concepts/template) | | 配置模板 | +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | ------------------------------------ | ------- | -------------------------------------------- | +| type | `string` | `"tpl"` | 指定为 Tpl 组件 | +| className | `string` | | 外层 Dom 的类名 | +| tpl | [模板](../../docs/concepts/template) | | 配置模板 | +| showNativeTitle | `boolean` | | 是否设置外层 DOM 节点的 title 属性为文本内容 | diff --git a/scss/components/form/_select.scss b/scss/components/form/_select.scss index 562b1a3f146..c83d2f17bc5 100644 --- a/scss/components/form/_select.scss +++ b/scss/components/form/_select.scss @@ -315,6 +315,16 @@ &.is-highlight > a { display: block; } + + .#{$ns}Select-option-content, + .#{$ns}Select-option-content > span > div { + flex: auto; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + max-width: 100%; + } } &-noResult { diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 911f0720277..5a67a9243e2 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -1076,7 +1076,12 @@ export class Select extends React.Component { {item.tip} ) : ( - + {item.disabled ? item[labelField] : highlight( diff --git a/src/renderers/Form/Select.tsx b/src/renderers/Form/Select.tsx index a98a9cfa9ad..b286fd9608f 100644 --- a/src/renderers/Form/Select.tsx +++ b/src/renderers/Form/Select.tsx @@ -19,6 +19,7 @@ import {BaseTransferRenderer, TransferControlSchema} from './Transfer'; import TransferDropDown from '../../components/TransferDropDown'; import type {TooltipObject} from '../../components/TooltipWrapper'; +import type {SchemaClassName} from '../../Schema'; /** * Select 下拉选择框。 @@ -122,6 +123,11 @@ export interface SelectControlSchema extends FormOptionsControl { * 收纳标签的Popover配置 */ overflowTagPopover?: object; + + /** + * 选项的自定义CSS类名 + */ + optionClassName?: SchemaClassName; } export interface SelectProps extends OptionsControlProps { @@ -349,9 +355,11 @@ export default class SelectControl extends React.Component { @autobind renderMenu(option: Option, state: any) { - const {menuTpl, render, data} = this.props; + const {menuTpl, render, data, optionClassName} = this.props; return render(`menu/${state.index}`, menuTpl, { + showNativeTitle: true, + className: cx('Select-option-content', optionClassName), data: createObject(createObject(data, state), option) }); } diff --git a/src/renderers/Tpl.tsx b/src/renderers/Tpl.tsx index 7b039853f21..5d5cd0b7401 100644 --- a/src/renderers/Tpl.tsx +++ b/src/renderers/Tpl.tsx @@ -40,6 +40,11 @@ export interface TplSchema extends BaseSchema { * 角标 */ badge?: BadgeSchema; + + /** + * 是否设置外层DOM节点的title属性为文本内容 + */ + showNativeTitle?: boolean; } export interface TplProps extends RendererProps, TplSchema { @@ -117,17 +122,22 @@ export class Tpl extends React.Component { inline, classnames: cx, style, + showNativeTitle, data } = this.props; const Component = wrapperComponent || (inline ? 'span' : 'div'); + const content = this.getContent(); return ( - {this.getContent()} + {content} ); }