From e7f69509405bf5eddeac753b8988d5debe1814b2 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Wed, 16 Jan 2019 12:35:34 +0000
Subject: [PATCH] transition between detail view panels on mobile
---
.../app/src/components/DetailView/index.js | 62 ++++++++++++++++---
.../components/Transitions/SlideInRight.js | 33 ++++++++++
.../components/Transitions/SlideOutLeft.js | 32 ++++++++++
3 files changed, 120 insertions(+), 7 deletions(-)
create mode 100644 opentech/static_src/src/app/src/components/Transitions/SlideInRight.js
create mode 100644 opentech/static_src/src/app/src/components/Transitions/SlideOutLeft.js
diff --git a/opentech/static_src/src/app/src/components/DetailView/index.js b/opentech/static_src/src/app/src/components/DetailView/index.js
index 41935c9ba..49005ae40 100644
--- a/opentech/static_src/src/app/src/components/DetailView/index.js
+++ b/opentech/static_src/src/app/src/components/DetailView/index.js
@@ -1,18 +1,66 @@
-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;
+
diff --git a/opentech/static_src/src/app/src/components/Transitions/SlideInRight.js b/opentech/static_src/src/app/src/components/Transitions/SlideInRight.js
new file mode 100644
index 000000000..f0d7588cd
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/Transitions/SlideInRight.js
@@ -0,0 +1,33 @@
+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
diff --git a/opentech/static_src/src/app/src/components/Transitions/SlideOutLeft.js b/opentech/static_src/src/app/src/components/Transitions/SlideOutLeft.js
new file mode 100644
index 000000000..572752043
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/Transitions/SlideOutLeft.js
@@ -0,0 +1,32 @@
+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
--
GitLab