ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
49 lines (48 loc) • 2.99 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import React, { PureComponent } from 'react';
var _firstStopColor = '#fe0362';
var _secondStopColor = '#7473e3';
var CountdownBg = /** @class */ (function (_super) {
__extends(CountdownBg, _super);
function CountdownBg() {
return _super !== null && _super.apply(this, arguments) || this;
}
CountdownBg.prototype.render = function () {
var _a = this.props, percent = _a.percent, firstStopColor = _a.firstStopColor, secondStopColor = _a.secondStopColor;
var dashLength = Math.PI * 2 * 30;
var strokeDashoffset = percent > 0 ? dashLength - dashLength * percent / 100 : dashLength;
return (React.createElement("div", { className: "prassbar-container" },
React.createElement("div", { id: "svgContainer" },
React.createElement("div", { id: "countSvgBg" },
React.createElement("svg", { width: "150", height: "150" },
React.createElement("defs", null,
React.createElement("linearGradient", { id: "grad1", x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
React.createElement("stop", { offset: "0%", style: { stopColor: firstStopColor, stopOpacity: 1 } }),
React.createElement("stop", { offset: "100%", style: { stopColor: secondStopColor, stopOpacity: 1 } }))),
React.createElement("path", { className: "progress-circle-trail", fillOpacity: "0", stroke: "rgba(0,0,0,0.1)", d: "M 50,50 m 0,-30\n a 30,30 0 1 1 0,60\n a 30,30 0 1 1 0,-60", strokeWidth: "4" }),
React.createElement("path", { className: "progress-circle-path", fillOpacity: "0", strokeLinecap: "round", strokeWidth: "3", d: "M 50,50 m 0,-30\n a 30,30 0 1 1 0,60\n a 30,30 0 1 1 0,-60", stroke: "url(#grad1)", style: { strokeDasharray: "" + dashLength, strokeDashoffset: "" + strokeDashoffset, transition: ' all 0.5s linear' } }))))));
};
CountdownBg.defaultProps = {
percent: 0,
firstStopColor: '#fe0362',
secondStopColor: '#7473e3',
};
CountdownBg.setBgColor = function (firstStopColor, secondStopColor) {
_firstStopColor = firstStopColor;
_secondStopColor = secondStopColor;
};
return CountdownBg;
}(PureComponent));
export default CountdownBg;