mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
feat: transfer 树形搜索的时候支持高亮& feat: transfer 提供清空搜索的事件动作 & fix: transfer 穿梭器左上角的全选勾选时，没有处理 onlyChildren:true 的逻辑 (#7695)
* feat: transfer 树形搜索的时候支持高亮& feat: transfer 提供清空搜索的事件动作 & fix: transfer 穿梭器左上角的全选勾选时，没有处理 onlyChildren:true 的逻辑 * fix: transfer 穿梭器左上角的全选勾选时，没有处理 onlyChildren:true 的逻辑 * feat: transfer 树形搜索的时候支持高亮& feat: transfer 提供清空搜索的事件动作 & fix: transfer 穿梭器左上角的全选勾选时，没有处理 onlyChildren:true 的逻辑 * feat: transfer 树形搜索的时候支持高亮& feat: transfer 提供清空搜索的事件动作 & fix: transfer 穿梭器左上角的全选勾选时，没有处理 onlyChildren:true 的逻辑 * style: transfer文档动作完善
This commit is contained in:
sqzhou
GitHub
parent
71bfc3f730
commit
866d3412b6
@ -929,5 +929,6 @@ icon:
|
||||
| --------- | -------------------------------------- | --------------------------------------------------------------------------------------- |
|
||||
| clear | - | 清空 |
|
||||
| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |
|
||||
| clearSearch | `left: boolean` 左侧搜索、`right:boolean`右侧搜索 | 默认清除所有搜索态，可以单独配置`left`、`right`为`true`来清空对应左侧或者右侧面板(`3.4.0`及以上版本支持） |
|
||||
| selectAll | - | 全选 |
|
||||
| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |
|
||||
|
||||
@ -52,6 +52,29 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'transferEvent2',
|
||||
id: 'transferEvent2',
|
||||
type: 'action',
|
||||
label: '清空搜索',
|
||||
level: 'primary',
|
||||
className: 'mr-3 mb-3',
|
||||
debugger: true,
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'clearSearch',
|
||||
componentId: 'transfer-receiver',
|
||||
args: {
|
||||
left: true,
|
||||
right: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'transferEvent2',
|
||||
id: 'transferEvent2',
|
||||
@ -84,6 +107,8 @@ export default {
|
||||
id: 'transfer-receiver',
|
||||
type: 'transfer',
|
||||
name: 'transfer',
|
||||
searchable: true,
|
||||
resultSearchable: true,
|
||||
debugger: true,
|
||||
resetValue: 'c',
|
||||
source: '/api/mock2/form/getTreeOptions',
|
||||
|
||||
@ -339,7 +339,8 @@ export interface ActionObject extends ButtonObject {
|
||||
| 'collapse'
|
||||
| 'step-submit'
|
||||
| 'selectAll'
|
||||
| 'changeTabKey';
|
||||
| 'changeTabKey'
|
||||
| 'clearSearch';
|
||||
api?: BaseApiObject | string;
|
||||
asyncApi?: BaseApiObject | string;
|
||||
payload?: any;
|
||||
|
||||
@ -81,6 +81,7 @@ export class ResultList extends React.Component<
|
||||
id = guid();
|
||||
sortable?: Sortable;
|
||||
unmounted = false;
|
||||
searchRef?: any;
|
||||
|
||||
componentDidMount() {
|
||||
this.props.sortable && this.initSortable();
|
||||
@ -99,6 +100,14 @@ export class ResultList extends React.Component<
|
||||
this.unmounted = true;
|
||||
}
|
||||
|
||||
@autobind
|
||||
domSearchRef(ref: any) {
|
||||
while (ref && ref.getWrappedInstance) {
|
||||
ref = ref.getWrappedInstance();
|
||||
}
|
||||
this.searchRef = ref;
|
||||
}
|
||||
|
||||
initSortable() {
|
||||
const ns = this.props.classPrefix;
|
||||
const dom = findDOMNode(this) as HTMLElement;
|
||||
@ -181,6 +190,14 @@ export class ResultList extends React.Component<
|
||||
this.setState({searchResult: null});
|
||||
}
|
||||
|
||||
@autobind
|
||||
clearInput() {
|
||||
if (this.props.searchable) {
|
||||
this.searchRef?.clearInput?.();
|
||||
}
|
||||
this.clearSearch();
|
||||
}
|
||||
|
||||
// 删除项
|
||||
@autobind
|
||||
handleCloseItem(e: React.MouseEvent<HTMLElement>, option: Option) {
|
||||
@ -359,6 +376,7 @@ export class ResultList extends React.Component<
|
||||
{title ? <div className={cx('Selections-title')}>{title}</div> : null}
|
||||
{searchable ? (
|
||||
<TransferSearch
|
||||
ref={this.domSearchRef}
|
||||
placeholder={searchPlaceholder}
|
||||
onSearch={this.search}
|
||||
onCancelSearch={this.clearSearch}
|
||||
|
||||
@ -68,6 +68,8 @@ export class BaseResultTableSelection extends BaseSelection<
|
||||
searchTableOptions: []
|
||||
};
|
||||
|
||||
searchRef?: any;
|
||||
|
||||
static getDerivedStateFromProps(props: ResultTableSelectionProps) {
|
||||
const {options, value, option2value, valueField} = props;
|
||||
const valueArray = BaseSelection.value2array(
|
||||
@ -81,6 +83,14 @@ export class BaseResultTableSelection extends BaseSelection<
|
||||
};
|
||||
}
|
||||
|
||||
@autobind
|
||||
domSearchRef(ref: any) {
|
||||
while (ref && ref.getWrappedInstance) {
|
||||
ref = ref.getWrappedInstance();
|
||||
}
|
||||
this.searchRef = ref;
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleCloseItem(option: Option) {
|
||||
const {value, onChange, option2value, options, disabled, valueField} =
|
||||
@ -147,6 +157,14 @@ export class BaseResultTableSelection extends BaseSelection<
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
clearInput() {
|
||||
if (this.props.searchable) {
|
||||
this.searchRef?.clearInput?.();
|
||||
}
|
||||
this.clearSearch();
|
||||
}
|
||||
|
||||
renderTable() {
|
||||
const {
|
||||
classnames: cx,
|
||||
@ -233,6 +251,7 @@ export class BaseResultTableSelection extends BaseSelection<
|
||||
{title ? <div className={cx('Selections-title')}>{title}</div> : null}
|
||||
{searchable ? (
|
||||
<TransferSearch
|
||||
ref={this.domSearchRef}
|
||||
placeholder={searchPlaceholder}
|
||||
onSearch={this.search}
|
||||
onCancelSearch={this.clearSearch}
|
||||
|
||||
@ -163,6 +163,8 @@ export class BaseResultTreeList extends React.Component<
|
||||
searchTreeOptions: []
|
||||
};
|
||||
|
||||
searchRef?: any;
|
||||
|
||||
static getDerivedStateFromProps(props: ResultTreeListProps) {
|
||||
const newOptions = getResultOptions(
|
||||
props.value,
|
||||
@ -174,6 +176,14 @@ export class BaseResultTreeList extends React.Component<
|
||||
};
|
||||
}
|
||||
|
||||
@autobind
|
||||
domSearchRef(ref: any) {
|
||||
while (ref && ref.getWrappedInstance) {
|
||||
ref = ref.getWrappedInstance();
|
||||
}
|
||||
this.searchRef = ref;
|
||||
}
|
||||
|
||||
// 删除非选中节点
|
||||
@autobind
|
||||
deleteTreeChecked(option: Option) {
|
||||
@ -259,6 +269,14 @@ export class BaseResultTreeList extends React.Component<
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
clearInput() {
|
||||
if (this.props.searchable) {
|
||||
this.searchRef?.clearInput?.();
|
||||
}
|
||||
this.clearSearch();
|
||||
}
|
||||
|
||||
renderTree() {
|
||||
const {
|
||||
className,
|
||||
@ -314,6 +332,7 @@ export class BaseResultTreeList extends React.Component<
|
||||
{title ? <div className={cx('Selections-title')}>{title}</div> : null}
|
||||
{searchable ? (
|
||||
<TransferSearch
|
||||
ref={this.domSearchRef}
|
||||
placeholder={searchPlaceholder}
|
||||
onSearch={this.search}
|
||||
onCancelSearch={this.clearSearch}
|
||||
|
||||
@ -155,6 +155,7 @@ export class Transfer<
|
||||
unmounted = false;
|
||||
cancelSearch?: () => void;
|
||||
treeRef: any;
|
||||
resultRef: any;
|
||||
|
||||
componentDidMount() {
|
||||
this.props?.onRef?.(this);
|
||||
@ -196,9 +197,20 @@ export class Transfer<
|
||||
|
||||
@autobind
|
||||
domRef(ref: any) {
|
||||
while (ref && ref.getWrappedInstance) {
|
||||
ref = ref.getWrappedInstance();
|
||||
}
|
||||
this.treeRef = ref;
|
||||
}
|
||||
|
||||
@autobind
|
||||
domResultRef(ref: any) {
|
||||
while (ref && ref.getWrappedInstance) {
|
||||
ref = ref.getWrappedInstance();
|
||||
}
|
||||
this.resultRef = ref;
|
||||
}
|
||||
|
||||
@autobind
|
||||
toggleAll() {
|
||||
const {
|
||||
@ -207,7 +219,8 @@ export class Transfer<
|
||||
onChange,
|
||||
value,
|
||||
onSelectAll,
|
||||
valueField = 'value'
|
||||
valueField = 'value',
|
||||
selectMode
|
||||
} = this.props;
|
||||
let valueArray = BaseSelection.value2array(
|
||||
value,
|
||||
@ -217,6 +230,11 @@ export class Transfer<
|
||||
);
|
||||
const availableOptions = this.availableOptions;
|
||||
|
||||
if (selectMode === 'tree') {
|
||||
this.treeRef?.handleToggle();
|
||||
return;
|
||||
}
|
||||
|
||||
// availableOptions 中选项是否都被选中了
|
||||
// to do intersectionWith 需要优化，大数据会卡死
|
||||
const isAvailableOptionsAllSelected =
|
||||
@ -247,7 +265,17 @@ export class Transfer<
|
||||
|
||||
// 全选，给予动作全选使用
|
||||
selectAll() {
|
||||
const {options, option2value, onChange, valueField = 'value'} = this.props;
|
||||
const {
|
||||
options,
|
||||
option2value,
|
||||
onChange,
|
||||
valueField = 'value',
|
||||
selectMode
|
||||
} = this.props;
|
||||
if (selectMode === 'tree') {
|
||||
this.treeRef?.handleToggle(true);
|
||||
return;
|
||||
}
|
||||
const availableOptions = flattenTree(options).filter(
|
||||
(option, index, list) =>
|
||||
!option.disabled &&
|
||||
@ -260,6 +288,20 @@ export class Transfer<
|
||||
onChange?.(newValue);
|
||||
}
|
||||
|
||||
// 清空搜索
|
||||
clearSearch(target?: {left?: boolean; right?: boolean}) {
|
||||
if (!target) {
|
||||
this.handleSeachCancel();
|
||||
this.resultRef?.clearInput();
|
||||
}
|
||||
if (target?.left) {
|
||||
this.handleSeachCancel();
|
||||
}
|
||||
if (target?.right) {
|
||||
this.resultRef?.clearInput();
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
clearAll() {
|
||||
const {onChange} = this.props;
|
||||
@ -369,6 +411,22 @@ export class Transfer<
|
||||
onChange && onChange(newArr);
|
||||
}
|
||||
|
||||
@autobind
|
||||
optionItemRender(option: Option, states: ItemRenderStates) {
|
||||
const {optionItemRender, labelField = 'label'} = this.props;
|
||||
return optionItemRender
|
||||
? optionItemRender(option, states)
|
||||
: BaseSelection.itemRender(option, {labelField, ...states});
|
||||
}
|
||||
|
||||
@autobind
|
||||
resultItemRender(option: Option, states: ItemRenderStates) {
|
||||
const {resultItemRender} = this.props;
|
||||
return resultItemRender
|
||||
? resultItemRender(option, states)
|
||||
: ResultList.itemRender(option, states);
|
||||
}
|
||||
|
||||
renderSelect(
|
||||
props: TransferProps & {
|
||||
onToggleAll?: () => void;
|
||||
@ -509,11 +567,15 @@ export class Transfer<
|
||||
checkAllLabel,
|
||||
onlyChildren
|
||||
} = props;
|
||||
const {isTreeDeferLoad, searchResult} = this.state;
|
||||
const {isTreeDeferLoad, searchResult, inputValue} = this.state;
|
||||
const options = searchResult ?? [];
|
||||
const mode = searchResultMode || selectMode;
|
||||
const resultColumns = searchResultColumns || columns;
|
||||
|
||||
const treeItemRender =
|
||||
!searchResult || optionItemRender ? this.optionItemRender : undefined;
|
||||
const highlightTxt = searchResult ? inputValue : undefined;
|
||||
|
||||
return mode === 'table' ? (
|
||||
<TableSelection
|
||||
placeholder={noResultsText}
|
||||
@ -525,7 +587,7 @@ export class Transfer<
|
||||
onChange={onChange}
|
||||
option2value={option2value}
|
||||
cellRender={cellRender}
|
||||
itemRender={optionItemRender}
|
||||
itemRender={this.optionItemRender}
|
||||
valueField={valueField}
|
||||
multiple={multiple}
|
||||
virtualThreshold={virtualThreshold}
|
||||
@ -534,7 +596,7 @@ export class Transfer<
|
||||
/>
|
||||
) : mode === 'tree' ? (
|
||||
<Tree
|
||||
onRef={this.domRef}
|
||||
ref={this.domRef}
|
||||
placeholder={noResultsText}
|
||||
className={cx('Transfer-selection')}
|
||||
options={options}
|
||||
@ -548,7 +610,8 @@ export class Transfer<
|
||||
multiple={multiple}
|
||||
cascade={true}
|
||||
onlyChildren={onlyChildren ?? !isTreeDeferLoad}
|
||||
itemRender={optionItemRender}
|
||||
highlightTxt={highlightTxt}
|
||||
itemRender={treeItemRender}
|
||||
labelField={labelField}
|
||||
valueField={valueField}
|
||||
virtualThreshold={virtualThreshold}
|
||||
@ -565,7 +628,7 @@ export class Transfer<
|
||||
disabled={disabled}
|
||||
onChange={onChange}
|
||||
option2value={option2value}
|
||||
itemRender={optionItemRender}
|
||||
itemRender={this.optionItemRender}
|
||||
multiple={multiple}
|
||||
labelField={labelField}
|
||||
valueField={valueField}
|
||||
@ -584,7 +647,7 @@ export class Transfer<
|
||||
disabled={disabled}
|
||||
onChange={onChange}
|
||||
option2value={option2value}
|
||||
itemRender={optionItemRender}
|
||||
itemRender={this.optionItemRender}
|
||||
multiple={multiple}
|
||||
labelField={labelField}
|
||||
valueField={valueField}
|
||||
@ -647,7 +710,7 @@ export class Transfer<
|
||||
/>
|
||||
) : selectMode === 'tree' ? (
|
||||
<Tree
|
||||
onRef={this.domRef}
|
||||
ref={this.domRef}
|
||||
placeholder={noResultsText}
|
||||
className={cx('Transfer-selection')}
|
||||
options={options}
|
||||
@ -745,7 +808,6 @@ export class Transfer<
|
||||
cellRender,
|
||||
onChange,
|
||||
value,
|
||||
resultItemRender,
|
||||
resultSearchable,
|
||||
resultSearchPlaceholder,
|
||||
onResultSearch,
|
||||
@ -766,6 +828,7 @@ export class Transfer<
|
||||
case 'table':
|
||||
return (
|
||||
<ResultTableList
|
||||
ref={this.domResultRef}
|
||||
classnames={cx}
|
||||
columns={columns!}
|
||||
options={options || []}
|
||||
@ -786,6 +849,7 @@ export class Transfer<
|
||||
case 'tree':
|
||||
return (
|
||||
<ResultTreeList
|
||||
ref={this.domResultRef}
|
||||
loadingConfig={loadingConfig}
|
||||
classnames={cx}
|
||||
className={cx('Transfer-value')}
|
||||
@ -793,7 +857,7 @@ export class Transfer<
|
||||
valueField={'value'}
|
||||
value={value || []}
|
||||
onChange={onChange!}
|
||||
itemRender={resultItemRender}
|
||||
itemRender={this.resultItemRender}
|
||||
searchable={searchable}
|
||||
placeholder={placeholder}
|
||||
searchPlaceholder={resultSearchPlaceholder}
|
||||
@ -806,6 +870,7 @@ export class Transfer<
|
||||
default:
|
||||
return (
|
||||
<ResultList
|
||||
ref={this.domResultRef}
|
||||
className={cx('Transfer-value')}
|
||||
sortable={sortable}
|
||||
disabled={disabled}
|
||||
@ -813,7 +878,7 @@ export class Transfer<
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
searchPlaceholder={resultSearchPlaceholder}
|
||||
itemRender={resultItemRender}
|
||||
itemRender={this.resultItemRender}
|
||||
searchable={searchable}
|
||||
onSearch={onResultSearch}
|
||||
labelField={labelField}
|
||||
|
||||
@ -84,6 +84,13 @@ export class TransferSearch extends React.Component<
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
clearInput() {
|
||||
this.setState({
|
||||
inputValue: ''
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {classnames: cx, translate: __, placeholder, mobileUI} = this.props;
|
||||
|
||||
|
||||
@ -1355,6 +1355,19 @@ export class TreeSelector extends React.Component<
|
||||
);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleToggle(bool?: boolean) {
|
||||
const availableOptions = this.getAvailableOptions();
|
||||
if (bool === undefined) {
|
||||
const checkedAll = availableOptions.every(option =>
|
||||
this.isItemChecked(option)
|
||||
);
|
||||
this.handleCheckAll(availableOptions, checkedAll);
|
||||
return;
|
||||
}
|
||||
this.handleCheckAll(availableOptions, bool);
|
||||
}
|
||||
|
||||
renderCheckAll() {
|
||||
const {
|
||||
multiple,
|
||||
|
||||
@ -1775,11 +1775,7 @@ exports[`Renderer:transfer follow left mode 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="法师"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
法师
|
||||
</span>
|
||||
法师
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -1815,11 +1811,7 @@ exports[`Renderer:transfer follow left mode 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="诸葛亮"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
诸葛亮
|
||||
</span>
|
||||
诸葛亮
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -1860,11 +1852,7 @@ exports[`Renderer:transfer follow left mode 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="战士"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
战士
|
||||
</span>
|
||||
战士
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -1900,11 +1888,7 @@ exports[`Renderer:transfer follow left mode 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="曹操"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
曹操
|
||||
</span>
|
||||
曹操
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -1940,11 +1924,7 @@ exports[`Renderer:transfer follow left mode 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="钟无艳"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
钟无艳
|
||||
</span>
|
||||
钟无艳
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -1985,11 +1965,7 @@ exports[`Renderer:transfer follow left mode 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="打野"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
打野
|
||||
</span>
|
||||
打野
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2025,11 +2001,7 @@ exports[`Renderer:transfer follow left mode 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="李白"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
李白
|
||||
</span>
|
||||
李白
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2065,11 +2037,7 @@ exports[`Renderer:transfer follow left mode 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="韩信"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
韩信
|
||||
</span>
|
||||
韩信
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2105,11 +2073,7 @@ exports[`Renderer:transfer follow left mode 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="云中君"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
云中君
|
||||
</span>
|
||||
云中君
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2443,11 +2407,7 @@ exports[`Renderer:transfer follow left mode 2`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="法师"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
法师
|
||||
</span>
|
||||
法师
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2483,11 +2443,7 @@ exports[`Renderer:transfer follow left mode 2`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="诸葛亮"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
诸葛亮
|
||||
</span>
|
||||
诸葛亮
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2528,11 +2484,7 @@ exports[`Renderer:transfer follow left mode 2`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="战士"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
战士
|
||||
</span>
|
||||
战士
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2568,11 +2520,7 @@ exports[`Renderer:transfer follow left mode 2`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="曹操"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
曹操
|
||||
</span>
|
||||
曹操
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2608,11 +2556,7 @@ exports[`Renderer:transfer follow left mode 2`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="钟无艳"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
钟无艳
|
||||
</span>
|
||||
钟无艳
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2653,11 +2597,7 @@ exports[`Renderer:transfer follow left mode 2`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="打野"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
打野
|
||||
</span>
|
||||
打野
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2693,11 +2633,7 @@ exports[`Renderer:transfer follow left mode 2`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="李白"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
李白
|
||||
</span>
|
||||
李白
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2733,11 +2669,7 @@ exports[`Renderer:transfer follow left mode 2`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="韩信"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
韩信
|
||||
</span>
|
||||
韩信
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -2773,11 +2705,7 @@ exports[`Renderer:transfer follow left mode 2`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="云中君"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
云中君
|
||||
</span>
|
||||
云中君
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -5897,11 +5825,7 @@ exports[`Renderer:transfer tree 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="法师"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
法师
|
||||
</span>
|
||||
法师
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -5937,11 +5861,7 @@ exports[`Renderer:transfer tree 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="诸葛亮"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
诸葛亮
|
||||
</span>
|
||||
诸葛亮
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -5982,11 +5902,7 @@ exports[`Renderer:transfer tree 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="战士"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
战士
|
||||
</span>
|
||||
战士
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -6022,11 +5938,7 @@ exports[`Renderer:transfer tree 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="曹操"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
曹操
|
||||
</span>
|
||||
曹操
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -6062,11 +5974,7 @@ exports[`Renderer:transfer tree 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="钟无艳"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
钟无艳
|
||||
</span>
|
||||
钟无艳
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -6107,11 +6015,7 @@ exports[`Renderer:transfer tree 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="打野"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
打野
|
||||
</span>
|
||||
打野
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -6147,11 +6051,7 @@ exports[`Renderer:transfer tree 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="李白"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
李白
|
||||
</span>
|
||||
李白
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -6187,11 +6087,7 @@ exports[`Renderer:transfer tree 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="韩信"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
韩信
|
||||
</span>
|
||||
韩信
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -6227,11 +6123,7 @@ exports[`Renderer:transfer tree 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="云中君"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
云中君
|
||||
</span>
|
||||
云中君
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -6431,11 +6323,7 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="诸葛亮"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
诸葛亮
|
||||
</span>
|
||||
诸葛亮
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -6471,11 +6359,7 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="曹操"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
曹操
|
||||
</span>
|
||||
曹操
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
@ -6511,11 +6395,7 @@ exports[`Renderer:transfer with showInvalidMatch & unmatched do not add 1`] = `
|
||||
class="cxd-Tree-itemText"
|
||||
title="钟无艳"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
钟无艳
|
||||
</span>
|
||||
钟无艳
|
||||
</span>
|
||||
<div
|
||||
class="cxd-Tree-item-icons"
|
||||
|
||||
@ -1230,3 +1230,84 @@ test('Renderer:transfer with searchApi', async () => {
|
||||
const caocao = container.querySelector('span[title=曹操]');
|
||||
expect(caocao).toBeNull();
|
||||
});
|
||||
|
||||
test('Renderer:transfer tree onlyChildren true', async () => {
|
||||
const onSubmit = jest.fn();
|
||||
const schema = {
|
||||
"type": "form",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"debug": true,
|
||||
"body": [
|
||||
{
|
||||
"label": "默认",
|
||||
"type": "transfer",
|
||||
"name": "transfer",
|
||||
"value": "libai",
|
||||
"selectMode": "tree",
|
||||
"searchable": true,
|
||||
"onlyChildren": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "法师",
|
||||
"children": [
|
||||
{
|
||||
"label": "诸葛亮",
|
||||
"value": "zhugeliang"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "战士",
|
||||
"value": "战士",
|
||||
"children": [
|
||||
{
|
||||
"label": "曹操",
|
||||
"disabled": true,
|
||||
"value": "caocao"
|
||||
},
|
||||
{
|
||||
"label": "钟无艳",
|
||||
"value": "zhongwuyan"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "打野",
|
||||
"children": [
|
||||
{
|
||||
"label": "李白",
|
||||
"value": "libai"
|
||||
},
|
||||
{
|
||||
"label": "韩信",
|
||||
"value": "hanxin"
|
||||
},
|
||||
{
|
||||
"label": "云中君",
|
||||
"value": "yunzhongjun"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const {getByText, container} = render(
|
||||
amisRender(schema, {onSubmit}, makeEnv({}))
|
||||
);
|
||||
|
||||
const checkbox = container.querySelector('.cxd-Checkbox');
|
||||
expect(checkbox).not.toBeNull();
|
||||
|
||||
checkbox && fireEvent.click(checkbox);
|
||||
|
||||
fireEvent.click(getByText('提交'));
|
||||
|
||||
await wait(100);
|
||||
expect(onSubmit).toBeCalledTimes(1);
|
||||
|
||||
expect(onSubmit.mock.calls[0][0]).toEqual({
|
||||
transfer: "zhugeliang,zhongwuyan,libai,hanxin,yunzhongjun"
|
||||
});
|
||||
});
|
||||
@ -428,29 +428,21 @@ export class BaseTransferRenderer<
|
||||
|
||||
@autobind
|
||||
optionItemRender(option: Option, states: ItemRenderStates) {
|
||||
const {menuTpl, render, data, labelField = 'label'} = this.props;
|
||||
const {menuTpl, render, data} = this.props;
|
||||
|
||||
if (menuTpl) {
|
||||
return render(`item/${states.index}`, menuTpl, {
|
||||
data: createObject(createObject(data, states), option)
|
||||
});
|
||||
}
|
||||
|
||||
return BaseSelection.itemRender(option, {labelField, ...states});
|
||||
return render(`item/${states.index}`, menuTpl, {
|
||||
data: createObject(createObject(data, states), option)
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
resultItemRender(option: Option, states: ItemRenderStates) {
|
||||
const {valueTpl, render, data} = this.props;
|
||||
|
||||
if (valueTpl) {
|
||||
return render(`value/${states.index}`, valueTpl, {
|
||||
onChange: states.onChange,
|
||||
data: createObject(createObject(data, states), option)
|
||||
});
|
||||
}
|
||||
|
||||
return ResultList.itemRender(option, states);
|
||||
return render(`value/${states.index}`, valueTpl, {
|
||||
onChange: states.onChange,
|
||||
data: createObject(createObject(data, states), option)
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
@ -508,6 +500,10 @@ export class BaseTransferRenderer<
|
||||
case 'selectAll':
|
||||
this.tranferRef?.selectAll();
|
||||
break;
|
||||
case 'clearSearch': {
|
||||
this.tranferRef?.clearSearch(data);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -533,6 +529,7 @@ export class BaseTransferRenderer<
|
||||
selectTitle,
|
||||
resultTitle,
|
||||
menuTpl,
|
||||
valueTpl,
|
||||
searchPlaceholder,
|
||||
resultListModeFollowSelect = false,
|
||||
resultSearchPlaceholder,
|
||||
@ -597,8 +594,8 @@ export class BaseTransferRenderer<
|
||||
statistics={statistics}
|
||||
labelField={labelField}
|
||||
valueField={valueField}
|
||||
optionItemRender={this.optionItemRender}
|
||||
resultItemRender={this.resultItemRender}
|
||||
optionItemRender={menuTpl ? this.optionItemRender : undefined}
|
||||
resultItemRender={valueTpl ? this.resultItemRender : undefined}
|
||||
onSelectAll={this.onSelectAll}
|
||||
onRef={this.getRef}
|
||||
virtualThreshold={virtualThreshold}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user