fix(pro:transfer): remove icon isn't displayed (#1144)

remove icon isn't displayed when table column ellipsis is set
IDuxFE · Sep 15, 2022 · 9fe89d6 · 9fe89d6
1 parent ee57728
commit 9fe89d6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/packages/pro/transfer/src/composables/useTransferTableProps.ts b/packages/pro/transfer/src/composables/useTransferTableProps.ts
@@ -107,14 +107,15 @@ function convertTableColumns(
           return renderRemovableLabel(
             key,
             disabledDataSourceKeys.value.has(key),
+            false,
             null,
             triggerRemove,
             mergedPrefixCls.value,
           )
         },
       })
     } else {
-      const originalCustomCell = lastCol.customCell
+      const { customCell: originalCustomCell, ellipsis } = lastCol
       //eslint-disable-next-line @typescript-eslint/no-explicit-any
       const renderLabel = (data: { value: any; record: any; rowIndex: number }) => {
         if (!originalCustomCell) {
@@ -135,6 +136,7 @@ function convertTableColumns(
           return renderRemovableLabel(
             key,
             disabledDataSourceKeys.value.has(key),
+            !!ellipsis,
             () => renderLabel(data),
             triggerRemove,
             mergedPrefixCls.value,

diff --git a/packages/pro/transfer/src/content/RenderRemovableLabel.tsx b/packages/pro/transfer/src/content/RenderRemovableLabel.tsx
@@ -13,16 +13,22 @@ import { IxIcon } from '@idux/components/icon'
 export function renderRemovableLabel(
   key: VKey,
   disabled: boolean,
+  ellipsis: boolean,
   defaultSlot: Slot | null,
   triggerRemove: (keys: VKey[]) => void,
   prefixCls: string,
 ): VNodeChild {
   const onClick = () => {
     triggerRemove([key])
   }
+
+  const classes = {
+    [`${prefixCls}-removable-label`]: true,
+    [`${prefixCls}-removable-label-ellipsis`]: !!ellipsis,
+  }
   return (
-    <span class={`${prefixCls}-removable-label`}>
-      {defaultSlot?.()}
+    <span class={classes}>
+      <span class={`${prefixCls}-removable-label-text`}>{defaultSlot?.()}</span>
       {!disabled && renderRemoveIcon(prefixCls, onClick)}
     </span>
   )

diff --git a/packages/pro/transfer/style/index.less b/packages/pro/transfer/style/index.less
@@ -1,4 +1,5 @@
 @import '../../style/mixins/reset.less';
+@import '../../../components/style/mixins/ellipsis.less';
 
 .@{pro-transfer-prefix} {
   .reset-component();
@@ -41,6 +42,10 @@
       width: 100%;
       align-items: center;
       line-height: @checkbox-line-height;
+
+      &-ellipsis &-text {
+        .ellipsis();
+      }
     }
     &-close-icon {
       padding: @pro-transfer-table-close-icon-padding;