choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
137 lines (109 loc) • 4.83 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _enhancer = _interopRequireDefault(require("./enhancer"));
var _types = require("./types");
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = (0, _getPrototypeOf2["default"])(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0, _possibleConstructorReturn2["default"])(this, result);
};
}
var Line =
/*#__PURE__*/
function (_Component) {
(0, _inherits2["default"])(Line, _Component);
var _super = _createSuper(Line);
function Line() {
(0, _classCallCheck2["default"])(this, Line);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(Line, [{
key: "render",
value: function render() {
var _this = this;
var _this$props = this.props,
className = _this$props.className,
percent = _this$props.percent,
prefixCls = _this$props.prefixCls,
strokeColor = _this$props.strokeColor,
strokeLinecap = _this$props.strokeLinecap,
strokeWidth = _this$props.strokeWidth,
style = _this$props.style,
trailColor = _this$props.trailColor,
trailWidth = _this$props.trailWidth,
restProps = (0, _objectWithoutProperties2["default"])(_this$props, ["className", "percent", "prefixCls", "strokeColor", "strokeLinecap", "strokeWidth", "style", "trailColor", "trailWidth"]);
delete restProps.gapPosition;
var pathStyle = {
strokeDasharray: '100px, 100px',
strokeDashoffset: "".concat(100 - percent, "px"),
transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s linear'
};
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);
return _react["default"].createElement("svg", (0, _extends2["default"])({
className: "".concat(prefixCls, "-line ").concat(className),
viewBox: viewBoxString,
preserveAspectRatio: "none",
style: style
}, restProps), _react["default"].createElement("path", {
className: "".concat(prefixCls, "-line-trail"),
d: pathString,
strokeLinecap: strokeLinecap,
stroke: trailColor,
strokeWidth: trailWidth || strokeWidth,
fillOpacity: "0"
}), _react["default"].createElement("path", {
className: "".concat(prefixCls, "-line-path"),
d: pathString,
strokeLinecap: strokeLinecap,
stroke: strokeColor,
strokeWidth: strokeWidth,
fillOpacity: "0",
ref: function ref(path) {
_this.path = path;
},
style: pathStyle
}));
}
}]);
return Line;
}(_react.Component);
(0, _defineProperty2["default"])(Line, "propTypes", _types.propTypes);
(0, _defineProperty2["default"])(Line, "defaultProps", _types.defaultProps);
var _default = (0, _enhancer["default"])(Line);
exports["default"] = _default;
//# sourceMappingURL=Line.js.map