Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.

Commit 40c0c77

Browse files
marclavalmarclaval
committed
sample(all): migrate to new components
1 parent ecc3b4a commit 40c0c77

File tree

11 files changed

+198
-181
lines changed

11 files changed

+198
-181
lines changed

‎sample/samples/android/animation.ts‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {Component, Input, Output, ElementRef, NgZone, EventEmitter, ViewChildren, QueryList} from 'angular2/core';
22
import {NgFor, NgIf} from 'angular2/common';
3-
import {NativeFeedback} from './common';
4-
import {StyleSheet, processColor} from 'react-native';
3+
import {StyleSheet} from 'react-native';
54
import {TodoMVC} from "./todomvc";
65

76
@Component({
@@ -10,10 +9,10 @@ import {TodoMVC} from "./todomvc";
109
inputs: ['color', 'x', 'y', 'radius'],
1110
directives: [NgIf, TodoMVC],
1211
template: `
13-
<native-view [style]="styles.ball" [top]="_y" [left]="_x" [backgroundColor]="_color" [borderRadius]="_radius" [width]="_radius*2" [height]="_radius*2"
12+
<View [styleSheet]="styles.ball" [style]="{top: _y, left: _x, backgroundColor: _color, borderRadius: _radius, width: _radius*2, height: _radius*2}"
1413
(pan)="moveBall($event)" (panend)="endMoveBall($event)">
1514
<todo-mvc *ngIf="withTodoMVC"></todo-mvc>
16-
</native-view>
15+
</View>
1716
`
1817
})
1918
export class Ball {
@@ -33,17 +32,12 @@ export class Ball {
3332
this.styles = StyleSheet.create({
3433
ball: {
3534
position: 'absolute'
36-
},
37-
ballText: {
38-
color: '#FFFFFF',
39-
textAlign: 'center',
40-
fontSize: 20
4135
}
4236
});
4337
}
4438

4539
moveBall(event: any) {
46-
this._el.children[1].setProperties({top: this._y + event.deltaY, left: this._x + event.deltaX});
40+
this._el.children[1].children[0].setProperties({top: this._y + event.deltaY, left: this._x + event.deltaX});
4741
}
4842

4943
endMoveBall(event: any) {
@@ -92,15 +86,15 @@ export class Ball {
9286
set x (value: any) { this._x = (!isNaN(parseInt(value))) ? parseInt(value) : value; }
9387
set y (value: any) { this._y = (!isNaN(parseInt(value))) ? parseInt(value) : value; }
9488
set radius (value: any) { this._radius = (!isNaN(parseInt(value))) ? parseInt(value) : value; }
95-
set color (value: any) { this._color = processColor(value); }
89+
set color (value: any) { this._color = value;}
9690
}
9791

9892
@Component({
9993
selector: 'animation-app',
10094
host: {position: 'absolute', top: '0', left: '0', bottom: '0', right: '0'},
101-
directives: [NgFor, NativeFeedback, Ball],
95+
directives: [NgFor, Ball],
10296
template: `
103-
<native-switch height="27" width="50" (topChange)="withTodoMVC=$event.value; $event.target.setProperty('on', $event.value)"></native-switch>
97+
<Switch (change)="withTodoMVC=$event"></Switch>
10498
<ball *ngFor="#ball of balls" x="{{ball.x}}" y="{{ball.y}}" color="{{ball.color}}" radius="{{ball.radius}}" [withTodoMVC]="withTodoMVC" (tap)="moveAll()" (startMove)="startMove()"></ball>
10599
`
106100
})

‎sample/samples/android/apis.ts‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,44 @@ import {NativeFeedback} from './common';
88
directives: [NativeFeedback],
99
template: `
1010
<PagerLayout initialPage="0" [style]="{flex: 1, justifyContent: 'center', alignItems: 'center'}">
11-
<native-view [style]="styles.container">
12-
<native-text [style]="styles.title">Actionable</native-text>
13-
<native-view [style]="styles.button" nativeFeedback (tap)="showAlert()">
14-
<native-text [style]="styles.buttonText">Alert</native-text>
15-
</native-view>
16-
<native-view [style]="styles.button" nativeFeedback (tap)="showToast()">
17-
<native-text [style]="styles.buttonText">Toast</native-text>
18-
</native-view>
19-
<native-view [style]="styles.button" nativeFeedback (tap)="launchIntent()">
20-
<native-text [style]="styles.buttonText">Intent</native-text>
21-
</native-view>
22-
<native-view [style]="styles.button" nativeFeedback (tap)="setClipboard()">
23-
<native-text [style]="styles.buttonText">Clipboard</native-text>
24-
</native-view>
25-
<native-text>Current clipboard value: {{clipBoardContent}}</native-text>
26-
</native-view>
27-
<native-view [style]="styles.container">
28-
<native-text [style]="styles.title">More actionable</native-text>
29-
<native-view [style]="styles.button" nativeFeedback (tap)="pickDate()">
30-
<native-text [style]="styles.buttonText">Pick a date: {{pickedDate}}</native-text>
31-
</native-view>
32-
<native-view [style]="styles.button" nativeFeedback (tap)="pickTime()">
33-
<native-text [style]="styles.buttonText">Pick a time: {{pickedTime}}</native-text>
34-
</native-view>
35-
</native-view>
36-
<native-view [style]="styles.container">
37-
<native-text [style]="styles.title">Infos</native-text>
38-
<native-text [style]="styles.subtitle">Platform</native-text>
39-
<native-text>{{platform}}</native-text>
40-
<native-text [style]="styles.subtitle">PixelRatio</native-text>
41-
<native-text>{{ratio}}</native-text>
42-
<native-text [style]="styles.subtitle">Geoloation</native-text>
43-
<native-text>{{location}}</native-text>
44-
<native-text [style]="styles.subtitle">NetInfo</native-text>
45-
<native-text>{{connectionType}} connection is {{isConnected ? 'on' : 'off'}} and {{isConnectionExpensive ? 'expensive' : 'not expensive'}}</native-text>
46-
<native-text [style]="styles.subtitle">AppState</native-text>
47-
<native-text>Current state is {{appState}}</native-text>
48-
</native-view>
11+
<View [styleSheet]="styles.container">
12+
<Text [styleSheet]="styles.title">Actionable</Text>
13+
<View [styleSheet]="styles.button" nativeFeedback (tap)="showAlert()">
14+
<Text [style]="styles.buttonText">Alert</Text>
15+
</View>
16+
<View [styleSheet]="styles.button" nativeFeedback (tap)="showToast()">
17+
<Text [styleSheet]="styles.buttonText">Toast</Text>
18+
</View>
19+
<View [styleSheet]="styles.button" nativeFeedback (tap)="launchIntent()">
20+
<Text [styleSheet]="styles.buttonText">Intent</Text>
21+
</View>
22+
<View [styleSheet]="styles.button" nativeFeedback (tap)="setClipboard()">
23+
<Text [styleSheet]="styles.buttonText">Clipboard</Text>
24+
</View>
25+
<Text>Current clipboard value: {{clipBoardContent}}</Text>
26+
</View>
27+
<View [styleSheet]="styles.container">
28+
<Text [styleSheet]="styles.title">More actionable</Text>
29+
<View [styleSheet]="styles.button" nativeFeedback (tap)="pickDate()">
30+
<Text [styleSheet]="styles.buttonText">Pick a date: {{pickedDate}}</Text>
31+
</View>
32+
<View [styleSheet]="styles.button" nativeFeedback (tap)="pickTime()">
33+
<Text [styleSheet]="styles.buttonText">Pick a time: {{pickedTime}}</Text>
34+
</View>
35+
</View>
36+
<View [styleSheet]="styles.container">
37+
<Text [styleSheet]="styles.title">Infos</Text>
38+
<Text [styleSheet]="styles.subtitle">Platform</Text>
39+
<Text>{{platform}}</Text>
40+
<Text [styleSheet]="styles.subtitle">PixelRatio</Text>
41+
<Text>{{ratio}}</Text>
42+
<Text [styleSheet]="styles.subtitle">Geoloation</Text>
43+
<Text>{{location}}</Text>
44+
<Text [styleSheet]="styles.subtitle">NetInfo</Text>
45+
<Text>{{connectionType}} connection is {{isConnected ? 'on' : 'off'}} and {{isConnectionExpensive ? 'expensive' : 'not expensive'}}</Text>
46+
<Text [styleSheet]="styles.subtitle">AppState</Text>
47+
<Text>Current state is {{appState}}</Text>
48+
</View>
4949
</PagerLayout>
5050
`
5151
})

