Drawer menu

Author: co2-git

app/components/Base/Animated.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import omit from 'lodash/omit';
 
 const effects = [
   'bounce',
@@ -81,13 +82,15 @@ const effects = [
 
 const Animated = (props) => {
   const names = ['animated'];
+  const remove = [];
   for (const effect of effects) {
     if (effect in props) {
       names.push(effect);
+      remove.push(effect);
     }
   }
   return (
-    <div className={names.join(' ')}>
+    <div className={names.join(' ')} {...omit(props, remove)}>
       {props.children}
     </div>
   );

app/components/Layout/AppCard.js

@@ -16,7 +16,7 @@ type $AppCardProps =
 class AppCard extends PureComponent<$AppCardProps> {
   state = {expanded: false};
   render = () => (
-    <Animated bounce>
+    <Animated rubberBand>
       <Card
         expanded={this.state.expanded}
         onExpandChange={() => console.log('hello')}

app/components/Layout/DrawerMenu.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import MenuItem from 'material-ui/MenuItem';
+import CodeIcon from 'material-ui/svg-icons/action/code';
+import BugIcon from 'material-ui/svg-icons/action/bug-report';
+import HelpIcon from 'material-ui/svg-icons/communication/live-help';
+import open from 'open';
+
+import info from '../../../package.json';
+
+const DrawerMenu = () => (
+  <div>
+    <div style={{textAlign: 'center'}}>
+      <strong>{info.name}</strong> v<em>{info.version}</em>
+    </div>
+    <MenuItem
+      leftIcon={<CodeIcon />}
+      onClick={() => open(info.repository.url)}
+    >
+      View source
+    </MenuItem>
+    <MenuItem
+      leftIcon={<BugIcon />}
+      onClick={() => open(info.bugs.url)}
+    >
+      Report a bug
+    </MenuItem>
+    <MenuItem
+      leftIcon={<HelpIcon />}
+      onClick={() => open(info.wiki.url)}
+    >
+      Documentation
+    </MenuItem>
+  </div>
+);
+
+export default DrawerMenu;

app/components/Layout/Init.js

@@ -10,6 +10,7 @@ import Toggle from 'material-ui/Toggle';
 import {raiseError} from '../../redux/actions/errorsActions';
 import {pickFile} from '../../helpers/fsHelpers';
 import Row from '../FlexBox/Row';
+import Animated from '../Base/Animated';
 
 class Init extends PureComponent<$InitProps, $InitState> {
   state = {
@@ -20,7 +21,7 @@ class Init extends PureComponent<$InitProps, $InitState> {
     nameError: '',
   };
   render = () => (
-    <div style={{margin: 12}}>
+    <Animated jello style={{margin: 12}}>
       <Row style={{marginBottom: 12}}>
         <IconButton>
           <NameIcon />
@@ -54,7 +55,7 @@ class Init extends PureComponent<$InitProps, $InitState> {
           />
         </div>
       </Row>
-    </div>
+    </Animated>
   );
   onChangeBase = event => this.setState({
     base: event.target.value,

app/components/Layout/Open.js

@@ -6,8 +6,8 @@ import path from 'path';
 
 import * as appsActions from '../../redux/actions/appsActions';
 import Init from './Init';
-import styles from './Open.styles';
 import Terminal from '../Terminal/Console';
+import Animated from '../Base/Animated';
 
 class Open extends PureComponent {
   state = {
@@ -17,7 +17,7 @@ class Open extends PureComponent {
     showTerminal: false,
   };
   render = () => (
-    <div>
+    <Animated jello>
       <Card style={{marginBottom: 12}} expanded={this.state.expand}>
         <CardHeader
           title="Open React Native app"
@@ -73,7 +73,7 @@ class Open extends PureComponent {
       >
         <Init onCreate={this.onCreate} />
       </Popover>
-    </div>
+    </Animated>
   );
   handleClick = (event) => {
     // This prevents ghost click.

app/components/Layout/Router.js

@@ -8,7 +8,6 @@ import get from 'lodash/get';
 import IconButton from 'material-ui/IconButton';
 import map from 'lodash/map';
 import MenuIcon from 'material-ui/svg-icons/navigation/menu';
-import MenuItem from 'material-ui/MenuItem';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import path from 'path';
 import React, {PureComponent} from 'react';
@@ -17,6 +16,7 @@ import TextField from 'material-ui/TextField';
 
 import {clearError} from '../../redux/actions/errorsActions';
 import AppCard from './AppCard';
+import DrawerMenu from './DrawerMenu';
 import Index from './Index';
 import merge from '../../styles/mixins/merge';
 import styles from './Router.styles';
@@ -76,8 +76,8 @@ class Router extends PureComponent<$RouterProps, $RoouterState> {
             <IconButton>
               <CloseIcon onClick={this.handleToggle} />
             </IconButton>
+            <DrawerMenu />
           </div>
-          <MenuItem>Menu Item</MenuItem>
         </Drawer>
         <Snackbar
           open={this.props.error instanceof Error}

package.json

@@ -9,6 +9,7 @@
     "babel-polyfill": "^6.26.0",
     "lodash": "^4.17.5",
     "material-ui": "^0.20.0",
+    "open": "^0.0.5",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "react-redux": "^5.0.7",
@@ -41,5 +42,11 @@
     "type": "git",
     "url": "https://github.com/co2-git/ReactNative.git"
   },
-  "author": "francoisrvespa@gmail.com"
+  "author": "francoisrvespa@gmail.com",
+  "bugs": {
+    "url": "https://github.com/co2-git/ReactNative/issues"
+  },
+  "wiki": {
+    "url": "https://github.com/co2-git/ReactNative/wiki"
+  }
 }

yarn.lock

@@ -2408,6 +2408,10 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+open@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
+
 optionator@^0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"