X Tutup
Skip to content

Commit 876ecb2

Browse files
Eric Vicentifacebook-github-bot-6
Eric Vicenti
authored and
facebook-github-bot-6
committed
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
1 parent 2551540 commit 876ecb2

16 files changed

+1067
-598
lines changed

‎Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
3232
initialStates: [
3333
{key: 'First Route'}
3434
],
35-
matchAction: action => true,
36-
actionStateMap: actionString => ({key: actionString}),
35+
matchAction: action => action.type === 'push',
36+
actionStateMap: action => ({key: action.key}),
3737
});
3838

3939
class NavigationAnimatedExample extends React.Component {
@@ -45,7 +45,7 @@ class NavigationAnimatedExample extends React.Component {
4545
<NavigationRootContainer
4646
reducer={NavigationBasicReducer}
4747
ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
48-
persistenceKey="NavigationAnimatedExampleState"
48+
persistenceKey="NavigationAnimExampleState"
4949
renderNavigation={this._renderNavigated}
5050
/>
5151
);
@@ -85,7 +85,7 @@ class NavigationAnimatedExample extends React.Component {
8585
<NavigationExampleRow
8686
text="Push!"
8787
onPress={() => {
88-
onNavigate('Route #' + navigationState.children.length);
88+
onNavigate({ type: 'push', key: 'Route #' + navigationState.children.length });
8989
}}
9090
/>
9191
<NavigationExampleRow

‎Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ var EXAMPLES = {
3535
'Tic Tac Toe': require('./NavigationTicTacToeExample'),
3636
};
3737

38-
var EXAMPLE_STORAGE_KEY = 'NavigationExampleExample';
38+
var EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
3939

4040
var NavigationExperimentalExample = React.createClass({
4141
statics: {

‎Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const {
3131

3232
type GameGrid = Array<Array<?string>>;
3333

34-
const evenOddPlayerMap = ['o', 'x'];
34+
const evenOddPlayerMap = ['O', 'X'];
3535
const rowLeterMap = ['a', 'b', 'c'];
3636

3737
function parseGame(game: string): GameGrid {
@@ -99,20 +99,20 @@ function isGameOver(gameString: string): boolean {
9999

100100
class Cell extends React.Component {
101101
cellStyle() {
102-
switch (this.props.value) {
103-
case 'x':
102+
switch (this.props.player) {
103+
case 'X':
104104
return styles.cellX;
105-
case 'o':
105+
case 'O':
106106
return styles.cellO;
107107
default:
108108
return null;
109109
}
110110
}
111111
textStyle() {
112-
switch (this.props.value) {
113-
case 'x':
112+
switch (this.props.player) {
113+
case 'X':
114114
return styles.cellTextX;
115-
case 'o':
115+
case 'O':
116116
return styles.cellTextO;
117117
default:
118118
return {};
@@ -171,6 +171,11 @@ function TicTacToeGame(props) {
171171
);
172172
return (
173173
<View style={styles.container}>
174+
<Text
175+
style={styles.closeButton}
176+
onPress={props.onExampleExit}>
177+
Close
178+
</Text>
174179
<Text style={styles.title}>EXTREME T3</Text>
175180
<View style={styles.board}>
176181
{rows}
@@ -184,18 +189,18 @@ function TicTacToeGame(props) {
184189
TicTacToeGame = NavigationContainer.create(TicTacToeGame);
185190

186191
const GameActions = {
187-
Turn: (row, col) => ({gameAction: 'turn', row, col }),
188-
Reset: (row, col) => ({gameAction: 'reset' }),
192+
Turn: (row, col) => ({type: 'TicTacToeTurnAction', row, col }),
193+
Reset: (row, col) => ({type: 'TicTacToeResetAction' }),
189194
};
190195

191196
function GameReducer(lastGame: ?string, action: Object): string {
192-
if (!lastGame || !action || !action.gameAction) {
193-
return lastGame || '';
197+
if (!lastGame) {
198+
lastGame = '';
194199
}
195-
if (action.gameAction === 'reset') {
200+
if (action.type === 'TicTacToeResetAction') {
196201
return '';
197202
}
198-
if (!isGameOver(lastGame) && action.gameAction === 'turn') {
203+
if (!isGameOver(lastGame) && action.type === 'TicTacToeTurnAction') {
199204
return playTurn(lastGame, action.row, action.col);
200205
}
201206
return lastGame;
@@ -206,10 +211,11 @@ class NavigationTicTacToeExample extends React.Component {
206211
return (
207212
<NavigationRootContainer
208213
reducer={GameReducer}
209-
persistenceKey="TicTacToeGame"
214+
persistenceKey="TicTacToeGameState"
210215
renderNavigation={(game) => (
211216
<TicTacToeGame
212217
game={game}
218+
onExampleExit={this.props.onExampleExit}
213219
/>
214220
)}
215221
/>
@@ -221,6 +227,12 @@ NavigationTicTacToeExample.GameReducer = GameReducer;
221227
NavigationTicTacToeExample.GameActions = GameActions;
222228

223229
const styles = StyleSheet.create({
230+
closeButton: {
231+
position: 'absolute',
232+
left: 10,
233+
top: 30,
234+
fontSize: 14,
235+
},
224236
container: {
225237
flex: 1,
226238
justifyContent: 'center',
@@ -257,7 +269,6 @@ const styles = StyleSheet.create({
257269
backgroundColor: '#7ebd26',
258270
},
259271
cellText: {
260-
borderRadius: 5,
261272
fontSize: 50,
262273
fontFamily: 'AvenirNext-Bold',
263274
},

‎Examples/UIExplorer/UIExplorerActions.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* The examples provided by Facebook are for non-commercial testing and
3+
* evaluation purposes only.
4+
*
5+
* Facebook reserves all rights not expressly granted.
6+
*
7+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8+
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9+
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11+
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13+
*
14+
* @flow
15+
*/
16+
'use strict';
17+
18+
export type UIExplorerListWithFilterAction = {
19+
type: 'UIExplorerListWithFilterAction',
20+
filter: ?string;
21+
};
22+
23+
export type UIExplorerExampleAction = {
24+
type: 'UIExplorerExampleAction',
25+
openExample: string;
26+
};
27+
28+
import type {BackAction} from 'NavigationRootContainer';
29+
30+
export type UIExplorerAction = BackAction | UIExplorerListWithFilterAction | UIExplorerExampleAction;
31+
32+
function ExampleListWithFilter(filter: ?string): UIExplorerListWithFilterAction {
33+
return {
34+
type: 'UIExplorerListWithFilterAction',
35+
filter,
36+
};
37+
}
38+
39+
function ExampleAction(openExample: string): UIExplorerExampleAction {
40+
return {
41+
type: 'UIExplorerExampleAction',
42+
openExample,
43+
};
44+
}
45+
46+
const UIExplorerActions = {
47+
ExampleListWithFilter,
48+
ExampleAction,
49+
};
50+
51+
module.exports = UIExplorerActions;

0 commit comments

Comments
 (0)
X Tutup