Merge pull request #53 from codrin-iftimie/gradient-layer

Gradient layer
Flipboard · Jan 8, 2016 · 769aee1 · 769aee1
2 parents 6349746 + 6afd7a9
commit 769aee1
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -38,6 +38,27 @@ React Canvas provides a set of standard React components that abstract the under
 
 **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.
 
+### &lt;Gradient&gt;
+
+**Gradient** can be used to set the background of a group or surface. 
+```javascript
+  render() {
+    ...
+    return (
+      <Group style={this.getStyle()}>
+        <Gradient style={this.getGradientStyle()} 
+                  colorStops={this.getGradientColors()} />
+      </Group>
+    );
+  }
+  getGradientColors(){
+    return [
+      { color: "transparent", position: 0 },
+      { color: "#000", position: 1 }
+    ]
+  }
+``` 
+
 ### &lt;ListView&gt;
 
 **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.

diff --git a/examples/gradient/app.js b/examples/gradient/app.js
@@ -0,0 +1,46 @@
+/** @jsx React.DOM */
+
+'use strict';
+
+var React = require('react');
+var ReactCanvas = require('react-canvas');
+
+var Gradient = ReactCanvas.Gradient;
+var Surface = ReactCanvas.Surface;
+
+var App = React.createClass({
+
+  render: function () {
+    var size = this.getSize();
+    return (
+      <Surface top={0} left={0} width={size.width} height={size.height}>
+        <Gradient style={this.getGradientStyle()}
+                  colorStops={this.getGradientColors()} />
+      </Surface>
+    );
+  },
+
+  getGradientStyle: function(){
+    var size = this.getSize();
+    return {
+      top: 0,
+      left: 0,
+      width: size.width,
+      height: size.height
+    };
+  },
+
+  getGradientColors: function(){
+    return [
+      { color: "transparent", position: 0 },
+      { color: "#000", position: 1 }
+    ];
+  },
+
+  getSize: function () {
+    return document.getElementById('main').getBoundingClientRect();
+  }
+
+});
+
+React.render(<App />, document.getElementById('main'));
diff --git a/examples/gradient/index.html b/examples/gradient/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>ReactCanvas: ListView</title>
+  <link rel="stylesheet" type="text/css" href="/examples/common/examples.css">
+  <script src="/examples/common/touch-emulator.js"></script>
+  <script type="text/javascript">
+    TouchEmulator();
+  </script>
+</head>
+<body>
+  <div id="main"></div>
+  <script src="/build/gradient.js"></script>
+</body>
+</html>
diff --git a/lib/Gradient.js b/lib/Gradient.js
@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var createComponent = require('./createComponent');
+var LayerMixin = require('./LayerMixin');
+
+var Gradient = createComponent('Gradient', LayerMixin, {
+
+  applyGradientProps: function (prevProps, props) {
+    var layer = this.node;
+    layer.type = 'gradient';
+    layer.colorStops = props.colorStops || [];
+    this.applyLayerProps(prevProps, props);
+  },
+
+  mountComponent: function (rootID, transaction, context) {
+    var props = this._currentElement.props;
+    var layer = this.node;
+    this.applyGradientProps({}, props);
+    return layer;
+  },
+
+  receiveComponent: function (nextComponent, transaction, context) {
+    var prevProps = this._currentElement.props;
+    var props = nextComponent.props;
+    this.applyGradientProps({}, props);
+    this._currentElement = nextComponent;
+    this.node.invalidateLayout();
+  },
+
+});
+
+
+module.exports = Gradient;
diff --git a/lib/ReactCanvas.js b/lib/ReactCanvas.js
@@ -8,6 +8,7 @@ var ReactCanvas = {
   Image: require('./Image'),
   Text: require('./Text'),
   ListView: require('./ListView'),
+  Gradient: require('./Gradient'),
 
   FontFace: require('./FontFace'),
   measureText: require('./measureText')

diff --git a/webpack.config.js b/webpack.config.js
@@ -6,6 +6,7 @@ module.exports = {
   entry: {
     'listview': ['./examples/listview/app.js'],
     'timeline': ['./examples/timeline/app.js'],
+    'gradient': ['./examples/gradient/app.js'],
     'css-layout': ['./examples/css-layout/app.js']
   },