From 93cf802b513eb37c68f82177bf7eef5e1381ec00 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 26 Feb 2020 19:47:02 +0800 Subject: [PATCH] feat: update tag --- build/config.js | 2 +- components/tag/Tag.jsx | 57 +++++++++++----- .../__tests__/__snapshots__/demo.test.js.snap | 68 ++++--------------- .../__snapshots__/index.test.js.snap | 12 ++-- components/tag/__tests__/index.test.js | 3 + components/tag/demo/basic.md | 6 +- components/tag/demo/colorful.md | 3 +- components/tag/demo/control.md | 7 +- components/tag/demo/controlled.md | 2 +- components/tag/demo/hot-tags.md | 2 +- components/tag/index.en-US.md | 12 ++-- components/tag/index.zh-CN.md | 13 ++-- 12 files changed, 85 insertions(+), 102 deletions(-) diff --git a/build/config.js b/build/config.js index f9333a91d..68fd72401 100644 --- a/build/config.js +++ b/build/config.js @@ -1,5 +1,5 @@ module.exports = { dev: { - componentName: 'tree', // dev components + componentName: 'tag', // dev components }, }; diff --git a/components/tag/Tag.jsx b/components/tag/Tag.jsx index cd4dbda50..b5b476e16 100644 --- a/components/tag/Tag.jsx +++ b/components/tag/Tag.jsx @@ -3,9 +3,27 @@ import Icon from '../icon'; import getTransitionProps from '../_util/getTransitionProps'; import omit from 'omit.js'; import Wave from '../_util/wave'; -import { hasProp, getListeners } from '../_util/props-util'; +import { hasProp, getListeners, getOptionProps } from '../_util/props-util'; import BaseMixin from '../_util/BaseMixin'; import { ConfigConsumerProps } from '../config-provider'; +import warning from '../_util/warning'; + +const PresetColorTypes = [ + 'pink', + 'red', + 'yellow', + 'orange', + 'cyan', + 'green', + 'blue', + 'purple', + 'geekblue', + 'magenta', + 'volcano', + 'gold', + 'lime', +]; +const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`); export default { name: 'ATag', @@ -26,9 +44,15 @@ export default { }, data() { let _visible = true; - if (hasProp(this, 'visible')) { + const props = getOptionProps(this); + if ('visible' in props) { _visible = this.visible; } + warning( + !('afterClose' in props), + 'Tag', + "'afterClose' will be deprecated, please use 'close' event, we will remove this in the next version.", + ); return { _visible, }; @@ -44,6 +68,11 @@ export default { setVisible(visible, e) { this.$emit('close', e); this.$emit('close.visible', false); + const afterClose = this.afterClose; + if (afterClose) { + // next version remove. + afterClose(); + } if (e.defaultPrevented) { return; } @@ -53,27 +82,20 @@ export default { }, handleIconClick(e) { + e.stopPropagation(); this.setVisible(false, e); }, - animationEnd() { - const afterClose = this.afterClose; - if (afterClose) { - afterClose(); - } - }, - - isPresetColor(color) { + isPresetColor() { + const { color } = this.$props; if (!color) { return false; } - return /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test( - color, - ); + return PresetColorRegex.test(color); }, getTagStyle() { const { color } = this.$props; - const isPresetColor = this.isPresetColor(color); + const isPresetColor = this.isPresetColor(); return { backgroundColor: color && !isPresetColor ? color : undefined, }; @@ -81,7 +103,7 @@ export default { getTagClassName(prefixCls) { const { color } = this.$props; - const isPresetColor = this.isPresetColor(color); + const isPresetColor = this.isPresetColor(); return { [prefixCls]: true, [`${prefixCls}-${color}`]: isPresetColor, @@ -101,7 +123,7 @@ export default { const prefixCls = getPrefixCls('tag', customizePrefixCls); const { _visible: visible } = this.$data; const tag = ( -
{this.$slots.default} {this.renderCloseIcon()} -
+ ); const transitionProps = getTransitionProps(`${prefixCls}-zoom`, { appear: false, - afterLeave: this.animationEnd, }); return ( diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap index 95a916529..b1db777e6 100644 --- a/components/tag/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap @@ -1,17 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders ./components/tag/demo/basic.md correctly 1`] = ` -
-
Tag 1
-
Link
-
Tag 2
-
Prevent Default
-
-`; +exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
Tag 1 Link Tag 2 Prevent Default
`; exports[`renders ./components/tag/demo/checkable.md correctly 1`] = `
@@ -24,60 +13,31 @@ exports[`renders ./components/tag/demo/checkable.md correctly 1`] = ` exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `

Presets:

-
-
pink
-
red
-
orange
-
green
-
cyan
-
blue
-
purple
-
+
pink red orange green cyan blue purple

Custom:

-
-
#f50
-
#2db7f5
-
#87d068
-
#108ee9
-
+
#f50 #2db7f5 #87d068 #108ee9
`; exports[`renders ./components/tag/demo/control.md correctly 1`] = ` -
-
- Unremovable -
-
- Tag 2 -
-
- Tag 3Tag 3Tag 3Tag 3... -
-
New Tag -
-
+
+ Unremovable + + Tag 2 + + Tag 3Tag 3Tag 3Tag 3... + New Tag +
`; exports[`renders ./components/tag/demo/controlled.md correctly 1`] = ` -
-
+
Movies -

-
+
`; exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = ` -
Categories: +
Categories:
Movies
diff --git a/components/tag/__tests__/__snapshots__/index.test.js.snap b/components/tag/__tests__/__snapshots__/index.test.js.snap index 83342f8db..2858cc062 100644 --- a/components/tag/__tests__/__snapshots__/index.test.js.snap +++ b/components/tag/__tests__/__snapshots__/index.test.js.snap @@ -1,13 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = ``; +exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = ``; -exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `
`; +exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = ``; -exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = ``; +exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = ``; -exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `
`; +exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = ``; -exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = ``; +exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = ``; -exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `
`; +exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = ``; diff --git a/components/tag/__tests__/index.test.js b/components/tag/__tests__/index.test.js index 2a01f18e0..5bca96f3c 100644 --- a/components/tag/__tests__/index.test.js +++ b/components/tag/__tests__/index.test.js @@ -1,8 +1,11 @@ import { mount } from '@vue/test-utils'; import { asyncExpect } from '@/tests/utils'; import Tag from '..'; +import mountTest from '../../../tests/shared/mountTest'; describe('Tag', () => { + mountTest(Tag); + mountTest(Tag.CheckableTag); it('should be closable', async () => { const onClose = jest.fn(); const wrapper = mount( diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md index eeb0e32ac..cf9a3076e 100644 --- a/components/tag/demo/basic.md +++ b/components/tag/demo/basic.md @@ -1,11 +1,11 @@ #### 基本用法 -基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` `afterClose` 两个事件。 +基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `close` 两个事件。 #### basic Usage -Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events. +Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `close` events. ```tpl @@ -15,7 +15,7 @@ Usage of basic Tag, and it could be closable by set `closable` property. Closabl Link Tag 2 Prevent Default -
+