react-art/lib/Circle.art.js

React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).

/**
 * Copyright 2013-2014 Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @providesModule Circle.art
 * @typechecks
 *
 * Example usage:
 * <Circle
 *   radius={10}
 *   stroke="green"
 *   strokeWidth={3}
 *   fill="blue"
 * />
 *
 */

var React = require('react');
var ReactART = require('./ReactART');

var Props = React.PropTypes;
var Shape = ReactART.Shape;
var Path = ReactART.Path;

/**
 * Circle is a React component for drawing circles. Like other ReactART
 * components, it must be used in a <Surface>.
 */
var Circle = React.createClass({displayName: "Circle",

  propTypes: {
    radius: Props.number.isRequired
  },

  render: function() {
    var radius = this.props.radius;

    var path = Path().moveTo(0, -radius)
        .arc(0, radius * 2, radius)
        .arc(0, radius * -2, radius)
        .close();
    return React.createElement(Shape, React.__spread({},  this.props, {d: path}));
  }

});

module.exports = Circle;