test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:48:55 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: Select组件选项内容过长时显示错位 (#4508)

Browse Source
This commit is contained in:
RUNZE LU 2022-05-31 20:37:02 +08:00 committed by GitHub
parent ae6398b84b
commit f38e68d298
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 124 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
__tests__/event-action/dialog.test.tsx
View File

@ -214,7 +214,7 @@ test('EventAction:dialog', async () => {
expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument(); expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument();
}); });
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();
}); }, 7000);
// test('EventAction:alert', async () => { // test('EventAction:alert', async () => {
// const alert = jest.fn(); // const alert = jest.fn();

45
__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap
View File

@ -232,7 +232,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-0" id="downshift-0-item-0"
role="option" role="option"
> >
<span> <span
class="cxd-Select-option-content"
title="不重复"
>
不重复 不重复
</span> </span>
</div> </div>
@ -242,7 +245,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-1" id="downshift-0-item-1"
role="option" role="option"
> >
<span> <span
class="cxd-Select-option-content"
title="秒"
>
秒 秒
</span> </span>
</div> </div>
@ -252,7 +258,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-2" id="downshift-0-item-2"
role="option" role="option"
> >
<span> <span
class="cxd-Select-option-content"
title="分"
>
分 分
</span> </span>
</div> </div>
@ -262,7 +271,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-3" id="downshift-0-item-3"
role="option" role="option"
> >
<span> <span
class="cxd-Select-option-content"
title="时"
>
时 时
</span> </span>
</div> </div>
@ -272,7 +284,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-4" id="downshift-0-item-4"
role="option" role="option"
> >
<span> <span
class="cxd-Select-option-content"
title="天"
>
天 天
</span> </span>
</div> </div>
@ -282,7 +297,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-5" id="downshift-0-item-5"
role="option" role="option"
> >
<span> <span
class="cxd-Select-option-content"
title="周中"
>
周中 周中
</span> </span>
</div> </div>
@ -292,7 +310,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-6" id="downshift-0-item-6"
role="option" role="option"
> >
<span> <span
class="cxd-Select-option-content"
title="周"
>
周 周
</span> </span>
</div> </div>
@ -302,7 +323,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-7" id="downshift-0-item-7"
role="option" role="option"
> >
<span> <span
class="cxd-Select-option-content"
title="月"
>
月 月
</span> </span>
</div> </div>
@ -312,7 +336,10 @@ exports[`Renderer:repeat 1`] = `
id="downshift-0-item-8" id="downshift-0-item-8"
role="option" role="option"
> >
<span> <span
class="cxd-Select-option-content"
title="年"
>
年 年
</span> </span>
</div> </div>

55
__tests__/renderers/Form/__snapshots__/select.test.tsx.snap
View File

@ -1634,7 +1634,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 0px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 0px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option0"
>
option0 option0
</span> </span>
</div> </div>
@ -1645,7 +1648,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 35px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 35px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option1"
>
option1 option1
</span> </span>
</div> </div>
@ -1656,7 +1662,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 70px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 70px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option2"
>
option2 option2
</span> </span>
</div> </div>
@ -1667,7 +1676,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 105px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 105px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option3"
>
option3 option3
</span> </span>
</div> </div>
@ -1678,7 +1690,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 140px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 140px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option4"
>
option4 option4
</span> </span>
</div> </div>
@ -1689,7 +1704,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 175px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 175px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option5"
>
option5 option5
</span> </span>
</div> </div>
@ -1700,7 +1718,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 210px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 210px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option6"
>
option6 option6
</span> </span>
</div> </div>
@ -1711,7 +1732,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 245px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 245px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option7"
>
option7 option7
</span> </span>
</div> </div>
@ -1722,7 +1746,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 280px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 280px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option8"
>
option8 option8
</span> </span>
</div> </div>
@ -1733,7 +1760,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 315px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 315px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option9"
>
option9 option9
</span> </span>
</div> </div>
@ -1744,7 +1774,10 @@ exports[`Renderer:select virtual 1`] = `
role="option" role="option"
style="position: absolute; top: 350px; left: 0px; width: auto; height: 35px;" style="position: absolute; top: 350px; left: 0px; width: auto; height: 35px;"
> >
<span> <span
class="cxd-Select-option-content"
title="option10"
>
option10 option10
</span> </span>
</div> </div>

1
docs/zh-CN/components/form/select.md
View File

