feat(DIvider): refactor

src/divider/Divider.tsx

@@ -1,40 +1,32 @@
 import React, { FC } from 'react';
 import classNames from 'classnames';
 import { TdDividerProps } from './type';
+import { dividerDefaultProps } from './defaultProps';
+import { StyledProps } from '../common';
 import useConfig from '../_util/useConfig';
-import withNativeProps, { NativeProps } from '../_util/withNativeProps';
+import useDefaultProps from '../hooks/useDefaultProps';
 
-export interface DividerProps extends TdDividerProps, NativeProps {}
-
-const defaultProps = {
-  align: 'center',
-  dashed: false,
-  layout: 'horizontal',
-  lineColor: '',
-};
+export interface DividerProps extends TdDividerProps, StyledProps {}
 
 const Divider: FC<DividerProps> = (props) => {
-  const { children, align, dashed, layout, lineColor, content } = props;
+  const { children, align, dashed, layout, content, style } = useDefaultProps<DividerProps>(props, dividerDefaultProps);
   const { classPrefix } = useConfig();
-  const name = `${classPrefix}-divider`;
+  const dividerClass = `${classPrefix}-divider`;
   const contentNode = content || children;
 
-  const classes = classNames(name, {
-    [`${name}-${layout}`]: layout,
-    [`${name}--hairline`]: true,
-    [`${name}--content-${align}`]: align && contentNode,
-    [`${name}--dashed`]: dashed,
+  const classes = classNames(dividerClass, {
+    [`${dividerClass}--${layout}`]: layout,
+    [`${dividerClass}--${align}`]: align,
+    [`${dividerClass}--dashed`]: dashed,
   });
 
-  return withNativeProps(
-    props,
-    <div className={classes} style={lineColor ? { borderColor: lineColor } : undefined}>
-      {contentNode && <span className={`${name}__content`}>{contentNode}</span>}
-    </div>,
+  return (
+    <div className={classes} style={style} role="separator">
+      <div className={`${dividerClass}__content`}>{contentNode}</div>
+    </div>
   );
 };
 
-Divider.defaultProps = defaultProps as DividerProps;
 Divider.displayName = 'Divider';
 
 export default Divider;

src/divider/__tests__/divider.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { describe, expect, it, render, waitFor } from '@test/utils';
+import Divider from '../Divider';
+import { TdDividerProps } from '../type';
+
+describe('Divider', () => {
+  describe('props', () => {
+    it(':align', async () => {
+      const testId = 'divider test align';
+      const aligns: TdDividerProps['align'][] = ['left', 'right', 'center'];
+      const { getByTestId } = render(
+        <div data-testid={testId}>
+          {aligns?.map((align, index) => (
+            <Divider key={index} align={align} />
+          ))}
+        </div>,
+      );
+
+      const instance = await waitFor(() => getByTestId(testId));
+
+      for (let index = 0; index < aligns.length; index++) {
+        const align = aligns[index];
+        expect(() => instance.querySelector(`.t-divider--${align}`)).toBeTruthy();
+      }
+    });
+
+    it(':layout', async () => {
+      const testId = 'divider test layout';
+      const layouts: TdDividerProps['layout'][] = ['horizontal', 'vertical'];
+      const { getByTestId } = render(
+        <div data-testid={testId}>
+          {layouts?.map((layout, index) => (
+            <Divider key={index} layout={layout} />
+          ))}
+        </div>,
+      );
+
+      const instance = await waitFor(() => getByTestId(testId));
+
+      for (let index = 0; index < layouts.length; index++) {
+        const layout = layouts[index];
+        expect(() => instance.querySelector(`.t-divider--${layout}`)).toBeTruthy();
+      }
+    });
+
+    it(':dashed', async () => {
+      const { container } = render(<Divider dashed />);
+      const dividerElement = container.firstChild;
+      expect(dividerElement).toHaveClass('t-divider--dashed');
+    });
+
+    it(':content', async () => {
+      const content = 'DividerContent';
+      const { getByText } = render(<Divider content={content}></Divider>);
+      expect(getByText(content).textContent).toBeTruthy();
+    });
+    it(':children', async () => {
+      const content = 'DividerContent';
+      const { getByText } = render(<Divider>{content}</Divider>);
+      expect(getByText(content).textContent).toBeTruthy();
+    });
+  });
+});

src/divider/_example/base.jsx

@@ -5,26 +5,25 @@ import './style/index.less';
 
 export default function Base() {
   return (
-    <div className="divider-demo-container">
-      <h3>直线拉通</h3>
+    <>
+      <div className="divider-demo__title">水平分割线</div>
       <Divider />
 
-      <h3>虚线拉通</h3>
-      <Divider dashed />
+      <div className="divider-demo__title">带文字水平分割线</div>
+      <Divider content="文字信息" align="left" />
+      <Divider content="文字信息" />
+      <Divider content="文字信息" align="right" />
 
-      <h3>左右间距</h3>
-      <div className="t-demo1">
-        <Divider />
+      <div className="divider-demo__title" style={{ marginBottom: '10px' }}>
+        垂直分割线
       </div>
-
-      <h3>右侧拉通</h3>
-      <div className="t-demo2">
-        <Divider />
-      </div>
-      <h3>自定义左侧距离</h3>
-      <div className="t-demo3">
-        <Divider />
+      <div className="divider-wrapper">
+        <span>文字信息</span>
+        <Divider layout="vertical" />
+        <span>文字信息</span>
+        <Divider layout="vertical" />
+        <span>文字信息</span>
       </div>
-    </div>
+    </>
   );
 }

src/divider/_example/index.jsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import Vertical from './vertical';
 import BaseDemo from './base';
-import AlignDemo from './align';
+import ThemeDemo from './theme';
 
 import './style/index.less';
 
-export default function Base() {
+export default function DividerDemo() {
   return (
     <div className="tdesign-mobile-demo">
       <TDemoHeader title="Divider 分割符" summary="用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。" />
-      <TDemoBlock title="01 类型" summary="分割符主要是由直线和文字组成">
+      <TDemoBlock title="01 组件类型" padding={true}>
         <BaseDemo />
-        <AlignDemo />
-        <Vertical />
+      </TDemoBlock>
+      <TDemoBlock title="02 组件状态" padding={true}>
+        <ThemeDemo />
       </TDemoBlock>
     </div>
   );

src/divider/_example/style/index.less

@@ -1,34 +1,17 @@
 .tdesign-mobile-demo {
   background-color: #fff;
-  padding-bottom: 16px;
-
-  .divider-demo-container {
-    h3 {
-      font-size: 12px;
-      font-weight: 400;
-      font-family: 'PingFang SC';
-      color: #a9a9a9;
-      padding: 16px;
-    }
-  }
-}
-
-.t-demo1 {
-  margin: 0 16px;
 }
 
-.t-demo2 {
-  margin-left: 16px;
+.divider-demo__title {
+  font-size: 14px;
+  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
+  padding: 8px 16px;
+  line-height: 20px;
 }
-
-.t-demo3 {
-  margin-left: 76px;
-}
-
-.vertical-panel {
+.divider-wrapper {
   display: flex;
-  height: 20px;
-  margin: 0 16px;
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.4);
+  align-items: center;
+  font-size: 14px;
+  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
+  padding-left: 16px;
 }

src/divider/_example/theme.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Divider } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function Theme() {
+  return (
+    <div>
+      <div className="divider-demo__title">虚线样式</div>
+      <Divider dashed />
+      <Divider dashed content="文字信息" align="left" />
+      <Divider dashed content="文字信息" />
+      <Divider dashed content="文字信息" align="right" />
+    </div>
+  );
+}

src/divider/defaultProps.ts

@@ -0,0 +1,7 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDividerProps } from './type';
+
+export const dividerDefaultProps: TdDividerProps = { align: 'center', dashed: false, layout: 'horizontal' };

src/divider/divider.en-US.md

@@ -0,0 +1,15 @@
+:: BASE_DOC ::
+
+## API
+
+### Divider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+align | String | center | options: left/right/center | N
+children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
+dashed | Boolean | false | \- | N
+layout | String | horizontal | options: horizontal/vertical | N

src/divider/divider.md

@@ -1,14 +1,14 @@
 :: BASE_DOC ::
 ## API
+
 ### Divider Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
-children | TNode | - | 子元素，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-content | TNode | - | 子元素。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
+children | TNode | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
 dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
 layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
-lineColor | String | - | 分隔线颜色 | N

src/divider/type.ts

@@ -30,9 +30,4 @@ export interface TdDividerProps {
    * @default horizontal
    */
   layout?: 'horizontal' | 'vertical';
-  /**
-   * 分隔线颜色
-   * @default ''
-   */
-  lineColor?: string;
 }