transition between detail view panels on mobile

opentech/static_src/src/app/src/components/DetailView/index.js

-import React from 'react';
+import React, { Component } from 'react'
 import PropTypes from 'prop-types';
 
 import DisplayPanel from '@components/DisplayPanel';
+import SlideInRight from '@components/Transitions/SlideInRight'
+import SlideOutLeft from '@components/Transitions/SlideOutLeft'
+
 import './style.scss';
 
-const DetailView = ({ listing, display }) => (
-    <div className="detail-view">
-        {listing}
-        <DisplayPanel />
-    </div>
-);
+class DetailView extends Component {
+    constructor() {
+        super();
+        this.state = {
+            width: window.innerWidth,
+            hasActiveApplication: false
+        }
+    }
+
+    componentWillMount() {
+        window.addEventListener('resize', this.handleWindowSizeChange.bind(this));
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.handleWindowSizeChange.bind(this));
+    }
+
+    handleWindowSizeChange = () => {
+        this.setState({
+            width: window.innerWidth
+        })
+    }
+
+    render() {
+        const { listing } = this.props;
+        const { width, hasActiveApplication } = this.state;
+        const isMobile = width < 1024;
+
+        if (isMobile) {
+            return (
+                <div className="detail-view">
+                    <SlideInRight in={!hasActiveApplication}>
+                        <DisplayPanel />
+                    </SlideInRight>
+                    <SlideOutLeft in={hasActiveApplication}>
+                        {listing}
+                    </SlideOutLeft>
+                </div>
+            )
+        } else {
+            return (
+                <div className="detail-view">
+                    {listing}
+                    <DisplayPanel />
+                </div>
+            )
+        }
+
+    }
+};
 
 DetailView.propTypes = {
     listing: PropTypes.node.isRequired,
 };
 
 export default DetailView;
+

opentech/static_src/src/app/src/components/Transitions/SlideInRight.js

+import React from 'react'
+import Transition from 'react-transition-group/Transition';
+
+const SlideInRight = ({ children, in: inProp }) => {
+    const duration = 250;
+
+    const defaultStyle = {
+        transition: `transform ${duration}ms ease-in-out`,
+        transform: 'translate3d(0, 0, 0)',
+        position: 'absolute',
+        zIndex: 2,
+        width: '100%'
+    }
+
+    const transitionStyles = {
+        entering: { transform: 'translate3d(0, 0, 0)' },
+        entered: { transform: 'translate3d(100%, 0, 0)' },
+        exiting: { transform: 'translate3d(100%, 0, 0)' },
+        exited: { transform: 'translate3d(0, 0, 0)' }
+    };
+
+    return (
+        <Transition in={inProp} timeout={duration}>
+            {(state) => (
+                <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
+                    {children}
+                </div>
+            )}
+        </Transition>
+    )
+}
+
+export default SlideInRight

opentech/static_src/src/app/src/components/Transitions/SlideOutLeft.js

+import React from 'react'
+import Transition from 'react-transition-group/Transition';
+
+const SlideOutLeft = ({ children, in: inProp }) => {
+    const duration = 250;
+
+    const defaultStyle = {
+        transition: `transform ${duration}ms ease-in-out`,
+        transform: 'translate3d(0, 0, 0)',
+        position: 'absolute',
+        width: '100%'
+    }
+
+    const transitionStyles = {
+        entering: { transform: 'translate3d(0, 0, 0)' },
+        entered: { transform: 'translate3d(-100%, 0, 0)' },
+        exiting: { transform: 'translate3d(-100%, 0, 0)' },
+        exited: { transform: 'translate3d(0, 0, 0)' }
+    };
+
+    return (
+        <Transition in={inProp} timeout={duration}>
+            {(state) => (
+                <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
+                    {children}
+                </div>
+            )}
+        </Transition>
+    )
+}
+
+export default SlideOutLeft