From c1f40b2cd971410fcb48baa2d9e0eeea0b93d411 Mon Sep 17 00:00:00 2001 From: Pavlo Aksonov Date: Wed, 8 Jun 2016 13:37:33 +0200 Subject: [PATCH] fix #713, #789 --- Example/components/NavigationDrawer.js | 7 +++++-- docs/CHANGELOG.md | 4 +++- docs/OTHER_INFO.md | 12 +++++++++--- package.json | 2 +- src/NavBar.js | 10 +++++++--- src/Reducer.js | 11 ++++++++++- 6 files changed, 35 insertions(+), 11 deletions(-) diff --git a/Example/components/NavigationDrawer.js b/Example/components/NavigationDrawer.js index 6c4148d07..bd7591cb6 100644 --- a/Example/components/NavigationDrawer.js +++ b/Example/components/NavigationDrawer.js @@ -1,6 +1,6 @@ import React, { PropTypes } from 'react'; import Drawer from 'react-native-drawer'; -import { DefaultRenderer } from 'react-native-router-flux'; +import { DefaultRenderer, Actions } from 'react-native-router-flux'; import TabView from './TabView'; @@ -10,11 +10,14 @@ const propTypes = { class NavigationDrawer extends React.Component { render() { - const children = this.props.navigationState.children; + const state = this.props.navigationState; + const children = state.children; return ( Actions.refresh({ key: state.key, open: true })} + onClose={() => Actions.refresh({ key: state.key, open: false })} content={} tapToClose openDrawerOffset={0.2} diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 026734fab..5d7619b73 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,8 +1,10 @@ # Change log +- 3.26.20 Support for 'modifier' functions inside Refresh actions, like `Actions.refresh({ key: 'drawer', open: value=>!value })` +- 3.26.0 Support for React Native 0.26 - 3.22.20 fix more ESLint errors, fix passing leftButtonStyle property for back button - 3.22.18 fix some ESLint errors and ignore pop for root scene - 3.22.17 allow jump & push together - now you could call Actions.tab2_2() (`tab2_2` is next scene after `tab2`) even if `tab2` is not active - 3.22.16 simplified syntax for sub-states - 3.22.15 introduces support for different states inside the same screen. - 3.22.10 simplifies customization of own NavBar. From now you could import built-in NavBar from the component and customize it. You could set it globally to all scenes by setting `navBar` property for `Router` component. -For all other scenes you may pass rightButton, leftButton for custom buttons or rightTitle & onRight, leftTitle & onLeft for text buttons. \ No newline at end of file +For all other scenes you may pass rightButton, leftButton for custom buttons or rightTitle & onRight, leftTitle & onLeft for text buttons. diff --git a/docs/OTHER_INFO.md b/docs/OTHER_INFO.md index 53f14ad6c..cde549324 100644 --- a/docs/OTHER_INFO.md +++ b/docs/OTHER_INFO.md @@ -58,14 +58,18 @@ Example of Drawer custom renderer based on react-native-drawer. Note that the bu import React from 'react-native'; import Drawer from 'react-native-drawer'; import SideMenu from './SideMenu'; -import {DefaultRenderer} from 'react-native-router-flux'; +import {Actions, DefaultRenderer} from 'react-native-router-flux'; export default class extends Component { render(){ - const children = this.props.navigationState.children; + const state = this.props.navigationState; + const children = state.children; return ( Actions.refresh({key:state.key, open: true}) + onClose={()=>Actions.refresh({key:state.key, open: false}) type="displace" content={} tapToClose={true} @@ -82,12 +86,14 @@ export default class extends Component { } /// then wrap your tabs scene with Drawer: - + .... +// then you could open/hide/toggle drawer anywhere using 'refresh' modifiers: + Actions.refresh({key: drawer, open: value => !value }; ``` ## Sub-scenes support You could create 'sub-scene' actions by putting them as children for needed 'base' scene without `component` prop and call such action anywhere - 'base' Scene will be updated accordingly. diff --git a/package.json b/package.json index a45684876..7ae4adee1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-router-flux", - "version": "3.26.17", + "version": "3.26.20", "description": "React Native Router using Flux architecture", "repository": { "type": "git", diff --git a/src/NavBar.js b/src/NavBar.js index 585d73a3e..3896d05d8 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -110,6 +110,10 @@ const styles = StyleSheet.create({ rightButtonIconStyle: { }, + defaultImageStyle: { + height: 24, + resizeMode: 'contain', + }, }); const propTypes = { @@ -284,7 +288,7 @@ class NavBar extends React.Component { ); } - if (!!drawer && typeof drawer.toggle === 'function') { + if (!onPress && !!drawer && typeof drawer.toggle === 'function') { buttonImage = state.drawerImage; if (buttonImage) { onPress = drawer.toggle; @@ -316,7 +320,7 @@ class NavBar extends React.Component { > } @@ -394,7 +398,7 @@ class NavBar extends React.Component { ]} > {renderTitle ? renderTitle(selected) : state.children.map(this.renderTitle, this)} - {renderBackButton(selected) || renderLeftButton(selected)} + {renderLeftButton(selected) || renderBackButton(selected) } {renderRightButton(selected)} ); diff --git a/src/Reducer.js b/src/Reducer.js index b70c302fd..6505f51d4 100644 --- a/src/Reducer.js +++ b/src/Reducer.js @@ -181,7 +181,16 @@ function reducer({ initialState, scenes }) { sceneKey = state.scenes[child.base].sceneKey; } assert(child, `missed child data for key=${key}`); - action = { ...child, ...action, sceneKey, key }; + // evaluate functions within actions to allow conditional set, like switch values + const evaluated = {}; + Object.keys(action).forEach(el => { + if (typeof action[el] === 'function' && typeof child[el] !== 'undefined' + && typeof child[el] !== typeof action[el]) { + evaluated[el] = action[el](child[el], child); + } + }); + action = { ...child, ...action, ...evaluated, sceneKey, key }; + // console.log("REFRESH ACTION:", action); } else { const scene = state.scenes[action.key];