Merge pull request #7990 from sqzhou/fix/option/transfer

feat: options类文本过长,显示优化
This commit is contained in:
hsm-lv 2023-10-11 20:27:28 +08:00 committed by GitHub
commit 08412adcb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 323 additions and 129 deletions

View File

@ -53,6 +53,7 @@
> label {
flex-basis: px2rem(50px);
flex-grow: 1;
width: px2rem(50px);
&.is-invalid {
color: var(--Form-selectValue-onInvalid-color);

View File

@ -38,6 +38,12 @@
margin-right: var(--Checkbox-gap);
}
}
&-ellipsis-line {
display: inline-block;
width: 100%;
@include truncate();
}
}
.#{$ns}GroupedSelection {
@ -104,6 +110,7 @@
&-itemLabel {
flex-grow: 1;
overflow: hidden;
span {
vertical-align: middle;

View File

@ -106,7 +106,8 @@ export class ChainedSelection extends BaseSelection<
checked: !!~valueArray.indexOf(option),
onChange: () => this.toggleOption(option),
disabled: disabled || option.disabled,
labelField
labelField,
classnames: cx
})}
</div>
</div>
@ -153,7 +154,8 @@ export class ChainedSelection extends BaseSelection<
checked: !!~this.state.selected.indexOf(id),
onChange: () => this.selectOption(option, depth, id),
disabled: disabled || option.disabled,
labelField
labelField,
classnames: cx
})}
</div>

View File

@ -48,7 +48,8 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
checked: false,
onChange: () => undefined,
disabled: disabled || option.disabled,
labelField
labelField,
classnames: cx
})}
</div>
@ -92,7 +93,8 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
checked: false,
onChange: () => undefined,
disabled: disabled || option.disabled,
labelField
labelField,
classnames: cx
})}
</div>
</div>
@ -161,7 +163,8 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
checked: !!~valueArray.indexOf(option),
onChange: () => this.toggleOption(option),
disabled: disabled || option.disabled,
labelField
labelField,
classnames: cx
})}
</div>
</div>

View File

@ -5,13 +5,13 @@ import React from 'react';
import Sortable from 'sortablejs';
import {findDOMNode} from 'react-dom';
import cloneDeep from 'lodash/cloneDeep';
import cx from 'classnames';
import {Option, Options} from './Select';
import {ThemeProps, themeable} from 'amis-core';
import {Icon} from './icons';
import {autobind, guid} from 'amis-core';
import {LocaleProps, localeable} from 'amis-core';
import {BaseSelection, BaseSelectionProps} from './Selection';
import {LocaleProps, localeable, ClassNamesFn} from 'amis-core';
import TransferSearch from './TransferSearch';
import VirtualList, {AutoSizer} from './virtual-list';
@ -39,6 +39,7 @@ export interface ItemRenderStates {
index: number;
disabled?: boolean;
labelField?: string;
classnames: ClassNamesFn;
onChange: (value: any, name: string) => void;
}
@ -51,10 +52,20 @@ export class ResultList extends React.Component<
ResultListState
> {
static itemRender(option: Option, states: ItemRenderStates) {
const scopeLabel = option.scopeLabel || '';
const label = option[states?.labelField || 'label'];
const canScopeLabelTitle =
typeof scopeLabel === 'string' || typeof scopeLabel === 'number';
const canLabelTitle =
typeof label === 'string' || typeof label === 'number';
const title =
canScopeLabelTitle && canLabelTitle ? `${scopeLabel}${label}` : '';
const classnames = states.classnames;
return (
<span>{`${option.scopeLabel || ''}${
option[states?.labelField || 'label']
}`}</span>
<span title={title} className={classnames('Selection-ellipsis-line')}>
{scopeLabel}
{label}
</span>
);
}
@ -286,7 +297,8 @@ export class ResultList extends React.Component<
index,
disabled,
onChange: this.handleValueChange.bind(this, index),
labelField
labelField,
classnames: cx
})}
</label>

View File