‎sample/samples/android/common.ts‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ export class HighLight implements OnInit, OnDestroy {
1111

1212
constructor(el: ElementRef) {
1313
this._el = el.nativeElement;
14-
this._highlight = () => {this._el.setProperty('opacity', 0.5)};
15-
this._unhighlight = () => {this._el.setProperty('opacity', 1)};
14+
this._highlight = () => {this._el.children[0].setProperty('opacity', 0.5)};
15+
this._unhighlight = () => {this._el.children[0].setProperty('opacity', 1)};
1616
}
1717

1818
ngOnInit() {
19-
this._el.addEventListener('tapstart', this._highlight);
20-
this._el.addEventListener('tapcancel', this._unhighlight);
21-
this._el.addEventListener('tap', this._unhighlight);
19+
this._el.children[0].addEventListener('tapstart', this._highlight);
20+
this._el.children[0].addEventListener('tapcancel', this._unhighlight);
21+
this._el.children[0].addEventListener('tap', this._unhighlight);
2222
}
2323
ngOnDestroy() {
24-
this._el.removeEventListener('tapstart', this._highlight);
25-
this._el.removeEventListener('tapcancel', this._unhighlight);
26-
this._el.removeEventListener('tap', this._unhighlight);
24+
this._el.children[0].removeEventListener('tapstart', this._highlight);
25+
this._el.children[0].removeEventListener('tapcancel', this._unhighlight);
26+
this._el.children[0].removeEventListener('tap', this._unhighlight);
2727
}
2828
}
2929

