feat(popover): fix transition

fix popover transition, change Transition to CSSTransition BREAKING CHANGE: fix popover transition, change Transition to CSSTransition
core-ds · Jan 22, 2021 · f8564bc · f8564bc
1 parent 439148d
commit f8564bc
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 56 deletions.
diff --git a/packages/popover/src/Component.stories.mdx b/packages/popover/src/Component.stories.mdx
@@ -36,7 +36,7 @@ import { name, version } from '../package.json';
         const handleButtonRef = node => {
             setButtonElement(node);
         };
-        const transitionTimeout = number('transition.timeout (ms)', 0);
+        const transitionTimeout = number('transition.timeout (ms)', 300);
         return (
             <div
                 style={{

diff --git a/packages/popover/src/Component.tsx b/packages/popover/src/Component.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback, CSSProperties, MutableRefObject } from 'react';
 import cn from 'classnames';
-import { Transition } from 'react-transition-group';
-import { TransitionProps } from 'react-transition-group/Transition';
+import { CSSTransition } from 'react-transition-group';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { usePopper } from 'react-popper';
 import { BasePlacement, VariationPlacement, Obj } from '@popperjs/core';
 
@@ -68,10 +68,14 @@ export type PopoverProps = {
     getPortalContainer?: () => HTMLElement;
 
     /**
-     * Transition props, прокидываются в компонент Transition.
-     * См. https://reactcommunity.org/react-transition-group/transition
+     * CSSTransitionProps, прокидываются в компонент CSSTransitionProps.
      */
-    transition?: Partial<TransitionProps>;
+    transition?: CSSTransitionProps;
+
+    /**
+     * Выставляет кастомное свойство transition-duration
+     */
+    transitionDuration?: CSSProperties['transitionDuration'];
 
     /**
      * Рендерит компонент, обернутый в Transition
@@ -94,7 +98,7 @@ const TRANSITION_DURATION = 300;
 export const Popover: React.FC<PopoverProps> = ({
     children,
     getPortalContainer,
-    transition = {},
+    transition = { timeout: TRANSITION_DURATION },
     anchorElement,
     offset = [0, 0],
     withArrow = false,
@@ -106,6 +110,7 @@ export const Popover: React.FC<PopoverProps> = ({
     open,
     dataTestId,
     update,
+    transitionDuration = `${transition.timeout}ms`,
 }) => {
     const [referenceElement, setReferenceElement] = useState<RefElement>(anchorElement);
     const [popperElement, setPopperElement] = useState<RefElement>(null);
@@ -151,53 +156,49 @@ export const Popover: React.FC<PopoverProps> = ({
         }
     }, [updatePopper, update]);
 
-    const renderPortal = (showContent: boolean, className?: string, style?: CSSProperties) => (
+    const renderContent = (style?: CSSProperties) => {
+        return (
+            <div
+                ref={setPopperElement}
+                className={cn(styles.component, popperClassName)}
+                style={{
+                    ...popperStyles.popper,
+                    ...style,
+                }}
+                data-test-id={dataTestId}
+                {...attributes.popper}
+            >
+                {children}
+                {withArrow && (
+                    <div
+                        ref={setArrowElement}
+                        style={popperStyles.arrow}
+                        className={cn(styles.arrow, arrowClassName)}
+                    />
+                )}
+            </div>
+        );
+    };
+
+    return (
         <Portal getPortalContainer={getPortalContainer}>
-            {showContent && (
-                <div
-                    ref={setPopperElement}
-                    className={cn(styles.component, className, popperClassName)}
-                    style={{
-                        ...popperStyles.popper,
-                        ...style,
+            {withTransition ? (
+                <CSSTransition
+                    unmountOnExit={true}
+                    classNames={{
+                        enter: styles.enter,
+                        enterActive: styles.enterActive,
+                        exit: styles.exit,
+                        exitActive: styles.exitActive,
                     }}
-                    data-test-id={dataTestId}
-                    {...attributes.popper}
+                    {...transition}
+                    in={open}
                 >
-                    {children}
-                    {withArrow && (
-                        <div
-                            ref={setArrowElement}
-                            style={popperStyles.arrow}
-                            className={cn(styles.arrow, arrowClassName)}
-                        />
-                    )}
-                </div>
+                    {renderContent({ transitionDuration })}
+                </CSSTransition>
+            ) : (
+                open && renderContent()
             )}
         </Portal>
     );
-
-    if (withTransition) {
-        const timeout = transition.timeout === undefined ? TRANSITION_DURATION : transition.timeout;
-
-        const transitionProps = {
-            mountOnEnter: true,
-            unmountOnExit: true,
-            ...transition,
-            in: open,
-            timeout,
-        };
-
-        return (
-            <Transition {...transitionProps}>
-                {status =>
-                    renderPortal(true, cn(styles[status], status), {
-                        transitionDuration: `${timeout}ms`,
-                    })
-                }
-            </Transition>
-        );
-    }
-
-    return renderPortal(open);
 };
diff --git a/packages/popover/src/__snapshots__/Component.test.tsx.snap b/packages/popover/src/__snapshots__/Component.test.tsx.snap
@@ -9,7 +9,7 @@ Object {
       alfa-portal-container=""
     >
       <div
-        class="component entered entered"
+        class="component"
         data-popper-escaped="true"
         data-popper-placement="left"
         data-popper-reference-hidden="true"

diff --git a/packages/popover/src/index.module.css b/packages/popover/src/index.module.css
@@ -74,18 +74,18 @@
     }
 }
 
-.entering {
+.enter {
     opacity: 0;
 }
 
-.entered {
+.enterActive {
     opacity: 1;
 }
 
-.exiting {
-    opacity: 0;
+.exit {
+    opacity: 1;
 }
 
-.exited {
+.exitActive {
     opacity: 0;
 }