fix(abc:st): fix resizeable will trigger sorting or filter (#1788)

ng-alain · Mar 18, 2024 · 7939034 · 7939034
1 parent e9753cb
commit 7939034
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 25 deletions.
diff --git a/packages/abc/st/demo/resizable.md b/packages/abc/st/demo/resizable.md
@@ -11,13 +11,15 @@ title:
 
 > - 注意：不要忘记在 `src/styles` 下导入 `nz-resizable` Less 样式文件（`@import 'ng-zorro-antd/resizable/style/entry.less';`）
 > - **不支持多表头**
+> - 当与过滤、排序一同存在时调整手柄会变小
 
 ## en-US
 
 Resize the table header base on [nz-resizable](https://ng.ant.design/experimental/resizable/en).
 
 > - Note: Don't forget to import the `nz-resizable` Less style (`@import 'ng-zorro-antd/resizable/style/entry.less';`) file in `src/styles`.
 > - **Multiple headers not supported**
+> - Adjustment handles will become smaller when present with filtering and sorting
 
 ```ts
 import { Component } from '@angular/core';

diff --git a/packages/abc/st/st.component.html b/packages/abc/st/st.component.html
@@ -85,7 +85,7 @@
               (nzResizeEnd)="colResize($event, _c)"
             >
               @if ($any(!last && !$any(_c).resizable.disabled)) {
-                <nz-resize-handle nzDirection="right">
+                <nz-resize-handle nzDirection="right" (click)="_stopPropagation($event)">
                   <i></i>
                 </nz-resize-handle>
               }

diff --git a/packages/abc/st/style/index.less b/packages/abc/st/style/index.less
@@ -81,31 +81,8 @@
   }
   // Title
   &__has-filter {
-    @st-th-icon-width: 12px;
-    @st-filter-and-sort-gutter: 4px;
-    @st-filter-icon-size: @st-th-icon-width + @st-filter-and-sort-gutter;
-    @st-sort-size: @st-th-icon-width + @st-filter-and-sort-gutter;
-
-    .@{ant-prefix}-table-column-sorters {
-      padding-right: @st-filter-icon-size;
-    }
     @{st-prefix}__filter {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      place-items: center center;
-    }
-
-    .@{ant-prefix}-table-filter-trigger {
-      height: 100%;
-    }
-
-    &.@{ant-prefix}-table-column-has-sorters {
-      @{st-prefix}__filter {
-        right: -(@st-sort-size + @st-filter-icon-size);
-      }
+      display: inline-flex;
     }
   }