add transition animation

3 files changed, 75 insertions, 22 deletions

diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx
index ab26666..f514b38 100644
--- a/src/Dashboard.tsx
+++ b/src/Dashboard.tsx
@@ -10,6 +10,7 @@ import Tab, { TabProps } from '@material-ui/core/Tab';
 import { LinkProps } from '@material-ui/core/Link';
 import Grid from '@material-ui/core/Grid';
 import { HashRouter as Router, RouteComponentProps, withRouter, Route, Link, Redirect, Switch } from "react-router-dom";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 
 import { theme } from './theme';
 import Logo from './Logo';
@@ -33,13 +34,34 @@ const styles = (theme: Theme) => ({
         display: 'inline-block'
     },
     appBarSpacer: theme.mixins.toolbar,
-    content: {
+    contentWrapper: {
+        position: 'relative' as 'relative',
         flexGrow: 1,
         padding: theme.spacing.unit * 3,
         overflow: 'auto',
     },
+    content: {
+        position: 'absolute' as 'absolute',
+        left: theme.spacing.unit * 3,
+        right: theme.spacing.unit * 3,
+        paddingBottom: theme.spacing.unit * 3,
+    },
     indicator: {
         backgroundColor: theme.palette.primary.contrastText
+    },
+    fadeEnter: {
+        opacity: 0.001
+    },
+    fadeEnterActive: {
+        opacity: 1,
+        transition: 'opacity 300ms ease-in'
+    },
+    fadeExit: {
+        opacity: 1
+    },
+    fadeExitActive: {
+        opacity: 0.001,
+        transition: 'opacity 300ms ease-in'
     }
 });
 
@@ -51,8 +73,13 @@ interface DashboardTabsProps extends RouteComponentProps {
         toolbar: string,
         title: string,
         indicator: string,
-        content: string
-    };
+        content: string,
+        contentWrapper: string,
+        fadeEnter: string,
+        fadeEnterActive: string,
+        fadeExit: string,
+        fadeExitActive: string,
+    }
 }
 
 class DashboardTabs extends React.Component<DashboardTabsProps> {
@@ -60,7 +87,7 @@ class DashboardTabs extends React.Component<DashboardTabsProps> {
         this.props.history.push(currentTab);
     }
     render() {
-        const { classes } = this.props;
+        const { classes, location } = this.props;
         return (
             <div className={classes.root}>
                 <AppBar
@@ -80,11 +107,28 @@ class DashboardTabs extends React.Component<DashboardTabsProps> {
                     </Toolbar>
                 </AppBar>
                 <CssBaseline />
-                <main className={classes.content}>
+                <main className={classes.contentWrapper}>
                     <div className={classes.appBarSpacer} />
-                    <Route exact path="/settings" component={Settings} />
-                    <Route exact path="/analyze" component={Analyze} />
-                    <Route exact path="/" render={() => <Redirect to="/settings" />}/>
+                    <TransitionGroup>
+                        <CSSTransition
+                                key={location.pathname}
+                                timeout={{ enter: 300, exit: 300 }}
+                                classNames={{
+                                    enter: classes.fadeEnter,
+                                    enterActive: classes.fadeEnterActive,
+                                    exit: classes.fadeExit,
+                                    exitActive: classes.fadeExitActive
+                                }}>
+                            <div className={classes.content}>
+                            <Switch location={location}>
+                            {console.log(location)}
+                            <Route exact path="/settings" component={Settings} />
+                            <Route exact path="/analyze" component={Analyze} />
+                            <Route exact path="/" render={() => <Redirect to="/settings" />}/>
+                            </Switch>
+                            </div>
+                        </CSSTransition>
+                    </TransitionGroup>
                 </main>
             </div>
         );
diff --git a/src/PatternTable.tsx b/src/PatternTable.tsx
index 075cafe..7bb29b8 100644
--- a/src/PatternTable.tsx
+++ b/src/PatternTable.tsx
@@ -11,6 +11,8 @@ import TablePagination from '@material-ui/core/TablePagination';
 import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
 import Popover from '@material-ui/core/Popover';
 import MaterialColorPicker from 'react-material-color-picker';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
 
 import { CalendarField, EventField } from './RegexField';
 import { theme, defaultChartColor } from './theme';
@@ -186,6 +188,7 @@ class PatternTable extends React.Component<PatternTableProps> {
         rows.flat();
 
         return (
+            <SlideDown className={'my-dropdown-slidedown'}>
             <div className={classes.patternTableWrapper}>
                 <Popover
                     id="colorPicker"
@@ -239,7 +242,9 @@ class PatternTable extends React.Component<PatternTableProps> {
                         nextIconButtonProps={{'aria-label': 'Next Page'}}
                         onChangePage={this.handleChangePage}
                         onChangeRowsPerPage={this.handleChangeRowsPerPage} />
-            </div>);
+            </div>
+            </SlideDown>
+        );
     }
 }
 
diff --git a/src/Settings.tsx b/src/Settings.tsx
index 3537894..d5ca681 100644
--- a/src/Settings.tsx
+++ b/src/Settings.tsx
@@ -20,7 +20,9 @@ import Checkbox from '@material-ui/core/Checkbox';
 import TextField from '@material-ui/core/TextField';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
-import { getColorFamily } from 'materialcolorize'
+import { getColorFamily } from 'materialcolorize';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
 
 import PatternTable from './PatternTable';
 import Snackbar, { SnackbarVariant } from './Snackbar';
@@ -463,19 +465,21 @@ class Settings extends React.Component<SettingsProps> {
                            <STableCell className={classes.tableContent} style={{paddingRight: 0}}>
                                {(this.state.isLoggedIn &&
                                 <div className={classNames(classes.calendarList, classes.list)}>
-                               <List disablePadding>
+                                <SlideDown className={'my-dropdown-slidedown'}>
+                                <List disablePadding>
                                    {Object.keys(this.state.calendars).sort().map(id =>
-                                       <CompactListItem
-                                           key={id}
-                                           onClick={() => this.toggleCalendar(id)}
-                                           disableGutters
-                                           dense button >
-                                       <Checkbox
-                                           checked={this.state.calendars[id].enabled}
-                                           disableRipple />
-                                       <ListItemText primary={this.state.calendars[id].name} />
-                                       </CompactListItem>)}
-                               </List></div>) || 'Please Login.'}
+                                        <CompactListItem
+                                            key={id}
+                                            onClick={() => this.toggleCalendar(id)}
+                                            disableGutters
+                                            dense button >
+                                        <Checkbox
+                                            checked={this.state.calendars[id].enabled}
+                                            disableRipple />
+                                        <ListItemText primary={this.state.calendars[id].name} />
+                                        </CompactListItem>)}
+                                </List>
+                                </SlideDown></div>) || 'Please Login.'}
                            </STableCell>
                        </TableRow>
                        <TableRow>