refactor: tag

Author: tangjinzhou

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,24 +17,24 @@ 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);
       emit('change', !checked);
       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 (
-        <span class={cls} onClick={handleClick}>
+        <span class={cls.value} onClick={handleClick}>
           {slots.default?.()}
         </span>
       );

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 = (
-        <span class={tagClassName} style={tagStyle}>
+        <span class={tagClassName.value} style={tagStyle}>
           {kids}
           {renderCloseIcon()}
         </span>

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';

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;
+    }
+  }
+}