Skip to content

Commit 769aee1

Browse files
tuxracertuxracer
committed
Merge pull request Flipboard#53 from codrin-iftimie/gradient-layer
Gradient layer
2 parents 6349746 + 6afd7a9 commit 769aee1

File tree

6 files changed

+120
-0
lines changed

6 files changed

+120
-0
lines changed

‎README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,27 @@ React Canvas provides a set of standard React components that abstract the under
3838

3939
**Image** is exactly what you think it is. However, it adds the ability to hide an image until it is fully loaded and optionally fade it in on load.
4040

41+
### <Gradient>
42+
43+
**Gradient** can be used to set the background of a group or surface.
44+
```javascript
45+
render() {
46+
...
47+
return (
48+
<Group style={this.getStyle()}>
49+
<Gradient style={this.getGradientStyle()}
50+
colorStops={this.getGradientColors()} />
51+
</Group>
52+
);
53+
}
54+
getGradientColors(){
55+
return [
56+
{ color: "transparent", position: 0 },
57+
{ color: "#000", position: 1 }
58+
]
59+
}
60+
```
61+
4162
### &lt;ListView&gt;
4263

4364
**ListView** is a touch scrolling container that renders a list of elements in a column. Think of it like UITableView for the web. It leverages many of the same optimizations that make table views on iOS and list views on Android fast.

‎examples/gradient/app.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/** @jsx React.DOM */
2+
3+
'use strict';
4+
5+
var React = require('react');
6+
var ReactCanvas = require('react-canvas');
7+
8+
var Gradient = ReactCanvas.Gradient;
9+
var Surface = ReactCanvas.Surface;
10+
11+
var App = React.createClass({
12+
13+
render: function () {
14+
var size = this.getSize();
15+
return (
16+
<Surface top={0} left={0} width={size.width} height={size.height}>
17+
<Gradient style={this.getGradientStyle()}
18+
colorStops={this.getGradientColors()} />
19+
</Surface>
20+
);
21+
},
22+
23+
getGradientStyle: function(){
24+
var size = this.getSize();
25+
return {
26+
top: 0,
27+
left: 0,
28+
width: size.width,
29+
height: size.height
30+
};
31+
},
32+
33+
getGradientColors: function(){
34+
return [
35+
{ color: "transparent", position: 0 },
36+
{ color: "#000", position: 1 }
37+
];
38+
},
39+
40+
getSize: function () {
41+
return document.getElementById('main').getBoundingClientRect();
42+
}
43+
44+
});
45+
46+
React.render(<App />, document.getElementById('main'));

‎examples/gradient/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
5+
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<title>ReactCanvas: ListView</title>
7+
<link rel="stylesheet" type="text/css" href="/examples/common/examples.css">
8+
<script src="/examples/common/touch-emulator.js"></script>
9+
<script type="text/javascript">
10+
TouchEmulator();
11+
</script>
12+
</head>
13+
<body>
14+
<div id="main"></div>
15+
<script src="/build/gradient.js"></script>
16+
</body>
17+
</html>

‎lib/Gradient.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
'use strict';
2+
3+
var React = require('react');
4+
var createComponent = require('./createComponent');
5+
var LayerMixin = require('./LayerMixin');
6+
7+
var Gradient = createComponent('Gradient', LayerMixin, {
8+
9+
applyGradientProps: function (prevProps, props) {
10+
var layer = this.node;
11+
layer.type = 'gradient';
12+
layer.colorStops = props.colorStops || [];
13+
this.applyLayerProps(prevProps, props);
14+
},
15+
16+
mountComponent: function (rootID, transaction, context) {
17+
var props = this._currentElement.props;
18+
var layer = this.node;
19+
this.applyGradientProps({}, props);
20+
return layer;
21+
},
22+
23+
receiveComponent: function (nextComponent, transaction, context) {
24+
var prevProps = this._currentElement.props;
25+
var props = nextComponent.props;
26+
this.applyGradientProps({}, props);
27+
this._currentElement = nextComponent;
28+
this.node.invalidateLayout();
29+
},
30+
31+
});
32+
33+
34+
module.exports = Gradient;

‎lib/ReactCanvas.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ var ReactCanvas = {
88
Image: require('./Image'),
99
Text: require('./Text'),
1010
ListView: require('./ListView'),
11+
Gradient: require('./Gradient'),
1112

1213
FontFace: require('./FontFace'),
1314
measureText: require('./measureText')

‎webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ module.exports = {
66
entry: {
77
'listview': ['./examples/listview/app.js'],
88
'timeline': ['./examples/timeline/app.js'],
9+
'gradient': ['./examples/gradient/app.js'],
910
'css-layout': ['./examples/css-layout/app.js']
1011
},
1112

0 commit comments

Comments
 (0)