"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof3 = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof")); var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var React = _interopRequireWildcard(require("react")); var _classnames = _interopRequireDefault(require("classnames")); var _common = require("../common"); var _useId = _interopRequireDefault(require("../hooks/useId")); var _PtgCircle = _interopRequireDefault(require("./PtgCircle")); var _util = require("./util"); var _excluded = ["id", "prefixCls", "steps", "strokeWidth", "trailWidth", "gapDegree", "gapPosition", "trailColor", "strokeLinecap", "style", "className", "strokeColor", "percent"]; function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } function toArray(value) { var mergedValue = value !== null && value !== void 0 ? value : []; return Array.isArray(mergedValue) ? mergedValue : [mergedValue]; } var Circle = function Circle(props) { var _defaultProps$props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _common.defaultProps), props), id = _defaultProps$props.id, prefixCls = _defaultProps$props.prefixCls, steps = _defaultProps$props.steps, strokeWidth = _defaultProps$props.strokeWidth, trailWidth = _defaultProps$props.trailWidth, _defaultProps$props$g = _defaultProps$props.gapDegree, gapDegree = _defaultProps$props$g === void 0 ? 0 : _defaultProps$props$g, gapPosition = _defaultProps$props.gapPosition, trailColor = _defaultProps$props.trailColor, strokeLinecap = _defaultProps$props.strokeLinecap, style = _defaultProps$props.style, className = _defaultProps$props.className, strokeColor = _defaultProps$props.strokeColor, percent = _defaultProps$props.percent, restProps = (0, _objectWithoutProperties2.default)(_defaultProps$props, _excluded); var halfSize = _util.VIEW_BOX_SIZE / 2; var mergedId = (0, _useId.default)(id); var gradientId = "".concat(mergedId, "-gradient"); var radius = halfSize - strokeWidth / 2; var perimeter = Math.PI * 2 * radius; var rotateDeg = gapDegree > 0 ? 90 + gapDegree / 2 : -90; var perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360); var _ref = (0, _typeof2.default)(steps) === 'object' ? steps : { count: steps, space: 2 }, stepCount = _ref.count, stepSpace = _ref.space; var percentList = toArray(percent); var strokeColorList = toArray(strokeColor); var gradient = strokeColorList.find(function (color) { return color && (0, _typeof2.default)(color) === 'object'; }); var isConicGradient = gradient && (0, _typeof2.default)(gradient) === 'object'; var mergedStrokeLinecap = isConicGradient ? 'butt' : strokeLinecap; var circleStyle = (0, _util.getCircleStyle)(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, trailColor, mergedStrokeLinecap, strokeWidth); var paths = (0, _common.useTransitionDuration)(); var getStokeList = function getStokeList() { var stackPtg = 0; return percentList.map(function (ptg, index) { var color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1]; var circleStyleForStack = (0, _util.getCircleStyle)(perimeter, perimeterWithoutGap, stackPtg, ptg, rotateDeg, gapDegree, gapPosition, color, mergedStrokeLinecap, strokeWidth); stackPtg += ptg; return /*#__PURE__*/React.createElement(_PtgCircle.default, { key: index, color: color, ptg: ptg, radius: radius, prefixCls: prefixCls, gradientId: gradientId, style: circleStyleForStack, strokeLinecap: mergedStrokeLinecap, strokeWidth: strokeWidth, gapDegree: gapDegree, ref: function ref(elem) { // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs // React will call the ref callback with the DOM element when the component mounts, // and call it with `null` when it unmounts. // Refs are guaranteed to be up-to-date before componentDidMount or componentDidUpdate fires. paths[index] = elem; }, size: _util.VIEW_BOX_SIZE }); }).reverse(); }; var getStepStokeList = function getStepStokeList() { // only show the first percent when pass steps var current = Math.round(stepCount * (percentList[0] / 100)); var stepPtg = 100 / stepCount; var stackPtg = 0; return new Array(stepCount).fill(null).map(function (_, index) { var color = index <= current - 1 ? strokeColorList[0] : trailColor; var stroke = color && (0, _typeof2.default)(color) === 'object' ? "url(#".concat(gradientId, ")") : undefined; var circleStyleForStack = (0, _util.getCircleStyle)(perimeter, perimeterWithoutGap, stackPtg, stepPtg, rotateDeg, gapDegree, gapPosition, color, 'butt', strokeWidth, stepSpace); stackPtg += (perimeterWithoutGap - circleStyleForStack.strokeDashoffset + stepSpace) * 100 / perimeterWithoutGap; return /*#__PURE__*/React.createElement("circle", { key: index, className: "".concat(prefixCls, "-circle-path"), r: radius, cx: halfSize, cy: halfSize, stroke: stroke, strokeWidth: strokeWidth, opacity: 1, style: circleStyleForStack, ref: function ref(elem) { paths[index] = elem; } }); }); }; return /*#__PURE__*/React.createElement("svg", (0, _extends2.default)({ className: (0, _classnames.default)("".concat(prefixCls, "-circle"), className), viewBox: "0 0 ".concat(_util.VIEW_BOX_SIZE, " ").concat(_util.VIEW_BOX_SIZE), style: style, id: id, role: "presentation" }, restProps), !stepCount && /*#__PURE__*/React.createElement("circle", { className: "".concat(prefixCls, "-circle-trail"), r: radius, cx: halfSize, cy: halfSize, stroke: trailColor, strokeLinecap: mergedStrokeLinecap, strokeWidth: trailWidth || strokeWidth, style: circleStyle }), stepCount ? getStepStokeList() : getStokeList()); }; if (process.env.NODE_ENV !== 'production') { Circle.displayName = 'Circle'; } var _default = Circle; exports.default = _default;