fix(notification,alert): 修复classsprefix，close不支持function

Tencent · Sep 5, 2022 · d6d3376 · d6d3376
1 parent cef57c9
commit d6d3376
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 50 deletions.
diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -8,6 +8,7 @@ import {
 } from 'tdesign-icons-react';
 import { CSSTransition } from 'react-transition-group';
 import noop from '../_util/noop';
+import renderTNode from '../_util/renderTNode';
 import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
@@ -101,7 +102,7 @@ const Alert = forwardRef((props: AlertProps, ref: React.Ref<HTMLDivElement>) =>
 
   const renderClose = () => (
     <div className={`${classPrefix}-alert__close`} onClick={handleClose}>
-      {typeof close === 'boolean' ? <CloseIcon /> : close}
+      {typeof close === 'boolean' ? <CloseIcon /> : renderTNode(close)}
     </div>
   );
 

diff --git a/src/alert/__tests__/__snapshots__/alert.test.tsx.snap b/src/alert/__tests__/__snapshots__/alert.test.tsx.snap
@@ -230,7 +230,7 @@ exports[`base.jsx 1`] = `
 <DocumentFragment>
   <div
     class="t-space t-space-vertical"
-    style="gap: 16px;"
+    style="gap: 16px; width: 100%;"
   >
     <div
       class="t-space-item"
@@ -306,6 +306,23 @@ exports[`base.jsx 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="t-alert__close"
+        >
+          <svg
+            class="t-icon t-icon-close"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
     <div
@@ -344,6 +361,11 @@ exports[`base.jsx 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="t-alert__close"
+        >
+          关闭
+        </div>
       </div>
     </div>
     <div
@@ -799,7 +821,7 @@ exports[`operation.jsx 1`] = `
 <DocumentFragment>
   <div
     class="t-space t-space-vertical"
-    style="gap: 16px;"
+    style="gap: 16px; width: 100%;"
   >
     <div
       class="t-space-item"

diff --git a/src/alert/_example/base.jsx b/src/alert/_example/base.jsx
@@ -3,10 +3,10 @@ import { Alert, Space } from 'tdesign-react';
 
 export default function AlertBase() {
   return (
-    <Space direction="vertical">
+    <Space direction="vertical" style={{ width: '100%' }}>
       <Alert theme="success" message="这是一条成功的消息提示" />
-      <Alert theme="info" message="这是一条普通的消息提示" />
-      <Alert theme="warning" message="这是一条警示消息" />
+      <Alert theme="info" message="这是一条普通的消息提示" close />
+      <Alert theme="warning" message="这是一条警示消息" close={'关闭'} />
       <Alert theme="error" message="高危操作/出错信息提示" />
     </Space>
   );

diff --git a/src/alert/_example/operation.jsx b/src/alert/_example/operation.jsx
@@ -4,7 +4,7 @@ import { Alert, Space } from 'tdesign-react';
 export default function AlertOperation() {
   const operation = <span>相关操作</span>;
   return (
-    <Space direction="vertical">
+    <Space direction="vertical" style={{ width: '100%' }}>
       <Alert
         theme="success"
         message="这是一条成功的消息提示"

diff --git a/src/notification/Notification.tsx b/src/notification/Notification.tsx
@@ -35,6 +35,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
   } = props;
 
   const { classPrefix } = useConfig();
+  const baseClassPrefix = `${classPrefix}-notification`;
   const { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon } = useGlobalIcon({
     CloseIcon: TdCloseIcon,
     InfoCircleFilledIcon: TdInfoCircleFilledIcon,
@@ -61,7 +62,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
   const renderIcon = () => {
     if (typeof icon === 'boolean' && !icon) return null;
 
-    const IconWrapper = ({ children }) => <div className={`${classPrefix}-notification__icon`}>{children}</div>;
+    const IconWrapper = ({ children }) => <div className={`${baseClassPrefix}__icon`}>{children}</div>;
 
     // 调整优先级，icon 优先级最高
     if (React.isValidElement(icon)) {
@@ -90,7 +91,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
       return (
         closeBtn && (
           <CloseIcon
-            className={`${classPrefix}-icon-close`}
+            className={`${baseClassPrefix}-icon-close`}
             onClick={(e) => {
               onCloseBtnClick({ e });
             }}
@@ -100,7 +101,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
     }
     return (
       <div
-        className={`${classPrefix}-close`}
+        className={`${baseClassPrefix}-close`}
         onClick={(e) => {
           onCloseBtnClick({ e });
         }}
@@ -112,19 +113,19 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
 
   return (
     <div
-      className={classNames(className, `${classPrefix}-notification`, {
-        [`${classPrefix}-is-${theme}`]: theme,
+      className={classNames(className, baseClassPrefix, {
+        [`${baseClassPrefix}-is-${theme}`]: theme,
       })}
       style={style}
     >
       {renderIcon()}
-      <div className={`${classPrefix}-notification__main`}>
-        <div className={`${classPrefix}-notification__title__wrap`}>
-          <span className={`${classPrefix}-notification__title`}>{title}</span>
+      <div className={`${baseClassPrefix}__main`}>
+        <div className={`${baseClassPrefix}__title__wrap`}>
+          <span className={`${baseClassPrefix}__title`}>{title}</span>
           {renderCloseBtn()}
         </div>
-        {content && <div className={`${classPrefix}-notification__content`}>{renderTNode(content)}</div>}
-        {footer && <div className={`${classPrefix}-notification__detail`}>{renderTNode(footer)}</div>}
+        {content && <div className={`${baseClassPrefix}__content`}>{renderTNode(content)}</div>}
+        {footer && <div className={`${baseClassPrefix}__detail`}>{renderTNode(footer)}</div>}
       </div>
     </div>
   );

diff --git a/src/notification/__tests__/__snapshots__/Notification.test.tsx.snap b/src/notification/__tests__/__snapshots__/Notification.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`base.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="t-notification t-is-info"
+    class="t-notification t-notification-is-info"
   >
     <div
       class="t-notification__icon"
@@ -34,7 +34,7 @@ exports[`base.jsx 1`] = `
           标题名称
         </span>
         <div
-          class="t-close"
+          class="t-notification-close"
         />
       </div>
       <div
@@ -95,7 +95,7 @@ exports[`content.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-info"
+        class="t-notification t-notification-is-info"
       >
         <div
           class="t-notification__icon"
@@ -126,7 +126,7 @@ exports[`content.jsx 1`] = `
               自定义内容（字符串）
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div
@@ -141,7 +141,7 @@ exports[`content.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-info"
+        class="t-notification t-notification-is-info"
       >
         <div
           class="t-notification__icon"
@@ -172,7 +172,7 @@ exports[`content.jsx 1`] = `
               自定义内容
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div
@@ -192,7 +192,7 @@ exports[`content.jsx 1`] = `
 exports[`footer.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="t-notification t-is-info"
+    class="t-notification t-notification-is-info"
   >
     <div
       class="t-notification__icon"
@@ -223,7 +223,7 @@ exports[`footer.jsx 1`] = `
           自定义底部详情
         </span>
         <div
-          class="t-close"
+          class="t-notification-close"
         />
       </div>
       <div
@@ -264,7 +264,7 @@ exports[`icon.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-info"
+        class="t-notification t-notification-is-info"
       >
         <div
           class="t-notification__icon"
@@ -295,7 +295,7 @@ exports[`icon.jsx 1`] = `
               普通通知
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div
@@ -310,7 +310,7 @@ exports[`icon.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-error"
+        class="t-notification t-notification-is-error"
       >
         <div
           class="t-notification__icon"
@@ -341,7 +341,7 @@ exports[`icon.jsx 1`] = `
               危险通知
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div
@@ -356,7 +356,7 @@ exports[`icon.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-warning"
+        class="t-notification t-notification-is-warning"
       >
         <div
           class="t-notification__icon"
@@ -387,7 +387,7 @@ exports[`icon.jsx 1`] = `
               告警通知
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div
@@ -402,7 +402,7 @@ exports[`icon.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-success"
+        class="t-notification t-notification-is-success"
       >
         <div
           class="t-notification__icon"
@@ -433,7 +433,7 @@ exports[`icon.jsx 1`] = `
               成功通知
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div
@@ -458,7 +458,7 @@ exports[`operation.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-info"
+        class="t-notification t-notification-is-info"
       >
         <div
           class="t-notification__icon"
@@ -489,7 +489,7 @@ exports[`operation.jsx 1`] = `
               超出的文本省略号显示
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div
@@ -520,7 +520,7 @@ exports[`operation.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-info"
+        class="t-notification t-notification-is-info"
       >
         <div
           class="t-notification__icon"
@@ -551,7 +551,7 @@ exports[`operation.jsx 1`] = `
               自定义底部
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div
@@ -582,7 +582,7 @@ exports[`operation.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-info"
+        class="t-notification t-notification-is-info"
       >
         <div
           class="t-notification__icon"
@@ -618,7 +618,7 @@ exports[`operation.jsx 1`] = `
               </div>
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div
@@ -651,7 +651,7 @@ exports[`operation.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-info"
+        class="t-notification t-notification-is-info"
       >
         <div
           class="t-notification__icon"
@@ -687,7 +687,7 @@ exports[`operation.jsx 1`] = `
               </div>
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div
@@ -728,7 +728,7 @@ exports[`operation.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-notification t-is-info"
+        class="t-notification t-notification-is-info"
       >
         <div
           class="t-notification__icon"
@@ -759,7 +759,7 @@ exports[`operation.jsx 1`] = `
               自定义内容
             </span>
             <div
-              class="t-close"
+              class="t-notification-close"
             />
           </div>
           <div