app: Add some animations to the main window

evanpurkhiser · Nov 23, 2020 · 7e76046 · 7e76046
1 parent 781aa20
commit 7e76046
Showing 1 changed file with 38 additions and 20 deletions.
diff --git a/src/renderer/views/devices/index.tsx b/src/renderer/views/devices/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {observer} from 'mobx-react';
 import styled from '@emotion/styled';
 import {groupBy} from 'lodash';
+import {AnimatePresence, motion} from 'framer-motion';
 import {DeviceType, NetworkState} from 'prolink-connect/lib/types';
 
 import store, {DeviceStore} from 'src/shared/store';
@@ -27,7 +28,7 @@ const Devices = observer(() => {
   ];
 
   return (
-    <React.Fragment>
+    <AnimatePresence>
       {store.networkState === NetworkState.Online && <ConnectingSplash />}
       {store.networkState === NetworkState.Failed && <ConnectionError />}
       {deviceMap[DeviceType.CDJ]?.sort(sortById).map(deviceStore => {
@@ -58,19 +59,38 @@ const Devices = observer(() => {
         );
       })}
       <SmallDeviceList>
-        {otherDevices.map(({device}) => (
-          <SmallDevice key={device.id}>
-            {device.type === DeviceType.Mixer && <IconDjm />}
-            {device.type === DeviceType.Rekordbox && <IconRekordbox />}
-            <ConnectedTag>Connected</ConnectedTag>
-            <DeviceInfo device={device} />
-          </SmallDevice>
-        ))}
+        <AnimatePresence>
+          {otherDevices.map(({device}) => (
+            <SmallDevice key={device.id}>
+              {device.type === DeviceType.Mixer && <IconDjm />}
+              {device.type === DeviceType.Rekordbox && <IconRekordbox />}
+              <ConnectedTag>Connected</ConnectedTag>
+              <DeviceInfo device={device} />
+            </SmallDevice>
+          ))}
+        </AnimatePresence>
       </SmallDeviceList>
-    </React.Fragment>
+    </AnimatePresence>
   );
 });
 
+const Device = styled(motion.div)`
+  color: #3b3b3b;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  grid-gap: 0.5rem;
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
+`;
+
+Device.defaultProps = {
+  layout: true,
+  transition: {duration: 0.2},
+  initial: {y: 10, opacity: 0},
+  animate: {y: 0, opacity: 1},
+  exit: {opacity: 0},
+};
+
 const Indicator = styled('div')`
   display: grid;
   grid-template-rows: 22px 48px;
@@ -99,15 +119,6 @@ const StatusBar = styled('div')`
   grid-gap: 0.5rem;
 `;
 
-const Device = styled('div')`
-  color: #3b3b3b;
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  grid-gap: 0.5rem;
-  padding: 1rem;
-  border-bottom: 1px solid #eee;
-`;
-
 const SmallDeviceList = styled('div')`
   color: #3b3b3b;
   display: grid;
@@ -122,7 +133,7 @@ const SmallDeviceList = styled('div')`
   }
 `;
 
-const SmallDevice = styled('div')`
+const SmallDevice = styled(motion.div)`
   display: grid;
   grid-gap: 0.25rem 0.5rem;
   grid-template: 1fr max-content / repeat(2, max-content);
@@ -133,6 +144,13 @@ const SmallDevice = styled('div')`
   }
 `;
 
+SmallDevice.defaultProps = {
+  transition: {duration: 0.2},
+  initial: {x: 10, opacity: 0},
+  animate: {x: 0, opacity: 1},
+  exit: {opacity: 0},
+};
+
 const ConnectedTag = styled('div')`
   text-transform: uppercase;
   font-size: 0.7rem;