refactor(cell): 重构

src/_util/useHover.ts

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react';
+
+interface HoverOptions {
+  className: string;
+  disabled?: string | boolean;
+}
+
+function useHover(options: HoverOptions) {
+  const elRef = useRef(null);
+  const { className, disabled } = options;
+  const startTime = 50;
+  const stayTime = 70;
+
+  useEffect(() => {
+    let currentElement: HTMLElement | null = null;
+
+    const handleTouchStart = () => {
+      if (disabled) {
+        return;
+      }
+      setTimeout(() => {
+        currentElement?.classList.add(className);
+      }, startTime);
+    };
+
+    const handleTouchEnd = () => {
+      if (disabled) {
+        return;
+      }
+      setTimeout(() => {
+        currentElement?.classList.remove(className);
+      }, stayTime);
+    };
+
+    if (elRef.current) {
+      currentElement = elRef.current;
+      currentElement.addEventListener('touchstart', handleTouchStart, { capture: false, passive: true });
+      currentElement.addEventListener('touchend', handleTouchEnd, false);
+    }
+
+    return () => {
+      if (currentElement) {
+        currentElement.removeEventListener('touchstart', handleTouchStart);
+        currentElement.removeEventListener('touchend', handleTouchEnd);
+      }
+    };
+  }, [className, disabled]);
+
+  return elRef;
+}
+
+export default useHover;

src/cell-group/CellGroup.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
 import useConfig from '../_util/useConfig';
-import { TdCellGroupProps } from './type';
+import { TdCellGroupProps } from '../cell/type';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
 
 export type CellGroupProps = TdCellGroupProps & NativeProps;
@@ -12,19 +12,26 @@ const defaultProps = {
 };
 
 const CellGroup: React.FC<CellGroupProps> = (props) => {
-  const { children, bordered, title } = props;
+  const { children, bordered, title, theme } = props;
   const { classPrefix } = useConfig();
   const name = `${classPrefix}-cell-group`;
 
+  const classNames = useMemo(
+    () => [
+      name,
+      `${name}--${theme}`,
+      {
+        [`${name}--bordered`]: bordered,
+      },
+    ],
+    [name, bordered, theme],
+  );
+
   return withNativeProps(
     props,
-    <div
-      className={classNames(`${name}`, `${name}__container`, {
-        'border--top-bottom': bordered,
-      })}
-    >
+    <div>
       {title && <div className={`${name}__title`}>{title}</div>}
-      <div className={`${name}-body`}>{children}</div>
+      <div className={classnames(classNames)}>{children}</div>
     </div>,
   );
 };

src/cell-group/index.tsx

@@ -2,7 +2,7 @@ import _CellGroup from './CellGroup';
 
 import './style';
 
-export * from './type';
+// export * from './type';
 
 export const CellGroup = _CellGroup;
 

src/cell-group/style/index.js

@@ -1,2 +1,2 @@
 /* eslint-disable import/no-relative-packages */
-import '../../_common/style/mobile/components/cell-group/_index.less';
+import '../../_common/style/mobile/components/cell-group/v2/_index.less';

src/cell/Cell.tsx

@@ -1,11 +1,12 @@
 import React, { useMemo, useCallback } from 'react';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import isString from 'lodash/isString';
 import { ChevronRightIcon } from 'tdesign-icons-react';
 
 import { TdCellProps } from './type';
 import { cellDefaultProps } from './defaultProps';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
+import useHover from '../_util/useHover';
 import useConfig from '../_util/useConfig';
 
 export interface CellProps extends TdCellProps, NativeProps {}
@@ -23,7 +24,6 @@ const Cell: React.FC<CellProps> = (props) => {
     required,
     rightIcon,
     title,
-    url,
     onClick,
     children,
   } = props;
