Skip to content

Commit

Permalink
fix: Select组件选项内容过长时显示错位 (#4508)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lurunze1226
lurunze1226 authored May 31, 2022
1 parent ae6398b commit f38e68d
Show file tree
Hide file tree
Showing 9 changed files with 124 additions and 29 deletions.
2 changes: 1 addition & 1 deletion __tests__/event-action/dialog.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
45 changes: 36 additions & 9 deletions __tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-0"
role="option"
>
<span>
<span
class="cxd-Select-option-content"
title="不重复"
>
不重复
</span>
</div>
Expand All @@ -242,7 +245,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-1"
role="option"
>
<span>
<span
class="cxd-Select-option-content"
title="秒"
>
秒
</span>
</div>
Expand All @@ -252,7 +258,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-2"
role="option"
>
<span>
<span
class="cxd-Select-option-content"
title="分"
>
分
</span>
</div>
Expand All @@ -262,7 +271,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-3"
role="option"
>
<span>
<span
class="cxd-Select-option-content"
title="时"
>
时
</span>
</div>
Expand All @@ -272,7 +284,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-4"
role="option"
>
<span>
<span
class="cxd-Select-option-content"
title="天"
>
天
</span>
</div>
Expand All @@ -282,7 +297,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-5"
role="option"
>
<span>
<span
class="cxd-Select-option-content"
title="周中"
>
周中
</span>
</div>
Expand All @@ -292,7 +310,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-6"
role="option"
>
<span>
<span
class="cxd-Select-option-content"
title="周"
>
周
</span>
</div>
Expand All @@ -302,7 +323,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-7"
role="option"
>
<span>
<span
class="cxd-Select-option-content"
title="月"
>
月
</span>
</div>
Expand All @@ -312,7 +336,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-8"
role="option"
>
<span>
<span
class="cxd-Select-option-content"
title="年"
>
年
</span>
</div>
Expand Down
55 changes: 44 additions & 11 deletions __tests__/renderers/Form/__snapshots__/select.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1634,7 +1634,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 0px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option0"
>
option0
</span>
</div>
Expand All @@ -1645,7 +1648,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 35px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option1"
>
option1
</span>
</div>
Expand All @@ -1656,7 +1662,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 70px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option2"
>
option2
</span>
</div>
Expand All @@ -1667,7 +1676,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 105px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option3"
>
option3
</span>
</div>
Expand All @@ -1678,7 +1690,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 140px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option4"
>
option4
</span>
</div>
Expand All @@ -1689,7 +1704,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 175px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option5"
>
option5
</span>
</div>
Expand All @@ -1700,7 +1718,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 210px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option6"
>
option6
</span>
</div>
Expand All @@ -1711,7 +1732,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 245px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option7"
>
option7
</span>
</div>
Expand All @@ -1722,7 +1746,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 280px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option8"
>
option8
</span>
</div>
Expand All @@ -1733,7 +1760,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 315px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option9"
>
option9
</span>
</div>
Expand All @@ -1744,7 +1774,10 @@ exports[`Renderer:select virtual 1`] = `
role="option"
style="position: absolute; top: 350px; left: 0px; width: auto; height: 35px;"
>
<span>
<span
class="cxd-Select-option-content"
title="option10"
>
option10
</span>
</div>
Expand Down
1 change: 1 addition & 0 deletions docs/zh-CN/components/form/select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 类名 |

## 事件表

Expand Down
11 changes: 6 additions & 5 deletions docs/zh-CN/components/tpl.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 属性为文本内容 |
10 changes: 10 additions & 0 deletions scss/components/form/_select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 6 additions & 1 deletion src/components/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1076,7 +1076,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
{item.tip}
</Checkbox>
) : (
<span>
<span
className={cx('Select-option-content')}
title={
typeof item[labelField] === 'string' ? item[labelField] : ''
}
>
{item.disabled
? item[labelField]
: highlight(
Expand Down
10 changes: 9 additions & 1 deletion src/renderers/Form/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 下拉选择框。
Expand Down Expand Up @@ -122,6 +123,11 @@ export interface SelectControlSchema extends FormOptionsControl {
* 收纳标签的Popover配置
*/
overflowTagPopover?: object;

/**
* 选项的自定义CSS类名
*/
optionClassName?: SchemaClassName;
}

export interface SelectProps extends OptionsControlProps {
Expand Down Expand Up @@ -349,9 +355,11 @@ export default class SelectControl extends React.Component<SelectProps, any> {

@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)
});
}
Expand Down
12 changes: 11 additions & 1 deletion src/renderers/Tpl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ export interface TplSchema extends BaseSchema {
* 角标
*/
badge?: BadgeSchema;

/**
* 是否设置外层DOM节点的title属性为文本内容
*/
showNativeTitle?: boolean;
}

export interface TplProps extends RendererProps, TplSchema {
Expand Down Expand Up @@ -117,17 +122,22 @@ export class Tpl extends React.Component<TplProps, object> {
inline,
classnames: cx,
style,
showNativeTitle,
data
} = this.props;
const Component = wrapperComponent || (inline ? 'span' : 'div');
const content = this.getContent();

return (
<Component
ref={this.htmlRef}
className={cx('TplField', className)}
style={buildStyle(style, data)}
{...(showNativeTitle
? {title: typeof content === 'string' ? content : ''}
: {})}
>
<span>{this.getContent()}</span>
<span>{content}</span>
</Component>
);
}
Expand Down

0 comments on commit f38e68d

Please sign in to comment.