Skip to content

Commit

Permalink
Merge pull request #2007 from sahrens/Updates_from_Wed_July_15th
Browse files Browse the repository at this point in the history 
Updates from wed july 15th
  • Loading branch information
@sahrens
sahrens committed Jul 15, 2015
2 parents 94e2e51 + 902ffbb commit 28b9a6f
Show file tree
Hide file tree
Showing 54 changed files with 631 additions and 572 deletions.
53 changes: 53 additions & 0 deletions Examples/UIExplorer/ImageExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,41 @@ var {
StyleSheet,
Text,
View,
ActivityIndicatorIOS
} = React;

var ImageCapInsetsExample = require('./ImageCapInsetsExample');

var NetworkImageExample = React.createClass({
watchID: (null: ?number),

getInitialState: function() {
return {
error: false,
loading: true,
progress: 0
};
},
render: function() {
var loader = this.state.loading ?
<View style={styles.progress}>
<Text>{this.state.progress}%</Text>
<ActivityIndicatorIOS style={{marginLeft:5}}/>
</View> : null;
return this.state.error ?
<Text>{this.state.error}</Text> :
<Image
source={this.props.source}
style={[styles.base, {overflow: 'visible'}]}
onLoadError={(e) => this.setState({error: e.nativeEvent.error})}
onLoadProgress={(e) => this.setState({progress: Math.max(0, Math.round(100 * e.nativeEvent.written / e.nativeEvent.total))}) }
onLoadEnd={() => this.setState({loading: false, error: false})}
onLoadAbort={() => this.setState({error: 'Loading has aborted'})} >
{loader}
</Image>;
}
});

exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = '<Image>';
Expand Down Expand Up @@ -59,6 +90,22 @@ exports.examples = [
);
},
},
{
title: 'Error Handler',
render: function() {
return (
<NetworkImageExample source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
);
},
},
{
title: 'Image Download Progress',
render: function() {
return (
<NetworkImageExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
);
},
},
{
title: 'Border Color',
render: function() {
Expand Down Expand Up @@ -300,6 +347,12 @@ var styles = StyleSheet.create({
width: 38,
height: 38,
},
progress: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
width: 100
},
leftMargin: {
marginLeft: 10,
},
Expand Down
19 changes: 0 additions & 19 deletions Examples/UIExplorer/TextExample.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -369,25 +369,6 @@ exports.examples = [
</View>
);
},
}, {
title: 'allowFontScaling attribute',
render: function() {
return (
<View>
<Text>
By default, text will respect Text Size accessibility setting on iOS.
It means that all font sizes will be increased or descreased depending on the value of Text Size setting in
{" "}<Text style={{fontWeight: 'bold'}}>Settings.app - Display & Brightness - Text Size</Text>
</Text>
<Text style={{marginTop: 10}}>
You can disable scaling for your Text component by passing {"\""}allowFontScaling={"{"}false{"}\""} prop.
</Text>
<Text allowFontScaling={false} style={{marginTop: 20}}>
This text will not scale.
</Text>
</View>
);
},
}];

