Move to react-spring 6 (#411)

Move from react-motion to react-spring. The module src/springs.js is used instead of coming from Aragon UI. This is because the springs coming with the current version of Aragon UI (0.27) are not compatible with react-spring 6. The next Aragon UI version will fix that, and the module src/spring.js will be removed at this point. Fix a number of other things: - Remove the (commented) notifications panel. - Remove ExpandableBox (not used anymore). - Home app: use <AppView>, better centering, slightly smaller cards, better transition. - Menu apps loading: fix the multiple instances issue, make the animation simpler and faster to give a similar feel than what we have on the permissions app or the navigation bar in Aragon UI. - Other minor tweaks related to the way we manage transitions.
aragon · Nov 15, 2018 · 0349287 · 0349287
1 parent 19e6696
commit 0349287
Show file tree

Hide file tree

Showing 24 changed files with 430 additions and 635 deletions.
diff --git a/package.json b/package.json
@@ -41,9 +41,8 @@
     "react-container-dimensions": "^1.3.3",
     "react-display-name": "^0.2.3",
     "react-dom": "^16.3.2",
-    "react-motion": "^0.5.2",
     "react-onclickout": "^2.0.8",
-    "react-spring": "^5.4.4",
+    "react-spring": "^6.1.8",
     "resolve-pathname": "^2.2.0",
     "styled-components": "^3.3.3",
     "underscore": "1.8.3",

diff --git a/src/apps/Permissions/Permissions.js b/src/apps/Permissions/Permissions.js
@@ -28,7 +28,9 @@ class Permissions extends React.Component {
   }
 
   componentDidMount() {
-    this.setState({ animateScreens: true })
+    setTimeout(() => {
+      this.setState({ animateScreens: true })
+    }, 0)
   }
 
   componentDidUpdate(prevProps) {
@@ -215,39 +217,50 @@ class Permissions extends React.Component {
                   }}
                 />
 
-                <Screen position={0} animate={animateScreens}>
-                  {location.screen === 'home' && (
-                    <Home
-                      apps={apps}
-                      appsLoading={appsLoading}
-                      permissionsLoading={permissionsLoading}
-                      onOpenApp={this.handleOpenApp}
-                      onOpenEntity={this.handleOpenEntity}
-                    />
-                  )}
-                </Screen>
-
-                <Screen position={1} animate={animateScreens}>
-                  {['app', 'entity'].includes(location.screen) && (
-                    <React.Fragment>
-                      {location.screen === 'app' && (
-                        <AppPermissions
-                          app={location.app}
-                          loading={appsLoading}
-                          address={location.address}
-                          onManageRole={this.handleManageRole}
-                        />
-                      )}
-                      {location.screen === 'entity' && (
-                        <EntityPermissions
-                          title="Permissions granted"
-                          loading={appsLoading || permissionsLoading}
-                          address={location.address}
-                        />
-                      )}
-                    </React.Fragment>
-                  )}
-                </Screen>
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: '0',
+                    left: '0',
+                    right: '0',
+                    bottom: '0',
+                    overflowX: 'hidden',
+                  }}
+                >
+                  <Screen position={0} animate={animateScreens}>
+                    {location.screen === 'home' && (
+                      <Home
+                        apps={apps}
+                        appsLoading={appsLoading}
+                        permissionsLoading={permissionsLoading}
+                        onOpenApp={this.handleOpenApp}
+                        onOpenEntity={this.handleOpenEntity}
+                      />
+                    )}
+                  </Screen>
+
+                  <Screen position={1} animate={animateScreens}>
+                    {['app', 'entity'].includes(location.screen) && (
+                      <React.Fragment>
+                        {location.screen === 'app' && (
+                          <AppPermissions
+                            app={location.app}
+                            loading={appsLoading}
+                            address={location.address}
+                            onManageRole={this.handleManageRole}
+                          />
+                        )}
+                        {location.screen === 'entity' && (
+                          <EntityPermissions
+                            title="Permissions granted"
+                            loading={appsLoading || permissionsLoading}
+                            address={location.address}
+                          />
+                        )}
+                      </React.Fragment>
+                    )}
+                  </Screen>
+                </div>
               </AppView>
 
               <AssignPermissionPanel

diff --git a/src/apps/Permissions/Screen.js b/src/apps/Permissions/Screen.js
@@ -1,41 +1,28 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { springs } from '@aragon/ui'
 import { Transition, animated } from 'react-spring'
