[improvement] TreeSelect: rename event name (#3892)

src/tree-select/README.md

@@ -17,8 +17,8 @@ Vue.use(TreeSelect);
   :items="items"
   :main-active-index="mainActiveIndex"
   :active-id="activeId"
-  @navclick="onNavClick"
-  @itemclick="onItemClick"
+  @click-nav="onClickNav"
+  @click-item="onClickItem"
 />
 ```
 
@@ -34,10 +34,10 @@ export default {
     };
   },
   methods: {
-    onNavClick(index) {
+    onClickNav(index) {
       this.mainActiveIndex = index;
     },
-    onItemClick(data) {
+    onClickItem(data) {
       this.activeId = data.id;
     }
   }
@@ -59,8 +59,8 @@ export default {
 
 | Event | Description | Arguments |
 |------|------|------|
-| navclick | triggered when parent node is selected |  index: index of selected parent |
-| itemclick | triggered when item is selected | data: selected item |
+| click-nav | triggered when parent node is selected |  index: index of selected parent |
+| click-item | triggered when item is selected | data: selected item |
 
 ### Data Structure of Item
 

src/tree-select/README.zh-CN.md

@@ -17,8 +17,8 @@ Vue.use(TreeSelect);
   :items="items"
   :main-active-index="mainActiveIndex"
   :active-id="activeId"
-  @navclick="onNavClick"
-  @itemclick="onItemClick"
+  @click-nav="onClickNav"
+  @click-item="onClickItem"
 />
 ```
 
@@ -34,10 +34,10 @@ export default {
     };
   },
   methods: {
-    onNavClick(index) {
+    onClickNav(index) {
       this.mainActiveIndex = index;
     },
-    onItemClick(data) {
+    onClickItem(data) {
       this.activeId = data.id;
     }
   }
@@ -59,8 +59,8 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| navclick | 左侧导航点击时，触发的事件 |  index：被点击的导航的索引 |
-| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |
+| click-nav | 点击左侧导航时触发 | index：被点击的导航的索引 |
+| click-item | 点击右侧选择项时触发 | data: 该点击项的数据 |
 
 ### Item 数据结构
 

src/tree-select/index.tsx

@@ -53,6 +53,9 @@ function TreeSelect(
             ]}
             onClick={() => {
               if (!item.disabled) {
+                emit(ctx, 'click-nav', index);
+
+                // compatible for old usage, should be removed in next major version
                 emit(ctx, 'navclick', index);
               }
             }}
@@ -74,6 +77,9 @@ function TreeSelect(
             ]}
             onClick={() => {
               if (!item.disabled) {
+                emit(ctx, 'click-item', item);
+
+                // compatible for old usage, should be removed in next major version
                 emit(ctx, 'itemclick', item);
               }
             }}

src/tree-select/test/index.spec.js

@@ -5,8 +5,9 @@ test('empty list', () => {
   expect(mount(TreeSelect)).toMatchSnapshot();
 });
 
-test('select item', () => {
-  const onItemClick = jest.fn();
+test('click-nav event', () => {
+  const onNavClick = jest.fn();
+  const onClickNav = jest.fn();
   const item = {
     text: 'city1',
     id: 1
@@ -14,17 +15,48 @@ test('select item', () => {
 
   const wrapper = mount(TreeSelect, {
     propsData: {
-      items: [{
-        text: 'group1',
-        children: [
-          item,
-          { ...item, disabled: true }
-        ]
-      }]
+      items: [
+        {
+          text: 'group1',
+          children: [item]
+        }
+      ]
     },
     context: {
       on: {
-        itemclick: onItemClick
+        navclick: onNavClick,
+        'click-nav': onClickNav
+      }
+    }
+  });
+
+  const items = wrapper.findAll('.van-tree-select__nav-item');
+  items.at(0).trigger('click');
+  expect(onNavClick).toHaveBeenCalledWith(0);
+  expect(onClickNav).toHaveBeenCalledWith(0);
+});
+
+test('click-item event', () => {
+  const onItemClick = jest.fn();
+  const onClickItem = jest.fn();
+  const item = {
+    text: 'city1',
+    id: 1
+  };
+
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: [
+        {
+          text: 'group1',
+          children: [item]
+        }
+      ]
+    },
+    context: {
+      on: {
+        itemclick: onItemClick,
+        'click-item': onClickItem
       }
     }
   });
@@ -32,6 +64,63 @@ test('select item', () => {
   const items = wrapper.findAll('.van-tree-select__item');
   items.at(0).trigger('click');
   expect(onItemClick).toHaveBeenCalledWith(item);
-  items.at(1).trigger('click');
-  expect(onItemClick).toHaveBeenCalledTimes(1);
+  expect(onClickItem).toHaveBeenCalledWith(item);
+});
+
+test('click disabled nav', () => {
+  const onClickNav = jest.fn();
+  const item = {
+    text: 'city1',
+    id: 1
+  };
+
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: [
+        {
+          text: 'group1',
+          children: [item],
+          disabled: true
+        }
+      ]
+    },
+    context: {
+      on: {
+        'click-nav': onClickNav
+      }
+    }
+  });
+
+  const items = wrapper.findAll('.van-tree-select__nav-item');
+  items.at(0).trigger('click');
+  expect(onClickNav).toHaveBeenCalledTimes(0);
+});
+
+test('click disabled item', () => {
+  const onClickItem = jest.fn();
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: [
+        {
+          text: 'group1',
+          children: [
+            {
+              text: 'city1',
+              id: 1,
+              disabled: true
+            }
+          ]
+        }
+      ]
+    },
+    context: {
+      on: {
+        'click-item': onClickItem
+      }
+    }
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items.at(0).trigger('click');
+  expect(onClickItem).toHaveBeenCalledTimes(0);
 });