[Table] Support row active and row hover (#1592)

* feat(web): table highlight row * feat(web): table relative * feat(web): active multiple check * feat(web): remove focus outline * feat(web): keyboard selection * fix(web): style --------- Co-authored-by: sheepluo <[email protected]>
Tencent · Sep 11, 2023 · d338496 · d338496
1 parent 70dc234
commit d338496
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/js/common.ts b/js/common.ts
@@ -41,3 +41,5 @@ export const ARROW_UP_REG = /ArrowUp/i;
 export const ESCAPE_REG = /Escape/i;
 export const SPACE_REG = /Space/i;
 export const SHIFT_REG = /Shift/i;
+export const CLEAR_REG = /KeyC/i;
+export const ALL_REG = /(KeyA|KeyL)/i;
diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less
@@ -61,6 +61,10 @@
   background-color: @table-bg;
   position: relative;
 
+  &:focus-visible {
+    outline: none;
+  }
+
   /** loading need to be top of fixed columns */
   .@{prefix}-loading--full {
     z-index: @table-loading-z-index;
@@ -324,8 +328,7 @@
       tr {
         transition: background-color @anim-duration-base linear;
 
-        &:hover,
-        &.@{prefix}-table__row--hover:not(&.@{prefix}-table__row--active) {
+        &:hover {
           background-color: @table-highlight-dark-bg-color;
         }
       }
@@ -507,6 +510,19 @@
   }
 }
 
+/** 键盘操作悬浮表格行 */
+.@{prefix}-table {
+  &.@{prefix}-table--row-expandable,
+  &.@{prefix}-table--row-select,
+  &.@{prefix}-table__row--active-multiple {
+    tbody > tr {
+      &.@{prefix}-table__row--hover:not(&.@{prefix}-table__row--active) {
+        background-color: @table-highlight-dark-bg-color;
+      }
+    }
+  }
+}
+
 // 表头右侧图标设计规范：有边框时，排序图标靠近右侧边框；无边框时，排序图标紧跟标题内容
 .@{prefix}-table--bordered {
   .@{prefix}-table__cell--sortable,