react-lite-misc/lib/module/loading-circle.js

Misc Components of jianliao.com

(function() {
  var React, T, circle, cx, div, span, svg;

  cx = require('classnames');

  React = require('react');

  div = React.createFactory('div');

  svg = React.createFactory('svg');

  span = React.createFactory('span');

  circle = React.createFactory('circle');

  T = React.PropTypes;

  module.exports = React.createClass({
    displayName: 'loading-circle',
    propTypes: {
      size: T.number,
      onClick: T.func,
      stroke: T.string,
      strokeWidth: T.number,
      strokeLinecap: T.string
    },
    getDefaultProps: function() {
      return {
        size: 50,
        stroke: '#888',
        strokeWidth: 2,
        strokeLinecap: 'round'
      };
    },
    render: function() {
      var style;
      style = {
        width: this.props.size,
        height: this.props.size,
        cursor: this.props.onClick != null ? 'pointer' : void 0
      };
      return div({
        className: 'lite-loading-circle',
        style: style,
        onClick: this.props.onClick
      }, svg({
        width: this.props.size,
        height: this.props.size,
        viewPort: "0 0 " + this.props.size + " " + this.props.size,
        className: 'inner'
      }, circle({
        r: this.props.size / 2.5,
        cx: this.props.size / 2,
        cy: this.props.size / 2,
        fill: 'transparent',
        className: 'inner-circle',
        stroke: this.props.stroke,
        strokeWidth: this.props.strokeWidth,
        strokeLinecap: this.props.strokeLinecap,
        strokeDasharray: '251.2%'
      })));
    }
  });

}).call(this);