diff --git a/docs/examples/body-overflow.tsx b/docs/examples/body-overflow.tsx index 744e86a3..d4b272ea 100644 --- a/docs/examples/body-overflow.tsx +++ b/docs/examples/body-overflow.tsx @@ -40,14 +40,14 @@ export default () => { { console.log('Visible Change:', next); setOpen(next); }} - popupTransitionName="rc-trigger-popup-zoom" + popupMotion={{ + motionName: 'rc-trigger-popup-zoom', + }} popup={
{ console.log('Visible Change:', next); setOpen1(next); }} - popupTransitionName="rc-trigger-popup-zoom" + popupMotion={{ + motionName: 'rc-trigger-popup-zoom', + }} popup={
{ console.log('Visible Change:', next); setOpen2(next); }} - popupTransitionName="rc-trigger-popup-zoom" + popupMotion={{ + motionName: 'rc-trigger-popup-zoom', + }} popup={
{ console.log('Visible Change:', next); setOpen3(next); }} - popupTransitionName="rc-trigger-popup-zoom" + popupMotion={{ + motionName: 'rc-trigger-popup-zoom', + }} popup={
{ }, }} popupPlacement={placement} - destroyPopupOnHide={destroyPopupOnHide} + autoDestroy={destroyPopupOnHide} mask={mask} maskMotion={motion ? MaskMotion : null} maskClosable={maskClosable} diff --git a/docs/examples/container.tsx b/docs/examples/container.tsx index 3a00aa00..9ea1ff09 100644 --- a/docs/examples/container.tsx +++ b/docs/examples/container.tsx @@ -160,7 +160,9 @@ export default () => { Popup
} - popupTransitionName="rc-trigger-popup-zoom" + popupMotion={{ + motionName: 'rc-trigger-popup-zoom', + }} popupStyle={{ boxShadow: '0 0 5px red' }} popupVisible={visible} onPopupVisibleChange={(nextVisible) => { diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx index aa4c7033..5e85d544 100644 --- a/docs/examples/simple.tsx +++ b/docs/examples/simple.tsx @@ -353,13 +353,14 @@ class Test extends React.Component { 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 { boxSizing: 'border-box', }} popup={
i am a popup
} - popupTransitionName={state.transitionName} + popupMotion={{ + motionName: state.transitionName, + }} > diff --git a/src/index.tsx b/src/index.tsx index ac4b841e..49e4cbfb 100644 --- a/src/index.tsx +++ b/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,13 +181,6 @@ export function generateTrigger( // Motion popupMotion, maskMotion, - popupTransitionName, - popupAnimation, - maskTransitionName, - maskAnimation, - - // Deprecated - className, // Private getTriggerDOMNode, @@ -214,7 +188,7 @@ export function generateTrigger( ...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 diff --git a/src/util.ts b/src/util.ts index 5170d86b..cc13eb60 100644 --- a/src/util.ts +++ b/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; } diff --git a/tests/basic.test.jsx b/tests/basic.test.jsx index 071878b6..58b912b8 100644 --- a/tests/basic.test.jsx +++ b/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} - > -
click
- , - ); - - 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( - tooltip2} - className="className-in-trigger" - > -
click
- , - ); - - expect(container.querySelector('div')).toHaveClass( - 'target className-in-trigger', - ); - }); - - it('support className in nested Trigger', () => { - const { container } = render( - tooltip2} - className="className-in-trigger-2" - > - tooltip2} - className="className-in-trigger-1" - > -
click
- - , - ); - - 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); diff --git a/tests/mask.test.jsx b/tests/mask.test.jsx index f4e9e129..f27d239d 100644 --- a/tests/mask.test.jsx +++ b/tests/mask.test.jsx @@ -21,7 +21,9 @@ describe('Trigger.Mask', () => { popupAlign={placementAlignMap.left} popup={} mask - maskTransitionName="bamboo" + maskMotion={{ + motionName: 'bamboo', + }} >
click
, diff --git a/tests/util.test.jsx b/tests/util.test.jsx deleted file mode 100644 index efa899d6..00000000 --- a/tests/util.test.jsx +++ /dev/null @@ -1,68 +0,0 @@ -import { getMotion } from '../src/util'; -// import MockTrigger from '../src/mock'; - -/** - * dom-align internal default position is `-999`. - * We do not need to simulate full position, check offset only. - */ -describe('Trigger.Util', () => { - describe('getMotion', () => { - const prefixCls = 'test'; - const motion = { - motionName: 'motion', - }; - const transitionName = 'transition'; - const animation = 'animation'; - - it('motion is first', () => { - expect(getMotion(prefixCls, motion, animation, transitionName)).toEqual({ - motionName: 'motion', - }); - }); - - it('animation is second', () => { - expect(getMotion(prefixCls, null, animation, transitionName)).toEqual({ - motionName: 'test-animation', - }); - }); - - it('transition is last', () => { - expect(getMotion(prefixCls, null, null, transitionName)).toEqual({ - motionName: 'transition', - }); - }); - }); - - // describe('mock', () => { - // it('close', () => { - // const { container } = render( - // bamboo
} - // > - //
light
- // , - // ); - - // expect(container.innerHTML).toEqual('
light
'); - // }); - - // it('open', () => { - // const { container } = render( - // bamboo
} - // popupVisible - // > - //
light
- // , - // ); - - // expect(container.innerHTML).toEqual( - // '
light
bamboo
', - // ); - // }); - // }); -});