Line.js 4.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  10. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  11. var React = _interopRequireWildcard(require("react"));
  12. var _classnames = _interopRequireDefault(require("classnames"));
  13. var _common = require("./common");
  14. var _excluded = ["className", "percent", "prefixCls", "strokeColor", "strokeLinecap", "strokeWidth", "style", "trailColor", "trailWidth", "transition"];
  15. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
  16. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  17. var Line = function Line(props) {
  18. var _defaultProps$props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _common.defaultProps), props),
  19. className = _defaultProps$props.className,
  20. percent = _defaultProps$props.percent,
  21. prefixCls = _defaultProps$props.prefixCls,
  22. strokeColor = _defaultProps$props.strokeColor,
  23. strokeLinecap = _defaultProps$props.strokeLinecap,
  24. strokeWidth = _defaultProps$props.strokeWidth,
  25. style = _defaultProps$props.style,
  26. trailColor = _defaultProps$props.trailColor,
  27. trailWidth = _defaultProps$props.trailWidth,
  28. transition = _defaultProps$props.transition,
  29. restProps = (0, _objectWithoutProperties2.default)(_defaultProps$props, _excluded);
  30. // eslint-disable-next-line no-param-reassign
  31. delete restProps.gapPosition;
  32. var percentList = Array.isArray(percent) ? percent : [percent];
  33. var strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
  34. var paths = (0, _common.useTransitionDuration)();
  35. var center = strokeWidth / 2;
  36. var right = 100 - strokeWidth / 2;
  37. var pathString = "M ".concat(strokeLinecap === 'round' ? center : 0, ",").concat(center, "\n L ").concat(strokeLinecap === 'round' ? right : 100, ",").concat(center);
  38. var viewBoxString = "0 0 100 ".concat(strokeWidth);
  39. var stackPtg = 0;
  40. return /*#__PURE__*/React.createElement("svg", (0, _extends2.default)({
  41. className: (0, _classnames.default)("".concat(prefixCls, "-line"), className),
  42. viewBox: viewBoxString,
  43. preserveAspectRatio: "none",
  44. style: style
  45. }, restProps), /*#__PURE__*/React.createElement("path", {
  46. className: "".concat(prefixCls, "-line-trail"),
  47. d: pathString,
  48. strokeLinecap: strokeLinecap,
  49. stroke: trailColor,
  50. strokeWidth: trailWidth || strokeWidth,
  51. fillOpacity: "0"
  52. }), percentList.map(function (ptg, index) {
  53. var dashPercent = 1;
  54. switch (strokeLinecap) {
  55. case 'round':
  56. dashPercent = 1 - strokeWidth / 100;
  57. break;
  58. case 'square':
  59. dashPercent = 1 - strokeWidth / 2 / 100;
  60. break;
  61. default:
  62. dashPercent = 1;
  63. break;
  64. }
  65. var pathStyle = {
  66. strokeDasharray: "".concat(ptg * dashPercent, "px, 100px"),
  67. strokeDashoffset: "-".concat(stackPtg, "px"),
  68. transition: transition || 'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear'
  69. };
  70. var color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
  71. stackPtg += ptg;
  72. return /*#__PURE__*/React.createElement("path", {
  73. key: index,
  74. className: "".concat(prefixCls, "-line-path"),
  75. d: pathString,
  76. strokeLinecap: strokeLinecap,
  77. stroke: color,
  78. strokeWidth: strokeWidth,
  79. fillOpacity: "0",
  80. ref: function ref(elem) {
  81. // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
  82. // React will call the ref callback with the DOM element when the component mounts,
  83. // and call it with `null` when it unmounts.
  84. // Refs are guaranteed to be up-to-date before componentDidMount or componentDidUpdate fires.
  85. paths[index] = elem;
  86. },
  87. style: pathStyle
  88. });
  89. }));
  90. };
  91. if (process.env.NODE_ENV !== 'production') {
  92. Line.displayName = 'Line';
  93. }
  94. var _default = exports.default = Line;