feat(tooltip): 新增lite模式子组件，rate/imageviewer改用lite版本 (#1546)

* test(collapse): add missing usage demo n * fix(select): option设置content未生效问题 * fix(notification): 集中修改多个问题 classname无法定义，closebtn/icon无法支持bool设置，非自动关闭demo修改 * feat(notification): 支持plugin模式下config设置支持plugin模式下config设置 fix #1376 * docs(notification): api doc update * fix(notification,alert): 修复classsprefix，close不支持function * feat(tooltip): 新增lite版本 n * feat(tooltip): rate, imageviewer替换tooltiplite n * docs(tooltip): demo update * docs(tooltip): doc n * feat(tooltip,button): 增加lite动画transition，mouse offset问题修复，button disabled采用div Co-authored-by: lincao <lincao@tencent.com>
Tencent · Sep 27, 2022 · a64312b · a64312b
1 parent b4dc640
commit a64312b
Show file tree

Hide file tree

Showing 25 changed files with 686 additions and 376 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/_util/wrapDisabledButton.tsx b/src/_util/wrapDisabledButton.tsx
@@ -0,0 +1,22 @@
+import React, { cloneElement } from 'react';
+
+const wrapDisabledButton = (children, appendProps = {}) => {
+  // disable情况下button不响应mouse事件，但需要展示tooltip，所以要包裹一层
+  if (children.type === 'button' && children?.props?.disabled) {
+    const displayStyle = children.props?.style?.display ? children.props.style.display : 'inline-block';
+    const child = cloneElement(children, {
+      style: {
+        ...children?.props?.style,
+        pointerEvents: 'none',
+      },
+    });
+    return (
+      <span {...appendProps} style={{ display: displayStyle, cursor: 'not-allowed' }}>
+        {child}
+      </span>
+    );
+  }
+  return null;
+};
+
+export default wrapDisabledButton;
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
@@ -52,8 +52,9 @@ const Button = forwardRef((props: ButtonProps, ref: React.RefObject<HTMLElement>
 
   const renderTag = useMemo(() => {
     if (!tag && href) return 'a';
+    if (!tag && disabled) return 'div';
     return tag || 'button';
-  }, [tag, href]);
+  }, [tag, href, disabled]);
 
   return React.createElement(
     renderTag,

diff --git a/src/button/__tests__/__snapshots__/button.test.tsx.snap b/src/button/__tests__/__snapshots__/button.test.tsx.snap
@@ -1146,7 +1146,7 @@ exports[`status.jsx 1`] = `
     <div
       class="t-space-item"
     >
-      <button
+      <div
         class="t-button t-button--theme-primary t-button--variant-base t-is-disabled"
         disabled=""
         type="button"
@@ -1156,7 +1156,7 @@ exports[`status.jsx 1`] = `
         >
           填充按钮
         </span>
-      </button>
+      </div>
     </div>
     <div
       class="t-space-item"

diff --git a/src/button/__tests__/button.test.tsx b/src/button/__tests__/button.test.tsx
@@ -59,7 +59,7 @@ describe('Button 组件测试', () => {
   test('disabled', async () => {
     const clickFn = jest.fn();
     const { container } = render(<Button disabled onClick={clickFn} />);
-    expect(container.firstChild).toBeDisabled();
+    expect(container.firstChild.nodeName).toBe('DIV');
     fireEvent.click(container.firstChild);
     expect(clickFn).toBeCalledTimes(0);
   });

diff --git a/src/date-picker/__tests__/__snapshots__/date-picker.test.tsx.snap b/src/date-picker/__tests__/__snapshots__/date-picker.test.tsx.snap
@@ -3555,7 +3555,7 @@ exports[`panel.jsx 1`] = `
             <div
               class="t-date-picker__presets"
             />
-            <button
+            <div
               class="t-button t-button--theme-primary t-button--variant-base t-is-disabled t-size-s"
               disabled=""
               type="button"
@@ -3565,7 +3565,7 @@ exports[`panel.jsx 1`] = `
               >
                 确定
               </span>
-            </button>
+            </div>
           </div>
         </div>
       </div>
@@ -6180,7 +6180,7 @@ exports[`panel.jsx 1`] = `
             <div
               class="t-date-picker__presets"
             />
-            <button
+            <div
               class="t-button t-button--theme-primary t-button--variant-base t-is-disabled t-size-s"
               disabled=""
               type="button"
@@ -6190,7 +6190,7 @@ exports[`panel.jsx 1`] = `
               >
                 确定
               </span>
-            </button>
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/date-picker/__tests__/__snapshots__/date-range-picker.test.tsx.snap b/src/date-picker/__tests__/__snapshots__/date-range-picker.test.tsx.snap
@@ -3729,7 +3729,7 @@ exports[`panel.jsx 1`] = `
             <div
               class="t-date-picker__presets"
             />
-            <button
+            <div
               class="t-button t-button--theme-primary t-button--variant-base t-is-disabled t-size-s"
               disabled=""
               type="button"
@@ -3739,7 +3739,7 @@ exports[`panel.jsx 1`] = `
               >
                 确定
               </span>
-            </button>
+            </div>
           </div>
         </div>
       </div>
@@ -6354,7 +6354,7 @@ exports[`panel.jsx 1`] = `
             <div
               class="t-date-picker__presets"
             />
-            <button
+            <div
               class="t-button t-button--theme-primary t-button--variant-base t-is-disabled t-size-s"
               disabled=""
               type="button"
@@ -6364,7 +6364,7 @@ exports[`panel.jsx 1`] = `
               >
                 确定
               </span>
-            </button>
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/form/__tests__/__snapshots__/form.test.tsx.snap b/src/form/__tests__/__snapshots__/form.test.tsx.snap
@@ -2028,7 +2028,7 @@ exports[`disabled.jsx 1`] = `
             <div
               class="t-form__controls-content"
             >
-              <button
+              <div
                 class="t-button t-button--theme-primary t-button--variant-base t-is-disabled"
                 disabled=""
                 style="margin-right: 10px;"
@@ -2039,8 +2039,8 @@ exports[`disabled.jsx 1`] = `
                 >
                   提交
                 </span>
-              </button>
-              <button
+              </div>
+              <div
                 class="t-button t-button--theme-default t-button--variant-base t-is-disabled"
                 disabled=""
                 type="reset"
@@ -2050,7 +2050,7 @@ exports[`disabled.jsx 1`] = `
                 >
                   重置
                 </span>
-              </button>
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/image-viewer/ImageViewerModel.tsx b/src/image-viewer/ImageViewerModel.tsx
@@ -8,7 +8,7 @@ import {
   RotationIcon as TdRotationIcon,
 } from 'tdesign-icons-react';
 import classNames from 'classnames';
-import Tooltip from '../tooltip';
+import { TooltipLite } from '../tooltip';
 import useConfig from '../hooks/useConfig';
 import { TNode } from '../common';
 import { downloadFile } from './utils';
@@ -163,45 +163,24 @@ export const ImageViewerUtils = ({
   return (
     <div className={`${classPrefix}-image-viewer__utils`}>
       <div className={`${classPrefix}-image-viewer__utils-content`}>
-        <Tooltip
-          overlayClassName={`${classPrefix}-image-viewer__utils--tip`}
-          content="镜像"
-          destroyOnClose
-          placement="top"
-          showArrow
-          theme="default"
-        >
+        <TooltipLite className={`${classPrefix}-image-viewer__utils--tip`} content="镜像" showShadow={false}>
           <div className={`${classPrefix}-image-viewer__modal-icon`}>
             <MirrorIcon size="medium" onClick={onMirror} />
           </div>
-        </Tooltip>
-        <Tooltip
-          overlayClassName={`${classPrefix}-image-viewer__utils--tip`}
-          content="旋转"
-          destroyOnClose
-          placement="top"
-          showArrow
-          theme="default"
-        >
+        </TooltipLite>
+        <TooltipLite className={`${classPrefix}-image-viewer__utils--tip`} content="旋转" showShadow={false}>
           <div className={`${classPrefix}-image-viewer__modal-icon`}>
             <RotationIcon size="medium" onClick={() => onRotate(-ROTATE_COUNT)} />
           </div>
-        </Tooltip>
+        </TooltipLite>
         <ImageModelIcon size="medium" name="zoom-out" onClick={onZoomOut} />
         <ImageModelIcon
           className={`${classPrefix}-image-viewer__utils-scale`}
           size="medium"
           label={`${scale * 100}%`}
         />
         <ImageModelIcon size="medium" name="zoom-in" onClick={onZoom} />
-        <Tooltip
-          overlayClassName={`${classPrefix}-image-viewer__utils--tip`}
-          content="原始大小"
-          destroyOnClose
-          placement="top"
-          showArrow
-          theme="default"
-        >
+        <TooltipLite className={`${classPrefix}-image-viewer__utils--tip`} content="原始大小" showShadow={false}>
           <div className={`${classPrefix}-image-viewer__modal-icon`}>
             <ImageIcon
               size="medium"
@@ -211,7 +190,7 @@ export const ImageViewerUtils = ({
               }}
             />
           </div>
-        </Tooltip>
+        </TooltipLite>
         {currentImage.download && (
           <ImageModelIcon
             size="medium"

diff --git a/src/popup/utils/transition.ts b/src/popup/utils/transition.ts
@@ -1,7 +1,7 @@
 export interface IAnimationTransitionParams {
   classPrefix: String;
-  expandAnimation: boolean;
-  fadeAnimation: boolean;
+  expandAnimation?: boolean;
+  fadeAnimation?: boolean;
 }
 
 export const getTransitionParams = ({ classPrefix, expandAnimation, fadeAnimation }: IAnimationTransitionParams) => {

diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx
@@ -1,7 +1,7 @@
 import React, { MouseEvent, useState, forwardRef } from 'react';
 import classNames from 'classnames';
 import { StarFilledIcon as TdStarFilledIcon } from 'tdesign-icons-react';
-import Tooltip from '../tooltip';
+import { TooltipLite } from '../tooltip';
 import { TdRateProps } from './type';
 import { StyledProps } from '../common';
 import useConfig from '../hooks/useConfig';
@@ -85,14 +85,14 @@ const Rate = forwardRef((props: RateProps, ref: React.Ref<HTMLDivElement>) => {
             onMouseMove={(event) => mouseEnterHandler(event, index + 1)}
           >
             {showText ? (
-              <Tooltip key={index} content={texts[displayValue - 1]}>
+              <TooltipLite key={index} content={texts[displayValue - 1]}>
                 <div className={`${classPrefix}-rate__star-top`}>
                   <RateIcon size={size} color={activeColor} />
                 </div>
                 <div className={`${classPrefix}-rate__star-bottom`}>
                   <RateIcon size={size} color={defaultColor} />
                 </div>
-              </Tooltip>
+              </TooltipLite>
             ) : (
               <>
                 <div className={`${classPrefix}-rate__star-top`}>