feat(Divider): refactor (#403)

* feat(DIvider): refactor

* chore: update common

* chore: rename tsx

* chore(site): update mobile.config

* chore(husky): ci环境不运行

* chore: update snapshot

* chore(site): 展示tsx 示例代码

* feat: children?: React.ReactNode

* docs: sync api

* feat: remove children api

* docs: update

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Y. <anly_yaw@163.com>

.husky/commit-msg

@@ -1,4 +1,5 @@
 #!/bin/sh
+[ -n "$CI" ] && exit 0
 . "$(dirname "$0")/_/husky.sh"
 
 npx commitlint -e $HUSKY_GIT_PARAMS

.husky/pre-commit

@@ -1,4 +1,5 @@
 #!/bin/sh
+[ -n "$CI" ] && exit 0
 . "$(dirname "$0")/_/husky.sh"
 
 npm run lint:fix

site/mobile/mobile.config.js

@@ -8,7 +8,7 @@ export default {
     {
       title: 'Divider 分割符',
       name: 'divider',
-      component: () => import('tdesign-mobile-react/divider/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/divider/_example/index.tsx'),
     },
     {
       title: 'Icon 图标',

site/plugin-tdoc/transforms.js

@@ -26,9 +26,14 @@ export default {
 
     // 替换成对应 demo 文件
     source = source.replace(/\{\{\s+(.+)\s+\}\}/g, (demoStr, demoFileName) => {
+      const tsDemoPath = path.resolve(resourceDir, `./_example/${demoFileName}.tsx`);
+      if (fs.existsSync(tsDemoPath)) {
+        return `\n::: demo _example/${demoFileName} ${name}\n:::\n`;
+      }
+
       const demoPath = path.resolve(resourceDir, `./_example/${demoFileName}.jsx`);
       if (!fs.existsSync(demoPath)) {
-        console.log('\x1B[36m%s\x1B[0m', `${name} 组件需要实现 _example/${demoFileName}.jsx 示例!`);
+        console.log('\x1B[36m%s\x1B[0m', `${name} 组件需要实现 _example/${demoFileName}.tsx 示例!`);
         return '\n<h3>DEMO (🚧建设中）...</h3>';
       }
 

src/divider/Divider.tsx

@@ -1,40 +1,38 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { 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 {
+  children?: React.ReactNode;
+}
 
 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}`,
+    `${dividerClass}--${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,66 @@
+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();
+    });
+  });
+
+  describe('slot', () => {
+    it(':children', async () => {
+      const content = 'DividerContent';
+      const { getByText } = render(<Divider>{content}</Divider>);
+      expect(getByText(content).textContent).toBeTruthy();
+    });
+  });
+});

src/divider/_example/base.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Divider } from 'tdesign-mobile-react';
+
+import './style/index.less';
+
+export default function Base() {
+  return (
+    <>
+      <div className="divider-demo__title">水平分割线</div>
+      <Divider />
+
+      <div className="divider-demo__title">带文字水平分割线</div>
+      <Divider content="文字信息" align="left" />
+      <Divider content="文字信息" />
+      <Divider content="文字信息" align="right" />
+
+      <div className="divider-demo__title" style={{ marginBottom: '10px' }}>
+        垂直分割线
+      </div>
+      <div className="divider-wrapper">
+        <span>文字信息</span>
+        <Divider layout="vertical" />
+        <span>文字信息</span>
+        <Divider layout="vertical" />
+        <span>文字信息</span>
+      </div>
+    </>
+  );
+}

src/divider/_example/index.jsx → src/divider/_example/index.tsx

@@ -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.tsx

@@ -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/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+dashed | Boolean | false | \- | N
+layout | String | horizontal | options: horizontal/vertical | N