From 3bb4610be19678b98959e59c1024bdc2c5806ecf Mon Sep 17 00:00:00 2001 From: Pavlo Aksonov Date: Sun, 22 Jul 2018 16:36:37 +0200 Subject: [PATCH 01/20] WIP: migration to react-navigation v2.x (#3068) --- .prettierrc | 7 + Example/.gitignore | 1 + Example/Example.js | 263 ++++--------- Example/components/TabView.js | 78 +++- Example/components/drawer/DrawerContent.js | 24 +- Example/package.json | 2 +- Example/yarn.lock | 118 +++++- dist/LightboxNavigator.js | 68 ++-- dist/NavBar.js | 165 ++------ dist/Reducer.js | 5 +- dist/Router.js | 42 ++- dist/navigationStore.js | 376 ++++--------------- src/.watchmanconfig | 3 + src/LightboxNavigator.js | 78 ++-- src/NavBar.js | 203 +++------- src/Router.js | 42 ++- src/navigationStore.js | 414 +++++---------------- 17 files changed, 627 insertions(+), 1262 deletions(-) create mode 100644 .prettierrc create mode 100644 src/.watchmanconfig diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..a62ca711c --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "printWidth": 180, + "singleQuote": true, + "semi": true, + "bracketSpacing": true, + "trailingComma": "all" +} diff --git a/Example/.gitignore b/Example/.gitignore index 10be19751..05e924485 100644 --- a/Example/.gitignore +++ b/Example/.gitignore @@ -51,3 +51,4 @@ buck-out/ fastlane/report.xml fastlane/Preview.html fastlane/screenshots +node_modules/ \ No newline at end of file diff --git a/Example/Example.js b/Example/Example.js index 1fb051110..695f25167 100644 --- a/Example/Example.js +++ b/Example/Example.js @@ -5,20 +5,8 @@ import Register from './components/Register'; import Login from './components/Login'; import Login2 from './components/Login2'; import Login3 from './components/Login3'; -import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'; -import { - Scene, - Router, - Actions, - Reducer, - ActionConst, - Overlay, - Tabs, - Modal, - Drawer, - Stack, - Lightbox, -} from 'react-native-router-flux'; +import CardStackStyleInterpolator from 'react-navigation/src/views/StackView/StackViewStyleInterpolator'; +import { Scene, Router, Actions, Reducer, ActionConst, Overlay, Tabs, Modal, Drawer, Stack, Lightbox } from 'react-native-router-flux'; import Home from './components/Home'; import DrawerContent from './components/drawer/DrawerContent'; import TabView from './components/TabView'; @@ -28,13 +16,15 @@ import MessageBar from './components/MessageBar'; import ErrorModal from './components/modal/ErrorModal'; import DemoLightbox from './components/lightbox/DemoLightbox'; import MenuIcon from './images/menu_burger.png'; -import CustomNavBarView from "./components/CustomNavBarView"; -import CustomNavBar from "./components/CustomNavBar"; -import CustomNavBar2 from "./components/CustomNavBar2"; +import CustomNavBarView from './components/CustomNavBarView'; +import CustomNavBar from './components/CustomNavBar'; +import CustomNavBar2 from './components/CustomNavBar2'; const styles = StyleSheet.create({ container: { - flex: 1, backgroundColor: 'transparent', justifyContent: 'center', + flex: 1, + backgroundColor: 'transparent', + justifyContent: 'center', alignItems: 'center', }, tabBarStyle: { @@ -61,193 +51,70 @@ const getSceneStyle = () => ({ // on Android, the URI prefix typically contains a host in addition to scheme const prefix = Platform.OS === 'android' ? 'mychat://mychat/' : 'mychat://'; - +const Example2 = () => ( + + + alert('Right button')} rightTitle="Right" /> + + +); const Example = () => ( - - - - ({ screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid })} - > - - - navigation.state.key} /> - - - - - - - - - - - - - - - - - {/* + + + navigation.state.key} /> + + + + + + + + + + + + + + + + + {/* Wrapper Scene needed to fix a bug where the tabs would reload as a modal ontop of itself */} - - - - alert('Right button')} - rightTitle="Right" - - /> - - - - - - Right} - /> - alert('onBack button!')} - hideDrawerButton - backTitle="Back!" - panHandlers={null} - /> - + + + + alert('Right button')} rightTitle="Right" /> - - { }} - /> - - - - - - - - - + + - - - - - console.log('onExit')} - leftTitle="Cancel" - onLeft={Actions.pop} - /> - - - - + + Right} /> + alert('onBack button!')} hideDrawerButton backTitle="Back!" panHandlers={null} /> + - - + + {}} /> + + + + + + + + + ); diff --git a/Example/components/TabView.js b/Example/components/TabView.js index 3126ab7fa..e666889c6 100644 --- a/Example/components/TabView.js +++ b/Example/components/TabView.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { StyleSheet, Text, View, ViewPropTypes } from "react-native"; +import { StyleSheet, Text, View, ViewPropTypes } from 'react-native'; import Button from 'react-native-button'; import { Actions } from 'react-native-router-flux'; @@ -22,33 +22,71 @@ const styles = StyleSheet.create({ }); class TabView extends React.Component { - state = { hideNavBar: false } + state = { hideNavBar: false }; toggleNavBar = () => { - this.setState({ hideNavBar: !this.state.hideNavBar }, () => - Actions.refresh({ hideNavBar: this.state.hideNavBar }) - ); - } + this.setState({ hideNavBar: !this.state.hideNavBar }, () => Actions.refresh({ hideNavBar: this.state.hideNavBar })); + }; render() { return ( - Tab title:{this.props.title} name:{this.props.name} + + Tab title:{this.props.title} name:{this.props.name} + Tab data:{this.props.data} - {this.props.name === 'tab_1_1' && - - } - {this.props.name === 'tab_2_1' && - - } + {this.props.name === 'tab_1_1' && } + {this.props.name === 'tab_2_1' && } - - - - - - - + + + + + + + ); } diff --git a/Example/components/drawer/DrawerContent.js b/Example/components/drawer/DrawerContent.js index c5fdf1f64..fa90c1291 100644 --- a/Example/components/drawer/DrawerContent.js +++ b/Example/components/drawer/DrawerContent.js @@ -20,11 +20,11 @@ class DrawerContent extends React.Component { name: PropTypes.string, sceneStyle: ViewPropTypes.style, title: PropTypes.string, - } + }; static contextTypes = { drawer: PropTypes.object, - } + }; render() { return ( @@ -32,20 +32,22 @@ class DrawerContent extends React.Component { {/* Drawer Content */} Title: {this.props.title} - {this.props.name === 'tab_1_1' && - - } - {this.props.name === 'tab_2_1' && - - } + {this.props.name === 'tab_1_1' && } + {this.props.name === 'tab_2_1' && } - - + + - + ); } } diff --git a/Example/package.json b/Example/package.json index dbde5dc09..a85655bf2 100644 --- a/Example/package.json +++ b/Example/package.json @@ -17,7 +17,7 @@ "react-native-button": "^2.0.0", "react-native-message-bar": "^1.6.0", "react-native-router-flux": "4.0.0-beta.32", - "react-navigation": "1.5.8" + "react-navigation": "^2.8.0" }, "devDependencies": { "babel-jest": "20.1.0-echo.1", diff --git a/Example/yarn.lock b/Example/yarn.lock index 294f444ba..44e914b16 100644 --- a/Example/yarn.lock +++ b/Example/yarn.lock @@ -1814,6 +1814,13 @@ create-react-class@^15.6.3: loose-envify "^1.3.1" object-assign "^4.1.1" +create-react-context@^0.2.1: + version "0.2.2" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca" + dependencies: + fbjs "^0.8.0" + gud "^1.0.0" + cross-spawn@^5.0.1, cross-spawn@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" @@ -2198,6 +2205,18 @@ fbjs-scripts@^0.8.1: semver "^5.1.0" through2 "^2.0.0" +fbjs@^0.8.0: + version "0.8.17" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.18" + fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9: version "0.8.16" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" @@ -2424,6 +2443,10 @@ growly@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" +gud@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" + handlebars@^4.0.3: version "4.0.11" resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc" @@ -2507,6 +2530,10 @@ hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1: version "2.5.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" +hoist-non-react-statics@^2.5.0: + version "2.5.5" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" + home-or-tmp@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8" @@ -3676,13 +3703,13 @@ mkdirp@^0.5.0, mkdirp@^0.5.1: dependencies: minimist "0.0.8" -mobx-react@^4.2.1, mobx-react@^4.3.4: +mobx-react@^4.2.1: version "4.4.3" resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-4.4.3.tgz#baa9ec41165ee35ae7b9df19bca10190f36f117e" dependencies: hoist-non-react-statics "^2.3.1" -mobx@^3.2.1, mobx@^3.3.1: +mobx@^3.2.1: version "3.6.2" resolved "https://registry.yarnpkg.com/mobx/-/mobx-3.6.2.tgz#fb9f5ff5090539a1ad54e75dc4c098b602693320" @@ -4197,6 +4224,13 @@ prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" +prop-types@^15.6.1: + version "15.6.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" + dependencies: + loose-envify "^1.3.1" + object-assign "^4.1.1" + prr@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476" @@ -4213,6 +4247,13 @@ qs@~6.5.1: version "6.5.2" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" +query-string@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.1.0.tgz#01e7d69f6a0940dac67a937d6c6325647aa4532a" + dependencies: + decode-uri-component "^0.2.0" + strict-uri-encode "^2.0.0" + randomatic@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.0.0.tgz#d35490030eb4f7578de292ce6dfb04a91a128923" @@ -4257,6 +4298,10 @@ react-lifecycles-compat@^1.0.2: version "1.1.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.1.4.tgz#fc005c72849b7ed364de20a0f64ff58ebdc2009a" +react-lifecycles-compat@^3, react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + react-native-button@^2.0.0: version "2.3.0" resolved "https://registry.yarnpkg.com/react-native-button/-/react-native-button-2.3.0.tgz#7d0a90095d415b0edf98a904556a7c4439646568" @@ -4283,13 +4328,11 @@ react-native-message-bar@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/react-native-message-bar/-/react-native-message-bar-1.6.0.tgz#79623e89655475216927090771b0238616b6f1c7" -react-native-router-flux@4.0.0-beta.31: - version "4.0.0-beta.31" - resolved "https://registry.yarnpkg.com/react-native-router-flux/-/react-native-router-flux-4.0.0-beta.31.tgz#edea28cbac705fbb324ae8f5eb136dc0bef1e1e8" +react-native-router-flux@4.0.0-beta.32: + version "4.0.0-beta.32" + resolved "https://registry.yarnpkg.com/react-native-router-flux/-/react-native-router-flux-4.0.0-beta.32.tgz#68fad98d42d667944c5e584649606d8fdf3b20d2" dependencies: lodash.isequal "^4.5.0" - mobx "^3.3.1" - mobx-react "^4.3.4" opencollective "^1.0.3" path-to-regexp "^2.1.0" prop-types "^15.6.0" @@ -4301,6 +4344,24 @@ react-native-safe-area-view@^0.7.0: dependencies: hoist-non-react-statics "^2.3.1" +react-native-safe-area-view@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.8.0.tgz#22d78cb8e8658d04a10cd53c1546e0bc86cb7aea" + dependencies: + hoist-non-react-statics "^2.3.1" + +react-native-tab-view@^0.0.77: + version "0.0.77" + resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.77.tgz#11ceb8e7c23100d07e628dc151b57797524d00d4" + dependencies: + prop-types "^15.6.0" + +react-native-tab-view@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-1.0.2.tgz#66e0bc6d38a227ed2b212e3a256b7902f6ce02ed" + dependencies: + prop-types "^15.6.1" + "react-native-tab-view@github:react-navigation/react-native-tab-view": version "0.0.74" resolved "https://codeload.github.com/react-navigation/react-native-tab-view/tar.gz/36ebd834d78b841fc19778c966465d02fd1213bb" @@ -4371,6 +4432,28 @@ react-native@0.55.4: xmldoc "^0.4.0" yargs "^9.0.0" +react-navigation-deprecated-tab-navigator@1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/react-navigation-deprecated-tab-navigator/-/react-navigation-deprecated-tab-navigator-1.3.0.tgz#015dcae1e977b984ca7e99245261c15439026bb7" + dependencies: + react-native-tab-view "^0.0.77" + +react-navigation-drawer@0.4.3: + version "0.4.3" + resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.4.3.tgz#c04c94e2429b7e724801af05bd0a93a79cb27f71" + dependencies: + react-native-drawer-layout-polyfill "^1.3.2" + +react-navigation-tabs@0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.5.1.tgz#ed33bce3a3e21b92646700de25bd94b8fc570371" + dependencies: + hoist-non-react-statics "^2.5.0" + prop-types "^15.6.1" + react-lifecycles-compat "^3.0.4" + react-native-safe-area-view "^0.7.0" + react-native-tab-view "^1.0.0" + react-navigation@1.5.8: version "1.5.8" resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-1.5.8.tgz#f04bec1a39af8cfcf651337d351e8d0a144f1b6d" @@ -4384,6 +4467,21 @@ react-navigation@1.5.8: react-native-safe-area-view "^0.7.0" react-native-tab-view "github:react-navigation/react-native-tab-view" +react-navigation@^2.8.0: + version "2.8.0" + resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.8.0.tgz#c7f07a8d97ac99fa872e655783ad0a71563a9094" + dependencies: + clamp "^1.0.1" + create-react-context "^0.2.1" + hoist-non-react-statics "^2.2.0" + path-to-regexp "^1.7.0" + query-string "^6.1.0" + react-lifecycles-compat "^3" + react-native-safe-area-view "^0.8.0" + react-navigation-deprecated-tab-navigator "1.3.0" + react-navigation-drawer "0.4.3" + react-navigation-tabs "0.5.1" + react-proxy@^1.1.7: version "1.1.8" resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a" @@ -4930,6 +5028,10 @@ stream-buffers@~2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4" +strict-uri-encode@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" + string-length@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac" @@ -5137,7 +5239,7 @@ typedarray@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" -ua-parser-js@^0.7.9: +ua-parser-js@^0.7.18, ua-parser-js@^0.7.9: version "0.7.18" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed" diff --git a/dist/LightboxNavigator.js b/dist/LightboxNavigator.js index 7739ad870..c10c88395 100644 --- a/dist/LightboxNavigator.js +++ b/dist/LightboxNavigator.js @@ -5,39 +5,55 @@ var _reactNavigation=require('react-navigation'); var _reactNative=require('react-native'); var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};} -var LightboxNavigator=function LightboxNavigator( -routeConfigs) - -{var tabsConfig=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{}; -var router=(0,_reactNavigation.TabRouter)(routeConfigs,tabsConfig); - -var navigator=(0,_reactNavigation.createNavigator)( -router, -routeConfigs, -tabsConfig, -'react-navigation/STACK')( -function(_ref){var navigation=_ref.navigation;var +var NavigationView=function NavigationView(_ref){var navigation=_ref.navigation,screenProps=_ref.screenProps,navigationConfig=_ref.navigationConfig,descriptors=_ref.descriptors;var state=navigation.state,dispatch=navigation.dispatch;var routes=state.routes,index=state.index; +console.log('DATA:',JSON.stringify(navigationConfig)); +return _react2.default.createElement(_reactNative.View,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:13}}); + + + + + + + + + + + + + + + + + -var Component=routeConfigs[tabsConfig.initialRouteName].screen; -var initialIndex=0; -for(var i=0;i1&&arguments[1]!==undefined?arguments[1]:{}; +var router=(0,_reactNavigation.TabRouter)(routeConfigs,tabsConfig); + +return(0,_reactNavigation.createNavigator)(NavigationView,router,tabsConfig); };exports.default= LightboxNavigator; \ No newline at end of file diff --git a/dist/NavBar.js b/dist/NavBar.js index 5801506e5..4ada505cf 100644 --- a/dist/NavBar.js +++ b/dist/NavBar.js @@ -5,14 +5,6 @@ Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.ass - - - - - - - - BackButton=BackButton;exports. @@ -34,37 +26,6 @@ BackButton=BackButton;exports. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -135,25 +96,7 @@ LeftButton=LeftButton;exports. - - - - - - - - - - - - - - - - - - -RightButton=RightButton;var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNavigation=require('react-navigation');var _reactNative=require('react-native');var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);var _back_chevron=require('../images/back_chevron.png');var _back_chevron2=_interopRequireDefault(_back_chevron);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}var hitSlop={top:15,bottom:15,left:15,right:15};function BackButton(state){var textButtonStyle=[styles.barBackButtonText,state.backButtonTextStyle];var style=[styles.backButton,state.leftButtonStyle];var buttonImage=state.backButtonImage||_back_chevron2.default;var tintColor=getValue(state.backButtonTintColor,state)||state.tintColor||state.navBarButtonColor||state.headerTintColor;var onPress=state.onBack;if(onPress){onPress=onPress.bind(null,state);}else{onPress=_navigationStore2.default.pop;}if(!state.backButtonImage){return _react2.default.createElement(_reactNavigation.HeaderBackButton,{onPress:onPress,title:state.backTitle,titleStyle:textButtonStyle,tintColor:tintColor,truncatedTitle:state.truncatedTitle,__source:{fileName:_jsxFileName,lineNumber:38}});}var text=state.backTitle?_react2.default.createElement(_reactNative.Text,{style:textButtonStyle,__source:{fileName:_jsxFileName,lineNumber:49}},state.backTitle):null;return _react2.default.createElement(_reactNative.TouchableOpacity,{testID:'backNavButton',style:styles.backButtonContainer,onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:55}},_react2.default.createElement(_reactNative.View,{style:style,__source:{fileName:_jsxFileName,lineNumber:60}},buttonImage&&!state.hideBackImage&&_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[styles.backButtonImage,state.barButtonIconStyle,state.leftButtonIconStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:61}}),text));}function LeftButton(state){var onPress=state.onLeft;var buttonImage=getValue(state.leftButtonImage,state);var menuIcon=getValue(state.drawerIcon,state);var style=[styles.leftButton,state.leftButtonStyle];var leftButtonTextStyle=getValue(state.leftButtonTextStyle,state);var leftButtonIconStyle=getValue(state.leftButtonIconStyle,state);var leftButtonStyle=[styles.defaultImageStyle,leftButtonIconStyle];var leftTitle=state.getLeftTitle?state.getLeftTitle(state):getValue(state.leftTitle,state);var textColor=getValue(state.leftButtonTintColor,state);var tintColor=textColor||state.tintColor||state.navBarButtonColor||state.headerTintColor;var textStyle=[styles.barLeftButtonText,tintColor&&{color:tintColor},leftButtonTextStyle,textColor&&{color:textColor}];if(state.leftButton||state.left){var Button=state.leftButton||state.left;return _react2.default.createElement(Button,_extends({},state,{key:'leftNavBarBtn',testID:'leftNavButton',style:[].concat(style,leftButtonStyle),textStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:93}}));}if(!onPress&&!state.hideDrawerButton&&(state.drawerImage||menuIcon)&&state.drawerPosition!=='right'){buttonImage=state.drawerImage;if(buttonImage||menuIcon){onPress=_navigationStore2.default.drawerOpen;}if(!menuIcon){menuIcon=_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[state.leftButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:110}});}}if(onPress&&(leftTitle||buttonImage||menuIcon)){onPress=onPress.bind(null,state);return _react2.default.createElement(_reactNative.TouchableOpacity,{key:'leftNavBarBtn',testID:'leftNavButton',style:style,onPress:onPress,hitSlop:state.hitSlop||hitSlop,__source:{fileName:_jsxFileName,lineNumber:121}},leftTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:128}},leftTitle),!leftTitle&&(menuIcon||buttonImage)&&_react2.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'flex-start'},__source:{fileName:_jsxFileName,lineNumber:132}},menuIcon||_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[state.leftButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:133}})));}if(!!state.onLeft^!!(leftTitle||buttonImage||menuIcon)){console.warn('Both onLeft and leftTitle/leftButtonImage\n must be specified for the scene: '+state.name);}return null;}function getValue(value,params){return value instanceof Function?value(params):value;}function RightButton(state){ +RightButton=RightButton;var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNavigation=require('react-navigation');var _reactNative=require('react-native');var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);var _back_chevron=require('../images/back_chevron.png');var _back_chevron2=_interopRequireDefault(_back_chevron);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}var hitSlop={top:15,bottom:15,left:15,right:15};function BackButton(state){var textButtonStyle=[styles.barBackButtonText,state.backButtonTextStyle];var style=[styles.backButton,state.leftButtonStyle];var buttonImage=state.backButtonImage||_back_chevron2.default;var tintColor=getValue(state.backButtonTintColor,state)||state.tintColor||state.navBarButtonColor||state.headerTintColor;var onPress=state.onBack;if(onPress){onPress=onPress.bind(null,state);}else{onPress=_navigationStore2.default.pop;}if(!state.backButtonImage){return _react2.default.createElement(_reactNavigation.HeaderBackButton,{onPress:onPress,title:state.backTitle,titleStyle:textButtonStyle,tintColor:tintColor,truncatedTitle:state.truncatedTitle,__source:{fileName:_jsxFileName,lineNumber:23}});}var text=state.backTitle?_react2.default.createElement(_reactNative.Text,{style:textButtonStyle,__source:{fileName:_jsxFileName,lineNumber:26}},state.backTitle):null;return _react2.default.createElement(_reactNative.TouchableOpacity,{testID:'backNavButton',style:styles.backButtonContainer,onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:29}},_react2.default.createElement(_reactNative.View,{style:style,__source:{fileName:_jsxFileName,lineNumber:30}},buttonImage&&!state.hideBackImage&&_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[styles.backButtonImage,state.barButtonIconStyle,state.leftButtonIconStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:31}}),text));}function LeftButton(state){var onPress=state.onLeft;var buttonImage=getValue(state.leftButtonImage,state);var menuIcon=getValue(state.drawerIcon,state);var style=[styles.leftButton,state.leftButtonStyle];var leftButtonTextStyle=getValue(state.leftButtonTextStyle,state);var leftButtonIconStyle=getValue(state.leftButtonIconStyle,state);var leftButtonStyle=[styles.defaultImageStyle,leftButtonIconStyle];var leftTitle=state.getLeftTitle?state.getLeftTitle(state):getValue(state.leftTitle,state);var textColor=getValue(state.leftButtonTintColor,state);var tintColor=textColor||state.tintColor||state.navBarButtonColor||state.headerTintColor;var textStyle=[styles.barLeftButtonText,tintColor&&{color:tintColor},leftButtonTextStyle,textColor&&{color:textColor}];if(state.leftButton||state.left){var Button=state.leftButton||state.left;return _react2.default.createElement(Button,_extends({},state,{key:'leftNavBarBtn',testID:'leftNavButton',style:[].concat(style,leftButtonStyle),textStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:53}}));}if(!onPress&&!state.hideDrawerButton&&(state.drawerImage||menuIcon)&&state.drawerPosition!=='right'){buttonImage=state.drawerImage;if(buttonImage||menuIcon){onPress=_navigationStore2.default.drawerOpen;}if(!menuIcon){menuIcon=_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[state.leftButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:62}});}}if(onPress&&(leftTitle||buttonImage||menuIcon)){onPress=onPress.bind(null,state);return _react2.default.createElement(_reactNative.TouchableOpacity,{key:'leftNavBarBtn',testID:'leftNavButton',style:style,onPress:onPress,hitSlop:state.hitSlop||hitSlop,__source:{fileName:_jsxFileName,lineNumber:69}},leftTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:70}},leftTitle),!leftTitle&&(menuIcon||buttonImage)&&_react2.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'flex-start'},__source:{fileName:_jsxFileName,lineNumber:73}},menuIcon||_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[state.leftButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:80}})));}if(!!state.onLeft^!!(leftTitle||buttonImage||menuIcon)){console.warn('Both onLeft and leftTitle/leftButtonImage\n must be specified for the scene: '+state.name);}return null;}function getValue(value,params){return value instanceof Function?value(params):value;}function RightButton(state){ if(!state){ return null; } @@ -172,15 +115,7 @@ var textStyle=[styles.barRightButtonText,tintColor&&{color:tintColor},rightButto if(state.rightButton||state.right){ var Button=state.rightButton||state.right; -return( -_react2.default.createElement(Button,_extends({}, -state,{ -key:'rightNavBarBtn', -testID:'rightNavButton', -style:style, -textButtonStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:176}}))); - - +return _react2.default.createElement(Button,_extends({},state,{key:'rightNavBarBtn',testID:'rightNavButton',style:style,textButtonStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:118}})); } if(!onPress&&!state.hideDrawerButton&&state.drawerImage&&state.drawerPosition==='right'){ @@ -189,42 +124,31 @@ if(buttonImage||menuIcon){ onPress=_navigationStore2.default.drawerOpen; } if(!menuIcon){ -menuIcon= -_react2.default.createElement(_reactNative.Image,{ -source:buttonImage, -style:[rightButtonStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:193}}); - - +menuIcon=_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[rightButtonStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:127}}); } } if(onPress&&(rightTitle||buttonImage)){ onPress=onPress.bind(null,state); return( -_react2.default.createElement(_reactNative.TouchableOpacity,{ -key:'rightNavBarBtn', -testID:'rightNavButton', -style:style, -onPress:onPress, -hitSlop:state.hitSlop||hitSlop,__source:{fileName:_jsxFileName,lineNumber:204}}, - -rightTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:211}}, -rightTitle), - - -!rightTitle&&buttonImage&&_react2.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'flex-end'},__source:{fileName:_jsxFileName,lineNumber:215}}, -menuIcon||_react2.default.createElement(_reactNative.Image,{ -source:buttonImage, -style:[state.rightButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:216}})))); +_react2.default.createElement(_reactNative.TouchableOpacity,{key:'rightNavBarBtn',testID:'rightNavButton',style:style,onPress:onPress,hitSlop:state.hitSlop||hitSlop,__source:{fileName:_jsxFileName,lineNumber:134}}, +rightTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:135}},rightTitle), +!rightTitle&& +buttonImage&& +_react2.default.createElement(_reactNative.View,{ +style:{ +flex:1, +justifyContent:'center', +alignItems:'flex-end'},__source:{fileName:_jsxFileName,lineNumber:138}}, +menuIcon||_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[state.rightButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:145}})))); } -if(!!state.onRight^!!(typeof rightTitle!=='undefined'|| -typeof buttonImage!=='undefined')){ +if(!!state.onRight^!!(typeof rightTitle!=='undefined'||typeof buttonImage!=='undefined')){ console.warn('Both onRight and rightTitle/rightButtonImage\n must be specified for the scene: '+ state.routeName); @@ -245,8 +169,7 @@ width:180, alignSelf:'center'}, titleWrapper:_extends({ -marginTop:10, -position:'absolute'}, +marginTop:10}, _reactNative.Platform.select({ ios:{ top:20}, @@ -255,16 +178,13 @@ android:{ top:5}, windows:{ -top:5}}),{ +top:5}})), -left:0, -right:0}), header:_extends({ backgroundColor:'#EFEFF2', -paddingTop:0, -top:0}, +paddingTop:0}, _reactNative.Platform.select({ ios:{ height:64}, @@ -276,14 +196,10 @@ windows:{ height:54}}),{ -right:0, -left:0, borderBottomWidth:0.5, -borderBottomColor:'#828287', -position:'absolute'}), +borderBottomColor:'#828287'}), -backButton:_extends({ -position:'absolute'}, +backButton:_extends({}, _reactNative.Platform.select({ ios:{ top:12}, @@ -300,37 +216,13 @@ paddingLeft:8, flexDirection:'row', transform:[{scaleX:_reactNative.I18nManager.isRTL?-1:1}]}), -rightButton:_extends({}, -_reactNative.Platform.select({ -ios:{ -position:'absolute', -top:12}, - -android:{ -top:0}, - -windows:{ -top:8}}),{ - - +rightButton:{ right:2, -paddingRight:8}), - -leftButton:_extends({}, -_reactNative.Platform.select({ -ios:{ -position:'absolute', -top:12}, - -android:{ -top:0}, - -windows:{ -top:8}}),{ - +paddingRight:8}, +leftButton:{ left:2, -paddingLeft:8}), +paddingLeft:8}, barRightButtonText:{ color:'rgb(0, 122, 255)', @@ -348,16 +240,9 @@ color:'rgb(0, 122, 255)', textAlign:'left', fontSize:17}, -backButtonContainer:_extends({}, -_reactNative.Platform.select({ -ios:{ -position:'absolute', -top:0, -left:0}}),{ - - +backButtonContainer:{ height:50, -width:70}), +width:70}, backButtonImage:_extends({}, _reactNative.Platform.select({ diff --git a/dist/Reducer.js b/dist/Reducer.js index 0c98eca15..fed1ea685 100644 --- a/dist/Reducer.js +++ b/dist/Reducer.js @@ -75,6 +75,9 @@ reducer=reducer;exports.default= -createReducer;var _lodash=require('lodash.isequal');var _lodash2=_interopRequireDefault(_lodash);var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);var _ActionConst=require('./ActionConst');var ActionConst=_interopRequireWildcard(_ActionConst);var _reactNavigation=require('react-navigation');var _State=require('./State');function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}var supportedActions=exports.supportedActions=(_supportedActions={},_defineProperty(_supportedActions,ActionConst.PUSH,_reactNavigation.NavigationActions.NAVIGATE),_defineProperty(_supportedActions,ActionConst.BACK,_reactNavigation.NavigationActions.BACK),_defineProperty(_supportedActions,ActionConst.REFRESH,_reactNavigation.NavigationActions.BACK),_defineProperty(_supportedActions,ActionConst.RESET,_reactNavigation.NavigationActions.RESET),_supportedActions);var createAction=function createAction(type){return function(){var payload=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};return _extends({type:type},payload);};};function reducer(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:_navigationStore2.default.state;var action=arguments[1];var type=action.type;var routeName=action.routeName;if(supportedActions[type]){var newState=_navigationStore2.default.router.getStateForAction(createAction(supportedActions[type])({routeName:routeName,params:action.params}),state);return newState||state;}if(type===ActionConst.JUMP){var _newState=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:routeName,params:action.params}),state);var activeState=(0,_State.getActiveState)(state);if(activeState.routeName==='DrawerOpen'){activeState=(0,_State.getActiveStateExceptDrawer)(state);if((0,_State.isActiveRoute)(state,routeName)){return _navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:'DrawerClose'}),state);}}if((0,_State.isActiveRoute)(state,routeName)){return state;}var key=(0,_State.getActiveState)(_newState).key;return _navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.setParams({key:key,params:action.params}),_newState);}else if(type===ActionConst.POP_TO){var nextScene='';var _newState2=state;var currentState=state;var initialState=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.popToTop(),currentState);while(_newState2&&nextScene!==routeName){_newState2=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.back(),currentState);if(_newState2){nextScene=(0,_State.getActiveState)(_newState2).routeName;if(nextScene!==routeName){currentState=_newState2;}if((0,_lodash2.default)(currentState,initialState)){break;}}}return nextScene===routeName?_newState2:state;}else if(type===ActionConst.REPLACE){var _newState3=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:routeName,params:action.params}),state);return(0,_State.popPrevious)(_newState3);}return _navigationStore2.default.router.getStateForAction(action,state)||state;}function createReducer(){ + + + +createReducer;var _lodash=require('lodash.isequal');var _lodash2=_interopRequireDefault(_lodash);var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);var _ActionConst=require('./ActionConst');var ActionConst=_interopRequireWildcard(_ActionConst);var _reactNavigation=require('react-navigation');var _State=require('./State');function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}var supportedActions=exports.supportedActions=(_supportedActions={},_defineProperty(_supportedActions,ActionConst.PUSH,_reactNavigation.NavigationActions.NAVIGATE),_defineProperty(_supportedActions,ActionConst.BACK,_reactNavigation.NavigationActions.BACK),_defineProperty(_supportedActions,ActionConst.REFRESH,_reactNavigation.NavigationActions.BACK),_defineProperty(_supportedActions,ActionConst.RESET,_reactNavigation.NavigationActions.RESET),_supportedActions);var createAction=function createAction(type){return function(){var payload=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};return _extends({type:type},payload);};};function reducer(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:_navigationStore2.default.state;var action=arguments[1];var type=action.type;var routeName=action.routeName;if(supportedActions[type]){var newState=_navigationStore2.default.router.getStateForAction(createAction(supportedActions[type])({routeName:routeName,params:action.params}),state);return newState||state;}if(type===ActionConst.JUMP){var _newState=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:routeName,params:action.params}),state);var activeState=(0,_State.getActiveState)(state);if(activeState.routeName==='DrawerOpen'){activeState=(0,_State.getActiveStateExceptDrawer)(state);if((0,_State.isActiveRoute)(state,routeName)){return _navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:'DrawerClose'}),state);}}if((0,_State.isActiveRoute)(state,routeName)){return state;}var key=(0,_State.getActiveState)(_newState).key;return _navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.setParams({key:key,params:action.params}),_newState);}else if(type===ActionConst.POP_TO){var nextScene='';var _newState2=state;var currentState=state;var initialState=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.popToTop(),currentState);while(_newState2&&nextScene!==routeName){_newState2=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.back(),currentState);if(_newState2){nextScene=(0,_State.getActiveState)(_newState2).routeName;if(nextScene!==routeName){currentState=_newState2;}if((0,_lodash2.default)(currentState,initialState)){console.warn('popTo called with an unknown routeName: '+routeName);break;}}}return nextScene===routeName?_newState2:state;}else if(type===ActionConst.REPLACE){var _newState3=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:routeName,params:action.params}),state);return(0,_State.popPrevious)(_newState3);}return _navigationStore2.default.router.getStateForAction(action,state)||state;}function createReducer(){ return reducer; } \ No newline at end of file diff --git a/dist/Router.js b/dist/Router.js index c0e455d4e..d2ae56167 100644 --- a/dist/Router.js +++ b/dist/Router.js @@ -1,13 +1,10 @@ -Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var - -App=(0,_native.observer)(_class=(_temp2=_class2=function(_React$Component){_inherits(App,_React$Component);function App(){var _ref;var _temp,_this,_ret;_classCallCheck(this,App);for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return _ret=(_temp=(_this=_possibleConstructorReturn(this,(_ref=App.__proto__||Object.getPrototypeOf(App)).call.apply(_ref,[this].concat(args))),_this),_this. +App=(_temp2=_class=function(_React$Component){_inherits(App,_React$Component);function App(){var _ref;var _temp,_this,_ret;_classCallCheck(this,App);for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return _ret=(_temp=(_this=_possibleConstructorReturn(this,(_ref=App.__proto__||Object.getPrototypeOf(App)).call.apply(_ref,[this].concat(args))),_this),_this. @@ -35,19 +32,27 @@ handleDeepURL=function(e){return _this.parseDeepURL(e.url);},_this. parseDeepURL=function(url){ -if(!url){return;} +if(!url){ +return; +} var cleanUrl=_this.props.uriPrefix?url.split(_this.props.uriPrefix)[1]:url; -if(!cleanUrl){return;} +if(!cleanUrl){ +return; +} -var allPaths=Object.values(_navigationStore2.default.states).map(function(obj){return obj.path;}).filter(function(path){return path;}); +var allPaths=Object.values(_navigationStore2.default.states). +map(function(obj){return obj.path;}). +filter(function(path){return path;}); var parsedPath=(0,_pathParser2.default)(cleanUrl,allPaths); -if(!parsedPath){return;}var +if(!parsedPath){ +return; +}var path=parsedPath.path,params=parsedPath.params; @@ -68,10 +73,16 @@ _navigationStore2.default[actionKey](params); { var AppNavigator=this.props.navigator; +console.log('NAVIGATOR:',AppNavigator); return( -_react2.default.createElement(AppNavigator,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:_navigationStore2.default.dispatch,state:_navigationStore2.default.state,addListener:_navigationStore2.default.addListener}),__source:{fileName:_jsxFileName,lineNumber:72}})); +_react2.default.createElement(AppNavigator,{ +onNavigationStateChange:_navigationStore2.default.onNavigationStateChange, +ref:function ref(navigatorRef){ +_navigationStore2.default.setTopLevelNavigator(navigatorRef); +},__source:{fileName:_jsxFileName,lineNumber:78}})); -}}]);return App;}(_react2.default.Component),_class2.propTypes={navigator:_propTypes2.default.func,backAndroidHandler:_propTypes2.default.func,uriPrefix:_propTypes2.default.string,onDeepLink:_propTypes2.default.func},_temp2))||_class; + +}}]);return App;}(_react2.default.Component),_class.propTypes={navigator:_propTypes2.default.func,backAndroidHandler:_propTypes2.default.func,uriPrefix:_propTypes2.default.string,onDeepLink:_propTypes2.default.func},_temp2); var Router=function Router(_ref6){var createReducer=_ref6.createReducer,sceneStyle=_ref6.sceneStyle,scenes=_ref6.scenes,uriPrefix=_ref6.uriPrefix,navigator=_ref6.navigator,getSceneStyle=_ref6.getSceneStyle,children=_ref6.children,state=_ref6.state,dispatch=_ref6.dispatch,onDeepLink=_ref6.onDeepLink,_ref6$wrapBy=_ref6.wrapBy,wrapBy=_ref6$wrapBy===undefined?function(props){return props;}:_ref6$wrapBy,props=_objectWithoutProperties(_ref6,['createReducer','sceneStyle','scenes','uriPrefix','navigator','getSceneStyle','children','state','dispatch','onDeepLink','wrapBy']); @@ -83,14 +94,7 @@ if(sceneStyle){ data.cardStyle=sceneStyle; } var AppNavigator=scenes||navigator||_navigationStore2.default.create(children,data,wrapBy); -_navigationStore2.default.reducer=createReducer&&createReducer(props); -if(dispatch&&state){ - -_navigationStore2.default.setState(state); -_navigationStore2.default.dispatch=dispatch; -return _react2.default.createElement(AppNavigator,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:dispatch,state:state,addListener:_navigationStore2.default.addListener}),uriPrefix:uriPrefix,__source:{fileName:_jsxFileName,lineNumber:91}}); -} -return _react2.default.createElement(App,_extends({},props,{onDeepLink:onDeepLink,navigator:AppNavigator,uriPrefix:uriPrefix,__source:{fileName:_jsxFileName,lineNumber:93}})); +return _react2.default.createElement(App,_extends({},props,{onDeepLink:onDeepLink,navigator:AppNavigator,uriPrefix:uriPrefix,__source:{fileName:_jsxFileName,lineNumber:97}})); }; Router.propTypes={ createReducer:_propTypes2.default.func, diff --git a/dist/navigationStore.js b/dist/navigationStore.js index 842435a06..712e0f0cf 100644 --- a/dist/navigationStore.js +++ b/dist/navigationStore.js @@ -1,23 +1,15 @@ -Object.defineProperty(exports,"__esModule",{value:true});exports.actionMap=undefined;var _createClass=function(){function defineProperties(target,props){for(var i=0;i1&&arguments[1]!==undefined?arguments[1]:{};var wrapBy=arguments.length>2&&arguments[2]!==undefined?arguments[2]:function(props){return props;}; -(0,_Util.assert)( -!Array.isArray(scene), -'Router should contain only one scene, please wrap your scenes with root Scene '); - +(0,_Util.assert)(!Array.isArray(scene),'Router should contain only one scene, please wrap your scenes with root Scene '); RightNavBarButton=wrapBy(_NavBar.RightButton); LeftNavBarButton=wrapBy(_NavBar.LeftButton); BackNavBarButton=wrapBy(_NavBar.BackButton); var AppNavigator=_this2.processScene(scene,params,[],wrapBy); -_this2.router=AppNavigator.router; -_this2.dispatch(_reactNavigation.NavigationActions.init()); return AppNavigator; };this. @@ -623,25 +513,8 @@ return null; } var res={}; var order=[];var _scene$props= - - - - - - - - scene.props,navigator=_scene$props.navigator,contentComponent=_scene$props.contentComponent,drawerWidth=_scene$props.drawerWidth,drawerLockMode=_scene$props.drawerLockMode,lazy=_scene$props.lazy,duration=_scene$props.duration,parentProps=_objectWithoutProperties(_scene$props,['navigator','contentComponent','drawerWidth','drawerLockMode','lazy','duration']);var - -tabs= - - - - - - - -parentProps.tabs,modal=parentProps.modal,lightbox=parentProps.lightbox,overlay=parentProps.overlay,tabBarPosition=parentProps.tabBarPosition,drawer=parentProps.drawer,tabBarComponent=parentProps.tabBarComponent,transitionConfig=parentProps.transitionConfig; +tabs=parentProps.tabs,modal=parentProps.modal,lightbox=parentProps.lightbox,overlay=parentProps.overlay,tabBarPosition=parentProps.tabBarPosition,drawer=parentProps.drawer,tabBarComponent=parentProps.tabBarComponent,transitionConfig=parentProps.transitionConfig; if(scene.type===_Modal2.default){ modal=true; }else if(scene.type===_Drawer2.default){ @@ -669,10 +542,7 @@ delete commonProps.children; delete commonProps.component; for(var _iterator4=Object.keys(commonProps),_isArray4=Array.isArray(_iterator4),_i5=0,_iterator4=_isArray4?_iterator4:_iterator4[typeof Symbol==='function'?typeof Symbol==='function'?typeof Symbol==='function'?Symbol.iterator:'@@iterator':'@@iterator':'@@iterator']();;){var _ref8;if(_isArray4){if(_i5>=_iterator4.length)break;_ref8=_iterator4[_i5++];}else{_i5=_iterator4.next();if(_i5.done)break;_ref8=_i5.value;}var pkey=_ref8; -if( -dontInheritKeys.includes(pkey)&&( -pkey==='type'||pkey==='hideNavBar'||!parentProps[pkey])) -{ +if(dontInheritKeys.includes(pkey)&&(pkey==='type'||pkey==='hideNavBar'||!parentProps[pkey])){ delete commonProps[pkey]; } } @@ -681,9 +551,7 @@ if(drawer){ commonProps.drawerImage=commonProps.drawerImage||_menu_burger2.default; } -var children=!Array.isArray(parentProps.children)? -[parentProps.children]: -[].concat.apply([],parentProps.children); +var children=!Array.isArray(parentProps.children)?[parentProps.children]:[].concat.apply([],parentProps.children); if(!drawer&&!tabs&&!overlay){ children.push.apply(children,_toConsumableArray(clones)); @@ -701,31 +569,13 @@ var initialRouteParams=void 0;var _loop2=function _loop2( _child){ var key=_child.key||'key'+counter++; var init=key===children[0].key; -(0,_Util.assert)( -reservedKeys.indexOf(key)===-1,'Scene name cannot be reserved word: '+ -_child.key);var _child$props= - - - - - - - - - - - - - +(0,_Util.assert)(reservedKeys.indexOf(key)===-1,'Scene name cannot be reserved word: '+_child.key);var _child$props= _child.props,component=_child$props.component,_child$props$type=_child$props.type,type=_child$props$type===undefined?tabs||drawer?'jump':'push':_child$props$type,path=_child$props.path,onEnter=_child$props.onEnter,onExit=_child$props.onExit,on=_child$props.on,failure=_child$props.failure,success=_child$props.success,wrap=_child$props.wrap,_child$props$initial=_child$props.initial,initial=_child$props$initial===undefined?false:_child$props$initial,props=_objectWithoutProperties(_child$props,['component','type','path','onEnter','onExit','on','failure','success','wrap','initial']); if(!_this2.states[key]){ _this2.states[key]={}; } for(var _iterator7=Object.keys(props),_isArray7=Array.isArray(_iterator7),_i8=0,_iterator7=_isArray7?_iterator7:_iterator7[typeof Symbol==='function'?typeof Symbol==='function'?typeof Symbol==='function'?Symbol.iterator:'@@iterator':'@@iterator':'@@iterator']();;){var _ref11;if(_isArray7){if(_i8>=_iterator7.length)break;_ref11=_iterator7[_i8++];}else{_i8=_iterator7.next();if(_i8.done)break;_ref11=_i8.value;}var transition=_ref11; -if( -reservedKeys.indexOf(transition)===-1&& -props[transition]instanceof Function) -{ +if(reservedKeys.indexOf(transition)===-1&&props[transition]instanceof Function){ _this2.states[key][transition]=props[transition]; } } @@ -753,10 +603,7 @@ _this2.states[key].path=path; } var screen={ -screen: -createWrapper(component,wrapBy,_this2)|| -_this2.processScene(_child,commonProps,clones)|| -lightbox&&function(){return null;}, +screen:createWrapper(component,wrapBy,_this2)||_this2.processScene(_child,commonProps,clones)||lightbox&&function(){return null;}, navigationOptions:createNavigationOptions(_extends({}, commonProps,{ hideNavBar:parentProps.hideNavBar}, @@ -805,17 +652,13 @@ _this2[key]=new Function( 'actions', 'props', 'type','return function '+ -key.replace( -/\W/g, -'_')+'(params){ actions.execute(type, \''+ + +key.replace(/\W/g,'_')+'(params){ actions.execute(type, \''+ key+'\', props, params)}')(_this2,_extends({}, commonProps,props),type); } -if( -(onEnter||on||component&&component.onEnter)&& -!_this2[key+_Util.OnEnter]) -{ +if((onEnter||on||component&&component.onEnter)&&!_this2[key+_Util.OnEnter]){ _this2[key+_Util.OnEnter]=onEnter||on||component.onEnter; } @@ -851,15 +694,12 @@ navigationOptions:createNavigationOptions(commonProps)})); }else if(tabs){ if(!tabBarComponent){ -tabBarComponent= -tabBarPosition==='top'? -function(props){return _react2.default.createElement(_reactNavigation.TabBarTop,_extends({},props,commonProps,{__source:{fileName:_jsxFileName,lineNumber:856}}));}: -function(props){return _react2.default.createElement(_reactNavigation.TabBarBottom,_extends({},props,commonProps,{__source:{fileName:_jsxFileName,lineNumber:857}}));}; +tabBarComponent=tabBarPosition==='top'?function(props){return _react2.default.createElement(_reactNavigation.TabBarTop,_extends({},props,commonProps,{__source:{fileName:_jsxFileName,lineNumber:697}}));}:function(props){return _react2.default.createElement(_reactNavigation.TabBarBottom,_extends({},props,commonProps,{__source:{fileName:_jsxFileName,lineNumber:697}}));}; } if(!tabBarPosition){ tabBarPosition=_reactNative.Platform.OS==='android'?'top':'bottom'; } -return(0,_reactNavigation.TabNavigator)(res,_extends({ +return(0,_reactNavigation.createTabNavigator)(res,_extends({ lazy:lazy, tabBarComponent:tabBarComponent, tabBarPosition:tabBarPosition, @@ -886,7 +726,7 @@ config.drawerWidth=drawerWidth; if(drawerLockMode){ config.drawerLockMode=drawerLockMode; } -return(0,_reactNavigation.DrawerNavigator)(res,config); +return(0,_reactNavigation.createDrawerNavigator)(res,config); }else if(overlay){ return(0,_OverlayNavigator2.default)(res,_extends({ lazy:lazy, @@ -899,7 +739,7 @@ tabBarOptions:createTabBarOptions(commonProps), navigationOptions:createNavigationOptions(commonProps)})); } -return(0,_reactNavigation.StackNavigator)(res,_extends({ +return(0,_reactNavigation.createStackNavigator)(res,_extends({ mode:mode, initialRouteParams:initialRouteParams, initialRouteName:initialRouteName}, @@ -909,87 +749,10 @@ navigationOptions:createNavigationOptions(commonProps)})); };this. -nextState=function(state,cmd){return( -_this2.reducer?_this2.reducer(state,cmd):(0,_Reducer.reducer)(state,cmd));};this. - -dispatch=function(cmd){ -_this2.setState(_this2.nextState(_this2.state,cmd)); +dispatch=function(action){ +console.log('DISPATCH:',JSON.stringify(action)); +_this2._navigator.dispatch(action); };this. -addListener=function(){return( -{ -remove:function remove(){}});};_initDefineProp(this,'setState',_descriptor4,this);this. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - execute=function(actionType,routeName){for(var _len=arguments.length,params=Array(_len>2?_len-2:0),_key=2;_key<_len;_key++){params[_key-2]=arguments[_key];} var res=uniteParams(routeName,params); @@ -1004,30 +767,33 @@ _this2[type](routeName,res); push=function(routeName,data){ var params=filterParam(data); -_this2.dispatch({type:ActionConst.PUSH,routeName:routeName,params:params}); +_this2.dispatch({type:_reactNavigation.NavigationActions.NAVIGATE,routeName:routeName,params:params}); };this. jump=function(routeName,data){ var params=filterParam(data); -_this2.dispatch({type:ActionConst.JUMP,routeName:routeName,params:params}); +_this2.dispatch({type:_reactNavigation.NavigationActions.NAVIGATE,routeName:routeName,params:params}); };this. drawerOpen=function(){ -_this2.dispatch(_reactNavigation.NavigationActions.navigate({routeName:'DrawerOpen'})); +_this2.dispatch(_reactNavigation.DrawerActions.openDrawer()); };this. drawerClose=function(){ -_this2.dispatch(_reactNavigation.NavigationActions.navigate({routeName:'DrawerClose'})); +_this2.dispatch(_reactNavigation.DrawerActions.closeDrawer()); +};this. + +drawerToggle=function(){ +_this2.dispatch(_reactNavigation.DrawerActions.toggleDrawer()); };this. refresh=function(data){ -var key=(0,_State.getActiveState)(_this2._state).key; var params=filterParam(data); +var key=(0,_State.getActiveState)(_this2.state).key; _this2.dispatch(_reactNavigation.NavigationActions.setParams({key:key,params:params})); };this. pop=function(){var _ref12=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{},timeout=_ref12.timeout,params=_objectWithoutProperties(_ref12,['timeout']); -var previous=(0,_State.getActiveState)(_this2.state); var res=filterParam(params); if(timeout){ setTimeout(function(){return _this2.pop(params);},timeout); @@ -1037,7 +803,7 @@ if(res.refresh){ _this2.refresh(res.refresh); } } -return!(0,_lodash2.default)(previous,(0,_State.getActiveState)(_this2.state)); +return true; };this. popTo=function(routeName,data){ @@ -1069,7 +835,7 @@ params:params})]})); -};}_createClass(NavigationStore,[{key:'state',get:function get(){var scene=this.currentScene;var params=this.currentParams;return this._state;}}]);return NavigationStore;}(),(_descriptor=_applyDecoratedDescriptor(_class2.prototype,'currentScene',[_mobx.observable],{enumerable:true,initializer:function initializer(){return'';}}),_descriptor2=_applyDecoratedDescriptor(_class2.prototype,'prevScene',[_mobx.observable],{enumerable:true,initializer:function initializer(){return'';}}),_descriptor3=_applyDecoratedDescriptor(_class2.prototype,'currentParams',[_mobx.observable],{enumerable:true,initializer:null}),_descriptor4=_applyDecoratedDescriptor(_class2.prototype,'setState',[_mobx.action],{enumerable:true,initializer:function initializer(){var _this3=this;return function _callee(newState){var state,currentScene,exitHandler,res,handler,_success,_failure,params,_res;return regeneratorRuntime.async(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:if(newState){_context.next=2;break;}return _context.abrupt('return');case 2:state=(0,_State.getActiveState)(newState);if(!((0,_lodash2.default)(state.params,_this3._currentParams)&&state.routeName===_this3.currentScene)){_context.next=5;break;}return _context.abrupt('return');case 5:currentScene=_this3.currentScene;_this3._state=newState;_this3.currentScene=state.routeName;_this3.prevScene=currentScene;_this3.currentParams=state.params;_this3._currentParams=state.params;if(!(currentScene!==_this3.currentScene&&_this3.currentScene!=='DrawerOpen'&&_this3.currentScene!=='DrawerClose')){_context.next=32;break;}_this3.dispatch({type:ActionConst.BLUR,routeName:currentScene});exitHandler=_this3[currentScene+_Util.OnExit];if(exitHandler){try{res=exitHandler();if(res instanceof Promise){res.then(defaultSuccess,defaultFailure);}}catch(e){console.error('Error during onExit handler:',e);}}_this3.dispatch({type:ActionConst.FOCUS,routeName:_this3.currentScene,params:_this3._currentParams});if(!_this3.states[_this3.currentScene]){_context.next=32;break;}handler=_this3[_this3.currentScene+_Util.OnEnter];_success=_this3.states[_this3.currentScene].success||defaultSuccess;_failure=_this3.states[_this3.currentScene].failure||defaultFailure;if(!handler){_context.next=32;break;}_context.prev=21;params=(0,_State.getActiveState)(_this3._state).params;_context.next=25;return regeneratorRuntime.awrap(handler(params));case 25:_res=_context.sent;if(_res){_success(_res);}else{_failure();}_context.next=32;break;case 29:_context.prev=29;_context.t0=_context['catch'](21);_failure({error:_context.t0.message});case 32:case'end':return _context.stop();}}},null,_this3,[[21,29]]);};}})),_class2);exports.default= +};}_createClass(NavigationStore,[{key:'currentScene',get:function get(){return(0,_State.getActiveState)(this.state);}},{key:'prevScene',get:function get(){return(0,_State.getActiveState)(this.prevState);}}]);return NavigationStore;}(),(_descriptor=_applyDecoratedDescriptor(_class2.prototype,'state',[_mobx.observable],{enumerable:true,initializer:null}),_descriptor2=_applyDecoratedDescriptor(_class2.prototype,'prevState',[_mobx.observable],{enumerable:true,initializer:null}),_descriptor3=_applyDecoratedDescriptor(_class2.prototype,'currentParams',[_mobx.observable],{enumerable:true,initializer:null}),_applyDecoratedDescriptor(_class2.prototype,'currentScene',[_mobx.computed],Object.getOwnPropertyDescriptor(_class2.prototype,'currentScene'),_class2.prototype),_applyDecoratedDescriptor(_class2.prototype,'prevScene',[_mobx.computed],Object.getOwnPropertyDescriptor(_class2.prototype,'prevScene'),_class2.prototype)),_class2);exports.default= new NavigationStore(); \ No newline at end of file diff --git a/src/.watchmanconfig b/src/.watchmanconfig new file mode 100644 index 000000000..3801452d4 --- /dev/null +++ b/src/.watchmanconfig @@ -0,0 +1,3 @@ +{ + "ignore_dirs": [] +} diff --git a/src/LightboxNavigator.js b/src/LightboxNavigator.js index ca69f538a..9d1a974f4 100644 --- a/src/LightboxNavigator.js +++ b/src/LightboxNavigator.js @@ -5,39 +5,55 @@ import { addNavigationHelpers, createNavigationContainer, createNavigator, TabRo import { View } from 'react-native'; import navigationStore from './navigationStore'; -const LightboxNavigator = ( - routeConfigs, - tabsConfig = {} -) => { +const NavigationView = ({ navigation, screenProps, navigationConfig, descriptors }) => { + const { state, dispatch } = navigation; + const { routes, index } = state; + + console.log('DATA:', JSON.stringify(navigationConfig)); + return ; + + // // Figure out what to render based on the navigation state and the router: + // const Component = descriptors[ + // navigationConfig.initialRouteName + // ].getComponent(); + // let initialIndex = 0; + // for (let i = 0; i < routes.length; i++) { + // const route = routes[i]; + // if (route.routeName === tabsConfig.initialRouteName) { + // initialIndex = i; + // } + // } + // const Popup = + // index !== initialIndex + // ? routeConfigs[routes[index].routeName].screen + // : null; + + // return ( + // + // + // {Popup && ( + // + // )} + // + // ); +}; + +const LightboxNavigator = (routeConfigs, tabsConfig = {}) => { const router = TabRouter(routeConfigs, tabsConfig); - const navigator = createNavigator( - router, - routeConfigs, - tabsConfig, - 'react-navigation/STACK' - )(({ navigation }) => { - const { state, dispatch } = navigation; - const { routes, index } = state; - - // Figure out what to render based on the navigation state and the router: - const Component = routeConfigs[tabsConfig.initialRouteName].screen; - let initialIndex = 0; - for (let i = 0; i < routes.length; i++) { - const route = routes[i]; - if (route.routeName === tabsConfig.initialRouteName) { - initialIndex = i; - } - } - const Popup = index !== initialIndex ? routeConfigs[routes[index].routeName].screen : null; - - return ( - - {Popup && } - ); - }); - - return createNavigationContainer(navigator, tabsConfig.containerOptions); + return createNavigator(NavigationView, router, tabsConfig); }; export default LightboxNavigator; diff --git a/src/NavBar.js b/src/NavBar.js index 3a45019ff..34a514d1f 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -1,27 +1,13 @@ import React from 'react'; import { HeaderBackButton } from 'react-navigation'; -import { - Platform, - I18nManager, - Image, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native'; +import { Platform, I18nManager, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import Actions from './navigationStore'; import _backButtonImage from '../images/back_chevron.png'; const hitSlop = { top: 15, bottom: 15, left: 15, right: 15 }; export function BackButton(state) { - const textButtonStyle = [ - styles.barBackButtonText, - state.backButtonTextStyle, - ]; - const style = [ - styles.backButton, - state.leftButtonStyle, - ]; + const textButtonStyle = [styles.barBackButtonText, state.backButtonTextStyle]; + const style = [styles.backButton, state.leftButtonStyle]; const buttonImage = state.backButtonImage || _backButtonImage; const tintColor = getValue(state.backButtonTintColor, state) || state.tintColor || state.navBarButtonColor || state.headerTintColor; let onPress = state.onBack; @@ -34,41 +20,16 @@ export function BackButton(state) { // returning react-navigation's back button well styled for ios and android if rnrf4-supported customization // is not required if (!state.backButtonImage) { - return ( - - ); + return ; } - const text = state.backTitle ? - ( - {state.backTitle} - ) - : null; + const text = state.backTitle ? {state.backTitle} : null; return ( - + - {buttonImage && !state.hideBackImage && - } - {text} + {buttonImage && !state.hideBackImage && } + {text} ); @@ -89,15 +50,7 @@ export function LeftButton(state) { if (state.leftButton || state.left) { const Button = state.leftButton || state.left; - return ( - - + diff --git a/Example/components/EchoView.js b/Example/components/EchoView.js index 25fde5615..bee15f633 100644 --- a/Example/components/EchoView.js +++ b/Example/components/EchoView.js @@ -1,26 +1,26 @@ import React from 'react'; -import {View, Text, StyleSheet} from "react-native"; -import Button from "react-native-button"; -import {Actions} from "react-native-router-flux"; +import { View, Text, StyleSheet } from 'react-native'; +import Button from 'react-native-button'; +import { Actions } from 'react-native-router-flux'; const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#F5FCFF", - borderWidth: 2, - borderColor: 'red', - }, - instructions: { - textAlign: "center", - color: "#333333", - marginBottom: 5, - }, - smaller: { - marginBottom: 5, - fontSize: 12, - }, + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + borderWidth: 2, + borderColor: 'red', + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, + smaller: { + marginBottom: 5, + fontSize: 12, + }, }); @@ -28,13 +28,13 @@ export default class extends React.Component { onEnter() { console.log('EchoView onEnter'); } - render(){ - return ( - - routeName: {this.props.name} - - - ); + + render() { + return ( + + routeName: {this.props.name} + + + ); } } - diff --git a/Example/components/Error.js b/Example/components/Error.js index d015be4fe..a9338058a 100644 --- a/Example/components/Error.js +++ b/Example/components/Error.js @@ -1,9 +1,11 @@ import React from 'react'; -import { View, Text, StyleSheet, Animated, Dimensions } from 'react-native'; +import { + View, Text, StyleSheet, Animated, Dimensions, +} from 'react-native'; import Button from 'react-native-button'; import { Actions } from 'react-native-router-flux'; -const { height: deviceHeight } = Dimensions.get("window"); +const { height: deviceHeight } = Dimensions.get('window'); const styles = StyleSheet.create({ container: { @@ -23,35 +25,37 @@ export default class extends React.Component { super(props); this.state = { - offset: new Animated.Value(-deviceHeight) + offset: new Animated.Value(-deviceHeight), }; } componentDidMount() { Animated.timing(this.state.offset, { duration: 150, - toValue: 0 + toValue: 0, }).start(); } closeModal() { Animated.timing(this.state.offset, { duration: 150, - toValue: -deviceHeight + toValue: -deviceHeight, }).start(Actions.pop); } render() { return ( + { transform: [{ translateY: this.state.offset }] }]} + > + backgroundColor: 'white', + }} + > {this.props.data} diff --git a/Example/components/Home.js b/Example/components/Home.js index beed44b6e..c5769bebe 100644 --- a/Example/components/Home.js +++ b/Example/components/Home.js @@ -1,36 +1,36 @@ import React from 'react'; -import {View, Text, StyleSheet} from "react-native"; -import Button from "react-native-button"; -import {Actions} from "react-native-router-flux"; +import { View, Text, StyleSheet } from 'react-native'; +import Button from 'react-native-button'; +import { Actions } from 'react-native-router-flux'; -var styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#F5FCFF", - }, - welcome: { - fontSize: 20, - textAlign: "center", - margin: 10, - }, - instructions: { - textAlign: "center", - color: "#333333", - marginBottom: 5, - }, +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, }); class Home extends React.Component { - render(){ - return ( - - Replace screen - - - ); - } + render() { + return ( + + Replace screen + + + ); + } } module.exports = Home; diff --git a/Example/components/Launch.js b/Example/components/Launch.js index 338767b30..3d2fa29d2 100644 --- a/Example/components/Launch.js +++ b/Example/components/Launch.js @@ -1,5 +1,7 @@ import React from 'react'; -import { View, Text, StyleSheet, Button } from 'react-native'; +import { + View, Text, StyleSheet, Button, +} from 'react-native'; import { Actions } from 'react-native-router-flux'; import { MessageBarManager } from 'react-native-message-bar'; @@ -20,7 +22,7 @@ class Launch extends React.Component { - + + ); diff --git a/Example/components/Login2.js b/Example/components/Login2.js index 234bbe591..a63d51458 100644 --- a/Example/components/Login2.js +++ b/Example/components/Login2.js @@ -1,29 +1,29 @@ import React from 'react'; -import {View, Text, StyleSheet} from "react-native"; -import Button from "react-native-button"; -import {Actions} from "react-native-router-flux"; +import { View, Text, StyleSheet } from 'react-native'; +import Button from 'react-native-button'; +import { Actions } from 'react-native-router-flux'; const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#F5FCFF", - }, + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, }); export default class extends React.Component { - render(){ - const title = this.props.title || 'No Title'; - const data = this.props.data || 'No Data'; - return ( - - Login page 2 - Title: {title} - Data: {data} - - - - ); - } + render() { + const title = this.props.title || 'No Title'; + const data = this.props.data || 'No Data'; + return ( + + Login page 2 + Title: {title} + Data: {data} + + + + ); + } } diff --git a/Example/components/Login3.js b/Example/components/Login3.js index 63cf44bf2..17fc3c769 100644 --- a/Example/components/Login3.js +++ b/Example/components/Login3.js @@ -1,43 +1,43 @@ import React from 'react'; -import {View, Text, StyleSheet} from "react-native"; -import Button from "react-native-button"; -import {Actions} from "react-native-router-flux"; +import { View, Text, StyleSheet } from 'react-native'; +import Button from 'react-native-button'; +import { Actions } from 'react-native-router-flux'; const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#F5FCFF", - }, + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, }); const popToRoot = () => { - Actions.popTo("launch"); + Actions.popTo('launch'); }; const popToLogin1 = () => { - Actions.popTo("loginModal"); + Actions.popTo('loginModal'); }; const popToLogin2 = () => { - Actions.popTo("loginModal2"); + Actions.popTo('loginModal2'); }; export default class extends React.Component { - render(){ - const title = this.props.title || 'No Title'; - const data = this.props.data || 'No Data'; - return ( - - Login page 3 - Title: {title} - Data: {data} - - - - - - ); - } + render() { + const title = this.props.title || 'No Title'; + const data = this.props.data || 'No Data'; + return ( + + Login page 3 + Title: {title} + Data: {data} + + + + + + ); + } } diff --git a/Example/components/Register.js b/Example/components/Register.js index bd81f38bd..729193595 100644 --- a/Example/components/Register.js +++ b/Example/components/Register.js @@ -12,13 +12,13 @@ const styles = StyleSheet.create({ }, }); -export default class Register extends React.Component { - render() { - return - Register page - - - - - } -} +const Register = () => ( + + Register page + + + + +); + +export default Register; diff --git a/Example/components/TabIcon.js b/Example/components/TabIcon.js index b97fbe417..3cd0f5eba 100644 --- a/Example/components/TabIcon.js +++ b/Example/components/TabIcon.js @@ -5,17 +5,22 @@ import { } from 'react-native'; const propTypes = { - selected: PropTypes.bool, + focused: PropTypes.bool, title: PropTypes.string, }; -const TabIcon = (props) => { - return {props.title} - +const defaultProps = { + focused: false, + title: '', }; +const TabIcon = props => ( + + {props.title} + +); + TabIcon.propTypes = propTypes; +TabIcon.defaultProps = defaultProps; export default TabIcon; diff --git a/Example/components/TabView.js b/Example/components/TabView.js index e666889c6..7a2361bfc 100644 --- a/Example/components/TabView.js +++ b/Example/components/TabView.js @@ -1,13 +1,20 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { StyleSheet, Text, View, ViewPropTypes } from 'react-native'; +import { + StyleSheet, Text, View, ViewPropTypes, +} from 'react-native'; import Button from 'react-native-button'; import { Actions } from 'react-native-router-flux'; const propTypes = { - name: PropTypes.string, + name: PropTypes.string.isRequired, + data: PropTypes.string.isRequired, sceneStyle: ViewPropTypes.style, - title: PropTypes.string, + title: PropTypes.string.isRequired, +}; + +const defaultProps = { + sceneStyle: null, }; const styles = StyleSheet.create({ @@ -25,7 +32,10 @@ class TabView extends React.Component { state = { hideNavBar: false }; toggleNavBar = () => { - this.setState({ hideNavBar: !this.state.hideNavBar }, () => Actions.refresh({ hideNavBar: this.state.hideNavBar })); + this.setState( + prevState => ({ hideNavBar: !prevState.hideNavBar }), + () => Actions.refresh({ hideNavBar: this.state.hideNavBar }), + ); }; render() { @@ -34,7 +44,7 @@ class TabView extends React.Component { Tab title:{this.props.title} name:{this.props.name} - Tab data:{this.props.data} + Tab data: {this.props.data} {this.props.name === 'tab_1_1' && } {this.props.name === 'tab_2_1' && } @@ -92,5 +102,6 @@ class TabView extends React.Component { } } TabView.propTypes = propTypes; +TabView.defaultProps = defaultProps; export default TabView; diff --git a/Example/components/drawer/DrawerContent.js b/Example/components/drawer/DrawerContent.js index fa90c1291..16f440394 100644 --- a/Example/components/drawer/DrawerContent.js +++ b/Example/components/drawer/DrawerContent.js @@ -1,6 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { StyleSheet, Text, View, ViewPropTypes } from 'react-native'; +import { + StyleSheet, Text, View, ViewPropTypes, +} from 'react-native'; import Button from 'react-native-button'; import { Actions } from 'react-native-router-flux'; diff --git a/Example/components/lightbox/BaseLightbox.js b/Example/components/lightbox/BaseLightbox.js index 44e995636..2a47192e7 100644 --- a/Example/components/lightbox/BaseLightbox.js +++ b/Example/components/lightbox/BaseLightbox.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { View, StyleSheet, Animated, Dimensions, Button } from 'react-native'; +import { + View, StyleSheet, Animated, Dimensions, Button, +} from 'react-native'; import { Actions } from 'react-native-router-flux'; const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window'); @@ -58,7 +60,7 @@ export default class BaseLightbox extends Component { return ( {this._renderLightBox()} - + ); } } diff --git a/Example/components/lightbox/DemoLightbox.js b/Example/components/lightbox/DemoLightbox.js index 95262737b..558219186 100644 --- a/Example/components/lightbox/DemoLightbox.js +++ b/Example/components/lightbox/DemoLightbox.js @@ -1,5 +1,7 @@ import React from 'react'; -import { View, Text, StyleSheet, Animated, Dimensions, Button } from 'react-native'; +import { + View, Text, StyleSheet, Animated, Dimensions, Button, +} from 'react-native'; import { Actions } from 'react-native-router-flux'; import Lightbox from './BaseLightbox'; diff --git a/Example/components/modal/BaseModal.js b/Example/components/modal/BaseModal.js index 0e4f2ad1f..919493c11 100644 --- a/Example/components/modal/BaseModal.js +++ b/Example/components/modal/BaseModal.js @@ -1,24 +1,29 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native'; +import { + View, Text, TouchableOpacity, StyleSheet, Dimensions, +} from 'react-native'; import { Actions } from 'react-native-router-flux'; const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window'); -const BaseModal = ({ children, verticalPercent, horizontalPercent, hideClose }) => { +const BaseModal = ({ + children, verticalPercent, horizontalPercent, hideClose, +}) => { const height = verticalPercent ? deviceHeight * verticalPercent : deviceHeight; const width = horizontalPercent ? deviceHeight * horizontalPercent : deviceWidth; const renderClose = () => { - if (!hideClose) { - return ( - - - Close - - - ); + if (hideClose) { + return null; } + return ( + + + Close + + + ); }; return ( diff --git a/Example/components/modal/ErrorModal.js b/Example/components/modal/ErrorModal.js index e07209d09..d31570700 100644 --- a/Example/components/modal/ErrorModal.js +++ b/Example/components/modal/ErrorModal.js @@ -8,9 +8,17 @@ import { import { Actions } from 'react-native-router-flux'; import Modal from './BaseModal'; +const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + marginHorizontal: 20, + }, +}); + const ErrorModal = () => ( - + Error Modal Slides up from the bottom, and covers the entire screen with no transparency