feat(web): table highlight row

Tencent · Sep 9, 2023 · 00bef51 · 00bef51
1 parent f3402b9
commit 00bef51
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 1 deletion.
diff --git a/docs/web/api/table.en-US.md b/docs/web/api/table.en-US.md
@@ -28,6 +28,13 @@ Simple table with data switched using pagination. Use border lines and zebra str
 
 {{ base }}
 
+### Highlight Row Table
+
+set table property `activeRowType` to allow table row highlight.
+You try it with different keyboards, for example: ArrowUp/ArrowDown/Space/Shift/ESC.
+
+{{ highlight }}
+
 ### Customizable Style Table
 
 - Use the table property `rowClassName` to set the row class name.

diff --git a/docs/web/api/table.md b/docs/web/api/table.md
@@ -26,6 +26,13 @@ spline: data
 
 {{ base }}
 
+### 行高亮表格
+
+支持鼠标点击或者键盘操作高亮表格行，支持仅高亮一行，或者高亮多行。
+键盘操作说明：表格聚焦后，上下键操作切换高亮行，ESC 清空所有高亮行，空格键切换当前停留行高亮状态，Shift 连续选中高亮行。
+
+{{ highlight }}
+
 ### 可自定义样式的表格
 
 - 使用表格属性 `rowClassName` 设置行类名。

diff --git a/js/common.ts b/js/common.ts
@@ -35,3 +35,9 @@ export enum EKeyboardDirection {
   right = 39,
   down = 40,
 }
+
+export const ARROW_DOWN_REG = /ArrowDown/i;
+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;
diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less
@@ -323,7 +323,8 @@
       tr {
         transition: background-color @anim-duration-base linear;
 
-        &:hover {
+        &:hover,
+        &.@{prefix}-table__row--hover:not(&.@{prefix}-table__row--active) {
           background-color: @table-highlight-dark-bg-color;
         }
       }
@@ -454,6 +455,11 @@
     color: @table-row-disabled-color;
   }
 
+  /** 表格行点击高亮 */
+  .@{prefix}-table__row--active {
+    background-color: @brand-color-light;
+  }
+
   // 复杂表头容器
   .@{prefix}-table__cell--title {
     display: flex;
@@ -485,6 +491,21 @@
   }
 }
 
+/** 表格行点击高亮悬浮态 */
+.@{prefix}-table.@{prefix}-table--hoverable {
+  .@{prefix}-table__row--active {
+    &:hover {
+      background-color: @brand-color-light-hover;
+    }
+  }
+
+  &.@{prefix}-table__row--active-multiple {
+    .@{prefix}-table__row--active.@{prefix}-table__row--hover {
+      background-color: @brand-color-light-hover;
+    }
+  }
+}
+
 // 表头右侧图标设计规范：有边框时，排序图标靠近右侧边框；无边框时，排序图标紧跟标题内容
 .@{prefix}-table--bordered {
   .@{prefix}-table__cell--sortable,