From 00bef518519a40e226c07c15f48de1d9104f780f Mon Sep 17 00:00:00 2001
From: sheepluo <sheepluo@tencent.com>
Date: Sun, 10 Sep 2023 01:09:16 +0800
Subject: [PATCH] feat(web): table highlight row

---
 docs/web/api/table.en-US.md            |  7 +++++++
 docs/web/api/table.md                  |  7 +++++++
 js/common.ts                           |  6 ++++++
 style/web/components/table/_index.less | 23 ++++++++++++++++++++++-
 4 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/docs/web/api/table.en-US.md b/docs/web/api/table.en-US.md
index 8e04bb17e4..b2e0e82813 100644
--- 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
index 717bfc28ec..3cd01ad9f6 100644
--- 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
index 78c4e9778d..feac4c850d 100644
--- 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
index 7a4fc76418..62d2033370 100644
--- 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,