@lyra/components/lib/progress/ProgressCircle.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _circleStyle = require('part:@lyra/components/progress/circle-style');

var _circleStyle2 = _interopRequireDefault(_circleStyle);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const radiusFactor = 1.3;
const widthFactor = 1.2;
const heightFactor = 1.2;

class ProgressCircle extends _react2.default.PureComponent {

  render() {
    var _props = this.props;
    const percent = _props.percent,
          text = _props.text,
          style = _props.style,
          showPercent = _props.showPercent;


    const radius = 50;
    const strokeWidth = 10;
    const width = radius * 2;
    const height = radius * 2;
    const viewBox = `-10 -10 ${width * widthFactor} ${height * heightFactor}`;

    const dashArray = radius * Math.PI * 2;
    const dashOffset = dashArray - dashArray * percent / 100;

    return _react2.default.createElement(
      'div',
      {
        className: percent >= 100 ? _circleStyle2.default.completed : _circleStyle2.default.unCompleted,
        style: style
      },
      _react2.default.createElement(
        'svg',
        {
          className: _circleStyle2.default.svg,
          width: width,
          height: height,
          viewBox: viewBox
        },
        _react2.default.createElement('circle', {
          className: _circleStyle2.default.background,
          cx: radius,
          cy: radius,
          r: radius,
          strokeWidth: `${strokeWidth}px`
        }),
        _react2.default.createElement('circle', {
          className: _circleStyle2.default.foreground,
          cx: radius,
          cy: radius,
          r: radius,
          strokeWidth: `${strokeWidth}px`,
          style: {
            strokeDasharray: dashArray,
            strokeDashoffset: dashOffset
          }
        }),
        showPercent && _react2.default.createElement(
          'text',
          {
            className: _circleStyle2.default.percent,
            x: radius,
            y: text ? radius - 5 : radius,
            dy: '.4em',
            textAnchor: 'middle'
          },
          `${Math.round(percent, 1)}%`
        ),
        text && _react2.default.createElement(
          'text',
          {
            className: _circleStyle2.default.status,
            x: radius,
            y: radius * radiusFactor - 5,
            dy: '.4em',
            textAnchor: 'middle'
          },
          text
        )
      )
    );
  }
}
exports.default = ProgressCircle;
ProgressCircle.propTypes = {
  percent: _propTypes2.default.number,
  text: _propTypes2.default.string,
  style: _propTypes2.default.object,
  showPercent: _propTypes2.default.bool
};
ProgressCircle.defaultProps = {
  percent: 0,
  style: {},
  text: '',
  showPercent: false
};