zent
Version:
一套前端设计语言和基于React的实现
234 lines (201 loc) • 7.95 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _icon = require('../icon');
var _icon2 = _interopRequireDefault(_icon);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var Progress = function (_ref) {
(0, _inherits3['default'])(Progress, _ref);
function Progress() {
(0, _classCallCheck3['default'])(this, Progress);
return (0, _possibleConstructorReturn3['default'])(this, (Progress.__proto__ || Object.getPrototypeOf(Progress)).apply(this, arguments));
}
(0, _createClass3['default'])(Progress, [{
key: 'render',
value: function render() {
var _cx2;
var _props = this.props,
type = _props.type,
percent = _props.percent,
showInfo = _props.showInfo,
status = _props.status,
className = _props.className,
prefix = _props.prefix,
format = _props.format,
strokeWidth = _props.strokeWidth,
width = _props.width,
style = _props.style,
normalColor = _props.normalColor,
exceptionColor = _props.exceptionColor,
successColor = _props.successColor,
bgColor = _props.bgColor;
var progressWidth = width || (type === 'circle' ? 132 : 580);
var containerCls = (0, _classnames2['default'])(prefix + '-progress', prefix + '-progress-' + type, (0, _defineProperty3['default'])({}, className, !!className));
var statusCls = (0, _classnames2['default'])((_cx2 = {}, (0, _defineProperty3['default'])(_cx2, prefix + '-progress-inprogress', percent < 100 && status !== 'exception'), (0, _defineProperty3['default'])(_cx2, prefix + '-progress-exception', percent < 100 && status === 'exception'), (0, _defineProperty3['default'])(_cx2, prefix + '-progress-success', percent >= 100), _cx2));
var getCurrentColor = function getCurrentColor() {
if (percent < 100 && status === 'exception') {
return exceptionColor || normalColor;
}
if (percent >= 100) {
return successColor;
}
return normalColor;
};
var renderInfoCont = function renderInfoCont() {
var infoCont = void 0;
if (format) {
infoCont = format(percent);
} else {
infoCont = percent + '%';
if (percent >= 100) {
infoCont = _react2['default'].createElement(_icon2['default'], {
type: type === 'circle' ? 'check' : 'check-circle',
style: {
color: getCurrentColor()
}
});
} else if (status === 'exception') {
infoCont = _react2['default'].createElement(_icon2['default'], {
type: type === 'circle' ? 'close' : 'close-circle',
style: {
color: getCurrentColor()
}
});
}
}
return infoCont;
};
var renderProgressCont = function renderProgressCont() {
var progressCont = void 0;
switch (type) {
case 'circle':
progressCont = _react2['default'].createElement(
'div',
{
className: statusCls,
style: {
width: progressWidth,
height: progressWidth
}
},
_react2['default'].createElement('div', {
className: prefix + '-progress-wrapper',
style: {
borderRadius: progressWidth,
borderWidth: strokeWidth,
borderColor: bgColor
}
}),
_react2['default'].createElement(
'svg',
{ className: prefix + '-progress-inner' },
_react2['default'].createElement('circle', {
className: prefix + '-progress-inner-path',
cx: progressWidth / 2,
cy: progressWidth / 2,
r: (progressWidth - strokeWidth) / 2,
style: {
stroke: getCurrentColor(),
strokeWidth: strokeWidth,
strokeDasharray: Math.PI * (progressWidth - strokeWidth),
strokeDashoffset: Math.PI * (progressWidth - strokeWidth) * (100 - percent) / 100
}
})
),
showInfo ? _react2['default'].createElement(
'div',
{
className: prefix + '-progress-info',
style: { lineHeight: progressWidth + 'px' }
},
renderInfoCont()
) : null
);
break;
case 'line':
default:
progressCont = _react2['default'].createElement(
'div',
{ className: statusCls },
_react2['default'].createElement(
'div',
{
className: prefix + '-progress-wrapper',
style: {
background: bgColor,
width: progressWidth,
height: strokeWidth,
borderRadius: strokeWidth
}
},
_react2['default'].createElement('div', {
className: prefix + '-progress-inner',
style: {
background: getCurrentColor(),
width: percent + '%',
height: strokeWidth,
borderRadius: strokeWidth
}
})
),
showInfo ? _react2['default'].createElement(
'div',
{ className: prefix + '-progress-info' },
renderInfoCont()
) : null
);
break;
}
return progressCont;
};
return _react2['default'].createElement(
'div',
{ className: containerCls, style: style },
renderProgressCont()
);
}
}]);
return Progress;
}(_react.PureComponent || _react.Component);
Progress.propTypes = {
className: _propTypes2['default'].string,
prefix: _propTypes2['default'].string,
type: _propTypes2['default'].string,
percent: _propTypes2['default'].number,
showInfo: _propTypes2['default'].bool,
status: _propTypes2['default'].string,
format: _propTypes2['default'].func,
strokeWidth: _propTypes2['default'].number,
width: _propTypes2['default'].number,
style: _propTypes2['default'].object,
normalColor: _propTypes2['default'].string,
exceptionColor: _propTypes2['default'].string,
successColor: _propTypes2['default'].string,
bgColor: _propTypes2['default'].string
};
Progress.defaultProps = {
type: 'line',
percent: 0,
showInfo: true,
className: '',
prefix: 'zent',
strokeWidth: 10
};
exports['default'] = Progress;