From 8476dc302433c586c5cd36469b743690956b07af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 18 Jul 2019 20:35:19 +0800 Subject: [PATCH] [improvement] TreeSelect: rename event name --- src/tree-select/README.md | 12 ++-- src/tree-select/README.zh-CN.md | 12 ++-- src/tree-select/index.tsx | 6 ++ src/tree-select/test/index.spec.js | 111 ++++++++++++++++++++++++++--- 4 files changed, 118 insertions(+), 23 deletions(-) diff --git a/src/tree-select/README.md b/src/tree-select/README.md index 980e77a9656..6416836dbf4 100644 --- a/src/tree-select/README.md +++ b/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 diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md index a2ea3e2594e..745592375db 100644 --- a/src/tree-select/README.zh-CN.md +++ b/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 数据结构 diff --git a/src/tree-select/index.tsx b/src/tree-select/index.tsx index b65989d61ea..be065523319 100644 --- a/src/tree-select/index.tsx +++ b/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); } }} diff --git a/src/tree-select/test/index.spec.js b/src/tree-select/test/index.spec.js index 17d130dbf8c..dbf4ec6a22b 100644 --- a/src/tree-select/test/index.spec.js +++ b/src/tree-select/test/index.spec.js @@ -5,8 +5,40 @@ test('empty list', () => { expect(mount(TreeSelect)).toMatchSnapshot(); }); -test('select item', () => { +test('click-nav event', () => { + const onNavClick = jest.fn(); + const onClickNav = jest.fn(); + const item = { + text: 'city1', + id: 1 + }; + + const wrapper = mount(TreeSelect, { + propsData: { + items: [ + { + text: 'group1', + children: [item] + } + ] + }, + context: { + on: { + 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 @@ -14,17 +46,17 @@ 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 + 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); });