feat: update tree-select

Author: tangjinzhou

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'upload', // dev components
+    componentName: 'tree-select', // dev components
   },
 };

components/tree-select/__tests__/__snapshots__/demo.test.js.snap

@@ -1,19 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tree-select/demo/basic.md correctly 1`] = `<span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 300px;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><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></span>`;
+exports[`renders ./components/tree-select/demo/async.md correctly 1`] = `<span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled" style="width: 100%;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><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></span>`;
+
+exports[`renders ./components/tree-select/demo/basic.md correctly 1`] = `<span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 100%;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><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></span>`;
 
 exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
-<span role="combobox" aria-haspopup="listbox" tabindex="-1" class="ant-select ant-select-enabled" style="width: 300px;"><span class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><li unselectable="unselectable" role="menuitem" title="Node1" class="ant-select-selection__choice" style="user-select: none;"><span class="ant-select-selection__choice__remove"><i aria-label="icon: close" class="ant-select-remove-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span><span class="ant-select-selection__choice__content">Node1</span></li>
+<span role="combobox" aria-haspopup="listbox" tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;"><span class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><li unselectable="unselectable" role="menuitem" title="Node1" class="ant-select-selection__choice" style="user-select: none;"><span class="ant-select-selection__choice__remove"><i aria-label="icon: close" class="ant-select-remove-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span><span class="ant-select-selection__choice__content">Node1</span></li>
 <li class="ant-select-search ant-select-search--inline"><span class="ant-select-search__field__wrap"><input type="text" aria-label="filter select" aria-autocomplete="list" aria-multiline="false" class="ant-select-search__field" style="width: 0px;"><span class="ant-select-search__field__mirror">&nbsp;</span></span></li>
 </div>
 </span></span>
 `;
 
 exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
-<span role="combobox" aria-haspopup="listbox" tabindex="-1" class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 300px;"><span class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><li class="ant-select-search ant-select-search--inline"><span class="ant-select-search__field__wrap"><input type="text" aria-label="filter select" aria-autocomplete="list" aria-multiline="false" class="ant-select-search__field" style="width: 0px;"><span class="ant-select-search__field__mirror">&nbsp;</span></span></li>
+<span role="combobox" aria-haspopup="listbox" tabindex="-1" class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 100%;"><span class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><li class="ant-select-search ant-select-search--inline"><span class="ant-select-search__field__wrap"><input type="text" aria-label="filter select" aria-autocomplete="list" aria-multiline="false" class="ant-select-search__field" style="width: 0px;"><span class="ant-select-search__field__mirror">&nbsp;</span></span></li>
 </div><span class="ant-select-search__field__placeholder" style="display: block;">Please select</span></span></span>
 `;
 
-exports[`renders ./components/tree-select/demo/suffix.md correctly 1`] = `<span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 300px;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i slot="suffixIcon" aria-label="icon: smile" class="anticon anticon-smile"><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></span>`;
+exports[`renders ./components/tree-select/demo/suffix.md correctly 1`] = `<span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 100%;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i slot="suffixIcon" aria-label="icon: smile" class="anticon anticon-smile"><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></span>`;
 
-exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `<span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled" style="width: 300px;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><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></span>`;
+exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `<span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled" style="width: 100%;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><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></span>`;

components/tree-select/__tests__/index.test.js

@@ -1,6 +1,8 @@
 import TreeSelect from '..';
 import focusTest from '../../../tests/shared/focusTest';
+import mountTest from '../../../tests/shared/mountTest';
 
 describe('TreeSelect', () => {
   focusTest(TreeSelect);
+  mountTest(TreeSelect);
 });

components/tree-select/demo/async.md

@@ -0,0 +1,69 @@
+<cn>
+#### 异步加载
+异步加载树节点。
+</cn>
+
+<us>
+#### Asynchronous loading
+Asynchronous loading tree node.
+</us>
+
+```tpl
+<template>
+  <a-tree-select
+    treeDataSimpleMode
+    style="width: 100%"
+    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+    :treeData="treeData"
+    placeholder="Please select"
+    :loadData="onLoadData"
+    v-model="value"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: undefined,
+      treeData: [
+        { id: 1, pId: 0, value: '1', title: 'Expand to load' },
+        { id: 2, pId: 0, value: '2', title: 'Expand to load' },
+        { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
+      ],
+    };
+  },
+  methods: {
+    genTreeNode(parentId, isLeaf = false) {
+      const random = Math.random()
+        .toString(36)
+        .substring(2, 6);
+      return {
+        id: random,
+        pId: parentId,
+        value: random,
+        title: isLeaf ? 'Tree Node' : 'Expand to load',
+        isLeaf,
+      };
+    },
+    onLoadData(treeNode) {
+      return new Promise(resolve => {
+        const { id } = treeNode.dataRef;
+        setTimeout(() => {
+          this.treeData = this.treeData.concat([
+            this.genTreeNode(id, false),
+            this.genTreeNode(id, true),
+          ]);
+          resolve();
+        }, 300);
+      });
+    },
+  },
+  watch: {
+    value(value) {
+      console.log(value);
+    },
+  },
+};
+</script>
+```

components/tree-select/demo/basic.md

@@ -12,13 +12,12 @@ The most basic usage.
 <template>
   <a-tree-select
     showSearch
-    style="width: 300px"
-    :value="value"
+    style="width: 100%"
+    v-model="value"
     :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
     placeholder="Please select"
     allowClear
     treeDefaultExpandAll
-    @change="onChange"
   >
     <a-tree-select-node value="parent 1" title="parent 1" key="0-1">
       <a-tree-select-node value="parent 1-0" title="parent 1-0" key="0-1-1">
@@ -42,12 +41,6 @@ The most basic usage.
         value: undefined,
       };
     },
-    methods: {
-      onChange(value) {
-        console.log(value);
-        this.value = value;
-      },
-    },
   };
 </script>
 ```