var styles = StyleSheet.create({
Expand Down
213 changes: 170 additions & 43 deletions Examples/UIExplorer/TransformExample.js
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,85 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* @providesModule TransformExample
* 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.
*/
'use strict';

var React = require('React');
var React = require('react-native');
var {
Animated,
StyleSheet,
Text,
View,
} = React;

var TimerMixin = require('react-timer-mixin');
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');

var TransformExample = React.createClass({

mixins: [TimerMixin],

var Flip = React.createClass({
getInitialState() {
return {
interval: this.setInterval(this._update, 800),
pulse: false,
theta: new Animated.Value(45),
};
},

render() {
return (
<UIExplorerPage title="Transforms">
<UIExplorerBlock title="foo bar">
<View style={{height: 500}}>
<View style={styles.box1} />
<View style={styles.box2} />
<View style={styles.box3step1} />
<View style={styles.box3step2} />
<View style={styles.box3step3} />
<View style={styles.box4} />
<View style={[
styles.box5,
this.state.pulse ? styles.box5Transform : null
]} />
</View>
</UIExplorerBlock>
</UIExplorerPage>
);
componentDidMount() {
this._animate();
},

_update() {
this.setState({
pulse: !this.state.pulse,
});
_animate() {
this.state.theta.setValue(0);
Animated.timing(this.state.theta, {
toValue: 360,
duration: 5000,
}).start(this._animate);
},

render() {
return (
<View style={styles.flipCardContainer}>
<Animated.View style={[
styles.flipCard,
{transform: [
{perspective: 850},
{rotateX: this.state.theta.interpolate({
inputRange: [0, 180],
outputRange: ['0deg', '180deg']
})},
]}]}>
<Text style={styles.flipText}>
This text is flipping great.
</Text>
</Animated.View>
<Animated.View style={[styles.flipCard, {
position: 'absolute',
top: 0,
backgroundColor: 'red',
transform: [
{perspective: 850},
{rotateX: this.state.theta.interpolate({
inputRange: [0, 180],
outputRange: ['180deg', '360deg']
})},
]}]}>
<Text style={styles.flipText}>
On the flip side...
</Text>
</Animated.View>
</View>
);
}
});

var styles = StyleSheet.create({
container: {
height: 500,
},
box1: {
left: 0,
backgroundColor: 'green',
Expand Down Expand Up @@ -88,7 +112,7 @@ var styles = StyleSheet.create({
},
box3step1: {
left: 0,
backgroundColor: '#ffb6c1', // lightpink
backgroundColor: 'lightpink',
height: 50,
position: 'absolute',
top: 0,
Expand All @@ -99,7 +123,7 @@ var styles = StyleSheet.create({
},
box3step2: {
left: 0,
backgroundColor: '#ff69b4', //hotpink
backgroundColor: 'hotpink',
height: 50,
opacity: 0.5,
position: 'absolute',
Expand All @@ -113,7 +137,7 @@ var styles = StyleSheet.create({
},
box3step3: {
left: 0,
backgroundColor: '#ff1493', // deeppink
backgroundColor: 'deeppink',
height: 50,
opacity: 0.5,
position: 'absolute',
Expand All @@ -129,7 +153,7 @@ var styles = StyleSheet.create({
},
box4: {
left: 0,
backgroundColor: '#ff8c00', // darkorange
backgroundColor: 'darkorange',
height: 50,
position: 'absolute',
top: 0,
Expand All @@ -141,7 +165,7 @@ var styles = StyleSheet.create({
width: 100,
},
box5: {
backgroundColor: '#800000', // maroon
backgroundColor: 'maroon',
height: 50,
position: 'absolute',
right: 0,
Expand All @@ -155,7 +179,110 @@ var styles = StyleSheet.create({
{scale: 2},
],
},
flipCardContainer: {
marginVertical: 40,
flex: 1,
alignSelf: 'center',
},
flipCard: {
width: 200,
height: 200,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue',
backfaceVisibility: 'hidden',
},
flipText: {
width: 90,
fontSize: 20,
color: 'white',
fontWeight: 'bold',
}
});


module.exports = TransformExample;
exports.title = 'Transforms';
exports.description = 'View transforms';
exports.examples = [
{
title: 'Perspective',
description: 'perspective: 850, rotateX: Animated.timing(0 -> 360)',
render(): ReactElement { return <Flip />; }
},
{
title: 'Translate, Rotate, Scale',
description: "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2",
render() {
return (
<View style={styles.container}>
<View style={styles.box1} />
</View>
);
}
},
{
title: 'Scale, Translate, Rotate, ',
description: "scaleX: 2, scaleY: 2, translateX: 100, translateY: 50, rotate: '30deg'",
render() {
return (
<View style={styles.container}>
<View style={styles.box2} />
</View>
);
}
},
{
title: 'Rotate',
description: "rotate: '30deg'",
render() {
return (
<View style={styles.container}>
<View style={styles.box3step1} />
</View>
);
}
},
{
title: 'Rotate, Scale',
description: "rotate: '30deg', scaleX: 2, scaleY: 2",
render() {
return (
<View style={styles.container}>
<View style={styles.box3step2} />
</View>
);
}
},
{
title: 'Rotate, Scale, Translate ',
description: "rotate: '30deg', scaleX: 2, scaleY: 2, translateX: 100, translateY: 50",
render() {
return (
<View style={styles.container}>
<View style={styles.box3step3} />
</View>
);
}
},
{
title: 'Translate, Scale, Rotate',
description: "translate: [200, 350], scale: 2.5, rotate: '-0.2rad'",
render() {
return (
<View style={styles.container}>
<View style={styles.box4} />
</View>
);
}
},
{
title: 'Translate, Rotate, Scale',
description: "translate: [-50, 35], rotate: '50deg', scale: 2",
render() {
return (
<View style={styles.container}>
<View style={[styles.box5, styles.box5Transform]} />
</View>
);
}
}
];
2 changes: 1 addition & 1 deletion Examples/UIExplorer/UIExplorer/AppDelegate.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ - (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWith
* Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
* to your Xcode project folder and run
*
* $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.includeRequire.runModule.bundle' -o main.jsbundle
* $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.includeRequire.runModule.bundle' -o main.jsbundle
*
* then add the `main.jsbundle` file to your project and uncomment this line:
*/
Expand Down
Loading

0 comments on commit 28b9a6f

Please sign in to comment.