@@ -39,24 +39,26 @@ export class NativeFeedback implements OnInit, OnDestroy {
3939
constructor(el: ElementRef) {
4040
this._el = el.nativeElement;
4141
this._start = (event: any) => {
42-
this._el.dispatchCommand('hotspotUpdate', [event.srcEvent.clientX || 0, event.srcEvent.clientY || 0]);
43-
this._el.dispatchCommand('setPressed', [true]);
42+
this._el.children[0].dispatchCommand('hotspotUpdate', [event.srcEvent.pageX || 0, event.srcEvent.pageY || 0]);
43+
this._el.children[0].dispatchCommand('setPressed', [true]);
4444
};
4545
this._stop = (event: any) => {
46-
this._el.dispatchCommand('hotspotUpdate', [event.srcEvent.clientX || 0, event.srcEvent.clientY || 0]);
47-
this._el.dispatchCommand('setPressed', [false]);
46+
this._el.children[0].dispatchCommand('hotspotUpdate', [event.srcEvent.pageX || 0, event.srcEvent.pageY || 0]);
47+
this._el.children[0].dispatchCommand('setPressed', [false]);
4848
};
4949
}
5050

5151
ngOnInit() {
52-
this._el.setProperty('nativeBackgroundAndroid', {type: 'RippleAndroid', color: processColor(this.nativeFeedback) || -1, borderless: false});
53-
this._el.addEventListener('tapstart', this._start);
54-
this._el.addEventListener('tapcancel', this._stop);
55-
this._el.addEventListener('tap', this._stop);
52+
this._el.children[0].addEventListener('tapstart', this._start);
53+
this._el.children[0].addEventListener('tapcancel', this._stop);
54+
this._el.children[0].addEventListener('tap', this._stop);
55+
setTimeout(() => {
56+
this._el.children[0].setProperty('nativeBackgroundAndroid', {type: 'RippleAndroid', color: processColor(this.nativeFeedback) || -1, borderless: false});
57+
}, 0);
5658
}
5759
ngOnDestroy() {
58-
this._el.removeEventListener('tapstart', this._start);
59-
this._el.removeEventListener('tapcancel', this._stop);
60-
this._el.removeEventListener('tap', this._stop);
60+
this._el.children[0].removeEventListener('tapstart', this._start);
61+
this._el.children[0].removeEventListener('tapcancel', this._stop);
62+
this._el.children[0].removeEventListener('tap', this._stop);
6163
}
6264
}

