Line.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.sortGradient = exports.handleGradient = exports.default = void 0;
  9. var React = _interopRequireWildcard(require("react"));
  10. var _colors = require("@ant-design/colors");
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var _warning = require("../_util/warning");
  13. var _style = require("./style");
  14. var _utils = require("./utils");
  15. var __rest = void 0 && (void 0).__rest || function (s, e) {
  16. var t = {};
  17. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  18. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  19. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  20. }
  21. return t;
  22. };
  23. /**
  24. * @example
  25. * {
  26. * "0%": "#afc163",
  27. * "75%": "#009900",
  28. * "50%": "green", // ====> '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
  29. * "25%": "#66FF00",
  30. * "100%": "#ffffff"
  31. * }
  32. */
  33. const sortGradient = gradients => {
  34. let tempArr = [];
  35. Object.keys(gradients).forEach(key => {
  36. const formattedKey = parseFloat(key.replace(/%/g, ''));
  37. if (!Number.isNaN(formattedKey)) {
  38. tempArr.push({
  39. key: formattedKey,
  40. value: gradients[key]
  41. });
  42. }
  43. });
  44. tempArr = tempArr.sort((a, b) => a.key - b.key);
  45. return tempArr.map(({
  46. key,
  47. value
  48. }) => `${value} ${key}%`).join(', ');
  49. };
  50. /**
  51. * Then this man came to realize the truth: Besides six pence, there is the moon. Besides bread and
  52. * butter, there is the bug. And... Besides women, there is the code.
  53. *
  54. * @example
  55. * {
  56. * "0%": "#afc163",
  57. * "25%": "#66FF00",
  58. * "50%": "#00CC00", // ====> linear-gradient(to right, #afc163 0%, #66FF00 25%,
  59. * "75%": "#009900", // #00CC00 50%, #009900 75%, #ffffff 100%)
  60. * "100%": "#ffffff"
  61. * }
  62. */
  63. exports.sortGradient = sortGradient;
  64. const handleGradient = (strokeColor, directionConfig) => {
  65. const {
  66. from = _colors.presetPrimaryColors.blue,
  67. to = _colors.presetPrimaryColors.blue,
  68. direction = directionConfig === 'rtl' ? 'to left' : 'to right'
  69. } = strokeColor,
  70. rest = __rest(strokeColor, ["from", "to", "direction"]);
  71. if (Object.keys(rest).length !== 0) {
  72. const sortedGradients = sortGradient(rest);
  73. const background = `linear-gradient(${direction}, ${sortedGradients})`;
  74. return {
  75. background,
  76. [_style.LineStrokeColorVar]: background
  77. };
  78. }
  79. const background = `linear-gradient(${direction}, ${from}, ${to})`;
  80. return {
  81. background,
  82. [_style.LineStrokeColorVar]: background
  83. };
  84. };
  85. exports.handleGradient = handleGradient;
  86. const Line = props => {
  87. const {
  88. prefixCls,
  89. direction: directionConfig,
  90. percent,
  91. size,
  92. strokeWidth,
  93. strokeColor,
  94. strokeLinecap = 'round',
  95. children,
  96. trailColor = null,
  97. percentPosition,
  98. success
  99. } = props;
  100. const {
  101. align: infoAlign,
  102. type: infoPosition
  103. } = percentPosition;
  104. const backgroundProps = strokeColor && typeof strokeColor !== 'string' ? handleGradient(strokeColor, directionConfig) : {
  105. [_style.LineStrokeColorVar]: strokeColor,
  106. background: strokeColor
  107. };
  108. const borderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : undefined;
  109. const mergedSize = size !== null && size !== void 0 ? size : [-1, strokeWidth || (size === 'small' ? 6 : 8)];
  110. const [width, height] = (0, _utils.getSize)(mergedSize, 'line', {
  111. strokeWidth
  112. });
  113. if (process.env.NODE_ENV !== 'production') {
  114. const warning = (0, _warning.devUseWarning)('Progress');
  115. warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size');
  116. }
  117. const trailStyle = {
  118. backgroundColor: trailColor || undefined,
  119. borderRadius
  120. };
  121. const percentStyle = Object.assign(Object.assign({
  122. width: `${(0, _utils.validProgress)(percent)}%`,
  123. height,
  124. borderRadius
  125. }, backgroundProps), {
  126. [_style.Percent]: (0, _utils.validProgress)(percent) / 100
  127. });
  128. const successPercent = (0, _utils.getSuccessPercent)(props);
  129. const successPercentStyle = {
  130. width: `${(0, _utils.validProgress)(successPercent)}%`,
  131. height,
  132. borderRadius,
  133. backgroundColor: success === null || success === void 0 ? void 0 : success.strokeColor
  134. };
  135. const outerStyle = {
  136. width: width < 0 ? '100%' : width
  137. };
  138. const lineInner = /*#__PURE__*/React.createElement("div", {
  139. className: `${prefixCls}-inner`,
  140. style: trailStyle
  141. }, /*#__PURE__*/React.createElement("div", {
  142. className: (0, _classnames.default)(`${prefixCls}-bg`, `${prefixCls}-bg-${infoPosition}`),
  143. style: percentStyle
  144. }, infoPosition === 'inner' && children), successPercent !== undefined && (/*#__PURE__*/React.createElement("div", {
  145. className: `${prefixCls}-success-bg`,
  146. style: successPercentStyle
  147. })));
  148. const isOuterStart = infoPosition === 'outer' && infoAlign === 'start';
  149. const isOuterEnd = infoPosition === 'outer' && infoAlign === 'end';
  150. return infoPosition === 'outer' && infoAlign === 'center' ? (/*#__PURE__*/React.createElement("div", {
  151. className: `${prefixCls}-layout-bottom`
  152. }, lineInner, children)) : (/*#__PURE__*/React.createElement("div", {
  153. className: `${prefixCls}-outer`,
  154. style: outerStyle
  155. }, isOuterStart && children, lineInner, isOuterEnd && children));
  156. };
  157. var _default = exports.default = Line;