From 02e134f81d7cb7ac3db7aacda80f34850aaa3841 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 9 Jun 2021 22:50:40 +0800 Subject: [PATCH] refactor: tag --- components/tag/CheckableTag.tsx | 22 ++++++++++----------- components/tag/index.tsx | 34 ++++++++++++++++----------------- components/tag/style/index.less | 20 ++++++++----------- components/tag/style/rtl.less | 28 +++++++++++++++++++++++++++ 4 files changed, 64 insertions(+), 40 deletions(-) create mode 100644 components/tag/style/rtl.less diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx index a4f197d54..36a6602e2 100644 --- a/components/tag/CheckableTag.tsx +++ b/components/tag/CheckableTag.tsx @@ -1,7 +1,7 @@ -import { inject, defineComponent, PropType } from 'vue'; +import { defineComponent, PropType, computed } from 'vue'; import classNames from '../_util/classNames'; -import { defaultConfigProvider } from '../config-provider'; import PropTypes from '../_util/vue-types'; +import useConfigInject from '../_util/hooks/useConfigInject'; const CheckableTag = defineComponent({ name: 'ACheckableTag', @@ -17,7 +17,7 @@ const CheckableTag = defineComponent({ }, emits: ['update:checked', 'change', 'click'], setup(props, { slots, emit }) { - const { getPrefixCls } = inject('configProvider', defaultConfigProvider); + const { prefixCls } = useConfigInject('tag', props); const handleClick = (e: MouseEvent) => { const { checked } = props; emit('update:checked', !checked); @@ -25,16 +25,16 @@ const CheckableTag = defineComponent({ emit('click', e); }; - return () => { - const { checked, prefixCls: customizePrefixCls } = props; - const prefixCls = getPrefixCls('tag', customizePrefixCls); - const cls = classNames(prefixCls, { - [`${prefixCls}-checkable`]: true, - [`${prefixCls}-checkable-checked`]: checked, - }); + const cls = computed(() => + classNames(prefixCls.value, { + [`${prefixCls.value}-checkable`]: true, + [`${prefixCls.value}-checkable-checked`]: props.checked, + }), + ); + return () => { return ( - + {slots.default?.()} ); diff --git a/components/tag/index.tsx b/components/tag/index.tsx index f0c24c43a..bdd3a9a5c 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -1,5 +1,4 @@ import { - inject, ref, HTMLAttributes, defineComponent, @@ -8,6 +7,7 @@ import { PropType, ExtractPropTypes, Plugin, + computed, } from 'vue'; import classNames from '../_util/classNames'; import PropTypes from '../_util/vue-types'; @@ -20,8 +20,8 @@ import { PresetStatusColorType, } from '../_util/colors'; import { LiteralUnion } from '../_util/type'; -import { defaultConfigProvider } from '../config-provider'; import CheckableTag from './CheckableTag'; +import useConfigInject from '../_util/hooks/useConfigInject'; const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`); const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`); @@ -46,8 +46,9 @@ const Tag = defineComponent({ name: 'ATag', props: tagProps, emits: ['update:visible', 'close'], + slots: ['closeIcon', 'icon'], setup(props: TagProps, { slots, emit, attrs }) { - const { getPrefixCls } = inject('configProvider', defaultConfigProvider); + const { prefixCls, direction } = useConfigInject('tag', props); const visible = ref(true); @@ -70,26 +71,31 @@ const Tag = defineComponent({ } }; - const isPresetColor = (): boolean => { + const isPresetColor = computed(() => { const { color } = props; if (!color) { return false; } return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color); - }; + }); + + const tagClassName = computed(() => + classNames(prefixCls.value, { + [`${prefixCls.value}-${props.color}`]: isPresetColor.value, + [`${prefixCls.value}-has-color`]: props.color && !isPresetColor.value, + [`${prefixCls.value}-hidden`]: !visible.value, + [`${prefixCls.value}-rtl`]: direction.value === 'rtl', + }), + ); return () => { const { - prefixCls: customizePrefixCls, icon = slots.icon?.(), color, closeIcon = slots.closeIcon?.(), closable = false, } = props; - const presetColor = isPresetColor(); - const prefixCls = getPrefixCls('tag', customizePrefixCls); - const renderCloseIcon = () => { if (closable) { return closeIcon ? ( @@ -104,15 +110,9 @@ const Tag = defineComponent({ }; const tagStyle = { - backgroundColor: color && !isPresetColor() ? color : undefined, + backgroundColor: color && !isPresetColor.value ? color : undefined, }; - const tagClassName = classNames(prefixCls, { - [`${prefixCls}-${color}`]: presetColor, - [`${prefixCls}-has-color`]: color && !presetColor, - [`${prefixCls}-hidden`]: !visible.value, - }); - const iconNode = icon || null; const children = slots.default?.(); const kids = iconNode ? ( @@ -127,7 +127,7 @@ const Tag = defineComponent({ const isNeedWave = 'onClick' in attrs; const tagNode = ( - + {kids} {renderCloseIcon()} diff --git a/components/tag/style/index.less b/components/tag/style/index.less index f4945f05f..aabb7029e 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -16,13 +16,8 @@ background: @tag-default-bg; border: @border-width-base @border-style-base @border-color-base; border-radius: @border-radius-base; - cursor: default; opacity: 1; - transition: all 0.3s @ease-in-out-circ; - - &:hover { - opacity: 0.85; - } + transition: all 0.3s; &, a, @@ -36,14 +31,12 @@ padding: 0 8px; } - .@{iconfont-css-prefix}-close { - .iconfont-size-under-12px(10px); - + &-close-icon { margin-left: 3px; color: @text-color-secondary; - font-weight: bold; + font-size: 10px; cursor: pointer; - transition: all 0.3s @ease-in-out-circ; + transition: all 0.3s; &:hover { color: @heading-color; @@ -91,8 +84,9 @@ @lightColor: '@{color}-1'; @lightBorderColor: '@{color}-3'; @darkColor: '@{color}-6'; + @textColor: '@{color}-7'; &-@{color} { - color: @@darkColor; + color: @@textColor; background: @@lightColor; border-color: @@lightBorderColor; } @@ -127,3 +121,5 @@ margin-left: 7px; } } + +@import './rtl'; diff --git a/components/tag/style/rtl.less b/components/tag/style/rtl.less new file mode 100644 index 000000000..af7d0dfc5 --- /dev/null +++ b/components/tag/style/rtl.less @@ -0,0 +1,28 @@ +@import '../../style/themes/index'; +@import '../../style/mixins/index'; + +@tag-prefix-cls: ~'@{ant-prefix}-tag'; + +.@{tag-prefix-cls} { + &&-rtl { + margin-right: 0; + margin-left: 8px; + direction: rtl; + text-align: right; + } + + &-close-icon { + .@{tag-prefix-cls}-rtl & { + margin-right: 3px; + margin-left: 0; + } + } + + > .@{iconfont-css-prefix} + span, + > span + .@{iconfont-css-prefix} { + .@{tag-prefix-cls}-rtl& { + margin-right: 7px; + margin-left: 0; + } + } +}