@ -17,7 +17,8 @@ import {
findTree,
flattenTree,
getOptionValue,
getOptionValueBindField
getOptionValueBindField,
ClassNamesFn
} from 'amis-core';
import Checkbox from './Checkbox';
import {Option, Options} from './Select';
@ -56,6 +57,7 @@ export interface ItemRenderStates {
checked: boolean;
onChange: () => void;
disabled?: boolean;
classnames: ClassNamesFn;
}
export class BaseSelection<
@ -63,10 +65,24 @@ export class BaseSelection<
S = any
> extends React.Component<T, S> {
static itemRender(option: Option, states: ItemRenderStates) {
const label = option[states?.labelField || 'label'];
const tip = option.tip || '';
const classnames = states.classnames;
const canlabelTitle =
typeof label === 'string' || typeof label === 'number';
const canTipTitle = typeof tip === 'string' || typeof label === 'number';
const title = canlabelTitle && canTipTitle ? `${label} ${tip}` : '';
return (
<span className={cx({'is-invalid': option?.__unmatched})}>
{option[states?.labelField || 'label']}
{option.tip || ''}
<span
title={title}
className={`${cx({'is-invalid': option?.__unmatched})} ${classnames(
'Selection-ellipsis-line'
)}`}
>
{label}
{tip}
</span>
);
}
@ -255,6 +271,7 @@ export class BaseSelection<
checked: !!~valueArray.indexOf(option),
onChange: () => this.toggleOption(option),
labelField,
classnames: cx,
disabled: disabled || option.disabled
})}
</Checkbox>

View File

@ -420,18 +420,21 @@ export class Transfer<
@autobind
optionItemRender(option: Option, states: ItemRenderStates) {
const {optionItemRender, labelField = 'label'} = this.props;
const {optionItemRender, labelField = 'label', classnames} = this.props;
return optionItemRender
? optionItemRender(option, states)
: BaseSelection.itemRender(option, {labelField, ...states});
: BaseSelection.itemRender(option, {labelField, ...states, classnames});
}
@autobind
resultItemRender(option: Option, states: ItemRenderStates) {
const {resultItemRender} = this.props;
const {resultItemRender, classnames} = this.props;
return resultItemRender
? resultItemRender(option, states)
: ResultList.itemRender(option, states);
: ResultList.itemRender(option, {
...states,
classnames
});
}
renderSelect(

View File

@ -1261,7 +1261,8 @@ export class TreeSelector extends React.Component<
checked: checked,
labelField: labelField,
onChange: () => this.handleCheck(item, !checked),
disabled: disabled || item.disabled
disabled: disabled || item.disabled,
classnames: cx
})
: highlightTxt
? highlight(`${item[labelField]}`, highlightTxt)

View File

@ -267,7 +267,8 @@ export class TreeSelection extends BaseSelection<
multiple: multiple,
checked: checked,
onChange: () => this.toggleOption(option),
disabled: disabled || option.disabled
disabled: disabled || option.disabled,
classnames: cx
})}
</div>

View File

