fix: typography

Author: WB01676250

components/typography/Base/CopyBtn.tsx

@@ -16,6 +16,7 @@ export interface CopyBtnProps extends Omit<CopyConfig, 'onCopy'> {
   onCopy: React.MouseEventHandler<HTMLButtonElement>;
   iconOnly: boolean;
   loading: boolean;
+  disabled?: boolean;
 }
 
 const CopyBtn: React.FC<CopyBtnProps> = ({
@@ -28,6 +29,7 @@ const CopyBtn: React.FC<CopyBtnProps> = ({
   tabIndex,
   onCopy,
   loading: btnLoading,
+  disabled,
 }) => {
   const tooltipNodes = toList(tooltips);
   const iconNodes = toList(icon);
@@ -36,24 +38,30 @@ const CopyBtn: React.FC<CopyBtnProps> = ({
   const copyTitle = getNode(tooltipNodes[copied ? 1 : 0], systemStr);
   const ariaLabel = typeof copyTitle === 'string' ? copyTitle : systemStr;
 
-  return (
-    <Tooltip title={copyTitle}>
-      <button
-        type="button"
-        className={classNames(`${prefixCls}-copy`, {
-          [`${prefixCls}-copy-success`]: copied,
-          [`${prefixCls}-copy-icon-only`]: iconOnly,
-        })}
-        onClick={onCopy}
-        aria-label={ariaLabel}
-        tabIndex={tabIndex}
-      >
-        {copied
-          ? getNode(iconNodes[1], <CheckOutlined />, true)
-          : getNode(iconNodes[0], btnLoading ? <LoadingOutlined /> : <CopyOutlined />, true)}
-      </button>
-    </Tooltip>
+  const copyBtn = (
+    <button
+      type="button"
+      className={classNames(`${prefixCls}-copy`, {
+        [`${prefixCls}-copy-success`]: copied,
+        [`${prefixCls}-copy-icon-only`]: iconOnly,
+        [`${prefixCls}-copy-disabled`]: disabled,
+      })}
+      onClick={onCopy}
+      aria-label={ariaLabel}
+      tabIndex={tabIndex}
+      disabled={disabled}
+    >
+      {copied
+        ? getNode(iconNodes[1], <CheckOutlined />, true)
+        : getNode(iconNodes[0], btnLoading ? <LoadingOutlined /> : <CopyOutlined />, true)}
+    </button>
   );
+
+  if (disabled) {
+    return copyBtn;
+  }
+
+  return <Tooltip title={copyTitle}>{copyBtn}</Tooltip>;
 };
 
 export default CopyBtn;

components/typography/Base/EllipsisTooltip.tsx

@@ -8,18 +8,24 @@ export interface EllipsisTooltipProps {
   enableEllipsis: boolean;
   isEllipsis?: boolean;
   children: React.ReactElement;
+  disabled?: boolean;
 }
 
 const EllipsisTooltip: React.FC<EllipsisTooltipProps> = ({
   enableEllipsis,
   isEllipsis,
   children,
   tooltipProps,
+  disabled,
 }) => {
   if (!tooltipProps?.title || !enableEllipsis) {
     return children;
   }
 
+  if (disabled) {
+    return children;
+  }
+
   return (
     <Tooltip open={isEllipsis ? undefined : false} {...tooltipProps}>
       {children}

components/typography/Base/index.tsx

@@ -52,6 +52,7 @@ interface EditConfig {
   triggerType?: ('icon' | 'text')[];
   enterIcon?: React.ReactNode;
   tabIndex?: number;
+  disabled?: boolean;
 }
 
 export interface EllipsisConfig {
@@ -112,13 +113,13 @@ function wrapperDecorations(
 const ELLIPSIS_STR = '...';
 
 const DECORATION_PROPS = [
-  'delete', 
-  'mark', 
-  'code', 
-  'underline', 
-  'strong', 
-  'keyboard', 
-  'italic'
+  'delete',
+  'mark',
+  'code',
+  'underline',
+  'strong',
+  'keyboard',
+  'italic',
 ] as const;
 
 const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
@@ -374,19 +375,30 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     const editTitle = toArray(tooltip)[0] || textLocale?.edit;
     const ariaLabel = typeof editTitle === 'string' ? editTitle : '';
 
+    const editBtn = (
+      <button
+        type="button"
+        ref={editIconRef}
+        className={classNames(`${prefixCls}-edit`, {
+          [`${prefixCls}-edit-disabled`]: disabled,
+        })}
+        onClick={onEditClick}
+        aria-label={ariaLabel}
+        tabIndex={tabIndex}
+        disabled={disabled}
+      >
+        {icon || <EditOutlined role="button" />}
+      </button>
+    );
+
     return triggerType.includes('icon') ? (
-      <Tooltip key="edit" title={tooltip === false ? '' : editTitle}>
-        <button
-          type="button"
-          ref={editIconRef}
-          className={`${prefixCls}-edit`}
-          onClick={onEditClick}
-          aria-label={ariaLabel}
-          tabIndex={tabIndex}
-        >
-          {icon || <EditOutlined role="button" />}
-        </button>
-      </Tooltip>
+      disabled ? (
+        editBtn
+      ) : (
+        <Tooltip key="edit" title={tooltip === false ? '' : editTitle}>
+          {editBtn}
+        </Tooltip>
+      )
     ) : null;
   };
 
@@ -406,6 +418,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
         onCopy={onCopyClick}
         loading={copyLoading}
         iconOnly={children === null || children === undefined}
+        disabled={disabled}
       />
     );
   };
@@ -433,6 +446,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
           tooltipProps={tooltipProps}
           enableEllipsis={mergedEnableEllipsis}
           isEllipsis={isMergedEllipsis}
+          disabled={disabled}
         >
           <Typography
             className={classNames(
@@ -466,13 +480,13 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
               onEllipsis={onJsEllipsis}
               expanded={expanded}
               miscDeps={[
-                copied, 
-                expanded, 
-                copyLoading, 
-                enableEdit, 
-                enableCopy, 
-                textLocale, 
-                ...DECORATION_PROPS.map(key => props[key as keyof BlockProps])
+                copied,
+                expanded,
+                copyLoading,
+                enableEdit,
+                enableCopy,
+                textLocale,
+                ...DECORATION_PROPS.map((key) => props[key as keyof BlockProps]),
               ]}
             >
               {(node, canEllipsis) =>

components/typography/style/mixins.ts

@@ -229,6 +229,30 @@ export const getCopyableStyles: GenerateStyle<TypographyToken, CSSObject> = (tok
   [`${token.componentCls}-copy-icon-only`]: {
     marginInlineStart: 0,
   },
+  [`${token.componentCls}-copy-disabled`]: {
+    color: token.colorTextDisabled,
+    cursor: 'not-allowed',
+
+    '&:active, &:hover': {
+      color: token.colorTextDisabled,
+    },
+
+    '&:active': {
+      pointerEvents: 'none',
+    },
+  },
+  [`${token.componentCls}-edit-disabled`]: {
+    color: token.colorTextDisabled,
+    cursor: 'not-allowed',
+
+    '&:active, &:hover': {
+      color: token.colorTextDisabled,
+    },
+
+    '&:active': {
+      pointerEvents: 'none',
+    },
+  },
 });
 
 export const getEllipsisStyles = (): CSSObject => ({