Permalink
Browse files

Adopt NavigationExperimental in UIExplorer

Summary:Use the new Navigation library to make the UIExplorer navigation more flexible.

Deep linking examples are coming soon (hint: we just need to convert URIs to UIExplorerActions!)

Reviewed By: javache

Differential Revision: D2798050

fb-gh-sync-id: c7775393e2d7a30a161d0770192309567dcc8b0c
shipit-source-id: c7775393e2d7a30a161d0770192309567dcc8b0c
  • Loading branch information...
ericvicenti authored and facebook-github-bot-6 committed Feb 23, 2016
1 parent 2551540 commit 876ecb291fe80471ff49df687b59f38b48d705d8
@@ -32,8 +32,8 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
initialStates: [
{key: 'First Route'}
],
- matchAction: action => true,
- actionStateMap: actionString => ({key: actionString}),
+ matchAction: action => action.type === 'push',
+ actionStateMap: action => ({key: action.key}),
});
class NavigationAnimatedExample extends React.Component {
@@ -45,7 +45,7 @@ class NavigationAnimatedExample extends React.Component {
<NavigationRootContainer
reducer={NavigationBasicReducer}
ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
- persistenceKey="NavigationAnimatedExampleState"
+ persistenceKey="NavigationAnimExampleState"
renderNavigation={this._renderNavigated}
/>
);
@@ -85,7 +85,7 @@ class NavigationAnimatedExample extends React.Component {
<NavigationExampleRow
text="Push!"
onPress={() => {
- onNavigate('Route #' + navigationState.children.length);
+ onNavigate({ type: 'push', key: 'Route #' + navigationState.children.length });
}}
/>
<NavigationExampleRow
@@ -35,7 +35,7 @@ var EXAMPLES = {
'Tic Tac Toe': require('./NavigationTicTacToeExample'),
};
-var EXAMPLE_STORAGE_KEY = 'NavigationExampleExample';
+var EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
var NavigationExperimentalExample = React.createClass({
statics: {
@@ -31,7 +31,7 @@ const {
type GameGrid = Array<Array<?string>>;
-const evenOddPlayerMap = ['o', 'x'];
+const evenOddPlayerMap = ['O', 'X'];
const rowLeterMap = ['a', 'b', 'c'];
function parseGame(game: string): GameGrid {
@@ -99,20 +99,20 @@ function isGameOver(gameString: string): boolean {
class Cell extends React.Component {
cellStyle() {
- switch (this.props.value) {
- case 'x':
+ switch (this.props.player) {
+ case 'X':
return styles.cellX;
- case 'o':
+ case 'O':
return styles.cellO;
default:
return null;
}
}
textStyle() {
- switch (this.props.value) {
- case 'x':
+ switch (this.props.player) {
+ case 'X':
return styles.cellTextX;
- case 'o':
+ case 'O':
return styles.cellTextO;
default:
return {};
@@ -171,6 +171,11 @@ function TicTacToeGame(props) {
);
return (
<View style={styles.container}>
+ <Text
+ style={styles.closeButton}
+ onPress={props.onExampleExit}>
+ Close
+ </Text>
<Text style={styles.title}>EXTREME T3</Text>
<View style={styles.board}>
{rows}
@@ -184,18 +189,18 @@ function TicTacToeGame(props) {
TicTacToeGame = NavigationContainer.create(TicTacToeGame);
const GameActions = {
- Turn: (row, col) => ({gameAction: 'turn', row, col }),
- Reset: (row, col) => ({gameAction: 'reset' }),
+ Turn: (row, col) => ({type: 'TicTacToeTurnAction', row, col }),
+ Reset: (row, col) => ({type: 'TicTacToeResetAction' }),
};
function GameReducer(lastGame: ?string, action: Object): string {
- if (!lastGame || !action || !action.gameAction) {
- return lastGame || '';
+ if (!lastGame) {
+ lastGame = '';
}
- if (action.gameAction === 'reset') {
+ if (action.type === 'TicTacToeResetAction') {
return '';
}
- if (!isGameOver(lastGame) && action.gameAction === 'turn') {
+ if (!isGameOver(lastGame) && action.type === 'TicTacToeTurnAction') {
return playTurn(lastGame, action.row, action.col);
}
return lastGame;
@@ -206,10 +211,11 @@ class NavigationTicTacToeExample extends React.Component {
return (
<NavigationRootContainer
reducer={GameReducer}
- persistenceKey="TicTacToeGame"
+ persistenceKey="TicTacToeGameState"
renderNavigation={(game) => (
<TicTacToeGame
game={game}
+ onExampleExit={this.props.onExampleExit}
/>
)}
/>
@@ -221,6 +227,12 @@ NavigationTicTacToeExample.GameReducer = GameReducer;
NavigationTicTacToeExample.GameActions = GameActions;
const styles = StyleSheet.create({
+ closeButton: {
+ position: 'absolute',
+ left: 10,
+ top: 30,
+ fontSize: 14,
+ },
container: {
flex: 1,
justifyContent: 'center',
@@ -257,7 +269,6 @@ const styles = StyleSheet.create({
backgroundColor: '#7ebd26',
},
cellText: {
- borderRadius: 5,
fontSize: 50,
fontFamily: 'AvenirNext-Bold',
},
@@ -0,0 +1,51 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+export type UIExplorerListWithFilterAction = {
+ type: 'UIExplorerListWithFilterAction',
+ filter: ?string;
+};
+
+export type UIExplorerExampleAction = {
+ type: 'UIExplorerExampleAction',
+ openExample: string;
+};
+
+import type {BackAction} from 'NavigationRootContainer';
+
+export type UIExplorerAction = BackAction | UIExplorerListWithFilterAction | UIExplorerExampleAction;
+
+function ExampleListWithFilter(filter: ?string): UIExplorerListWithFilterAction {
+ return {
+ type: 'UIExplorerListWithFilterAction',
+ filter,
+ };
+}
+
+function ExampleAction(openExample: string): UIExplorerExampleAction {
+ return {
+ type: 'UIExplorerExampleAction',
+ openExample,
+ };
+}
+
+const UIExplorerActions = {
+ ExampleListWithFilter,
+ ExampleAction,
+};
+
+module.exports = UIExplorerActions;
Oops, something went wrong.

0 comments on commit 876ecb2

Please sign in to comment.