@ -471,7 +471,8 @@ exports[`Renderer:select associated mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1 "
>
group-1
</span>
@ -491,7 +492,8 @@ exports[`Renderer:select associated mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1-option-1 "
>
group-1-option-1
</span>
@ -513,7 +515,8 @@ exports[`Renderer:select associated mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1-option-2 "
>
group-1-option-2
</span>
@ -535,7 +538,8 @@ exports[`Renderer:select associated mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1-option-3 "
>
group-1-option-3
</span>
@ -1157,7 +1161,8 @@ exports[`Renderer:select chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1 "
>
group-1
</span>
@ -1171,7 +1176,8 @@ exports[`Renderer:select chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-2 "
>
group-2
</span>
@ -1185,7 +1191,8 @@ exports[`Renderer:select chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-3 "
>
group-3
</span>
@ -1199,7 +1206,8 @@ exports[`Renderer:select chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-4 "
>
group-4
</span>
@ -1268,7 +1276,8 @@ exports[`Renderer:select chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1-option-1 "
>
group-1-option-1
</span>
@ -1282,7 +1291,8 @@ exports[`Renderer:select chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1-option-2 "
>
group-1-option-2
</span>
@ -1296,7 +1306,8 @@ exports[`Renderer:select chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1-option-3 "
>
group-1-option-3
</span>
@ -1310,7 +1321,8 @@ exports[`Renderer:select chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1-option-4 "
>
group-1-option-4
</span>
@ -1771,7 +1783,8 @@ exports[`Renderer:select group mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1 "
>
group-1
</span>
@ -1791,7 +1804,8 @@ exports[`Renderer:select group mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="option-1 "
>
option-1
</span>
@ -1813,7 +1827,8 @@ exports[`Renderer:select group mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="option-2 "
>
option-2
</span>
@ -1835,7 +1850,8 @@ exports[`Renderer:select group mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="option-3 "
>
option-3
</span>

View File

@ -538,7 +538,8 @@ exports[`Renderer:tabsTransfer 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="法师2 "
>
法师2
</span>
@ -551,7 +552,8 @@ exports[`Renderer:tabsTransfer 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="战士2 "
>
战士2
</span>
@ -564,7 +566,8 @@ exports[`Renderer:tabsTransfer 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="打野2 "
>
打野2
</span>
@ -1134,7 +1137,8 @@ exports[`Renderer:tabsTransfer with deferApi 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="法师2 "
>
法师2
</span>

View File

@ -119,7 +119,8 @@ exports[`Renderer:transfer 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="诸葛亮 "
>
诸葛亮
</span>
@ -144,7 +145,8 @@ exports[`Renderer:transfer 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="曹操 "
>
曹操
</span>
@ -169,7 +171,8 @@ exports[`Renderer:transfer 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="钟无艳 "
>
钟无艳
</span>
@ -194,7 +197,8 @@ exports[`Renderer:transfer 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="李白 "
>
李白
</span>
@ -219,7 +223,8 @@ exports[`Renderer:transfer 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="韩信 "
>
韩信
</span>
@ -244,7 +249,8 @@ exports[`Renderer:transfer 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="云中君 "
>
云中君
</span>
@ -669,7 +675,8 @@ exports[`Renderer:transfer associated mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="label-1 "
>
label-1
</span>
@ -695,7 +702,8 @@ exports[`Renderer:transfer associated mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="label-2 "
>
label-2
</span>
@ -721,7 +729,8 @@ exports[`Renderer:transfer associated mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="label-3 "
>
label-3
</span>
@ -747,7 +756,8 @@ exports[`Renderer:transfer associated mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="label-4 "
>
label-4
</span>
@ -1018,7 +1028,8 @@ exports[`Renderer:transfer chained 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="法师 "
>
法师
</span>
@ -1031,7 +1042,8 @@ exports[`Renderer:transfer chained 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="战士 "
>
战士
</span>
@ -1044,7 +1056,8 @@ exports[`Renderer:transfer chained 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="打野 "
>
打野
</span>
@ -1251,7 +1264,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-1 "
>
group-1
</span>
@ -1264,7 +1278,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-2 "
>
group-2
</span>
@ -1277,7 +1292,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-3 "
>
group-3
</span>
@ -1290,7 +1306,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-4 "
>
group-4
</span>
@ -1303,7 +1320,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-5 "
>
group-5
</span>
@ -1316,7 +1334,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-6 "
>
group-6
</span>
@ -1329,7 +1348,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-7 "
>
group-7
</span>
@ -1342,7 +1362,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-8 "
>
group-8
</span>
@ -1355,7 +1376,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-9 "
>
group-9
</span>
@ -1368,7 +1390,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-10 "
>
group-10
</span>
@ -1407,7 +1430,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-2-option-1 "
>
group-2-option-1
</span>
@ -1433,7 +1457,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-2-option-2 "
>
group-2-option-2
</span>
@ -1459,7 +1484,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-2-option-3 "
>
group-2-option-3
</span>
@ -1485,7 +1511,8 @@ exports[`Renderer:transfer chained mode with virtual 1`] = `
class="cxd-ChainedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="group-2-option-4 "
>
group-2-option-4
</span>
@ -1776,7 +1803,8 @@ exports[`Renderer:transfer follow left mode 1`] = `
title="法师"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="法师 "
>
法师
</span>
@ -1816,7 +1844,8 @@ exports[`Renderer:transfer follow left mode 1`] = `
title="诸葛亮"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="诸葛亮 "
>
诸葛亮
</span>
@ -1861,7 +1890,8 @@ exports[`Renderer:transfer follow left mode 1`] = `
title="战士"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="战士 "
>
战士
</span>
@ -1901,7 +1931,8 @@ exports[`Renderer:transfer follow left mode 1`] = `
title="曹操"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="曹操 "
>
曹操
</span>
@ -1941,7 +1972,8 @@ exports[`Renderer:transfer follow left mode 1`] = `
title="钟无艳"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="钟无艳 "
>
钟无艳
</span>
@ -1986,7 +2018,8 @@ exports[`Renderer:transfer follow left mode 1`] = `
title="打野"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="打野 "
>
打野
</span>
@ -2026,7 +2059,8 @@ exports[`Renderer:transfer follow left mode 1`] = `
title="李白"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="李白 "
>
李白
</span>
@ -2066,7 +2100,8 @@ exports[`Renderer:transfer follow left mode 1`] = `
title="韩信"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="韩信 "
>
韩信
</span>
@ -2106,7 +2141,8 @@ exports[`Renderer:transfer follow left mode 1`] = `
title="云中君"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="云中君 "
>
云中君
</span>
@ -2176,7 +2212,10 @@ exports[`Renderer:transfer follow left mode 1`] = `
class="cxd-Tree-itemText"
title="法师"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="法师"
>
法师
</span>
</span>
@ -2212,7 +2251,10 @@ exports[`Renderer:transfer follow left mode 1`] = `
class="cxd-Tree-itemText"
title="诸葛亮"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="诸葛亮"
>
诸葛亮
</span>
</span>
@ -2444,7 +2486,8 @@ exports[`Renderer:transfer follow left mode 2`] = `
title="法师"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="法师 "
>
法师
</span>
@ -2484,7 +2527,8 @@ exports[`Renderer:transfer follow left mode 2`] = `
title="诸葛亮"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="诸葛亮 "
>
诸葛亮
</span>
@ -2529,7 +2573,8 @@ exports[`Renderer:transfer follow left mode 2`] = `
title="战士"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="战士 "
>
战士
</span>
@ -2569,7 +2614,8 @@ exports[`Renderer:transfer follow left mode 2`] = `
title="曹操"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="曹操 "
>
曹操
</span>
@ -2609,7 +2655,8 @@ exports[`Renderer:transfer follow left mode 2`] = `
title="钟无艳"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="钟无艳 "
>
钟无艳
</span>
@ -2654,7 +2701,8 @@ exports[`Renderer:transfer follow left mode 2`] = `
title="打野"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="打野 "
>
打野
</span>
@ -2694,7 +2742,8 @@ exports[`Renderer:transfer follow left mode 2`] = `
title="李白"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="李白 "
>
李白
</span>
@ -2734,7 +2783,8 @@ exports[`Renderer:transfer follow left mode 2`] = `
title="韩信"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="韩信 "
>
韩信
</span>
@ -2774,7 +2824,8 @@ exports[`Renderer:transfer follow left mode 2`] = `
title="云中君"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="云中君 "
>
云中君
</span>
@ -2865,7 +2916,10 @@ exports[`Renderer:transfer follow left mode 2`] = `
class="cxd-Tree-itemText"
title="战士"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="战士"
>
战士
</span>
</span>
@ -2901,7 +2955,10 @@ exports[`Renderer:transfer follow left mode 2`] = `
class="cxd-Tree-itemText"
title="曹操"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="曹操"
>
曹操
</span>
</span>
@ -3112,7 +3169,8 @@ exports[`Renderer:transfer group mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="option-197 "
>
option-197
</span>
@ -3146,7 +3204,8 @@ exports[`Renderer:transfer group mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="option-198 "
>
option-198
</span>
@ -3180,7 +3239,8 @@ exports[`Renderer:transfer group mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="option-199 "
>
option-199
</span>
@ -3214,7 +3274,8 @@ exports[`Renderer:transfer group mode with virtual 1`] = `
class="cxd-GroupedSelection-itemLabel"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="option-200 "
>
option-200
</span>
@ -4943,7 +5004,10 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-1"
>
label-1
</span>
</label>
@ -4963,7 +5027,10 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-3"
>
label-3
</span>
</label>
@ -4983,7 +5050,10 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-5"
>
label-5
</span>
</label>
@ -5003,7 +5073,10 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-7"
>
label-7
</span>
</label>
@ -5023,7 +5096,10 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-9"
>
label-9
</span>
</label>
@ -5043,7 +5119,10 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-11"
>
label-11
</span>
</label>
@ -5063,7 +5142,10 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-13"
>
label-13
</span>
</label>
@ -5083,7 +5165,10 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-15"
>
label-15
</span>
</label>
@ -5103,7 +5188,10 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-17"
>
label-17
</span>
</label>
@ -5123,7 +5211,10 @@ exports[`Renderer:transfer table mode with virtual: result not virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-19"
>
label-19
</span>
</label>
@ -5575,7 +5666,10 @@ exports[`Renderer:transfer table mode with virtual: result virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-1"
>
label-1
</span>
</label>
@ -5596,7 +5690,10 @@ exports[`Renderer:transfer table mode with virtual: result virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-3"
>
label-3
</span>
</label>
@ -5617,7 +5714,10 @@ exports[`Renderer:transfer table mode with virtual: result virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-5"
>
label-5
</span>
</label>
@ -5638,7 +5738,10 @@ exports[`Renderer:transfer table mode with virtual: result virtual 1`] = `
<label
class="cxd-Selections-label"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="label-7"
>
label-7
</span>
</label>
@ -5898,7 +6001,8 @@ exports[`Renderer:transfer tree 1`] = `
title="法师"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="法师 "
>
法师
</span>
@ -5938,7 +6042,8 @@ exports[`Renderer:transfer tree 1`] = `
title="诸葛亮"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="诸葛亮 "
>
诸葛亮
</span>
@ -5983,7 +6088,8 @@ exports[`Renderer:transfer tree 1`] = `
title="战士"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="战士 "
>
战士
</span>
@ -6023,7 +6129,8 @@ exports[`Renderer:transfer tree 1`] = `
title="曹操"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="曹操 "
>
曹操
</span>
@ -6063,7 +6170,8 @@ exports[`Renderer:transfer tree 1`] = `
title="钟无艳"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="钟无艳 "
>
钟无艳
</span>
@ -6108,7 +6216,8 @@ exports[`Renderer:transfer tree 1`] = `
title="打野"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="打野 "
>
打野
</span>
@ -6148,7 +6257,8 @@ exports[`Renderer:transfer tree 1`] = `
title="李白"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="李白 "
>
李白
</span>
@ -6188,7 +6298,8 @@ exports[`Renderer:transfer tree 1`] = `
title="韩信"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="韩信 "
>
韩信
</span>
@ -6228,7 +6339,8 @@ exports[`Renderer:transfer tree 1`] = `
title="云中君"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="云中君 "
>
云中君
</span>
@ -6432,7 +6544,8 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
title="诸葛亮"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="诸葛亮 "
>
诸葛亮
</span>
@ -6472,7 +6585,8 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
title="曹操"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="曹操 "
>
曹操
</span>
@ -6512,7 +6626,8 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
title="钟无艳"
>
<span
class=""
class=" cxd-Selection-ellipsis-line"
title="钟无艳 "
>
钟无艳
</span>
@ -6561,7 +6676,10 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
<label
class="cxd-Selections-label is-invalid"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="w"
>
w
</span>
</label>
@ -6581,7 +6699,10 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
<label
class="cxd-Selections-label is-invalid"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="x"
>
x
</span>
</label>
@ -6601,7 +6722,10 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
<label
class="cxd-Selections-label is-invalid"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="y"
>
y
</span>
</label>
@ -6621,7 +6745,10 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
<label
class="cxd-Selections-label is-invalid"
>
<span>
<span
class="cxd-Selection-ellipsis-line"
title="z"
>
z
</span>
</label>

View File

@ -1227,7 +1227,7 @@ test('Renderer:transfer with searchApi', async () => {
await wait(300);
const caocao = container.querySelector('span[title=曹操]');
const caocao = container.querySelector('span[title=李白]');
expect(caocao).toBeNull();
});

View File

@ -242,7 +242,7 @@ export class TabsTransferRenderer extends BaseTabsTransferRenderer<TabsTransferP
@autobind
optionItemRender(option: any, states: ItemRenderStates) {
const {menuTpl, render, data} = this.props;
const {menuTpl, render, data, classnames} = this.props;
const ctx = arguments[2] || {};
if (menuTpl) {
@ -257,7 +257,7 @@ export class TabsTransferRenderer extends BaseTabsTransferRenderer<TabsTransferP
});
}
return BaseSelection.itemRender(option, states);
return BaseSelection.itemRender(option, {...states, classnames});
}
// 动作

View File

@ -53,7 +53,7 @@ export class TabsTransferPickerRenderer extends BaseTabsTransferRenderer<TabsTra
@autobind
optionItemRender(option: any, states: ItemRenderStates) {
const {menuTpl, render, data} = this.props;
const {menuTpl, render, data, classnames} = this.props;
const ctx = arguments[2] || {};
if (menuTpl) {
@ -68,7 +68,7 @@ export class TabsTransferPickerRenderer extends BaseTabsTransferRenderer<TabsTra
});
}
return BaseSelection.itemRender(option, states);
return BaseSelection.itemRender(option, {...states, classnames});
}
// 动作