@@ -32,20 +32,19 @@ const Cell: React.FC<CellProps> = (props) => {
 
   const name = `${classPrefix}-cell`;
 
-  const renderIcon = useMemo(() => {
-    let content: React.ReactNode | null = null;
-    if (arrow) {
-      content = <ChevronRightIcon size={24} />;
-    } else if (rightIcon) {
-      content = rightIcon;
-    }
-
-    if (content === null) {
-      return content;
-    }
+  const classNames = useMemo(
+    () => [
+      `${name}`,
+      `${name}--${align}`,
+      {
+        [`${name}--borderless`]: !bordered,
+      },
+    ],
+    [align, bordered, name],
+  );
 
-    return <div className={`${name}__right-icon`}>{content}</div>;
-  }, [arrow, rightIcon, name]);
+  const hoverDisabled = useMemo(() => !hover, [hover]);
+  const ref = useHover({ className: `${name}--hover`, disabled: hoverDisabled });
 
   const handleClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -54,41 +53,52 @@ const Cell: React.FC<CellProps> = (props) => {
     [onClick],
   );
 
-  const content = (
-    <div
-      className={classNames([`${name}`, `${name}--${align}`], {
-        [`${name}--bordered`]: bordered,
-        [`${name}--hover`]: hover,
-      })}
-      onClick={handleClick}
-    >
-      {(leftIcon || image) && (
-        <div className={`${name}__left-icon`}>
-          {leftIcon}
-          {isString(image) ? <img src={image} className={`${name}__image`} /> : image}
-        </div>
-      )}
-      {title && (
-        <div className={`${name}__title`}>
-          {title}
-          {required && <span className={`${name}--required`}>&nbsp;*</span>}
-          {description && <div className={`${name}__description`}>{description}</div>}
-        </div>
-      )}
-      {(note || children) && <div className={`${name}__note`}>{children ? children : note}</div>}
-      {renderIcon}
+  const readerImage = () => {
+    if (isString(image)) {
+      return <img src={image} className={`${name}__left-image`} />;
+    }
+    return image;
+  };
+
+  const readerLeft = () => (
+    <div className={`${name}__left`}>
+      {leftIcon && <div className={`${name}__left-icon`}>{leftIcon}</div>}
+      {readerImage()}
     </div>
   );
 
+  const readerTitle = () => {
+    if (!title) {
+      return null;
+    }
+    return (
+      <div className={`${name}__title`}>
+        {title}
+        {required && <span className={`${name}--required`}>&nbsp;*</span>}
+        {description && <div className={`${name}__description`}>{description}</div>}
+      </div>
+    );
+  };
+  const readerRight = () => {
+    const Icon = arrow ? <ChevronRightIcon /> : rightIcon;
+    if (!Icon) {
+      return null;
+    }
+    return (
+      <div className={`${name}__right`}>
+        <div className={`${name}__right-icon`}>{Icon}</div>
+      </div>
+    );
+  };
+
   return withNativeProps(
     props,
-    url ? (
-      <a style={{ textDecoration: 'none' }} href={url} rel="noreferrer">
-        {content}
-      </a>
-    ) : (
-      content
-    ),
+    <div ref={ref} className={classnames(classNames)} onClick={handleClick}>
+      {readerLeft()}
+      {readerTitle()}
+      {note ? <div className={`${name}__note`}>{note}</div> : children}
+      {readerRight()}
+    </div>,
   );
 };
 

src/cell/__tests__/cell.test.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, render, fireEvent, screen } from '@test/utils';
+import React from 'react';
+import Cell from '../Cell';
+
+describe('Cell', () => {
+  it('renders the correct content', () => {
+    const { getByText } = render(
+      <Cell title="Test Title" description="Test Description">
+        Test Children
+      </Cell>,
+    );
+
+    expect(getByText('Test Title')).toBeInTheDocument();
+    expect(getByText('Test Description')).toBeInTheDocument();
+    expect(getByText('Test Children')).toBeInTheDocument();
+  });
+
+  it('renders left icon and image if provided', () => {
+    const { getByTestId } = render(
+      <Cell
+        leftIcon={<div data-testid="left-icon">Left Icon</div>}
+        image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+      >
+        Test Children
+      </Cell>,
+    );
+
+    expect(getByTestId('left-icon')).toBeInTheDocument();
+    expect(screen.getByText('Test Children')).toBeInTheDocument();
+  });
+
+  it('renders right icon if provided', () => {
+    const { getByTestId } = render(<Cell rightIcon={<div data-testid="right-icon">Right Icon</div>} />);
+
+    expect(getByTestId('right-icon')).toBeInTheDocument();
+  });
+
+  it('calls onClick when the cell is clicked', () => {
+    const handleClick = vi.fn();
+    const { container } = render(<Cell onClick={handleClick} />);
+
+    fireEvent.click(container.firstChild);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

src/cell/_example/base.jsx

@@ -5,6 +5,7 @@ import './style/index.less';
 
 import Single from './single';
 import Multiple from './multiple';
+import Group from './group';
 
 export default function Base() {
   return (
@@ -16,9 +17,12 @@ export default function Base() {
       <TDemoBlock title="01 类型" summary="单行单元格">
         <Single />
       </TDemoBlock>
-      <TDemoBlock title="" summary="多行单元格">
+      <TDemoBlock title="02" summary="多行单元格">
         <Multiple />
       </TDemoBlock>
+      <TDemoBlock title="03 组件样式" summary="卡片单元格">
+        <Group />
+      </TDemoBlock>
     </div>
   );
 }

src/cell/_example/group.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CellGroup, Cell } from 'tdesign-mobile-react';
+import { LockOnIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-react';
+
+export default function () {
+  return (
+    <CellGroup theme="card">
+      <Cell leftIcon={<LockOnIcon />} title="单行标题" arrow />
+      <Cell leftIcon={<ServiceIcon />} title="单行标题" arrow />
+      <Cell leftIcon={<InternetIcon />} title="单行标题" arrow />
+    </CellGroup>
+  );
+}

src/cell/_example/multiple.jsx

@@ -1,34 +1,32 @@
 import React from 'react';
-import { Cell, CellGroup } from 'tdesign-mobile-react';
-import { Icon } from 'tdesign-icons-react';
-
-const imgUrl = 'https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png';
-
-const imgUrl2 = 'https://tdesign.gtimg.com/mobile/demos/avatar_1.png';
+import { CellGroup, Cell, Badge, Switch, Avatar } from 'tdesign-mobile-react';
+import { ChevronRightIcon, LockOnIcon } from 'tdesign-icons-react';
 
 export default function () {
+  const chevronRightIcon = <ChevronRightIcon />;
+  const avatarUrl = 'https://tdesign.gtimg.com/mobile/demos/avatar1.png';
+  const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example4.png';
+
   return (
-    <div className="tdesign-grid-base">
-      <CellGroup>
-        <Cell title="多行标题" description="一段很长很长的内容文字" />
-        <Cell title="多行带图标" description="一段很长很长的内容文字" arrow leftIcon={<Icon name="app" />} />
-        <Cell
-          title="多行带头像"
-          description="一段很长很长的内容文字"
-          image={<img src={imgUrl2} width={48} height={48} style={{ borderRadius: '50%' }} />}
-          arrow
-        />
-        <Cell
-          title="多行带图片"
-          description="一段很长很长的内容文字"
-          image={<img src={imgUrl} width={56} height={56} />}
-        />
-        <Cell title="多行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" />
-        <Cell
-          title="多行高度不定，长文本自动换行，该选项的描述是一段很长的内容"
-          description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
-        />
-      </CellGroup>
-    </div>
+    <CellGroup>
+      <Cell title="单行标题" description="一段很长很长的内容文字" arrow />
+      <Cell title="单行标题" description="一段很长很长的内容文字" arrow required />
+      <Cell title="单行标题" description="一段很长很长的内容文字" arrow note={<Badge count={16} />} />
+      <Cell title="单行标题" description="一段很长很长的内容文字" note={<Switch defaultValue={true} />} />
+      <Cell title="单行标题" description="一段很长很长的内容文字" note="辅助信息" arrow />
+      <Cell title="单行标题" description="一段很长很长的内容文字" arrow leftIcon={<LockOnIcon />} />
+      <Cell title="单行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" />
+      <Cell
+        title="多行高度不定，长文本自动换行，该选项的描述是一段很长的内容"
+        description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
+      />
+      <Cell
+        title="多行带头像"
+        description="一段很长很长的内容文字"
+        leftIcon={<Avatar shape="circle" image={avatarUrl} />}
+        rightIcon={chevronRightIcon}
+      />
+      <Cell title="多行带图片" description="一段很长很长的内容文字" image={imgUrl} />
+    </CellGroup>
   );
 }