123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
- var _excluded = ["className", "percent", "prefixCls", "strokeColor", "strokeLinecap", "strokeWidth", "style", "trailColor", "trailWidth", "transition"];
- import * as React from 'react';
- import classNames from 'classnames';
- import { useTransitionDuration, defaultProps } from "./common";
- var Line = function Line(props) {
- var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
- className = _defaultProps$props.className,
- percent = _defaultProps$props.percent,
- prefixCls = _defaultProps$props.prefixCls,
- strokeColor = _defaultProps$props.strokeColor,
- strokeLinecap = _defaultProps$props.strokeLinecap,
- strokeWidth = _defaultProps$props.strokeWidth,
- style = _defaultProps$props.style,
- trailColor = _defaultProps$props.trailColor,
- trailWidth = _defaultProps$props.trailWidth,
- transition = _defaultProps$props.transition,
- restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
- // eslint-disable-next-line no-param-reassign
- delete restProps.gapPosition;
- var percentList = Array.isArray(percent) ? percent : [percent];
- var strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
- var paths = useTransitionDuration();
- var center = strokeWidth / 2;
- var right = 100 - strokeWidth / 2;
- var pathString = "M ".concat(strokeLinecap === 'round' ? center : 0, ",").concat(center, "\n L ").concat(strokeLinecap === 'round' ? right : 100, ",").concat(center);
- var viewBoxString = "0 0 100 ".concat(strokeWidth);
- var stackPtg = 0;
- return /*#__PURE__*/React.createElement("svg", _extends({
- className: classNames("".concat(prefixCls, "-line"), className),
- viewBox: viewBoxString,
- preserveAspectRatio: "none",
- style: style
- }, restProps), /*#__PURE__*/React.createElement("path", {
- className: "".concat(prefixCls, "-line-trail"),
- d: pathString,
- strokeLinecap: strokeLinecap,
- stroke: trailColor,
- strokeWidth: trailWidth || strokeWidth,
- fillOpacity: "0"
- }), percentList.map(function (ptg, index) {
- var dashPercent = 1;
- switch (strokeLinecap) {
- case 'round':
- dashPercent = 1 - strokeWidth / 100;
- break;
- case 'square':
- dashPercent = 1 - strokeWidth / 2 / 100;
- break;
- default:
- dashPercent = 1;
- break;
- }
- var pathStyle = {
- strokeDasharray: "".concat(ptg * dashPercent, "px, 100px"),
- strokeDashoffset: "-".concat(stackPtg, "px"),
- transition: transition || 'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear'
- };
- var color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
- stackPtg += ptg;
- return /*#__PURE__*/React.createElement("path", {
- key: index,
- className: "".concat(prefixCls, "-line-path"),
- d: pathString,
- strokeLinecap: strokeLinecap,
- stroke: color,
- strokeWidth: strokeWidth,
- fillOpacity: "0",
- 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;
- },
- style: pathStyle
- });
- }));
- };
- if (process.env.NODE_ENV !== 'production') {
- Line.displayName = 'Line';
- }
- export default Line;
|