Skip to content

Commit 862d9fb

Browse files
vjeuxvjeux
committed
Merge pull request #852 from vjeux/import_everycommit
Import everycommit
2 parents bac60f5 + 970dd8a commit 862d9fb

File tree

75 files changed

+2016
-1310
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+2016
-1310
lines changed

‎Examples/SampleApp/.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
24+
# node.js
25+
#
26+
node_modules/
27+
npm-debug.log

‎Examples/UIExplorer/MapViewExample.js‎

Lines changed: 64 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,33 +24,44 @@ var {
2424
View,
2525
} = React;
2626

27+
var regionText = {
28+
latitude: '0',
29+
longitude: '0',
30+
latitudeDelta: '0',
31+
longitudeDelta: '0',
32+
}
33+
2734
var MapRegionInput = React.createClass({
2835

2936
propTypes: {
3037
region: React.PropTypes.shape({
31-
latitude: React.PropTypes.number,
32-
longitude: React.PropTypes.number,
33-
latitudeDelta: React.PropTypes.number,
34-
longitudeDelta: React.PropTypes.number,
38+
latitude: React.PropTypes.number.isRequired,
39+
longitude: React.PropTypes.number.isRequired,
40+
latitudeDelta: React.PropTypes.number.isRequired,
41+
longitudeDelta: React.PropTypes.number.isRequired,
3542
}),
3643
onChange: React.PropTypes.func.isRequired,
3744
},
3845

3946
getInitialState: function() {
4047
return {
41-
latitude: 0,
42-
longitude: 0,
43-
latitudeDelta: 0,
44-
longitudeDelta: 0,
48+
region: {
49+
latitude: 0,
50+
longitude: 0,
51+
latitudeDelta: 0,
52+
longitudeDelta: 0,
53+
}
4554
};
4655
},
4756

4857
componentWillReceiveProps: function(nextProps) {
49-
this.setState(nextProps.region);
58+
this.setState({
59+
region: nextProps.region || this.getInitialState().region
60+
});
5061
},
5162

5263
render: function() {
53-
var region = this.state;
64+
var region = this.state.region || this.getInitialState().region;
5465
return (
5566
<View>
5667
<View style={styles.row}>
@@ -61,6 +72,7 @@ var MapRegionInput = React.createClass({
6172
value={'' + region.latitude}
6273
style={styles.textInput}
6374
onChange={this._onChangeLatitude}
75+
selectTextOnFocus={true}
6476
/>
6577
</View>
6678
<View style={styles.row}>
@@ -71,6 +83,7 @@ var MapRegionInput = React.createClass({
7183
value={'' + region.longitude}
7284
style={styles.textInput}
7385
onChange={this._onChangeLongitude}
86+
selectTextOnFocus={true}
7487
/>
7588
</View>
7689
<View style={styles.row}>
@@ -81,6 +94,7 @@ var MapRegionInput = React.createClass({
8194
value={'' + region.latitudeDelta}
8295
style={styles.textInput}
8396
onChange={this._onChangeLatitudeDelta}
97+
selectTextOnFocus={true}
8498
/>
8599
</View>
86100
<View style={styles.row}>
@@ -91,6 +105,7 @@ var MapRegionInput = React.createClass({
91105
value={'' + region.longitudeDelta}
92106
style={styles.textInput}
93107
onChange={this._onChangeLongitudeDelta}
108+
selectTextOnFocus={true}
94109
/>
95110
</View>
96111
<View style={styles.changeButton}>
@@ -103,23 +118,29 @@ var MapRegionInput = React.createClass({
103118
},
104119

105120
_onChangeLatitude: function(e) {
106-
this.setState({latitude: parseFloat(e.nativeEvent.text)});
121+
regionText.latitude = e.nativeEvent.text;
107122
},
108123

109124
_onChangeLongitude: function(e) {
110-
this.setState({longitude: parseFloat(e.nativeEvent.text)});
125+
regionText.longitude = e.nativeEvent.text;
111126
},
112127

113128
_onChangeLatitudeDelta: function(e) {
114-
this.setState({latitudeDelta: parseFloat(e.nativeEvent.text)});
129+
regionText.latitudeDelta = e.nativeEvent.text;
115130
},
116131

117132
_onChangeLongitudeDelta: function(e) {
118-
this.setState({longitudeDelta: parseFloat(e.nativeEvent.text)});
133+
regionText.longitudeDelta = e.nativeEvent.text;
119134
},
120135

121136
_change: function() {
122-
this.props.onChange(this.state);
137+
this.setState({
138+
latitude: parseFloat(regionText.latitude),
139+
longitude: parseFloat(regionText.longitude),
140+
latitudeDelta: parseFloat(regionText.latitudeDelta),
141+
longitudeDelta: parseFloat(regionText.longitudeDelta),
142+
});
143+
this.props.onChange(this.state.region);
123144
},
124145

125146
});
@@ -130,6 +151,8 @@ var MapViewExample = React.createClass({
130151
return {
131152
mapRegion: null,
132153
mapRegionInput: null,
154+
annotations: null,
155+
isFirstLoad: true,
133156
};
134157
},
135158

@@ -138,8 +161,10 @@ var MapViewExample = React.createClass({
138161
<View>
139162
<MapView
140163
style={styles.map}
141-
onRegionChange={this._onRegionChanged}
164+
onRegionChange={this._onRegionChange}
165+
onRegionChangeComplete={this._onRegionChangeComplete}
142166
region={this.state.mapRegion}
167+
annotations={this.state.annotations}
143168
/>
144169
<MapRegionInput
145170
onChange={this._onRegionInputChanged}
@@ -149,14 +174,35 @@ var MapViewExample = React.createClass({
149174
);
150175
},
151176

152-
_onRegionChanged(region) {
153-
this.setState({mapRegionInput: region});
177+
_getAnnotations(region) {
178+
return [{
179+
longitude: region.longitude,
180+
latitude: region.latitude,
181+
title: 'You Are Here',
182+
}];
183+
},
184+
185+
_onRegionChange(region) {
186+
this.setState({
187+
mapRegionInput: region,
188+
});
189+
},
190+
191+
_onRegionChangeComplete(region) {
192+
if (this.state.isFirstLoad) {
193+
this.setState({
194+
mapRegionInput: region,
195+
annotations: this._getAnnotations(region),
196+
isFirstLoad: false,
197+
});
198+
}
154199
},
155200

156201
_onRegionInputChanged(region) {
157202
this.setState({
158203
mapRegion: region,
159204
mapRegionInput: region,
205+
annotations: this._getAnnotations(region),
160206
});
161207
},
162208

‎Examples/UIExplorer/PanResponderExample.js‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
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+
var React = require('react-native');
19+
var {
20+
StyleSheet,
21+
PanResponder,
22+
View,
23+
} = React;
24+
25+
var CIRCLE_SIZE = 80;
26+
var CIRCLE_COLOR = 'blue';
27+
var CIRCLE_HIGHLIGHT_COLOR = 'green';
28+
29+
30+
var NavigatorIOSExample = React.createClass({
31+
32+
statics: {
33+
title: 'PanResponder Sample',
34+
description: 'Basic gesture handling example',
35+
},
36+
37+
_panResponder: {},
38+
_previousLeft: 0,
39+
_previousTop: 0,
40+
_circleStyles: {},
41+
circle: (null : ?{ setNativeProps(props: Object): void }),
42+
43+
componentWillMount: function() {
44+
this._panResponder = PanResponder.create({
45+
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
46+
onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
47+
onPanResponderGrant: this._handlePanResponderGrant,
48+
onPanResponderMove: this._handlePanResponderMove,
49+
onPanResponderRelease: this._handlePanResponderEnd,
50+
onPanResponderTerminate: this._handlePanResponderEnd,
51+
});
52+
this._previousLeft = 20;
53+
this._previousTop = 84;
54+
this._circleStyles = {
55+
left: this._previousLeft,
56+
top: this._previousTop,
57+
};
58+
},
59+
60+
componentDidMount: function() {
61+
this._updatePosition();
62+
},
63+
64+
render: function() {
65+
return (
66+
<View
67+
style={styles.container}>
68+
<View
69+
ref={(circle) => {
70+
this.circle = circle;
71+
}}
72+
style={styles.circle}
73+
{...this._panResponder.panHandlers}
74+
/>
75+
</View>
76+
);
77+
},
78+
79+
_highlight: function() {
80+
this.circle && this.circle.setNativeProps({
81+
backgroundColor: CIRCLE_HIGHLIGHT_COLOR
82+
});
83+
},
84+
85+
_unHighlight: function() {
86+
this.circle && this.circle.setNativeProps({
87+
backgroundColor: CIRCLE_COLOR
88+
});
89+
},
90+
91+
_updatePosition: function() {
92+
this.circle && this.circle.setNativeProps(this._circleStyles);
93+
},
94+
95+
_handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
96+
// Should we become active when the user presses down on the circle?
97+
return true;
98+
},
99+
100+
_handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
101+
// Should we become active when the user moves a touch over the circle?
102+
return true;
103+
},
104+
105+
_handlePanResponderGrant: function(e: Object, gestureState: Object) {
106+
this._highlight();
107+
},
108+
_handlePanResponderMove: function(e: Object, gestureState: Object) {
109+
this._circleStyles.left = this._previousLeft + gestureState.dx;
110+
this._circleStyles.top = this._previousTop + gestureState.dy;
111+
this._updatePosition();
112+
},
113+
_handlePanResponderEnd: function(e: Object, gestureState: Object) {
114+
this._unHighlight();
115+
this._previousLeft += gestureState.dx;
116+
this._previousTop += gestureState.dy;
117+
},
118+
});
119+
120+
var styles = StyleSheet.create({
121+
circle: {
122+
width: CIRCLE_SIZE,
123+
height: CIRCLE_SIZE,
124+
borderRadius: CIRCLE_SIZE / 2,
125+
backgroundColor: CIRCLE_COLOR,
126+
position: 'absolute',
127+
left: 0,
128+
top: 0,
129+
},
130+
container: {
131+
flex: 1,
132+
paddingTop: 64,
133+
},
134+
});
135+
136+
module.exports = NavigatorIOSExample;

‎Examples/UIExplorer/TextInputExample.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ var styles = StyleSheet.create({
109109
flex: 1,
110110
},
111111
label: {
112-
width: 80,
112+
width: 120,
113113
justifyContent: 'flex-end',
114114
flexDirection: 'row',
115115
marginRight: 10,
@@ -311,4 +311,29 @@ exports.examples = [
311311
);
312312
}
313313
},
314+
{
315+
title: 'Clear and select',
316+
render: function () {
317+
return (
318+
<View>
319+
<WithLabel label="clearTextOnFocus">
320+
<TextInput
321+
placeholder="text is cleared on focus"
322+
value="text is cleared on focus"
323+
style={styles.default}
324+
clearTextOnFocus={true}
325+
/>
326+
</WithLabel>
327+
<WithLabel label="selectTextOnFocus">
328+
<TextInput
329+
placeholder="text is selected on focus"
330+
value="text is selected on focus"
331+
style={styles.default}
332+
selectTextOnFocus={true}
333+
/>
334+
</WithLabel>
335+
</View>
336+
);
337+
}
338+
},
314339
];

0 commit comments

Comments
 (0)