Line.js 5.0 KB

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