refactor: retire deprecated api (#511)

* refactor: Remove deprecated props and related code

* refactor: Remove deprecated motion-related utility functions and props

* fix: lint fix

* chore: demo fix

Author: aojunhao123

docs/examples/body-overflow.tsx

@@ -40,14 +40,14 @@ export default () => {
 
       <Trigger
         arrow
-        // forceRender
-        // action="click"
         popupVisible={open}
         onPopupVisibleChange={(next) => {
           console.log('Visible Change:', next);
           setOpen(next);
         }}
-        popupTransitionName="rc-trigger-popup-zoom"
+        popupMotion={{
+          motionName: 'rc-trigger-popup-zoom',
+        }}
         popup={
           <div
             style={{
@@ -104,7 +104,9 @@ export default () => {
           console.log('Visible Change:', next);
           setOpen1(next);
         }}
-        popupTransitionName="rc-trigger-popup-zoom"
+        popupMotion={{
+          motionName: 'rc-trigger-popup-zoom',
+        }}
         popup={
           <div
             style={{
@@ -158,7 +160,9 @@ export default () => {
           console.log('Visible Change:', next);
           setOpen2(next);
         }}
-        popupTransitionName="rc-trigger-popup-zoom"
+        popupMotion={{
+          motionName: 'rc-trigger-popup-zoom',
+        }}
         popup={
           <div
             style={{
@@ -205,7 +209,9 @@ export default () => {
           console.log('Visible Change:', next);
           setOpen3(next);
         }}
-        popupTransitionName="rc-trigger-popup-zoom"
+        popupMotion={{
+          motionName: 'rc-trigger-popup-zoom',
+        }}
         popup={
           <div
             style={{

docs/examples/case.tsx

@@ -202,7 +202,7 @@ const Demo = () => {
               },
             }}
             popupPlacement={placement}
-            destroyPopupOnHide={destroyPopupOnHide}
+            autoDestroy={destroyPopupOnHide}
             mask={mask}
             maskMotion={motion ? MaskMotion : null}
             maskClosable={maskClosable}

docs/examples/container.tsx

@@ -160,7 +160,9 @@ export default () => {
                   Popup
                 </div>
               }
-              popupTransitionName="rc-trigger-popup-zoom"
+              popupMotion={{
+                motionName: 'rc-trigger-popup-zoom',
+              }}
               popupStyle={{ boxShadow: '0 0 5px red' }}
               popupVisible={visible}
               onPopupVisibleChange={(nextVisible) => {

docs/examples/simple.tsx

@@ -353,13 +353,14 @@ class Test extends React.Component<any, TestState> {
             getPopupContainer={getPopupContainer}
             popupAlign={this.getPopupAlign()}
             popupPlacement={state.placement}
-            destroyPopupOnHide={this.state.destroyPopupOnHide}
             autoDestroy={this.state.autoDestroy}
             // zIndex={40}
             mask={this.state.mask}
             maskClosable={this.state.maskClosable}
             stretch={this.state.stretch}
-            maskAnimation="fade"
+            maskMotion={{
+              motionName: 'rc-trigger-mask-fade',
+            }}
             // mouseEnterDelay={0.1}
             // mouseLeaveDelay={0.1}
             action={actions}
@@ -372,7 +373,9 @@ class Test extends React.Component<any, TestState> {
               boxSizing: 'border-box',
             }}
             popup={<div>i am a popup</div>}
-            popupTransitionName={state.transitionName}
+            popupMotion={{
+              motionName: state.transitionName,
+            }}
           >
             <RefTarget />
           </Trigger>

src/index.tsx

@@ -20,13 +20,11 @@ import useWinClick from './hooks/useWinClick';
 import type {
   ActionType,
   AlignType,
-  AnimationType,
   ArrowPos,
   ArrowTypeOuter,
   BuildInPlacements,
-  TransitionNameType,
 } from './interface';
-import { getAlignPopupClassName, getMotion } from './util';
+import { getAlignPopupClassName } from './util';
 
 export type {
   ActionType,
@@ -72,9 +70,6 @@ export interface TriggerProps {
   forceRender?: boolean;
   autoDestroy?: boolean;
 
-  /** @deprecated Please use `autoDestroy` instead */
-  destroyPopupOnHide?: boolean;
-
   // ==================== Mask =====================
   mask?: boolean;
   maskClosable?: boolean;
@@ -85,15 +80,6 @@ export interface TriggerProps {
   /** Set mask motion. You can ref `rc-motion` for more info. */
   maskMotion?: CSSMotionProps;
 
-  /** @deprecated Please us `popupMotion` instead. */
-  popupTransitionName?: TransitionNameType;
-  /** @deprecated Please us `popupMotion` instead. */
-  popupAnimation?: AnimationType;
-  /** @deprecated Please us `maskMotion` instead. */
-  maskTransitionName?: TransitionNameType;
-  /** @deprecated Please us `maskMotion` instead. */
-  maskAnimation?: AnimationType;
-
   // ==================== Delay ====================
   mouseEnterDelay?: number;
   mouseLeaveDelay?: number;
@@ -123,10 +109,6 @@ export interface TriggerProps {
   // ==================== Arrow ====================
   arrow?: boolean | ArrowTypeOuter;
 
-  // ================= Deprecated ==================
-  /** @deprecated Add `className` on `children`. Please add `className` directly instead. */
-  className?: string;
-
   // =================== Private ===================
   /**
    * @private Get trigger DOM node.
@@ -174,7 +156,6 @@ export function generateTrigger(
       getPopupContainer,
       forceRender,
       autoDestroy,
-      destroyPopupOnHide,
 
       // Popup
       popup,
@@ -200,21 +181,14 @@ export function generateTrigger(
       // Motion
       popupMotion,
       maskMotion,
-      popupTransitionName,
-      popupAnimation,
-      maskTransitionName,
-      maskAnimation,
-
-      // Deprecated
-      className,
 
       // Private
       getTriggerDOMNode,
 
       ...restProps
     } = props;
 
-    const mergedAutoDestroy = autoDestroy || destroyPopupOnHide || false;
+    const mergedAutoDestroy = autoDestroy || false;
 
     // =========================== Mobile ===========================
     const [mobile, setMobile] = React.useState(false);
@@ -289,21 +263,6 @@ export function generateTrigger(
       );
     });
 
-    // =========================== Motion ===========================
-    const mergePopupMotion = getMotion(
-      prefixCls,
-      popupMotion,
-      popupAnimation,
-      popupTransitionName,
-    );
-
-    const mergeMaskMotion = getMotion(
-      prefixCls,
-      maskMotion,
-      maskAnimation,
-      maskTransitionName,
-    );
-
     // ============================ Open ============================
     const [internalOpen, setInternalOpen] = React.useState(
       defaultPopupVisible || false,
@@ -639,11 +598,6 @@ export function generateTrigger(
       };
     }
 
-    // ========================= ClassName ==========================
-    if (className) {
-      cloneProps.className = classNames(originChildProps.className, className);
-    }
-
     // =========================== Render ===========================
     const mergedChildrenProps = {
       ...originChildProps,
@@ -726,8 +680,8 @@ export function generateTrigger(
             // Mask
             mask={mask}
             // Motion
-            motion={mergePopupMotion}
-            maskMotion={mergeMaskMotion}
+            motion={popupMotion}
+            maskMotion={maskMotion}
             onVisibleChanged={onVisibleChanged}
             onPrepare={onPrepare}
             // Portal

src/util.ts

@@ -1,9 +1,6 @@
-import type { CSSMotionProps } from 'rc-motion';
 import type {
   AlignType,
-  AnimationType,
   BuildInPlacements,
-  TransitionNameType,
 } from './interface';
 
 function isPointsEq(
@@ -39,32 +36,6 @@ export function getAlignPopupClassName(
   return '';
 }
 
-/** @deprecated We should not use this if we can refactor all deps */
-export function getMotion(
-  prefixCls: string,
-  motion: CSSMotionProps,
-  animation: AnimationType,
-  transitionName: TransitionNameType,
-): CSSMotionProps {
-  if (motion) {
-    return motion;
-  }
-
-  if (animation) {
-    return {
-      motionName: `${prefixCls}-${animation}`,
-    };
-  }
-
-  if (transitionName) {
-    return {
-      motionName: transitionName,
-    };
-  }
-
-  return null;
-}
-
 export function getWin(ele: HTMLElement) {
   return ele.ownerDocument.defaultView;
 }

tests/basic.test.jsx

@@ -384,25 +384,6 @@ describe('Trigger.Basic', () => {
       trigger(container, '.target');
       expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
     });
-
-    it('set true will destroy tooltip on hide', () => {
-      const { container } = render(
-        <Trigger
-          action={['click']}
-          destroyPopupOnHide
-          popupAlign={placementAlignMap.topRight}
-          popup={<strong>trigger</strong>}
-        >
-          <div className="target">click</div>
-        </Trigger>,
-      );
-
-      trigger(container, '.target');
-      expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-
-      trigger(container, '.target');
-      expect(document.querySelector('.rc-trigger-popup')).toBeFalsy();
-    });
   });
 
   describe('support autoDestroy', () => {
@@ -603,47 +584,6 @@ describe('Trigger.Basic', () => {
     expect(container.querySelector('div')).not.toHaveAttribute('class');
   });
 
-  it('support className', () => {
-    const { container } = render(
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={<strong className="x-content">tooltip2</strong>}
-        className="className-in-trigger"
-      >
-        <div className="target">click</div>
-      </Trigger>,
-    );
-
-    expect(container.querySelector('div')).toHaveClass(
-      'target className-in-trigger',
-    );
-  });
-
-  it('support className in nested Trigger', () => {
-    const { container } = render(
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={<strong className="x-content">tooltip2</strong>}
-        className="className-in-trigger-2"
-      >
-        <Trigger
-          action={['click']}
-          popupAlign={placementAlignMap.left}
-          popup={<strong className="x-content">tooltip2</strong>}
-          className="className-in-trigger-1"
-        >
-          <div className="target">click</div>
-        </Trigger>
-      </Trigger>,
-    );
-
-    expect(container.querySelector('div').className).toBe(
-      'target className-in-trigger-1 className-in-trigger-2',
-    );
-  });
-
   it('support function component', () => {
     const NoRef = React.forwardRef((props, ref) => {
       React.useImperativeHandle(ref, () => null);

tests/mask.test.jsx

@@ -21,7 +21,9 @@ describe('Trigger.Mask', () => {
         popupAlign={placementAlignMap.left}
         popup={<strong className="x-content" />}
         mask
-        maskTransitionName="bamboo"
+        maskMotion={{
+          motionName: 'bamboo',
+        }}
       >
         <div className="target">click</div>
       </Trigger>,