feat: implement ShowIf component

src/components/ShowIf/__test__/showIf.spec.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ShowIf from '..';
+
+describe('<ShowIf />', () => {
+    it('should render the children in the DOM when isTrue is false', () => {
+        const component = mount(
+            <ShowIf>
+                <span data-id="test" />
+            </ShowIf>,
+        );
+        expect(component.find('[data-id="test"]').exists()).toBe(true);
+    });
+});

src/components/ShowIf/helpers/__test__/getElementDimensions.spec.js

@@ -0,0 +1,64 @@
+/* eslint-disable func-names */
+/* eslint-disable object-shorthand */
+import getElementDimensions from '../getElementDimensions';
+
+describe('getElementDimensions', () => {
+    it('should return the right dimensions', () => {
+        const dimensions = { width: 50, height: 50 };
+        const element = {
+            style: {
+                position: 'relative',
+                display: 'none',
+                visibility: 'hidden',
+            },
+            getBoundingClientRect: () => dimensions,
+        };
+        expect(getElementDimensions(element)).toEqual(dimensions);
+    });
+
+    it('should modify the styles to get client rect correctly', () => {
+        const dimensions = { width: 50, height: 50 };
+        const element = {
+            style: {
+                position: 'relative',
+                display: 'none',
+                visibility: 'hidden',
+            },
+            getBoundingClientRect: function() {
+                const { position, visibility, display } = this.style;
+                if (position === 'absolute' && visibility === 'hidden' && display === 'block') {
+                    return dimensions;
+                }
+                return undefined;
+            },
+        };
+        getElementDimensions(element);
+        expect(element.style).toEqual({
+            position: 'relative',
+            display: 'none',
+            visibility: 'hidden',
+        });
+    });
+
+    it('should leave the element styles as passed', () => {
+        const dimensions = { width: 50, height: 50 };
+        const element = {
+            style: {
+                position: 'relative',
+                display: 'none',
+                visibility: 'hidden',
+            },
+            getBoundingClientRect: () => dimensions,
+        };
+        getElementDimensions(element);
+        expect(element.style).toEqual({
+            position: 'relative',
+            display: 'none',
+            visibility: 'hidden',
+        });
+    });
+
+    it('should return undefined when there is no element', () => {
+        expect(getElementDimensions(null)).toBe(undefined);
+    });
+});

src/components/ShowIf/helpers/getElementDimensions.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-param-reassign */
+const getElementBoundingClientRect = element => {
+    if (element) {
+        const { position, visibility, display } = element.style;
+        element.style.position = 'absolute';
+        element.style.visibility = 'hidden';
+        element.style.display = 'block';
+        const rect = element.getBoundingClientRect();
+        element.style.position = position;
+        element.style.visibility = visibility;
+        element.style.display = display;
+        return rect;
+    }
+    return undefined;
+};
+
+export default getElementBoundingClientRect;

src/components/ShowIf/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../types';
+
+type AnimationName = 'fade' | 'slide';
+
+export interface ShowIfProps extends BaseProps {
+    isTrue?: any;
+    inAnimation?: AnimationName;
+    outAnimation?: AnimationName;
+    children?: ReactNode;
+}
+
+export default function(props: ShowIfProps): JSX.Element | null;

src/components/ShowIf/index.js

@@ -0,0 +1,78 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import AnimatedContainer from './styled';
+import getElementBoundingClientRect from './helpers/getElementDimensions';
+
+/**
+ * A component that shows its contents when a condition is met. Works similar to `RenderIf`,
+ * but `ShowIf` does not remove the elements from the DOM, and animates the content in and out.
+ */
+const ShowIf = ({ id, className, style, isTrue, inAnimation, outAnimation, children }) => {
+    const [animation, setAnimation] = useState();
+    const [isVisible, setIsVisible] = useState(isTrue);
+    const [dimensions, setDimensions] = useState();
+    const ref = useRef();
+
+    useLayoutEffect(() => {
+        if (isTrue) {
+            const rect = getElementBoundingClientRect(ref.current);
+            setDimensions(rect);
+            setIsVisible(true);
+            setAnimation(`${inAnimation}In`);
+        } else {
+            setAnimation(`${outAnimation}Out`);
+        }
+    }, [isTrue, inAnimation, outAnimation]);
+
+    const handleAnimationEnd = event => {
+        if (event.animationName.includes('Out')) {
+            setIsVisible(false);
+        }
+    };
+
+    return (
+        <AnimatedContainer
+            id={id}
+            className={className}
+            style={style}
+            animation={animation}
+            isVisible={isVisible}
+            dimensions={dimensions}
+            onAnimationEnd={handleAnimationEnd}
+            ref={ref}
+        >
+            {children}
+        </AnimatedContainer>
+    );
+};
+
+ShowIf.propTypes = {
+    /** The id of the outer element. */
+    id: PropTypes.string,
+    /** A CSS class for the outer element, in addition to the component's base classes. */
+    className: PropTypes.string,
+    /** An object with custom style applied for the outer element. */
+    style: PropTypes.object,
+    /** Indicates whether the component content is showed or not. If is set to true, then is showed the component content. */
+    isTrue: PropTypes.any,
+    inAnimation: PropTypes.oneOf(['fade', 'slide']),
+    outAnimation: PropTypes.oneOf(['fade', 'slide']),
+    /** The content of the component. */
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.object,
+        PropTypes.node,
+    ]),
+};
+
+ShowIf.defaultProps = {
+    id: undefined,
+    className: undefined,
+    style: undefined,
+    isTrue: false,
+    inAnimation: 'fade',
+    outAnimation: 'fade',
+    children: [],
+};
+
+export default ShowIf;