diff --git a/src/hooks/useStatus.ts b/src/hooks/useStatus.ts index aad729d..923401a 100644 --- a/src/hooks/useStatus.ts +++ b/src/hooks/useStatus.ts @@ -146,11 +146,11 @@ export default function useStatus( } }; - const eventHandlers = React.useMemo<{ + const eventHandlers: { [STEP_PREPARE]?: MotionPrepareEventHandler; [STEP_START]?: MotionEventHandler; [STEP_ACTIVE]?: MotionEventHandler; - }>(() => getEventHandlers(currentStatus), [currentStatus]); + } = getEventHandlers(currentStatus); const [startStep, step] = useStepQueue( currentStatus, @@ -318,8 +318,8 @@ export default function useStatus( motionAppear ? 'NONE' : // Enter or Leave check - step === STEP_START || step === STEP_ACTIVE - ? styleStep === step - : true, + step === STEP_START || step === STEP_ACTIVE + ? styleStep === step + : true, ]; } diff --git a/tests/CSSMotion.spec.tsx b/tests/CSSMotion.spec.tsx index 8f4a946..2fd34fd 100644 --- a/tests/CSSMotion.spec.tsx +++ b/tests/CSSMotion.spec.tsx @@ -161,6 +161,45 @@ describe('CSSMotion', () => { }, ); + it('uses the latest active handler during a motion', () => { + const firstActive = jest.fn(() => ({ opacity: 0.1 })); + const latestActive = jest.fn(() => ({ opacity: 0.9 })); + const Demo = ({ + visible, + onEnterActive, + }: { + visible: boolean; + onEnterActive: CSSMotionProps['onEnterActive']; + }) => ( + + {({ style, className }) => ( +
+ )} + + ); + + const { container, rerender } = render( + , + ); + rerender(); + rerender(); + + act(() => { + jest.runAllTimers(); + }); + + expect(firstActive).not.toHaveBeenCalled(); + expect(latestActive).toHaveBeenCalledTimes(1); + expect(container.querySelector('.motion-box')).toHaveStyle({ + opacity: '0.9', + }); + }); + it('leaveClassName should add to dom', () => { const genMotion = props => { const { visible, leavedClassName } = props;