feat(Typography): add Typography components

site/site.config.mjs

@@ -97,6 +97,14 @@ export const docs = [
         component: () => import('tdesign-react/link/link.md'),
         componentEn: () => import('tdesign-react/link/link.en-US.md'),
       },
+      {
+        title: 'Typography 排版',
+        titleEn: 'Typography',
+        name: 'typography',
+        path: '/react/components/typography',
+        component: () => import('tdesign-react/typography/typography.md'),
+        componentEn: () => import('tdesign-react/typography/typography.en-US.md'),
+      },
     ],
   },
   {

site/test-coverage.js

@@ -1,9 +1,9 @@
 module.exports = {
   "Util": {
-    "statements": "61.53%",
-    "branches": "48.77%",
+    "statements": "61.88%",
+    "branches": "48.57%",
     "functions": "69.29%",
-    "lines": "63.26%"
+    "lines": "63.77%"
   },
   "affix": {
     "statements": "84.84%",
@@ -18,10 +18,10 @@ module.exports = {
     "lines": "100%"
   },
   "anchor": {
-    "statements": "92.98%",
+    "statements": "93.85%",
     "branches": "69.56%",
     "functions": "88%",
-    "lines": "97.08%"
+    "lines": "98.05%"
   },
   "autoComplete": {
     "statements": "96.17%",
@@ -114,10 +114,10 @@ module.exports = {
     "lines": "68.75%"
   },
   "datePicker": {
-    "statements": "62.47%",
-    "branches": "43.3%",
-    "functions": "60%",
-    "lines": "66.16%"
+    "statements": "62.55%",
+    "branches": "44.05%",
+    "functions": "60.6%",
+    "lines": "66.24%"
   },
   "descriptions": {
     "statements": "98.82%",
@@ -127,7 +127,7 @@ module.exports = {
   },
   "dialog": {
     "statements": "85%",
-    "branches": "71.42%",
+    "branches": "71.92%",
     "functions": "85%",
     "lines": "87.24%"
   },
@@ -162,10 +162,10 @@ module.exports = {
     "lines": "84.21%"
   },
   "guide": {
-    "statements": "100%",
-    "branches": "94.2%",
+    "statements": "99.32%",
+    "branches": "92.85%",
     "functions": "100%",
-    "lines": "100%"
+    "lines": "99.31%"
   },
   "hooks": {
     "statements": "55.22%",
@@ -174,10 +174,10 @@ module.exports = {
     "lines": "55.19%"
   },
   "image": {
-    "statements": "88.76%",
+    "statements": "88.88%",
     "branches": "82.53%",
     "functions": "80%",
-    "lines": "91.76%"
+    "lines": "91.86%"
   },
   "imageViewer": {
     "statements": "77.85%",
@@ -186,10 +186,10 @@ module.exports = {
     "lines": "77.62%"
   },
   "input": {
-    "statements": "93.78%",
+    "statements": "93.82%",
     "branches": "92.24%",
     "functions": "89.47%",
-    "lines": "94.11%"
+    "lines": "94.15%"
   },
   "inputAdornment": {
     "statements": "86.95%",
@@ -204,10 +204,10 @@ module.exports = {
     "lines": "80.16%"
   },
   "layout": {
-    "statements": "91.3%",
+    "statements": "91.48%",
     "branches": "41.66%",
     "functions": "85.71%",
-    "lines": "91.3%"
+    "lines": "91.48%"
   },
   "link": {
     "statements": "100%",
@@ -240,9 +240,9 @@ module.exports = {
     "lines": "90.51%"
   },
   "message": {
-    "statements": "88.31%",
+    "statements": "88.96%",
     "branches": "86.66%",
-    "functions": "68.18%",
+    "functions": "70.45%",
     "lines": "94.28%"
   },
   "notification": {
@@ -282,10 +282,10 @@ module.exports = {
     "lines": "83.58%"
   },
   "rangeInput": {
-    "statements": "75%",
-    "branches": "67.44%",
+    "statements": "74.02%",
+    "branches": "62.79%",
     "functions": "48.14%",
-    "lines": "74.66%"
+    "lines": "73.68%"
   },
   "rate": {
     "statements": "96.22%",
@@ -355,7 +355,7 @@ module.exports = {
   },
   "tabs": {
     "statements": "90.96%",
-    "branches": "78.64%",
+    "branches": "79.04%",
     "functions": "86.36%",
     "lines": "91.17%"
   },
@@ -413,6 +413,12 @@ module.exports = {
     "functions": "97.61%",
     "lines": "97.22%"
   },
+  "typography": {
+    "statements": "95.58%",
+    "branches": "76.31%",
+    "functions": "81.81%",
+    "lines": "98.46%"
+  },
   "upload": {
     "statements": "96.66%",
     "branches": "95.65%",

src/_util/copyText.ts

@@ -1,4 +1,8 @@
+import { canUseDocument } from './dom';
+
 export default function copyText(text: string) {
+  if (!canUseDocument) return;
+
   if ('clipboard' in navigator) {
     navigator.clipboard.writeText(text);
     return;
@@ -16,7 +20,7 @@ export default function copyText(text: string) {
   selection.removeAllRanges();
   selection.addRange(range);
 
-  document.execCommand('copy');
+  document.execCommand?.('copy');
   selection.removeAllRanges();
   document.body.removeChild(textarea);
 }

src/config-provider/config-provider.en-US.md

@@ -320,3 +320,11 @@ finishButtonProps | Object | - | finish button in last step. `{ content: 'Finish
 nextButtonProps | Object | - | next step button. `{ content: 'Next Button', theme: 'primary' }`。Typescript：`ButtonProps` | N
 prevButtonProps | Object | - | previous step button. `{ content: 'Previous Step', theme: 'default' }`。Typescript：`ButtonProps` | N
 skipButtonProps | Object | - | skip button. `{ content: 'Skip', theme: 'default' }`。Typescript：`ButtonProps` | N
+
+### TypographyConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+collapseText | String | - | collapse text | N
+expandText | String | - | expand text | N
+copiedText | String | - | copied text | N

src/config-provider/config-provider.md

@@ -63,6 +63,7 @@ timePicker | Object | - | 时间选择器全局配置。TS 类型：`TimePickerC
 transfer | Object | - | 穿梭框全局配置。TS 类型：`TransferConfig` | N
 tree | Object | - | 树组件全局配置。TS 类型：`TreeConfig` | N
 treeSelect | Object | - | 树选择器组件全局配置。TS 类型：`TreeSelectConfig` | N
+typography | Object | - | 排版组件全局配置。TS 类型：`TypographyConfig` | N
 upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N
 
 ### InputConfig
@@ -350,3 +351,11 @@ finishButtonProps | Object | - | 最后一步中的完成按钮，示例：`{ co
 nextButtonProps | Object | - | 下一步按钮，示例：`{ content: '下一步', theme: 'primary' }`。TS 类型：`ButtonProps` | N
 prevButtonProps | Object | - | 上一步按钮，示例：`{ content: '上一步', theme: 'default' }`。TS 类型：`ButtonProps` | N
 skipButtonProps | Object | - | 跳过按钮，示例：`{ content: '跳过', theme: 'default' }`。TS 类型：`ButtonProps` | N
+
+### TypographyConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+collapseText | String | - | 语言配置，“收起”描述文本 | N
+expandText | String | - | 语言配置，“展开”描述文本 | N
+copiedText | String | - | 语言配置，“复制成功”描述文本 | N

src/config-provider/type.ts

@@ -126,6 +126,10 @@ export interface GlobalConfigProvider {
    * 树选择器组件全局配置
    */
   treeSelect?: TreeSelectConfig;
+  /**
+   * 排版全局配置
+   */
+  typography?: TypographyConfig;
   /**
    * 上传组件全局配置
    */
@@ -886,6 +890,24 @@ export interface GuideConfig {
   skipButtonProps?: ButtonProps;
 }
 
+export interface TypographyConfig {
+  /**
+   * 语言配置，“收起”描述文本
+   * @default ''
+   */
+  collapseText?: string;
+  /**
+   * 语言配置，“展开”描述文本
+   * @default ''
+   */
+  expandText?: string;
+  /**
+   * 语言配置，“复制成功”描述文本
+   * @default ''
+   */
+  copiedText?: string;
+}
+
 export type AnimationType = 'ripple' | 'expand' | 'fade';
 
 export type IconConfig = GlobalIconConfig;

src/index.ts

@@ -66,3 +66,4 @@ export * from './guide';
 export * from './back-top';
 export * from './statistic';
 export * from './descriptions';
+export * from './typography';

src/table/_example/base.jsx

@@ -70,7 +70,6 @@ export default function TableBasic() {
       rowClassName={({ rowIndex }) => `${rowIndex}-class`}
       cellEmptyContent={'-'}
       resizable
-      bordered
       // 与pagination对齐
       pagination={{
         defaultCurrent: 2,

src/typography/Paragraph.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import Ellipsis from './ellipsis/Ellipsis';
+import { paragraphDefaultProps } from './defaultProps';
+
+import useConfig from '../hooks/useConfig';
+import useEllipsis from './ellipsis/useEllipsis';
+import useDefaultProps from '../hooks/useDefaultProps';
+
+import type { StyledProps } from '../common';
+import type { TdParagraphProps } from './type';
+
+export type TypographyParagraphProps = TdParagraphProps &
+  StyledProps & {
+    children: React.ReactNode;
+  };
+
+const Paragraph = forwardRef<HTMLDivElement, TypographyParagraphProps>((originalProps, ref) => {
+  const { classPrefix } = useConfig();
+  const props = useDefaultProps<TypographyParagraphProps>(originalProps, paragraphDefaultProps);
+
+  const { ellipsis, children, className, content, ...rest } = props;
+  const prefixCls = `${classPrefix}-typography`;
+
+  const { ellipsisProps } = useEllipsis(ellipsis);
+
+  if (!ellipsis) {
+    return (
+      <div className={classNames(className, prefixCls)} ref={ref} {...rest}>
+        {children || content}
+      </div>
+    );
+  }
+
+  return (
+    <Ellipsis {...ellipsisProps} className={classNames(className, prefixCls)} {...rest}>
+      {children || content}
+    </Ellipsis>
+  );
+});
+
+Paragraph.displayName = 'Paragraph';
+Paragraph.defaultProps = paragraphDefaultProps;
+
+export default Paragraph;