From 5c8b82ccf4309e923df72d29256a2d61d457acc6 Mon Sep 17 00:00:00 2001
From: zkwolf <chenhao5866@gmail.com>
Date: Thu, 1 Jul 2021 15:21:48 +0800
Subject: [PATCH] feat(tree): support global title slot (#4299)

* feat: global tree title slot

* docs: add context menu demo

* test: update snapshot
---
 antdv-demo/docs/tree/demo/context-menu.md     | 69 +++++++++++++++++++
 antdv-demo/docs/tree/demo/index.vue           |  2 +
 antdv-demo/docs/tree/index.en-US.md           |  1 +
 antdv-demo/docs/tree/index.zh-CN.md           |  1 +
 components/tree/Tree.jsx                      |  1 +
 .../__tests__/__snapshots__/demo.test.js.snap | 23 +++++++
 6 files changed, 97 insertions(+)
 create mode 100644 antdv-demo/docs/tree/demo/context-menu.md

diff --git a/antdv-demo/docs/tree/demo/context-menu.md b/antdv-demo/docs/tree/demo/context-menu.md
new file mode 100644
index 000000000..0ed686458
--- /dev/null
+++ b/antdv-demo/docs/tree/demo/context-menu.md
@@ -0,0 +1,69 @@
+<cn>
+#### 右键菜单
+自定义展示右键菜单。
+</cn>
+
+<us>
+#### Context Menu
+Custom display the context menu
+</us>
+
+```vue
+<template>
+  <a-tree :tree-data="treeData" :expandedKeys.sync="expandedKeys">
+    <template #title="{ key: treeKey, title }">
+      <a-dropdown :trigger="['contextmenu']">
+        <span>{{ title }}</span>
+        <template #overlay>
+          <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
+            <a-menu-item key="1">1st menu item</a-menu-item>
+            <a-menu-item key="2">2nd menu item</a-menu-item>
+            <a-menu-item key="3">3rd menu item</a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </template>
+  </a-tree>
+</template>
+<script>
+const treeData = [
+  {
+    title: '0-0',
+    key: '0-0',
+    children: [
+      {
+        title: '0-0-0',
+        key: '0-0-0',
+        children: [
+          { title: '0-0-0-0', key: '0-0-0-0' },
+          { title: '0-0-0-1', key: '0-0-0-1' },
+          { title: '0-0-0-2', key: '0-0-0-2' },
+        ],
+      },
+      {
+        title: '0-0-1',
+        key: '0-0-1',
+        children: [
+          { title: '0-0-1-0', key: '0-0-1-0' },
+          { title: '0-0-1-1', key: '0-0-1-1' },
+          { title: '0-0-1-2', key: '0-0-1-2' },
+        ],
+      },
+    ],
+  },
+];
+export default {
+  data() {
+    return {
+      treeData,
+      expandedKeys: ['0-0-0', '0-0-1'],
+    };
+  },
+  methods: {
+    onContextMenuClick(treeKey, menuKey) {
+      console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
+    },
+  },
+};
+</script>
+```
diff --git a/antdv-demo/docs/tree/demo/index.vue b/antdv-demo/docs/tree/demo/index.vue
index 2e9aef6c0..184e59e2a 100644
--- a/antdv-demo/docs/tree/demo/index.vue
+++ b/antdv-demo/docs/tree/demo/index.vue
@@ -9,6 +9,7 @@ import Search from './search';
 import Directory from './directory';
 import ReplaceFields from './replaceFields';
 import SwitcherIcon from './switcher-icon';
+import ContextMenu from './context-menu';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -48,6 +49,7 @@ export default {
           <Search />
           <Directory />
           <SwitcherIcon />
+          <ContextMenu />
         </demo-sort>
         <api>
           <template slot="cn">
diff --git a/antdv-demo/docs/tree/index.en-US.md b/antdv-demo/docs/tree/index.en-US.md
index ced2344de..e6f0313f3 100644
--- a/antdv-demo/docs/tree/index.en-US.md
+++ b/antdv-demo/docs/tree/index.en-US.md
@@ -28,6 +28,7 @@
 | showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |  |
 | switcherIcon | customize collapse/expand icon of tree node | slot | - |  |
 | showLine | Shows a connecting line | boolean | false |  |
+| title | title | slot |  |  |
 
 ### Events
 
diff --git a/antdv-demo/docs/tree/index.zh-CN.md b/antdv-demo/docs/tree/index.zh-CN.md
index e4a7a0867..d0aa84eff 100644
--- a/antdv-demo/docs/tree/index.zh-CN.md
+++ b/antdv-demo/docs/tree/index.zh-CN.md
@@ -28,6 +28,7 @@
 | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |
 | switcherIcon | 自定义树节点的展开/折叠图标 | slot | - |  |
 | showLine | 是否展示连接线 | boolean | false |  |
+| title | 标题 | slot |  |  |
 
 ### 事件
 
diff --git a/components/tree/Tree.jsx b/components/tree/Tree.jsx
index d2fb5676a..f2e26393a 100644
--- a/components/tree/Tree.jsx
+++ b/components/tree/Tree.jsx
@@ -169,6 +169,7 @@ export default {
           title:
             $scopedSlots[scopedSlots.title] ||
             $slots[slots.title] ||
+            $scopedSlots.title ||
             restProps[replaceFields.title],
           dataRef: item,
           on,
diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.js.snap
index 6188487d9..95fa6149c 100644
--- a/components/tree/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree/__tests__/__snapshots__/demo.test.js.snap
@@ -48,6 +48,29 @@ exports[`renders ./antdv-demo/docs/tree/demo/basic-controlled.md correctly 1`] =
 </ul>
 `;
 
+exports[`renders ./antdv-demo/docs/tree/demo/context-menu.md correctly 1`] = `
+<ul role="tree" unselectable="on" class="ant-tree ant-tree-icon-hide">
+  <li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0</span></span></span>
+    <ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
+      <li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-0</span></span></span>
+        <ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
+          <li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-0-0</span></span></span></li>
+          <li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-0-1</span></span></span></li>
+          <li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-0-2</span></span></span></li>
+        </ul>
+      </li>
+      <li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-tree-switcher-icon"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-1</span></span></span>
+        <ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
+          <li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-1-0</span></span></span></li>
+          <li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-1-1</span></span></span></li>
+          <li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span class="ant-dropdown-trigger">0-0-1-2</span></span></span></li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+</ul>
+`;
+
 exports[`renders ./antdv-demo/docs/tree/demo/customized-icon.md correctly 1`] = `
 <ul role="tree" unselectable="on" class="ant-tree">
   <li role="treeitem" class="ant-tree-treenode-switcher-open"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-iconEle ant-tree-icon__customize"><i aria-label="icon: smile-o" class="anticon anticon-smile-o"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-tree-title">parent 1</span></span>