mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
fix: Select组件选项内容过长时显示错位 (#4508)
This commit is contained in:
RUNZE LU
GitHub
parent
ae6398b84b
commit
f38e68d298
@ -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();
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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 类名 |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -53,7 +53,8 @@ order: 70
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | ------------------------------------ | ------- | --------------- |
|
||||
| --------------- | ------------------------------------ | ------- | -------------------------------------------- |
|
||||
| type | `string` | `"tpl"` | 指定为 Tpl 组件 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| tpl | [模板](../../docs/concepts/template) | | 配置模板 |
|
||||
| showNativeTitle | `boolean` | | 是否设置外层 DOM 节点的 title 属性为文本内容 |
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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<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)
|
||||
});
|
||||
}
|
||||
|
||||
@ -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<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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user