@ -1034,6 +1034,7 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 | | rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |
| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 | | maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |
| overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 收纳浮层的配置属性，详细配置参考[Tooltip](../tooltip#属性表) | | overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 收纳浮层的配置属性，详细配置参考[Tooltip](../tooltip#属性表) |
| optionClassName | `string` | | 选项 CSS 类名 |
## 事件表 ## 事件表

3
docs/zh-CN/components/tpl.md
View File

@ -53,7 +53,8 @@ order: 70
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| --------- | ------------------------------------ | ------- | --------------- | | --------------- | ------------------------------------ | ------- | -------------------------------------------- |
| type | `string` | `"tpl"` | 指定为 Tpl 组件 | | type | `string` | `"tpl"` | 指定为 Tpl 组件 |
| className | `string` | | 外层 Dom 的类名 | | className | `string` | | 外层 Dom 的类名 |
| tpl | [模板](../../docs/concepts/template) | | 配置模板 | | tpl | [模板](../../docs/concepts/template) | | 配置模板 |
| showNativeTitle | `boolean` | | 是否设置外层 DOM 节点的 title 属性为文本内容 |

10
scss/components/form/_select.scss
View File

@ -315,6 +315,16 @@
&.is-highlight > a { &.is-highlight > a {
display: block; 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 { &-noResult {

7
src/components/Select.tsx
View File

@ -1076,7 +1076,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
{item.tip} {item.tip}
</Checkbox> </Checkbox>
) : ( ) : (
<span> <span
className={cx('Select-option-content')}
title={
typeof item[labelField] === 'string' ? item[labelField] : ''
}
>
{item.disabled {item.disabled
? item[labelField] ? item[labelField]
: highlight( : highlight(

10
src/renderers/Form/Select.tsx
View File

@ -19,6 +19,7 @@ import {BaseTransferRenderer, TransferControlSchema} from './Transfer';
import TransferDropDown from '../../components/TransferDropDown'; import TransferDropDown from '../../components/TransferDropDown';
import type {TooltipObject} from '../../components/TooltipWrapper'; import type {TooltipObject} from '../../components/TooltipWrapper';
import type {SchemaClassName} from '../../Schema';
/** /**
* Select 下拉选择框。 * Select 下拉选择框。
@ -122,6 +123,11 @@ export interface SelectControlSchema extends FormOptionsControl {
* 收纳标签的Popover配置 * 收纳标签的Popover配置
*/ */
overflowTagPopover?: object; overflowTagPopover?: object;
/**
* 选项的自定义CSS类名
*/
optionClassName?: SchemaClassName;
} }
export interface SelectProps extends OptionsControlProps { export interface SelectProps extends OptionsControlProps {
@ -349,9 +355,11 @@ export default class SelectControl extends React.Component<SelectProps, any> {
@autobind @autobind
renderMenu(option: Option, state: any) { renderMenu(option: Option, state: any) {
const {menuTpl, render, data} = this.props; const {menuTpl, render, data, optionClassName} = this.props;
return render(`menu/${state.index}`, menuTpl, { return render(`menu/${state.index}`, menuTpl, {
showNativeTitle: true,
className: cx('Select-option-content', optionClassName),
data: createObject(createObject(data, state), option) data: createObject(createObject(data, state), option)
}); });
} }

12
src/renderers/Tpl.tsx
View File

@ -40,6 +40,11 @@ export interface TplSchema extends BaseSchema {
* 角标 * 角标
*/ */
badge?: BadgeSchema; badge?: BadgeSchema;
/**
* 是否设置外层DOM节点的title属性为文本内容
*/
showNativeTitle?: boolean;
} }
export interface TplProps extends RendererProps, TplSchema { export interface TplProps extends RendererProps, TplSchema {
@ -117,17 +122,22 @@ export class Tpl extends React.Component<TplProps, object> {
inline, inline,
classnames: cx, classnames: cx,
style, style,
showNativeTitle,
data data
} = this.props; } = this.props;
const Component = wrapperComponent || (inline ? 'span' : 'div'); const Component = wrapperComponent || (inline ? 'span' : 'div');
const content = this.getContent();
return ( return (
<Component <Component
ref={this.htmlRef} ref={this.htmlRef}
className={cx('TplField', className)} className={cx('TplField', className)}
style={buildStyle(style, data)} style={buildStyle(style, data)}
{...(showNativeTitle
? {title: typeof content === 'string' ? content : ''}
: {})}
> >
<span>{this.getContent()}</span> <span>{content}</span>
</Component> </Component>
); );
} }