‎sample/samples/android/gestures.ts‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {StyleSheet} from 'react-native';
88
host: {position: 'absolute', top: '0', left: '0', bottom: '0', right: '0'},
99
directives: [NgFor, NativeFeedback],
1010
template: `
11-
<native-view [style]="styles.surface" flex="6"
11+
<View [styleSheet]="styles.surface"
1212
(doubletap)="handleEvent($event)"
1313
(pan)="handleEvent($event)"
1414
(panstart)="handleEvent($event)"
@@ -41,15 +41,15 @@ import {StyleSheet} from 'react-native';
4141
(tap)="handleEvent($event)"
4242
(tapstart)="handleEvent($event)"
4343
(tapcancel)="handleEvent($event)">
44-
<native-text [style]="styles.buttonText">TOUCH ME</native-text>
45-
</native-view>
46-
<native-view [style]="styles.button" flex="1" nativeFeedback (tap)="clearLogs()">
47-
<native-text [style]="styles.buttonText">Clear logs</native-text>
48-
</native-view>
44+
<Text [styleSheet]="styles.buttonText">TOUCH ME</Text>
45+
</View>
46+
<View [styleSheet]="styles.button" nativeFeedback (tap)="clearLogs()">
47+
<Text [styleSheet]="styles.buttonText">Clear logs</Text>
48+
</View>
4949
<ScrollView [style]="{flex: 12}">
50-
<native-view [style]="styles.logs">
51-
<native-text *ngFor="#log of logs">{{log}}</native-text>
52-
</native-view>
50+
<View [styleSheet]="styles.logs">
51+
<Text *ngFor="#log of logs">{{log}}</Text>
52+
</View>
5353
</ScrollView>
5454
`
5555
})
@@ -61,13 +61,15 @@ export class GesturesApp {
6161
this.styles = StyleSheet.create({
6262
surface: {
6363
backgroundColor: '#ABABAB',
64+
flex: 6
6465
},
6566
logs: {
6667
flex: 1
6768
},
6869
button: {
6970
padding: 10,
70-
backgroundColor: '#005eb8'
71+
backgroundColor: '#005eb8',
72+
flex: 1
7173
},
7274
buttonText: {
7375
color: '#FFFFFF',

‎sample/samples/android/http.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,15 @@ import {Http} from 'angular2/http';
44
import 'rxjs/add/operator/map';
55

66
import {TextInput} from 'react-native-renderer/react-native-renderer';
7-
import {NativeFeedback} from './common';
87
import {StyleSheet} from 'react-native';
98

109
@Component({
1110
selector: 'http-app',
1211
host: {position: 'absolute', top: '0', left: '0', bottom: '0', right: '0'},
13-
directives: [NativeFeedback, NgFor],
12+
directives: [NgFor],
1413
template: `
1514
<TextInput placeholder="Search Wikipedia" (submit)="sendXHR($event)"></TextInput>
16-
<native-text *ngFor="#page of pages">{{page}}</native-text>
15+
<Text *ngFor="#page of pages">{{page}}</Text>
1716
`
1817
})
1918
export class HttpApp {

‎sample/samples/android/kitchensink.ts‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@ import {NativeFeedback} from "./common";
2323
<DrawerLayoutSide>
2424
<Toolbar [styleSheet]="styles.toolbar" [navIcon]="hamburgerIcon" [overflowIcon]="moreIcon"
2525
title="Kitchen Sink" titleColor="#FFFFFF" (select)="handleToolbar($event)"></Toolbar>
26-
<native-view position="absolute" top="50" left="0" right="0" bottom="0" collapsable="false">
26+
<View [styleSheet]="styles.content">
2727
<router-outlet></router-outlet>
28-
</native-view>
28+
</View>
2929
</DrawerLayoutSide>
3030
<DrawerLayoutContent>
31-
<native-view flex="1" [style]="styles.drawer">
32-
<native-view *ngFor="#item of menuItems" [style]="styles.menuItem" (tap)="navigate(item.path)" nativeFeedback="#00a9e0">
33-
<native-text [style]="styles.menuText">{{item.name}}</native-text>
34-
</native-view>
35-
</native-view>
31+
<View [styleSheet]="styles.drawer">
32+
<View *ngFor="#item of menuItems" [styleSheet]="styles.menuItem" (tap)="navigate(item.path)" nativeFeedback="#00a9e0">
33+
<Text [styleSheet]="styles.menuText">{{item.name}}</Text>
34+
</View>
35+
</View>
3636
</DrawerLayoutContent>
3737
</DrawerLayout>
3838
`
@@ -82,6 +82,14 @@ export class KitchenSinkApp {
8282
},
8383
drawer: {
8484
backgroundColor: '#DDDDDD',
85+
flex: 1
86+
},
87+
content: {
88+
position: 'absolute',
89+
left: 0,
90+
right: 0,
91+
top: 50,
92+
bottom: 0
8593
},
8694
menuItem: {
8795
backgroundColor: '#FFFFFF',

0 commit comments

Comments
 (0)