feat(cell): add clickable prop to support click style feedback (#2527)

* feat(cell): add clickable

* fix: demo

Author: Miles-hxy

src/packages/cell/cell.scss

@@ -35,4 +35,24 @@
     font-size: $cell-extra-font-size;
     color: $cell-extra-color;
   }
+  &:active::before {
+    opacity: 0.1;
+  }
+  &-clickable {
+    cursor: pointer;
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      background-color: $black;
+      border: inherit;
+      border-color: $black;
+      border-radius: inherit;
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      content: ' ';
+    }
+  }
 }

src/packages/cell/cell.taro.tsx

@@ -10,6 +10,7 @@ export interface CellProps extends BasicComponent {
   extra: ReactNode
   radius: string | number
   align: 'flex-start' | 'center' | 'flex-end'
+  clickable: boolean
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
@@ -20,6 +21,7 @@ const defaultProps = {
   extra: null,
   radius: '6px',
   align: 'flex-start',
+  clickable: false,
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
 } as CellProps
 
@@ -39,6 +41,7 @@ export const Cell: FunctionComponent<
     align,
     className,
     style,
+    clickable,
     ...rest
   } = {
     ...defaultProps,
@@ -63,7 +66,7 @@ export const Cell: FunctionComponent<
         }
   return (
     <div
-      className={classNames(classPrefix, className)}
+      className={`${classNames(classPrefix, className, clickable ? `${classPrefix}-clickable` : '')}`}
       onClick={(event) => handleClick(event)}
       style={baseStyle}
       {...rest}

src/packages/cell/cell.tsx

@@ -10,6 +10,7 @@ export interface CellProps extends BasicComponent {
   extra: ReactNode
   radius: string | number
   align: 'flex-start' | 'center' | 'flex-end'
+  clickable: boolean
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
@@ -20,6 +21,7 @@ const defaultProps = {
   extra: null,
   radius: '6px',
   align: 'flex-start',
+  clickable: false,
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
 } as CellProps
 
@@ -31,6 +33,7 @@ export const Cell: FunctionComponent<
   const ctx = useContext(CellGroupContext)
   const {
     children,
+    clickable,
     onClick,
     title,
     description,
@@ -63,7 +66,7 @@ export const Cell: FunctionComponent<
         }
   return (
     <div
-      className={classNames(classPrefix, className)}
+      className={`${classNames(classPrefix, className, clickable ? `${classPrefix}-clickable` : '')}`}
       onClick={(event) => handleClick(event)}
       style={baseStyle}
       {...rest}

src/packages/cell/demos/h5/demo1.tsx

@@ -12,6 +12,7 @@ const Demo1 = () => {
       <Cell title="我是标题" extra="描述文字" />
       <Cell title="我是标题" description="我是描述" extra="描述文字" />
       <Cell
+        clickable
         title="点击测试"
         onClick={(
           event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>

src/packages/cell/demos/taro/demo1.tsx

@@ -13,6 +13,7 @@ const Demo1 = () => {
       <Cell title="我是标题" description="我是描述" extra="描述文字" />
       <Cell
         title="点击测试"
+        clickable
         onClick={(
           event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
         ) => testClick(event)}

src/packages/cell/doc.en-US.md

@@ -91,6 +91,7 @@ The 'divider' property allows you to keep the lower edge from being displayed be
 | extra | Extra | `ReactNode` | `-` |
 | radius | Corner radius | `string` | `6px` |
 | align | Alignment in the vertical direction | `flex-start` \| `center` \| `flex-end` | `flex-start` |
+| clickable | click style feedback | `boolean` | `false` |
 | onClick | Emitted when cell is clicked | `onClick: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void` | `false` |
 
 ## Theming

src/packages/cell/doc.md

@@ -93,6 +93,7 @@ import { Cell } from '@nutui/nutui-react'
 | extra | 右侧描述 | `ReactNode` | `-` |
 | radius | 圆角半径 | `string` | `6px` |
 | align | 纵轴方向上的对齐方式 | `flex-start` \| `center` \| `flex-end` | `flex-start` |
+| clickable | 点击的样式反馈 | `boolean` | `false` |
 | onClick | 点击事件 | `onClick: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void` | `false` |
 
 ## 主题定制

src/packages/cell/doc.taro.md

@@ -92,6 +92,7 @@ import { Cell } from '@nutui/nutui-react-taro'
 | extra | 右侧描述 | `ReactNode` | `-` |
 | radius | 圆角半径 | `string` | `6px` |
 | align | 纵轴方向上的对齐方式 | `flex-start` \| `center` \| `flex-end` | `flex-start` |
+| clickable | 点击的样式反馈 | `boolean` | `false` |
 | onClick | 点击事件 | `onClick: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void` | `false` |
 
 ## 主题定制

src/packages/cell/doc.zh-TW.md

@@ -93,6 +93,7 @@ import { Cell } from '@nutui/nutui-react'
 | extra | 右側描述 | `ReactNode` | `-` |
 | radius | 圓角半徑 | `string` | `6px` |
 | align | 縱軸方向上的對齊方式 | `flex-start` \| `center` \| `flex-end` | `flex-start` |
+| clickable | 點擊的樣式反饋 | `boolean` | `false` |
 | onClick | 點擊事件 | `onClick: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void` | `false` |
 
 ## 主題定製