test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

docs: update Transfer demo (#39526)

Browse Source 
* docs: update transfer demo

* test: Update snapshot
This commit is contained in:
二货爱吃白萝卜 2022-12-13 17:35:48 +08:00 committed by GitHub
parent 153a24aa53
commit b4b156f76c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 506 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

420
components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -7758,7 +7758,7 @@ exports[`renders ./components/transfer/demo/tree-transfer.tsx extend context cor
<span
class="ant-transfer-list-header-selected"
>
5
7
<!-- -->
<!-- -->
items
@ -7774,219 +7774,283 @@ exports[`renders ./components/transfer/demo/tree-transfer.tsx extend context cor
class="ant-transfer-list-body-customize-wrapper"
>
<div
class="ant-tree ant-tree-icon-hide ant-tree-block-node"
role="tree"
style="padding:8px"
>
<div>
<input
aria-label="for screen reader"
style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
tabindex="0"
value=""
/>
</div>
<div
aria-hidden="true"
class="ant-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
class="ant-tree ant-tree-icon-hide ant-tree-block-node"
role="tree"
>
<div
class="ant-tree-indent"
>
<div
class="ant-tree-indent-unit"
<div>
<input
aria-label="for screen reader"
style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
tabindex="0"
value=""
/>
</div>
</div>
<div
class="ant-tree-list"
style="position:relative"
>
<div
class="ant-tree-list-holder"
aria-hidden="true"
class="ant-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
>
<div>
<div
class="ant-tree-indent"
>
<div
class="ant-tree-list-holder-inner"
style="display:flex;flex-direction:column"
>
class="ant-tree-indent-unit"
/>
</div>
</div>
<div
class="ant-tree-list"
style="position:relative"
>
<div
class="ant-tree-list-holder"
>
<div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
class="ant-tree-list-holder-inner"
style="display:flex;flex-direction:column"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
class="ant-tree-checkbox-inner"
aria-hidden="true"
class="ant-tree-indent"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-0"
>
<span
class="ant-tree-title"
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
0-0
<span
class="ant-tree-checkbox-inner"
/>
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher_open"
>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-tree-switcher-icon"
role="img"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-0"
>
<svg
aria-hidden="true"
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
class="ant-tree-title"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
0-0
</span>
</span>
</span>
<span
class="ant-tree-checkbox"
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
class="ant-tree-checkbox-inner"
aria-hidden="true"
class="ant-tree-indent"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
title="0-1"
>
<span
class="ant-tree-title"
class="ant-tree-switcher ant-tree-switcher_open"
>
0-1
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-tree-switcher-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-1-0"
>
<span
class="ant-tree-title"
class="ant-tree-checkbox"
>
0-1-0
<span
class="ant-tree-checkbox-inner"
/>
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-1-1"
>
<span
class="ant-tree-title"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
title="0-1"
>
0-1-1
<span
class="ant-tree-title"
>
0-1
</span>
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-3"
>
<span
class="ant-tree-title"
aria-hidden="true"
class="ant-tree-indent"
>
0-3
<span
class="ant-tree-indent-unit"
/>
</span>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-1-0"
>
<span
class="ant-tree-title"
>
0-1-0
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-1-1"
>
<span
class="ant-tree-title"
>
0-1-1
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-2"
>
<span
class="ant-tree-title"
>
0-2
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-3"
>
<span
class="ant-tree-title"
>
0-3
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-4"
>
<span
class="ant-tree-title"
>
0-4
</span>
</span>
</div>
</div>
</div>
</div>

420
components/transfer/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -5123,7 +5123,7 @@ exports[`renders ./components/transfer/demo/tree-transfer.tsx correctly 1`] = `
<span
class="ant-transfer-list-header-selected"
>
5
7
<!-- -->
<!-- -->
items
@ -5139,219 +5139,283 @@ exports[`renders ./components/transfer/demo/tree-transfer.tsx correctly 1`] = `
class="ant-transfer-list-body-customize-wrapper"
>
<div
class="ant-tree ant-tree-icon-hide ant-tree-block-node"
role="tree"
style="padding:8px"
>
<div>
<input
aria-label="for screen reader"
style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
tabindex="0"
value=""
/>
</div>
<div
aria-hidden="true"
class="ant-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
class="ant-tree ant-tree-icon-hide ant-tree-block-node"
role="tree"
>
<div
class="ant-tree-indent"
>
<div
class="ant-tree-indent-unit"
<div>
<input
aria-label="for screen reader"
style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
tabindex="0"
value=""
/>
</div>
</div>
<div
class="ant-tree-list"
style="position:relative"
>
<div
class="ant-tree-list-holder"
aria-hidden="true"
class="ant-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
>
<div>
<div
class="ant-tree-indent"
>
<div
class="ant-tree-list-holder-inner"
style="display:flex;flex-direction:column"
>
class="ant-tree-indent-unit"
/>
</div>
</div>
<div
class="ant-tree-list"
style="position:relative"
>
<div
class="ant-tree-list-holder"
>
<div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
class="ant-tree-list-holder-inner"
style="display:flex;flex-direction:column"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
class="ant-tree-checkbox-inner"
aria-hidden="true"
class="ant-tree-indent"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-0"
>
<span
class="ant-tree-title"
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
0-0
<span
class="ant-tree-checkbox-inner"
/>
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher_open"
>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-tree-switcher-icon"
role="img"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-0"
>
<svg
aria-hidden="true"
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
class="ant-tree-title"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
0-0
</span>
</span>
</span>
<span
class="ant-tree-checkbox"
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
class="ant-tree-checkbox-inner"
aria-hidden="true"
class="ant-tree-indent"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
title="0-1"
>
<span
class="ant-tree-title"
class="ant-tree-switcher ant-tree-switcher_open"
>
0-1
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-tree-switcher-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-1-0"
>
<span
class="ant-tree-title"
class="ant-tree-checkbox"
>
0-1-0
<span
class="ant-tree-checkbox-inner"
/>
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-1-1"
>
<span
class="ant-tree-title"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
title="0-1"
>
0-1-1
<span
class="ant-tree-title"
>
0-1
</span>
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-3"
>
<span
class="ant-tree-title"
aria-hidden="true"
class="ant-tree-indent"
>
0-3
<span
class="ant-tree-indent-unit"
/>
</span>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-1-0"
>
<span
class="ant-tree-title"
>
0-1-0
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-1-1"
>
<span
class="ant-tree-title"
>
0-1-1
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-2"
>
<span
class="ant-tree-title"
>
0-2
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-3"
>
<span
class="ant-tree-title"
>
0-3
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="0-4"
>
<span
class="ant-tree-title"
>
0-4
</span>
</span>
</div>
</div>
</div>
</div>

38
components/transfer/demo/tree-transfer.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Transfer, Tree } from 'antd';
import { Transfer, Tree, theme } from 'antd';
import type { TransferDirection, TransferItem } from 'antd/es/transfer';
import type { DataNode } from 'antd/es/tree';
@ -21,6 +21,8 @@ const generateTree = (treeNodes: DataNode[] = [], checkedKeys: string[] = []): D
}));
const TreeTransfer = ({ dataSource, targetKeys, ...restProps }: TreeTransferProps) => {
const { token } = theme.useToken();
const transferDataSource: TransferItem[] = [];
function flatten(list: DataNode[] = []) {
list.forEach((item) => {
@ -43,20 +45,22 @@ const TreeTransfer = ({ dataSource, targetKeys, ...restProps }: TreeTransferProp
if (direction === 'left') {
const checkedKeys = [...selectedKeys, ...targetKeys];
return (
<Tree
blockNode
checkable
checkStrictly
defaultExpandAll
checkedKeys={checkedKeys}
treeData={generateTree(dataSource, targetKeys)}
onCheck={(_, { node: { key } }) => {
onItemSelect(key as string, !isChecked(checkedKeys, key));
}}
onSelect={(_, { node: { key } }) => {
onItemSelect(key as string, !isChecked(checkedKeys, key));
}}
/>
<div style={{ padding: token.paddingXS }}>
<Tree
blockNode
checkable
checkStrictly
defaultExpandAll
checkedKeys={checkedKeys}
treeData={generateTree(dataSource, targetKeys)}
onCheck={(_, { node: { key } }) => {
onItemSelect(key as string, !isChecked(checkedKeys, key));
}}
onSelect={(_, { node: { key } }) => {
onItemSelect(key as string, !isChecked(checkedKeys, key));
}}
/>
</div>
);
}
}}
@ -74,7 +78,9 @@ const treeData: DataNode[] = [
{ key: '0-1-1', title: '0-1-1' },
],
},
{ key: '0-2', title: '0-3' },
{ key: '0-2', title: '0-2' },
{ key: '0-3', title: '0-3' },
{ key: '0-4', title: '0-4' },
];
const App: React.FC = () => {