Skip to content

Commit 0fca665

Browse files
msfterictrautmsfterictraut
committed
Added Navigator example to hello-world sample.
1 parent 56910c1 commit 0fca665

3 files changed

Lines changed: 310 additions & 153 deletions

File tree

‎samples/hello-world/src/App.tsx‎

Lines changed: 39 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -3,183 +3,69 @@
33
*/
44

55
import RX = require('reactxp');
6-
import { default as RXVideo } from 'reactxp-video';
76

8-
import ProgressIndicator from './ProgressIndicator';
9-
import ToggleSwitch from './ToggleSwitch';
7+
import MainPanel = require('./MainPanel');
8+
import SecondPanel = require('./SecondPanel');
109

11-
interface AppState {
12-
toggleValue?: boolean;
13-
progressValue?: number;
10+
enum NavigationRouteId {
11+
MainPanel,
12+
SecondPanel
1413
}
1514

1615
const styles = {
17-
scroll: RX.Styles.createScrollViewStyle({
18-
alignSelf: 'stretch',
16+
navCardStyle: RX.Styles.createViewStyle({
1917
backgroundColor: '#f5fcff'
20-
}),
21-
container: RX.Styles.createViewStyle({
22-
padding: 16,
23-
justifyContent: 'center',
24-
alignItems: 'center'
25-
}),
26-
helloWorld: RX.Styles.createTextStyle({
27-
fontSize: 48,
28-
fontWeight: 'bold',
29-
marginBottom: 28
30-
}),
31-
welcome: RX.Styles.createTextStyle({
32-
fontSize: 32,
33-
marginBottom: 12
34-
}),
35-
instructions: RX.Styles.createTextStyle({
36-
fontSize: 16,
37-
color: '#aaa',
38-
marginBottom: 16
39-
}),
40-
docLink: RX.Styles.createLinkStyle({
41-
fontSize: 16,
42-
color: 'blue',
43-
marginBottom: 16
44-
}),
45-
titleText: RX.Styles.createTextStyle({
46-
fontSize: 16,
47-
textAlign: 'center',
48-
marginTop: 12,
49-
color: 'black'
50-
}),
51-
videoTitleText: RX.Styles.createTextStyle({
52-
marginBottom: 8
53-
}),
54-
progressMargin: RX.Styles.createViewStyle({
55-
margin: 8
56-
}),
57-
video: RX.Styles.createViewStyle({
58-
height: 176,
59-
width: 320
6018
})
6119
};
6220

63-
class App extends RX.Component<null, AppState> {
64-
private _translationValue: RX.Animated.Value;
65-
private _animatedStyle: RX.Types.AnimatedTextStyleRuleSet;
66-
private _progressTimerToken: number;
21+
class App extends RX.Component<null, null> {
22+
private _navigator: RX.Navigator;
6723

68-
constructor() {
69-
super();
70-
71-
this._translationValue = new RX.Animated.Value(-100);
72-
this._animatedStyle = RX.Styles.createAnimatedTextStyle({
73-
transform: [
74-
{
75-
translateY: this._translationValue
76-
}
77-
]
78-
});
79-
80-
this.state = {
81-
toggleValue: true,
82-
progressValue: 0
83-
};
24+
componentDidMount() {
25+
this._navigator.immediatelyResetRouteStack([{
26+
routeId: NavigationRouteId.MainPanel,
27+
sceneConfigType: RX.Types.NavigatorSceneConfigType.Fade
28+
}]);
8429
}
8530

86-
componentDidMount() {
87-
let animation = RX.Animated.timing(this._translationValue, {
88-
toValue: 0,
89-
easing: RX.Animated.Easing.OutBack(),
90-
duration: 500
91-
}
31+
render() {
32+
return (
33+
<RX.Navigator
34+
ref={ this._onNavigatorRef }
35+
renderScene={ this._renderScene }
36+
cardStyle={ styles.navCardStyle }
37+
/>
9238
);
93-
94-
animation.start();
95-
96-
this._startProgressIndicator();
9739
}
9840

99-
componentWillUnmount() {
100-
this._stopProgressIndicator();
41+
private _onNavigatorRef = (navigator: RX.Navigator) => {
42+
this._navigator = navigator;
10143
}
10244

103-
render(): JSX.Element | null {
104-
return (
105-
<RX.ScrollView style={ styles.scroll }>
106-
<RX.View style={ styles.container }>
107-
<RX.Animated.Text style={ [styles.helloWorld, this._animatedStyle] }>
108-
Hello World
109-
</RX.Animated.Text>
110-
<RX.Text style={ styles.welcome }>
111-
Welcome to ReactXP
112-
</RX.Text>
113-
<RX.Text style={ styles.instructions }>
114-
Edit App.tsx to get started
115-
</RX.Text>
116-
<RX.Link style={ styles.docLink } url={ 'https://microsoft.github.io/reactxp/docs' }>
117-
View ReactXP documentation
118-
</RX.Link>
119-
120-
<RX.Text style={ styles.titleText }>
121-
Here is a simple control built using ReactXP
122-
</RX.Text>
123-
<ToggleSwitch
124-
value={ this.state.toggleValue }
125-
onChange={ this._onChangeToggle }
126-
/>
127-
128-
<RX.Text style={ styles.titleText }>
129-
Here is an SVG image using the ImageSvg extension
130-
</RX.Text>
131-
<ProgressIndicator
132-
style={ styles.progressMargin }
133-
progress={ this.state.progressValue }
134-
fillColor={ '#ddd' }
135-
size={ 32 }
136-
/>
137-
138-
<RX.Text style={ [styles.titleText, styles.videoTitleText] }>
139-
Here is a video using the Video extension
140-
</RX.Text>
141-
<RXVideo
142-
ref='video'
143-
style={ styles.video }
144-
source={ 'https://www.w3schools.com/html/mov_bbb.mp4' }
145-
loop={ true }
146-
onCanPlay={ this._playVideo }
147-
/>
148-
</RX.View>
149-
</RX.ScrollView>
150-
151-
);
152-
}
45+
private _renderScene = (navigatorRoute: RX.Types.NavigatorRoute) => {
46+
switch (navigatorRoute.routeId) {
47+
case NavigationRouteId.MainPanel:
48+
return <MainPanel onPressNavigate={ this._onPressNavigate } />
15349

154-
private _playVideo = () => {
155-
const video = this.refs['video'] as RXVideo;
156-
if (video) {
157-
video.mute(true);
158-
video.play();
50+
case NavigationRouteId.SecondPanel:
51+
return <SecondPanel onNavigateBack={ this._onPressBack } />
15952
}
160-
}
16153

162-
private _startProgressIndicator() {
163-
this._progressTimerToken = window.setInterval(() => {
164-
const newProgressValue = (this.state.progressValue + 0.02) % 1;
165-
this.setState({ progressValue: newProgressValue });
166-
}, 1000 / 15);
54+
return null;
16755
}
16856

169-
private _stopProgressIndicator() {
170-
if (this._progressTimerToken) {
171-
window.clearInterval(this._progressTimerToken);
172-
this._progressTimerToken = undefined;
173-
}
57+
private _onPressNavigate = () => {
58+
this._navigator.push({
59+
routeId: NavigationRouteId.SecondPanel,
60+
sceneConfigType: RX.Types.NavigatorSceneConfigType.FloatFromRight,
61+
customSceneConfig: {
62+
hideShadow: true
63+
}
64+
});
17465
}
17566

176-
// Note that we define this as a variable rather than a normal method. Using this
177-
// method, we prebind the method to this component instance. This prebinding ensures
178-
// that each time we pass the variable as a prop in the render function, it will
179-
// not change. We want to avoid unnecessary prop changes because this will trigger
180-
// extra work within React's virtual DOM diffing mechanism.
181-
private _onChangeToggle = (newValue: boolean) => {
182-
this.setState({ toggleValue: newValue });
67+
private _onPressBack = () => {
68+
this._navigator.pop();
18369
}
18470
}
18571

‎samples/hello-world/src/MainPanel.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/*
2+
* This file demonstrates a basic ReactXP app.
3+
*/
4+
5+
import RX = require('reactxp');
6+
7+
interface MainPanelProps {
8+
onPressNavigate: () => void;
9+
}
10+
11+
const styles = {
12+
scroll: RX.Styles.createScrollViewStyle({
13+
alignSelf: 'stretch',
14+
backgroundColor: '#f5fcff'
15+
}),
16+
container: RX.Styles.createViewStyle({
17+
padding: 16,
18+
justifyContent: 'center',
19+
alignItems: 'center'
20+
}),
21+
helloWorld: RX.Styles.createTextStyle({
22+
fontSize: 48,
23+
fontWeight: 'bold',
24+
marginBottom: 28
25+
}),
26+
welcome: RX.Styles.createTextStyle({
27+
fontSize: 32,
28+
marginBottom: 12
29+
}),
30+
instructions: RX.Styles.createTextStyle({
31+
fontSize: 16,
32+
color: '#aaa',
33+
marginBottom: 16
34+
}),
35+
docLink: RX.Styles.createLinkStyle({
36+
fontSize: 16,
37+
color: 'blue',
38+
marginBottom: 16
39+
}),
40+
roundButton: RX.Styles.createViewStyle({
41+
margin: 16,
42+
borderRadius: 16,
43+
backgroundColor: '#7d88a9'
44+
}),
45+
buttonText: RX.Styles.createTextStyle({
46+
fontSize: 16,
47+
marginVertical: 6,
48+
marginHorizontal: 12,
49+
color: 'white'
50+
})
51+
};
52+
53+
class MainPanel extends RX.Component<MainPanelProps, null> {
54+
private _translationValue: RX.Animated.Value;
55+
private _animatedStyle: RX.Types.AnimatedTextStyleRuleSet;
56+
57+
constructor() {
58+
super();
59+
60+
this._translationValue = new RX.Animated.Value(-100);
61+
this._animatedStyle = RX.Styles.createAnimatedTextStyle({
62+
transform: [
63+
{
64+
translateY: this._translationValue
65+
}
66+
]
67+
});
68+
}
69+
70+
componentDidMount() {
71+
let animation = RX.Animated.timing(this._translationValue, {
72+
toValue: 0,
73+
easing: RX.Animated.Easing.OutBack(),
74+
duration: 500
75+
}
76+
);
77+
78+
animation.start();
79+
}
80+
81+
render() {
82+
return (
83+
<RX.ScrollView style={ styles.scroll }>
84+
<RX.View style={ styles.container }>
85+
<RX.Animated.Text style={ [styles.helloWorld, this._animatedStyle] }>
86+
Hello World
87+
</RX.Animated.Text>
88+
<RX.Text style={ styles.welcome }>
89+
Welcome to ReactXP
90+
</RX.Text>
91+
<RX.Text style={ styles.instructions }>
92+
Edit App.tsx to get started
93+
</RX.Text>
94+
<RX.Link style={ styles.docLink } url={ 'https://microsoft.github.io/reactxp/docs' }>
95+
View ReactXP documentation
96+
</RX.Link>
97+
98+
<RX.Button style={ styles.roundButton } onPress={ this._onPressNavigate }>
99+
<RX.Text style={ styles.buttonText }>
100+
See More Examples
101+
</RX.Text>
102+
</RX.Button>
103+
</RX.View>
104+
</RX.ScrollView>
105+
);
106+
}
107+
108+
private _onPressNavigate = () => {
109+
this.props.onPressNavigate();
110+
}
111+
}
112+
113+
export = MainPanel;

0 commit comments

Comments
 (0)