+import springs from '../../springs'
 
 const SCREEN_SHIFT = 0.05
 
-const Main = ({ children, opacity, left, active }) => (
-  <animated.div
-    style={{
-      zIndex: active ? '2' : '1',
-      opacity,
-      transform: left.interpolate(t => `translate3d(${t * 100}%, 0, 0)`),
-    }}
-  >
-    {children}
-  </animated.div>
-)
-
-Main.propTypes = {
-  active: PropTypes.bool.isRequired,
-  children: PropTypes.node.isRequired,
-  left: PropTypes.object.isRequired,
-  opacity: PropTypes.object.isRequired,
-}
-
 const Screen = ({ position, children, animate }) => (
   <Transition
-    from={{ left: position === 0 ? -SCREEN_SHIFT : SCREEN_SHIFT, opacity: 0 }}
+    items={children}
+    from={{
+      left: (position === 0 ? -SCREEN_SHIFT : SCREEN_SHIFT) * 100,
+      opacity: 0,
+    }}
     enter={{ left: 0, opacity: 1 }}
-    leave={{ left: position === 0 ? -SCREEN_SHIFT : SCREEN_SHIFT, opacity: 0 }}
-    config={springs.lazy}
+    leave={{
+      left: (position === 0 ? -SCREEN_SHIFT : SCREEN_SHIFT) * 100,
+      opacity: 0,
+    }}
+    config={springs.smooth}
     immediate={!animate}
-    active={Boolean(children)}
     native
   >
-    {children && (props => <StyledMain {...props} children={children} />)}
+    {children => children && (props => <Main {...props} children={children} />)}
   </Transition>
 )
 
@@ -45,7 +32,24 @@ Screen.propTypes = {
   position: PropTypes.number.isRequired,
 }
 
-const StyledMain = styled(Main)`
+const Main = ({ children, opacity, left }) => (
+  <StyledMain
+    style={{
+      opacity,
+      transform: left.interpolate(t => `translate3d(${t}%, 0, 0)`),
+    }}
+  >
+    {children}
+  </StyledMain>
+)
+
+Main.propTypes = {
+  children: PropTypes.node.isRequired,
+  left: PropTypes.object.isRequired,
+  opacity: PropTypes.object.isRequired,
+}
+
+const StyledMain = styled(animated.div)`
   overflow: hidden;
   position: absolute;
   top: 0;

diff --git a/src/components/App/AppLoadingProgressBar.js b/src/components/App/AppLoadingProgressBar.js
@@ -1,26 +1,29 @@
 import React from 'react'
 import styled from 'styled-components'
 import ContainerDimensions from 'react-container-dimensions'
-import { spring, Motion } from 'react-motion'
-import { theme, spring as springConf } from '@aragon/ui'
+import { Spring, animated } from 'react-spring'
+import { theme } from '@aragon/ui'
+import springs from '../../springs'
 
 const { accent } = theme
 
 const AppLoadingProgressBar = ({ hide, percent, ...props }) => (
-  <Motion
-    defaultStyle={{ opacity: 0, percentProgress: 0 }}
-    style={{
-      opacity: spring(Number(!hide), springConf('fast')),
-      percentProgress: spring(percent, springConf('fast')),
+  <Spring
+    config={springs.smooth}
+    from={{ opacity: 0, percentProgress: 0 }}
+    to={{
+      opacity: Number(!hide),
+      percentProgress: percent,
     }}
+    native
   >
     {({ opacity, percentProgress }) => (
       <ContainerDimensions>
         {({ width }) => (
           <StyledProgressBar
             style={{
               opacity: opacity,
-              width: `${(width * percentProgress) / 100}px`,
+              width: percentProgress.interpolate(v => `${(width * v) / 100}px`),
             }}
             {...props}
           >
@@ -29,11 +32,11 @@ const AppLoadingProgressBar = ({ hide, percent, ...props }) => (
         )}
       </ContainerDimensions>
     )}
-  </Motion>
+  </Spring>
 )
 
 // Mimic nprogress with our own accent colour
-const StyledProgressBar = styled.div`
+const StyledProgressBar = styled(animated.div)`
   position: absolute;
   top: 0;
   height: 2px;

diff --git a/src/components/ExpandableBox/ExpandableBox.js b/src/components/ExpandableBox/ExpandableBox.js