From fa15065d70be67b121fbce75c0f03088bc93dae5 Mon Sep 17 00:00:00 2001 From: David Dohan Date: Sun, 4 Sep 2016 16:27:39 -0700 Subject: [PATCH] Upgrading to ex-navigation --- .babelrc | 8 ++++ .gitignore | 6 +-- ExHeader.js | 86 ------------------------------------ ExScreen.js | 74 ------------------------------- OrgView.js | 10 +++-- exp.json | 21 +++++++++ main.js | 121 +++++++++++++++++++++++++++++++++++++-------------- package.json | 13 ++++-- 8 files changed, 136 insertions(+), 203 deletions(-) create mode 100644 .babelrc delete mode 100644 ExHeader.js delete mode 100644 ExScreen.js create mode 100644 exp.json diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..83438d7 --- /dev/null +++ b/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": ["react-native-stage-0/decorator-support"], + "env": { + "development": { + "plugins": ["transform-react-jsx-source"] + } + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 4d77061..0b5b187 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,7 @@ # OSX .DS_Store -# node.js -node_modules/ npm-debug.log -# Exponent -.exponent +node_modules/**/* +.exponent/**/* diff --git a/ExHeader.js b/ExHeader.js deleted file mode 100644 index 947a379..0000000 --- a/ExHeader.js +++ /dev/null @@ -1,86 +0,0 @@ -'use strict'; - -let React = require('react-native'); -let { - Animated, - Easing, - StyleSheet, - View, -} = React; - -let BODY_HEIGHT = 44; -let TITLE_MARGIN_TOP = 12; -let STATUS_BAR_HEIGHT = 20; - -class ExHeader extends React.Component { - render() { - let { - title, - scrollDistance, - ...props, - } = this.props; - - let bodyStyle = { - opacity: scrollDistance.interpolate({ - inputRange: [0, BODY_HEIGHT], - outputRange: [1, 0], - easing: Easing.in(Easing.linear), - extrapolate: 'clamp', - }), - height: scrollDistance.interpolate({ - inputRange: [0, BODY_HEIGHT], - outputRange: [BODY_HEIGHT, 0], - extrapolate: 'clamp', - }), - }; - - let titleStyle = { - transform: [{ - scale: scrollDistance.interpolate({ - inputRange: [0, BODY_HEIGHT], - outputRange: [1, 0], - extrapolate: 'clamp', - }), - }], - marginTop: scrollDistance.interpolate({ - inputRange: [0, BODY_HEIGHT], - outputRange: [TITLE_MARGIN_TOP, -STATUS_BAR_HEIGHT], - extrapolate: 'clamp', - }), - }; - - return ( - - - - - {title} - - - - ); - } -} - -ExHeader.HEIGHT = BODY_HEIGHT; - -let styles = StyleSheet.create({ - container: { - overflow: 'hidden', - }, - statusBarStrut: { - height: STATUS_BAR_HEIGHT, - }, - body: { - height: BODY_HEIGHT, - }, - titleText: { - color: '#fff', - fontSize: 17, - fontWeight: 'bold', - marginTop: TITLE_MARGIN_TOP, - alignSelf: 'center', - }, -}); - -module.exports = ExHeader; diff --git a/ExScreen.js b/ExScreen.js deleted file mode 100644 index 28fec3b..0000000 --- a/ExScreen.js +++ /dev/null @@ -1,74 +0,0 @@ -'use strict'; - -let React = require('react-native'); -let { - Animated, - ScrollView, - StyleSheet, - View, -} = React; - -let ExHeader = require('./ExHeader'); - -const STATUS_BAR_HEIGHT = 20; - -class ExScreen extends React.Component { - constructor(props, context) { - super(props, context); - this.state = { - headerScale: new Animated.Value(1), - scrollDistance: new Animated.Value(0), - }; - } - - render() { - let { - title, - scrollEnabled, - ...props, - } = this.props; - - return ( - - { this._scrollView = component; }} - contentContainerStyle={styles.contentContainer} - scrollEnabled={scrollEnabled} - showsVerticalScrollIndicator={false} - scrollEventThrottle={16} - onScroll={this._handleScroll.bind(this)}> - - {props.children} - - - - ); - } - - _handleScroll(event) { - let { - contentInset: { top: topInset }, - contentOffset: { y: scrollY }, - } = event.nativeEvent; - let scrollDistance = scrollY + topInset; - this.state.scrollDistance.setValue(scrollDistance); - } -} - -let styles = StyleSheet.create({ - contentContainer: { - paddingTop: 0, - }, - header: { - position: 'absolute', - top: 0, - left: 0, - right: 0, - }, -}); - -module.exports = ExScreen; diff --git a/OrgView.js b/OrgView.js index 0cdf5d2..6fa1295 100644 --- a/OrgView.js +++ b/OrgView.js @@ -1,12 +1,14 @@ -import { connect } from 'react-redux'; -let React = require('react-native'); let Swipeout = require('react-native-swipeout'); let Org = require('./org/org'); let Parser = require('./org/org_parser'); let Moment = require('moment'); -let { +import { connect } from 'react-redux'; + +import React, {Component} from 'react'; + +import { ListView, Picker, Text, @@ -14,7 +16,7 @@ let { TouchableHighlight, TouchableWithoutFeedback, View -} = React; +} from 'react-native'; /***** Actions *****/ diff --git a/exp.json b/exp.json new file mode 100644 index 0000000..97b5132 --- /dev/null +++ b/exp.json @@ -0,0 +1,21 @@ +{ + "name": "Org Squared", + "description": "Org mode client", + "slug": "org-squared", + "sdkVersion": "9.0.0", + "version": "0.0.0", + "orientation": "portrait", + "primaryColor": "#cccccc", + "iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png", + "notification": { + "iconUrl": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png", + "color": "#000000" + }, + "loading": { + "iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png", + "hideExponentText": false + }, + "packagerOpts": { + "assetExts": ["ttf"] + } +} diff --git a/main.js b/main.js index ab30ad1..b7ca3cc 100644 --- a/main.js +++ b/main.js @@ -1,42 +1,99 @@ -/** - * Entry point for org_squared app - */ -'use strict'; +/** In order for logging to stream to XDE or the exp CLI you must import the + * exponent module at some point in your app */ +import Exponent from 'exponent'; -import { Provider } from 'react-redux'; -import { combineReducers, createStore } from 'redux'; -let React = require('react-native'); -let { +import React from 'react'; +import { AppRegistry, + Platform, + StatusBar, StyleSheet, -} = React; + View, +} from 'react-native'; +import { + createRouter, + NavigationProvider, + StackNavigation, +} from '@exponent/ex-navigation'; +import { + FontAwesome, +} from '@exponent/vector-icons'; + +// import Router from './navigation/Router'; +// import cacheAssetsAsync from './utilities/cacheAssetsAsync'; -let ExScreen = require('./ExScreen'); +import { Provider } from 'react-redux'; +import { combineReducers, createStore } from 'redux'; let OrgView = require('./OrgView'); -function OrgSquared() { - const store = createStore(combineReducers({ - doc: OrgView.orgAction, - focus: OrgView.focus - })); - - return ( - - - - - - ); -}; - -let styles = StyleSheet.create({ + +const Router = createRouter(() => ({ + home: () => OrgView.EntryView, +})); + +class AppContainer extends React.Component { + state = { + appIsReady: true, + // appIsReady: false, + } + + // componentWillMount() { + // this._loadAssetsAsync(); + // } + + // async _loadAssetsAsync() { + // await cacheAssetsAsync({ + // images: [ + // require('./assets/images/exponent-wordmark.png'), + // ], + // fonts: [ + // FontAwesome.font, + // {'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf')}, + // ], + // }); + + // this.setState({appIsReady: true}); + // } + + render() { + if (this.state.appIsReady) { + let { notification } = this.props.exp; + const store = createStore(combineReducers({ + doc: OrgView.orgAction, + focus: OrgView.focus + })); + + return ( + + + + + + + {Platform.OS === 'ios' && } + {Platform.OS === 'android' && } + + + ); + + } else { + return ; + } + } +} + +const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: '#fff' - } + backgroundColor: '#fff', + }, + statusBarUnderlay: { + height: 24, + backgroundColor: 'rgba(0,0,0,0.2)', + }, }); -AppRegistry.registerComponent('main', () => OrgSquared); +AppRegistry.registerComponent('main', () => AppContainer); diff --git a/package.json b/package.json index 4a5d414..78709ab 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "license": "MIT", "description": "Flexible & extensible Org mode client", - "author": "David Dohan", + "author": "David Dohan ", "private": true, "main": "main.js", "scripts": { @@ -14,8 +14,15 @@ "sdkVersion": "5.0.0" }, "dependencies": { - "react": "^0.14.5", - "react-native": "github:exponentjs/react-native#sdk-5.0.0", + "@exponent/ex-navigation": "^1.5.8", + "@exponent/samples": "^1.0.2", + "@exponent/vector-icons": "^1.0.1", + "babel-preset-react-native-stage-0": "^1.0.1", + "exponent": "^9.0.2", + "lodash": "^4.13.1", + "react": "15.2.1", + "react-native": "github:exponentjs/react-native#sdk-9.0.0", + "react-native-swipeout": "^2.0.12", "react-redux": "^4.4.5", "redux": "^3.5.2"