components/tree-select/demo/checkable.md

@@ -11,10 +11,9 @@ Multiple and checkable.
 ```tpl
 <template>
   <a-tree-select
-    style="width: 300px"
+    style="width: 100%"
     :treeData="treeData"
-    :value="value"
-    @change="onChange"
+    v-model="value"
     treeCheckable
     :showCheckedStrategy="SHOW_PARENT"
     searchPlaceholder="Please select"
@@ -70,12 +69,6 @@ Multiple and checkable.
         SHOW_PARENT,
       };
     },
-    methods: {
-      onChange(value) {
-        console.log('onChange ', value);
-        this.value = value;
-      },
-    },
   };
 </script>
 ```

components/tree-select/demo/index.vue

@@ -4,6 +4,7 @@ import Checkable from './checkable';
 import Multiple from './multiple';
 import TreeData from './treeData';
 import Suffix from './suffix';
+import Async from './async';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -28,15 +29,32 @@ export default {
   subtitle: '树选择',
   type: 'Data Entry',
   title: 'TreeSelect',
+  data() {
+    return {
+      show: true,
+    };
+  },
   render() {
     return (
       <div>
+        <button
+          onClick={() => {
+            this.show = !this.show;
+          }}
+        >
+          show
+        </button>
         <md cn={md.cn} us={md.us} />
-        <Basic />
-        <Checkable />
-        <Multiple />
-        <TreeData />
-        <Suffix />
+        {this.show ? (
+          <div>
+            <Basic />
+            <Checkable />
+            <Multiple />
+            <TreeData />
+            <Suffix />
+            <Async />
+          </div>
+        ) : null}
         <api>
           <template slot="cn">
             <CN />

components/tree-select/demo/multiple.md

@@ -12,7 +12,7 @@ Multiple selection usage.
 <template>
   <a-tree-select
     showSearch
-    style="width: 300px"
+    style="width: 100%"
     :value="value"
     :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
     placeholder="Please select"

components/tree-select/demo/suffix.md

@@ -12,13 +12,12 @@ The most basic usage.
 <template>
   <a-tree-select
     showSearch
-    style="width: 300px"
-    :value="value"
+    style="width: 100%"
+    v-model="value"
     :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
     placeholder="Please select"
     allowClear
     treeDefaultExpandAll
-    @change="onChange"
   >
     <a-icon slot="suffixIcon" type="smile" />
     <a-tree-select-node value="parent 1" title="parent 1" key="0-1">
@@ -42,12 +41,6 @@ The most basic usage.
         value: undefined,
       };
     },
-    methods: {
-      onChange(value) {
-        console.log(value);
-        this.value = value;
-      },
-    },
   };
 </script>
 ```

components/tree-select/demo/treeData.md

@@ -11,7 +11,7 @@ The tree structure can be populated using `treeData` property. This is a quick a
 ```tpl
 <template>
   <a-tree-select
-    style="width: 300px"
+    style="width: 100%"
     :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
     :treeData="treeData"
     placeholder="Please select"