Merge pull request #23 from co2-git/v0.1.4

V0.1.4

Author: co2-git

.flowconfig

@@ -6,20 +6,27 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore relase
+.*/release/.*
+
 
 [include]
 
 [libs]
 ./flow/app.js.flow
 ./app/components/App/App.js.flow
 ./app/components/App/AppBar.js.flow
+./app/components/Base/Animated.js.flow
+./app/components/FlexBox/Flex.js.flow
 ./app/components/Layout/AppCard.js.flow
 ./app/components/Layout/Header.js.flow
 ./app/components/Layout/Home.js.flow
 ./app/components/Layout/Init.js.flow
 ./app/components/Layout/Layout.js.flow
 ./app/components/Layout/Open.js.flow
+./app/components/Layout/Page.js.flow
 ./app/components/Layout/Router.js.flow
+./app/components/ReactNative/Info.js.flow
 ./app/components/Terminal/Console.js.flow
 
 [options]

app/App.js

@@ -12,9 +12,13 @@ const Loading = () => (
   <div>Loading</div>
 );
 
+const persistor = persistStore(store);
+
+// persistor.purge();
+
 const App = () => (
   <Provider store={store}>
-    <PersistGate loading={<Loading />} persistor={persistStore(store)}>
+    <PersistGate loading={<Loading />} persistor={persistor}>
       <Layout />
     </PersistGate>
   </Provider>

app/components/App/App.js

@@ -1,12 +1,25 @@
 // @flow
 import React from 'react';
+import SwipeableViews from 'react-swipeable-views';
 
 import AppBar from './AppBar';
+import AppBottomBar from './AppBottomBar';
+import Info from '../ReactNative/Info';
 import Page from '../Layout/Page';
 
 const App = ({app}: $AppProps) => (
-  <Page>
-    <AppBar app={app} />
+  <Page style={{display: 'flex', flexDirection: 'column'}}>
+    <div style={{flexShrink: 0}}>
+      <AppBar app={app} />
+    </div>
+    <div style={{flexGrow: 2, overflow: 'auto'}}>
+      <SwipeableViews>
+        <div>
+          <Info app={app} />
+        </div>
+      </SwipeableViews>
+    </div>
+    <AppBottomBar app={app} />
   </Page>
 );
 

app/components/App/App2.js

@@ -1,9 +1,6 @@
 // @flow
-import DropDownIcon from 'material-ui/svg-icons/navigation/arrow-drop-down';
 import IconButton from 'material-ui/IconButton';
-import IconMenu from 'material-ui/IconMenu';
 import MaterialUIAppBar from 'material-ui/AppBar';
-import MenuItem from 'material-ui/MenuItem';
 import NavigationBack from 'material-ui/svg-icons/navigation/arrow-back';
 import path from 'path';
 import React from 'react';
@@ -19,21 +16,6 @@ const AppBar = ({app}: $AppBarProps) => (
       </IconButton>
     )}
     onLeftIconButtonClick={() => switchRoute(0)}
-    iconElementRight={(
-      <IconMenu
-        iconButtonElement={(
-          <IconButton><DropDownIcon /></IconButton>
-        )}
-        onItemClick={(event, child) => console.log(child.props.primaryText)}
-      >
-        <MenuItem primaryText="Packager" />
-        <MenuItem primaryText="React Native" />
-        <MenuItem primaryText="Android" />
-        <MenuItem primaryText="iOS" />
-        <MenuItem primaryText="Expo" />
-        <MenuItem primaryText="Native modules" />
-      </IconMenu>
-    )}
   />
 );
 

app/components/App/AppBar.js

@@ -0,0 +1,54 @@
+// @flow
+import React from 'react';
+import {BottomNavigation, BottomNavigationItem} from 'material-ui/BottomNavigation';
+import Paper from 'material-ui/Paper';
+import PlayIcon from 'material-ui/svg-icons/av/play-arrow';
+import EjectIcon from 'material-ui/svg-icons/action/eject';
+import InfoIcon from 'material-ui/svg-icons/action/info';
+import AndroidIcon from 'material-ui/svg-icons/action/android';
+import UpgradeIcon from 'material-ui/svg-icons/notification/system-update';
+import SmartPhoneIcon from 'material-ui/svg-icons/hardware/smartphone';
+
+const AppBottomBar = () => (
+  <Paper zDepth={1}>
+    <BottomNavigation>
+      <BottomNavigationItem
+        label="Info"
+        onClick={() => {}}
+        icon={<InfoIcon />}
+      />
+      <BottomNavigationItem
+        label="Start"
+        onClick={() => {}}
+        icon={<PlayIcon />}
+      />
+      <BottomNavigationItem
+        label="Android"
+        onClick={() => {}}
+        icon={<AndroidIcon />}
+      />
+      <BottomNavigationItem
+        label="iOS"
+        onClick={() => {}}
+        icon={<i className="icon-apple" style={{fontSize: 24, color: '#777', marginTop: -3}} />}
+      />
+      <BottomNavigationItem
+        label="Upgrade"
+        onClick={() => {}}
+        icon={<UpgradeIcon />}
+      />
+      <BottomNavigationItem
+        label="Native"
+        onClick={() => {}}
+        icon={<SmartPhoneIcon />}
+      />
+      <BottomNavigationItem
+        label="Eject"
+        onClick={() => {}}
+        icon={<EjectIcon />}
+      />
+    </BottomNavigation>
+  </Paper>
+);
+
+export default AppBottomBar;

app/components/App/AppBottomBar.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import omit from 'lodash/omit';
 
@@ -80,7 +81,7 @@ const effects = [
   'slideOutUp',
 ];
 
-const Animated = (props) => {
+const Animated = (props: $AnimatedProps) => {
   const names = ['animated'];
   const remove = [];
   for (const effect of effects) {

app/components/Base/Animated.js

@@ -0,0 +1,8 @@
+// @flow
+
+declare type $AnimatedReactProps = {
+  +children?: any,
+};
+
+declare type $AnimatedProps =
+  & $AnimatedReactProps;

app/components/Base/Animated.js.flow

@@ -1,9 +1,6 @@
+// @flow
 import React from 'react';
 
-type $FlexProps = {
-  children: any,
-};
-
 const makeStyle = (props: $FlexProps) => {
   const {style: propsStyle = {}} = props;
   const style = {...propsStyle, display: 'flex', flexDirection: 'row'};

app/components/FlexBox/Flex.js

@@ -0,0 +1,22 @@
+// @flow
+
+type $FlexDirection =
+  & 'column'
+  & 'row';
+
+declare type $FlexReactProps = {
+  children: any,
+  style?: Object,
+};
+
+declare type $FlexOwnProps = {|
+  +between?: boolean,
+  +column?: boolean,
+  +direction?: $FlexDirection,
+  +flexDirection?: $FlexDirection,
+  +row?: boolean,
+|};
+
+declare type $FlexProps =
+  & $FlexReactProps
+  & $FlexOwnProps;