@arco-design/mobile-react 2.38.2 → 2.38.3

package/umd/cell/style/css/index.css

@@ -569,16 +569,40 @@
     border-radius: 0;
   }
 }
-.arco-cell.without-group {
+.arco-cell-clickable {
+  -webkit-user-select: none;
+          user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  touch-action: manipulation;
+  position: relative;
+}
+.arco-cell-clickable.arco-cell-pressed {
+  background-color:  #F7F8FA ;
+}
+.arco-cell-clickable::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 100%;
+  width:  0.32rem ;
+  height: 100%;
+  background-color: inherit;
+  pointer-events: none;
+}
+.arco-cell-clickable.arco-cell-pressed::after {
+  background-color:  #F7F8FA ;
+}
+.arco-cell-without-group {
   background-color:  #FFFFFF ;
   padding-left:  0.32rem ;
   margin-left: 0;
 }
-.arco-cell.without-group.bordered {
+.arco-cell-without-group.bordered {
   position: relative;
   border-width: 0;
 }
-.arco-cell.without-group.bordered::before {
+.arco-cell-without-group.bordered::before {
   content: '';
   width: 100%;
   height: 1PX;
@@ -596,20 +620,20 @@
   border-radius: 0;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-cell.without-group.bordered::before {
+  .arco-cell-without-group.bordered::before {
     transform: scaleY(0.5);
     -webkit-transform: scaleY(0.5);
     border-radius: 0;
   }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-cell.without-group.bordered::before {
+  .arco-cell-without-group.bordered::before {
     transform: scaleY(0.33333333);
     -webkit-transform: scaleY(0.33333333);
     border-radius: 0;
   }
 }
-.arco-cell.without-group.bordered::after {
+.arco-cell-without-group.bordered::after {
   content: '';
   width: 100%;
   height: 1PX;
@@ -627,14 +651,14 @@
   border-radius: 0;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-cell.without-group.bordered::after {
+  .arco-cell-without-group.bordered::after {
     transform: scaleY(0.5);
     -webkit-transform: scaleY(0.5);
     border-radius: 0;
   }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-cell.without-group.bordered::after {
+  .arco-cell-without-group.bordered::after {
     transform: scaleY(0.33333333);
     -webkit-transform: scaleY(0.33333333);
     border-radius: 0;
@@ -866,14 +890,20 @@
     border-radius: 0;
   }
 }
-.arco-theme-dark .arco-cell.without-group {
+.arco-theme-dark .arco-cell-clickable.arco-cell-pressed {
+  background-color:  hsla(0, 0%, 100%, 0.08) ;
+}
+.arco-theme-dark .arco-cell-clickable.arco-cell-pressed::after {
+  background-color:  hsla(0, 0%, 100%, 0.08) ;
+}
+.arco-theme-dark .arco-cell-without-group {
   background-color:  #232324 ;
 }
-.arco-theme-dark .arco-cell.without-group.bordered {
+.arco-theme-dark .arco-cell-without-group.bordered {
   position: relative;
   border-width: 0;
 }
-.arco-theme-dark .arco-cell.without-group.bordered::before {
+.arco-theme-dark .arco-cell-without-group.bordered::before {
   content: '';
   width: 100%;
   height: 1PX;
@@ -891,20 +921,20 @@
   border-radius: 0;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-theme-dark .arco-cell.without-group.bordered::before {
+  .arco-theme-dark .arco-cell-without-group.bordered::before {
     transform: scaleY(0.5);
     -webkit-transform: scaleY(0.5);
     border-radius: 0;
   }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-theme-dark .arco-cell.without-group.bordered::before {
+  .arco-theme-dark .arco-cell-without-group.bordered::before {
     transform: scaleY(0.33333333);
     -webkit-transform: scaleY(0.33333333);
     border-radius: 0;
   }
 }
-.arco-theme-dark .arco-cell.without-group.bordered::after {
+.arco-theme-dark .arco-cell-without-group.bordered::after {
   content: '';
   width: 100%;
   height: 1PX;
@@ -922,14 +952,14 @@
   border-radius: 0;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-theme-dark .arco-cell.without-group.bordered::after {
+  .arco-theme-dark .arco-cell-without-group.bordered::after {
     transform: scaleY(0.5);
     -webkit-transform: scaleY(0.5);
     border-radius: 0;
   }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-theme-dark .arco-cell.without-group.bordered::after {
+  .arco-theme-dark .arco-cell-without-group.bordered::after {
     transform: scaleY(0.33333333);
     -webkit-transform: scaleY(0.33333333);
     border-radius: 0;

package/umd/cell/style/index.less

@@ -10,15 +10,42 @@
         .onepx-border-var(top, line-color);
     }
 
-    &.without-group {
+    &-clickable {
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        -webkit-touch-callout: none;
+        touch-action: manipulation;
+        position: relative;
+
+        &.@{prefix}-cell-pressed {
+            .use-var(background-color, cell-clickable-background-color);
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 100%;
+            .use-var(width, cell-horizontal-padding);
+            height: 100%;
+            background-color: inherit;
+            pointer-events: none;
+        }
+
+        &.@{prefix}-cell-pressed::after {
+            .use-var(background-color, cell-clickable-background-color);
+        }
+    }
+
+    &-without-group {
         .use-var(background-color, cell-background-color);
         .use-var(padding-left, cell-horizontal-padding);
         margin-left: 0;
+    }
 
-        &.bordered {
-            .onepx-border-var(top, line-color);
-            .onepx-border-var(bottom, line-color);
-        }
+    &-without-group.bordered {
+        .onepx-border-var(top, line-color);
+        .onepx-border-var(bottom, line-color);
     }
 
     &-inner {
@@ -63,6 +90,7 @@
     .cell-label-icon {
         .use-var-with-rtl(margin-right, cell-label-icon-gutter);
         font-size: 0;
+
         .@{prefix}-icon {
             line-height: initial;
             .use-var(font-size, cell-label-icon-font-size);
@@ -76,6 +104,7 @@
         });
         .use-var-with-rtl(margin-left, cell-arrow-gutter);
         font-size: 0;
+
         .@{prefix}-icon {
             .use-var(font-size, cell-arrow-font-size);
             .use-var(color, cell-arrow-color);
@@ -148,17 +177,29 @@
         .onepx-border-var(top, dark-line-color);
       }
     }
-    &.without-group {
-      @{arco-dark-mode-selector} & {
-        .use-var(background-color, dark-cell-background-color);
+    &-clickable {
+      &.@{prefix}-cell-pressed {
+        @{arco-dark-mode-selector} & {
+          .use-var(background-color, dark-cell-clickable-background-color);
+        }
       }
-      &.bordered {
+      &.@{prefix}-cell-pressed::after {
         @{arco-dark-mode-selector} & {
-          .onepx-border-var(top, dark-line-color);
-          .onepx-border-var(bottom, dark-line-color);
+          .use-var(background-color, dark-cell-clickable-background-color);
         }
       }
     }
+    &-without-group {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-cell-background-color);
+      }
+    }
+    &-without-group.bordered {
+      @{arco-dark-mode-selector} & {
+        .onepx-border-var(top, dark-line-color);
+        .onepx-border-var(bottom, dark-line-color);
+      }
+    }
     .cell-label {
       @{arco-dark-mode-selector} & {
         .use-var(color, dark-cell-label-color);

package/umd/cell/type.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type React from 'react';
 export interface CellProps {
     /**
      * 自定义样式
@@ -60,6 +61,12 @@ export interface CellProps {
      * @default true
      */
     bordered?: boolean;
+    /**
+     * 是否启用点击态效果
+     * @en Whether to enable click effect
+     * @default false
+     */
+    clickable?: boolean;
     /**
      * 点击单元格事件回调
      * @en Callback for cell click event