feat(core-components-popover): can render without Transition (#130)

* feat(core-components-popover): can render without Transition * test(core-components-popover): add withTransition test case
core-ds · May 27, 2020 · 2569a32 · 2569a32
1 parent 1ea79d1
commit 2569a32
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 32 deletions.
diff --git a/packages/popover/src/Component.stories.mdx b/packages/popover/src/Component.stories.mdx
@@ -62,6 +62,7 @@ import { Popover } from '@alfalab/core-components-popover';
                     transition={{ timeout: transitionTimeout }}
                     offset={[number('offset[0]', 0), number('offset[1]', 0)]}
                     withArrow={boolean('withArrow', false)}
+                    withTransition={boolean('withTransition', true)}
                 >
                     <div style={{ padding: '15px', width: '156px' }}>I am popover</div>
                 </Popover>
@@ -73,4 +74,4 @@ import { Popover } from '@alfalab/core-components-popover';
     })}
 </Story>
 
-<Props of={Popover} />
+<Props of={Popover} />
diff --git a/packages/popover/src/Component.test.tsx b/packages/popover/src/Component.test.tsx
@@ -84,6 +84,17 @@ describe('Styles tests', () => {
 });
 
 describe('Render tests', () => {
+    it('should render without Transition of withTransition is false', async () => {
+        const component = await renderPopover({
+            children: <div>I am popover</div>,
+            open: true,
+            anchorElement: document.body,
+            withTransition: false,
+        });
+
+        expect(component).toMatchSnapshot();
+    });
+
     it('should unmount without errors', async () => {
         const { unmount } = await renderPopover({
             children: <div>I am popover</div>,

diff --git a/packages/popover/src/Component.tsx b/packages/popover/src/Component.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, CSSProperties } from 'react';
 import cn from 'classnames';
 import { Transition } from 'react-transition-group';
 import { TransitionProps } from 'react-transition-group/Transition';
@@ -67,6 +67,11 @@ export type PopoverProps = {
      */
     transition?: Partial<TransitionProps>;
 
+    /**
+     * Рендерит компонент, обернутый в Transition
+     */
+    withTransition?: boolean;
+
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -82,6 +87,7 @@ export const Popover: React.FC<PopoverProps> = ({
     anchorElement,
     offset = [0, 0],
     withArrow = false,
+    withTransition = true,
     position = 'left',
     popperClassName,
     arrowClassName,
@@ -121,35 +127,53 @@ export const Popover: React.FC<PopoverProps> = ({
         }
     }, [update, arrowElement]);
 
-    const timeout = transition.timeout === undefined ? TRANSITION_DURATION : transition.timeout;
-
-    const props = { mountOnEnter: true, unmountOnExit: true, ...transition, in: open, timeout };
-
-    return (
-        <Transition {...props}>
-            {status => (
-                <Portal getPortalContainer={getPortalContainer}>
-                    <div
-                        ref={setPopperElement}
-                        className={cn(styles.component, styles[status], popperClassName, status)}
-                        style={{
-                            ...popperStyles.popper,
-                            transitionDuration: `${timeout}ms`,
-                        }}
-                        data-test-id={dataTestId}
-                        {...attributes.popper}
-                    >
-                        {children}
-                        {withArrow && (
-                            <div
-                                ref={setArrowElement}
-                                style={popperStyles.arrow}
-                                className={cn(styles.arrow, arrowClassName)}
-                            />
-                        )}
-                    </div>
-                </Portal>
+    const renderPortal = (showContent: boolean, className?: string, style?: CSSProperties) => (
+        <Portal getPortalContainer={getPortalContainer}>
+            {showContent && (
+                <div
+                    ref={setPopperElement}
+                    className={cn(styles.component, className, 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>
             )}
-        </Transition>
+        </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
@@ -75,3 +75,79 @@ Object {
   "unmount": [Function],
 }
 `;
+
+exports[`Render tests should render without Transition of withTransition is false 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div
+      alfa-portal-container=""
+    >
+      <div
+        class="component"
+        data-popper-escaped="true"
+        data-popper-placement="left"
+        data-popper-reference-hidden="true"
+        style="position: absolute; left: 0px; top: 0px; right: 0px; transform: translate(0px, 0px);"
+      >
+        <div>
+          I am popover
+        </div>
+      </div>
+    </div>
+    <div />
+  </body>,
+  "container": <div />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/packages/tooltip/src/__snapshots__/Component.test.tsx.snap b/packages/tooltip/src/__snapshots__/Component.test.tsx.snap
@@ -88,7 +88,7 @@ Object {
       alfa-portal-container=""
     >
       <div
-        class="component [object Object] popper mountOnEnter unmountOnExit in timeout children"
+        class="component [object Object] mountOnEnter unmountOnExit in timeout children popper"
         data-popper-escaped="true"
         data-popper-placement="left"
         data-popper-reference-hidden="true"