feat(typography): typography finished

.vscode/settings.json

@@ -22,7 +22,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "cSpell.words": ["activable", "actived", "borderless", "Cascader", "Popconfirm", "Swiper", "tdesign"]
 }

package.json

@@ -203,13 +203,18 @@
     "@types/tinycolor2": "^1.4.3",
     "@types/validator": "^13.1.3",
     "classnames": "~2.3.1",
+    "copy-to-clipboard": "^3.3.3",
     "dayjs": "~1.11.4",
     "hoist-non-react-statics": "~3.3.2",
+    "install": "^0.13.0",
     "lodash": "~4.17.15",
     "mitt": "^3.0.0",
+    "npm": "^10.5.0",
     "raf": "~3.4.1",
     "react-is": "^18.2.0",
+    "react-lines-ellipsis": "^0.15.4",
     "react-popper": "~2.3.0",
+    "react-show-more-text": "^1.7.1",
     "react-transition-group": "~4.4.1",
     "sortablejs": "^1.15.0",
     "tdesign-icons-react": "^0.3.0",

site/site.config.mjs

@@ -561,6 +561,14 @@ export const docs = [
         component: () => import('tdesign-react/tooltip/tooltip.md'),
         componentEn: () => import('tdesign-react/tooltip/tooltip.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'),
+      },
       {
         title: 'Tree 树',
         titleEn: 'Tree',

src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap

@@ -921,7 +921,7 @@ exports[`Guide Component > GuideStep.placement is equal to bottom-left 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear appear-active"
+    class="t-portal-wrapper appear-done enter-done"
   >
     <div
       class="t-popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -1092,7 +1092,7 @@ exports[`Guide Component > GuideStep.stepOverlayClass is equal to t-test-guide-s
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear appear-active"
+    class="t-portal-wrapper appear-done enter-done"
   >
     <div
       class="t-popup t-test-guide-step-overlay t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -1263,7 +1263,7 @@ exports[`Guide Component > GuideStep.title works fine 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear appear-active"
+    class="t-portal-wrapper appear-done enter-done"
   >
     <div
       class="t-popup t-popup--animation-enter-active t-popup--animation-enter-to"

src/index.ts

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

src/typography/Ellipsis.tsx

@@ -0,0 +1,99 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+import Truncate from './Truncate';
+import useConfig from '../hooks/useConfig';
+
+type TdEllipsis = {
+  className?: string;
+  children: ReactNode;
+  lines: number;
+  ellipsisClassName: string;
+  ellipsisPrefix: ReactNode;
+  onToggleExpand?: (isExpanded: boolean, e: Event) => void;
+  width: number;
+  onTruncate?: (truncated: boolean) => void;
+  component: string;
+  collapsible: boolean;
+  expandable: boolean;
+  more: ReactNode;
+  less: ReactNode;
+};
+
+const Ellipsis = ({
+  className,
+  children,
+  lines = 1,
+  ellipsisClassName,
+  ellipsisPrefix = '...',
+  onToggleExpand,
+  width = 0,
+  onTruncate,
+  component: Component = 'div',
+  collapsible = false,
+  expandable = false,
+  more,
+  less,
+  ...rest
+}: TdEllipsis) => {
+  const { classPrefix } = useConfig();
+  const symbolClassName = ellipsisClassName || `${classPrefix}-typography-ellipsis-symbol`;
+
+  const isMountRef = useRef(false);
+  useEffect(() => {
+    isMountRef.current = true;
+  }, []);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+  const handleToggleExpand = (e) => {
+    if (!expandable) return;
+
+    if (isMountRef.current) {
+      setIsExpanded(!isExpanded);
+      onToggleExpand?.(!isExpanded, e);
+    }
+  };
+
+  const truncateRef = useRef();
+  const [isTruncated, setTruncated] = useState(false);
+  const handleTruncate = (truncated) => {
+    if (isMountRef.current && truncated !== isTruncated) {
+      setTruncated(truncated);
+
+      if (truncated) {
+        truncateRef.current?.onResize();
+      }
+      onTruncate?.(truncated);
+    }
+  };
+
+  return (
+    <Component className={className} {...rest}>
+      <Truncate
+        width={width}
+        lines={!isExpanded && lines}
+        className={`${classPrefix}-typography-ellipsis`}
+        ellipsis={
+          <span className={`${classPrefix}-typography-ellipsis-symbol-wrapper`}>
+            {ellipsisPrefix}
+            <span className={symbolClassName} onClick={handleToggleExpand}>
+              {more}
+            </span>
+          </span>
+        }
+        onTruncate={handleTruncate}
+        ref={truncateRef}
+        lineClassName={`${classPrefix}-typography-ellipsis-line`}
+      >
+        {children}
+      </Truncate>
+      {!isTruncated && collapsible && isExpanded && (
+        <span className={classNames(symbolClassName, `${symbolClassName}--expanded`)} onClick={handleToggleExpand}>
+          {less}
+        </span>
+      )}
+    </Component>
+  );
+};
+
+export default Ellipsis;

src/typography/Paragraph.tsx

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

src/typography/Text.tsx

@@ -0,0 +1,166 @@
+import React, { forwardRef, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { CheckIcon, CopyIcon } from 'tdesign-icons-react';
+import copy from 'copy-to-clipboard';
+
+import Ellipsis from './Ellipsis';
+import { TdTextProps } from './type';
+import { titleDefaultProps } from './defaultProps';
+import useConfig from '../hooks/useConfig';
+import useEllipsis from './useEllipsis';
+import Button from '../button/Button';
+import Tooltip from '../tooltip';
+import { useLocaleReceiver } from '../locale/LocalReceiver';
+
+export type TypographyTextProps = TdTextProps;
+
+const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement>) => {
+  const { classPrefix } = useConfig();
+  const prefixCls = `${classPrefix}-typography`;
+
+  const [local, t] = useLocaleReceiver('typography');
+  const copiedText = t(local.copied);
+
+  const {
+    theme,
+    disabled,
+    className,
+    copyable,
+    strong,
+    mark,
+    code,
+    keyboard,
+    underline,
+    delete: deleteProp,
+    italic,
+    children,
+    ellipsis,
+    ...rest
+  } = props;
+  const getComponent = () => {
+    const componentMap = {
+      strong: !!strong,
+      mark: !!mark,
+      code: !!code,
+      kbd: !!keyboard,
+      u: !!underline,
+      del: !!deleteProp,
+      i: !!italic,
+    };
+    return Object.entries(componentMap).find(([, condition]) => !!condition)?.[0];
+  };
+
+  const currentRef = useRef();
+  const { ellipsisProps } = useEllipsis(ellipsis);
+  const Component = getComponent();
+
+  const textEllipsisProps = {
+    ...ellipsisProps,
+  };
+
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyProps =
+    typeof copyable === 'boolean'
+      ? {
+          text: children.toString(),
+          onCopy: Function.prototype,
+          tooltipProps: isCopied
+            ? {
+                content: copiedText,
+              }
+            : null,
+        }
+      : {
+          text: copyable?.text || children.toString(),
+          onCopy: copyable?.onCopy?.(),
+          tooltipProps: {
+            ...copyable?.tooltipProps,
+            content: isCopied ? copiedText : copyable?.tooltipProps?.content,
+          },
+          suffix: copyable?.suffix,
+        };
+
+  const handleCopy = () => {
+    copy(copyProps?.text);
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1500);
+    copyProps.onCopy?.();
+  };
+
+  const renderContent = (withChildren: boolean) => {
+    const { tooltipProps } = copyProps;
+    const wrapWithTooltip = (wrapContent) =>
+      tooltipProps ? <Tooltip {...tooltipProps}>{wrapContent}</Tooltip> : wrapContent;
+
+    const getSuffix = () => {
+      if (typeof copyProps?.suffix === 'function') {
+        return copyProps.suffix({ copied: isCopied });
+      }
+      return isCopied ? <CheckIcon /> : <CopyIcon />;
+    };
+
+    return (
+      <>
+        {withChildren ? children : null}
+        {copyable
+          ? wrapWithTooltip(
+              <Button shape="circle" theme="primary" variant="text" icon={getSuffix()} onClick={handleCopy} />,
+            )
+          : null}
+      </>
+    );
+  };
+
+  if (!ellipsis) {
+    return Component ? (
+      <span className={classNames(className, prefixCls)} ref={ref || currentRef} {...rest}>
+        <Component>{renderContent(true)}</Component>
+      </span>
+    ) : (
+      <span
+        className={classNames(className, {
+          [`${prefixCls}--${theme}`]: theme,
+          [`${prefixCls}--disabled`]: disabled,
+        })}
+        {...rest}
+      >
+        {renderContent(true)}
+      </span>
+    );
+  }
+
+  return (
+    <>
+      {Component ? (
+        <span className={classNames(className, prefixCls)} ref={ref || currentRef} {...rest}>
+          <Ellipsis {...textEllipsisProps} component={Component}>
+            {children}
+          </Ellipsis>
+        </span>
+      ) : (
+        <Ellipsis
+          {...textEllipsisProps}
+          className={classNames(className, {
+            [`${prefixCls}--${theme}`]: theme,
+            [`${prefixCls}--disabled`]: disabled,
+          })}
+          text={children}
+          {...rest}
+        >
+          {children}
+        </Ellipsis>
+      )}
+      {renderContent(false)}
+    </>
+  );
+};
+
+export const Text = forwardRef(TextFunction);
+
+Text.displayName = 'Text';
+Text.defaultProps = titleDefaultProps;
+
+export default Text;