This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+12
View File
@@ -0,0 +1,12 @@
import * as React from 'react';
import type { ProgressGradient, ProgressProps, ProgressSemanticClassNames, ProgressSemanticStyles } from './progress';
export interface CircleProps extends Omit<ProgressProps, 'classNames' | 'styles'> {
prefixCls: string;
children: React.ReactNode;
progressStatus: string;
strokeColor?: string | ProgressGradient;
classNames: ProgressSemanticClassNames;
styles: ProgressSemanticStyles;
}
declare const Circle: React.FC<CircleProps>;
export default Circle;
+115
View File
@@ -0,0 +1,115 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _progress = require("@rc-component/progress");
var _util = require("@rc-component/util");
var _clsx = require("clsx");
var _context = require("../config-provider/context");
var _tooltip = _interopRequireDefault(require("../tooltip"));
var _utils = require("./utils");
const CIRCLE_MIN_STROKE_WIDTH = 3;
const getMinPercent = width => CIRCLE_MIN_STROKE_WIDTH / width * 100;
const OMIT_SEMANTIC_NAMES = ['root', 'body', 'indicator'];
const Circle = props => {
const {
prefixCls,
classNames,
styles,
railColor,
trailColor,
strokeLinecap = 'round',
gapPosition,
gapPlacement,
gapDegree,
width: originWidth = 120,
type,
children,
success,
size = originWidth,
steps
} = props;
const {
direction
} = (0, _context.useComponentConfig)('progress');
const mergedRailColor = railColor ?? trailColor;
const [width, height] = (0, _utils.getSize)(size, 'circle');
let {
strokeWidth
} = props;
if (strokeWidth === undefined) {
strokeWidth = Math.max(getMinPercent(width), 6);
}
const circleStyle = {
width,
height,
fontSize: width * 0.15 + 6
};
const realGapDegree = React.useMemo(() => {
// Support gapDeg = 0 when type = 'dashboard'
if (gapDegree || gapDegree === 0) {
return gapDegree;
}
if (type === 'dashboard') {
return 75;
}
return undefined;
}, [gapDegree, type]);
const percentArray = (0, _utils.getPercentage)(props);
const gapPos = React.useMemo(() => {
const mergedPlacement = (gapPlacement ?? gapPosition) || type === 'dashboard' && 'bottom' || undefined;
const isRTL = direction === 'rtl';
switch (mergedPlacement) {
case 'start':
return isRTL ? 'right' : 'left';
case 'end':
return isRTL ? 'left' : 'right';
default:
return mergedPlacement;
}
}, [direction, gapPlacement, gapPosition, type]);
// using className to style stroke color
const isGradient = Object.prototype.toString.call(props.strokeColor) === '[object Object]';
const strokeColor = (0, _utils.getStrokeColor)({
success,
strokeColor: props.strokeColor
});
const wrapperClassName = (0, _clsx.clsx)(`${prefixCls}-body`, {
[`${prefixCls}-circle-gradient`]: isGradient
}, classNames.body);
const circleContent = /*#__PURE__*/React.createElement(_progress.Circle, {
steps: steps,
percent: steps ? percentArray[1] : percentArray,
strokeWidth: strokeWidth,
railWidth: strokeWidth,
strokeColor: steps ? strokeColor[1] : strokeColor,
strokeLinecap: strokeLinecap,
railColor: mergedRailColor,
prefixCls: prefixCls,
gapDegree: realGapDegree,
gapPosition: gapPos,
classNames: (0, _util.omit)(classNames, OMIT_SEMANTIC_NAMES),
styles: (0, _util.omit)(styles, OMIT_SEMANTIC_NAMES)
});
const smallCircle = width <= 20;
const node = /*#__PURE__*/React.createElement("div", {
className: wrapperClassName,
style: {
...circleStyle,
...styles.body
}
}, circleContent, !smallCircle && children);
if (smallCircle) {
return /*#__PURE__*/React.createElement(_tooltip.default, {
title: children
}, node);
}
return node;
};
var _default = exports.default = Circle;
+38
View File
@@ -0,0 +1,38 @@
import * as React from 'react';
import type { DirectionType } from '../config-provider';
import type { PercentPositionType, ProgressGradient, ProgressProps, ProgressSemanticClassNames, ProgressSemanticStyles, StringGradients } from './progress';
interface LineProps extends Omit<ProgressProps, 'classNames' | 'styles'> {
prefixCls: string;
direction?: DirectionType;
strokeColor?: string | ProgressGradient;
percentPosition: PercentPositionType;
classNames: ProgressSemanticClassNames;
styles: ProgressSemanticStyles;
}
/**
* @example
* {
* "0%": "#afc163",
* "75%": "#009900",
* "50%": "green", // ====> '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
* "25%": "#66FF00",
* "100%": "#ffffff"
* }
*/
export declare const sortGradient: (gradients: StringGradients) => string;
/**
* Then this man came to realize the truth: Besides six pence, there is the moon. Besides bread and
* butter, there is the bug. And... Besides women, there is the code.
*
* @example
* {
* "0%": "#afc163",
* "25%": "#66FF00",
* "50%": "#00CC00", // ====> linear-gradient(to right, #afc163 0%, #66FF00 25%,
* "75%": "#009900", // #00CC00 50%, #009900 75%, #ffffff 100%)
* "100%": "#ffffff"
* }
*/
export declare const handleGradient: (strokeColor: ProgressGradient, directionConfig?: DirectionType) => React.CSSProperties;
declare const Line: React.FC<LineProps>;
export default Line;
+164
View File
@@ -0,0 +1,164 @@
"use strict";
"use client";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.sortGradient = exports.handleGradient = exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _colors = require("@ant-design/colors");
var _clsx = require("clsx");
var _warning = require("../_util/warning");
var _style = require("./style");
var _utils = require("./utils");
/**
* @example
* {
* "0%": "#afc163",
* "75%": "#009900",
* "50%": "green", // ====> '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
* "25%": "#66FF00",
* "100%": "#ffffff"
* }
*/
const sortGradient = gradients => {
let tempArr = [];
Object.keys(gradients).forEach(key => {
const formattedKey = Number.parseFloat(key.replace(/%/g, ''));
if (!Number.isNaN(formattedKey)) {
tempArr.push({
key: formattedKey,
value: gradients[key]
});
}
});
tempArr = tempArr.sort((a, b) => a.key - b.key);
return tempArr.map(({
key,
value
}) => `${value} ${key}%`).join(', ');
};
/**
* Then this man came to realize the truth: Besides six pence, there is the moon. Besides bread and
* butter, there is the bug. And... Besides women, there is the code.
*
* @example
* {
* "0%": "#afc163",
* "25%": "#66FF00",
* "50%": "#00CC00", // ====> linear-gradient(to right, #afc163 0%, #66FF00 25%,
* "75%": "#009900", // #00CC00 50%, #009900 75%, #ffffff 100%)
* "100%": "#ffffff"
* }
*/
exports.sortGradient = sortGradient;
const handleGradient = (strokeColor, directionConfig) => {
const {
from = _colors.presetPrimaryColors.blue,
to = _colors.presetPrimaryColors.blue,
direction = directionConfig === 'rtl' ? 'to left' : 'to right',
...rest
} = strokeColor;
if (Object.keys(rest).length !== 0) {
const sortedGradients = sortGradient(rest);
const background = `linear-gradient(${direction}, ${sortedGradients})`;
return {
background,
[_style.LineStrokeColorVar]: background
};
}
const background = `linear-gradient(${direction}, ${from}, ${to})`;
return {
background,
[_style.LineStrokeColorVar]: background
};
};
exports.handleGradient = handleGradient;
const Line = props => {
const {
prefixCls,
classNames,
styles,
direction: directionConfig,
percent,
size,
strokeWidth,
strokeColor,
strokeLinecap = 'round',
children,
railColor,
trailColor,
percentPosition,
success
} = props;
const {
align: infoAlign,
type: infoPosition
} = percentPosition;
const mergedRailColor = railColor ?? trailColor;
const borderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : undefined;
if (process.env.NODE_ENV !== 'production') {
const warning = (0, _warning.devUseWarning)('Progress');
warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size');
}
// ========================= Size =========================
const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)];
const [width, height] = (0, _utils.getSize)(mergedSize, 'line', {
strokeWidth
});
// ========================= Rail =========================
const railStyle = {
backgroundColor: mergedRailColor || undefined,
borderRadius,
height
};
// ======================== Tracks ========================
const trackCls = `${prefixCls}-track`;
const backgroundProps = strokeColor && typeof strokeColor !== 'string' ? handleGradient(strokeColor, directionConfig) : {
[_style.LineStrokeColorVar]: strokeColor,
background: strokeColor
};
const percentTrackStyle = {
width: `${(0, _utils.validProgress)(percent)}%`,
height,
borderRadius,
...backgroundProps
};
const successPercent = (0, _utils.getSuccessPercent)(props);
const successTrackStyle = {
width: `${(0, _utils.validProgress)(successPercent)}%`,
height,
borderRadius,
backgroundColor: success?.strokeColor
};
// ======================== Render ========================
return /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.clsx)(`${prefixCls}-body`, classNames.body, {
[`${prefixCls}-body-layout-bottom`]: infoAlign === 'center' && infoPosition === 'outer'
}),
style: {
width: width > 0 ? width : '100%',
...styles.body
}
}, /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.clsx)(`${prefixCls}-rail`, classNames.rail),
style: {
...railStyle,
...styles.rail
}
}, /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.clsx)(trackCls, classNames.track),
style: {
...percentTrackStyle,
...styles.track
}
}, infoPosition === 'inner' && children), successPercent !== undefined && (/*#__PURE__*/React.createElement("div", {
className: (0, _clsx.clsx)(trackCls, `${trackCls}-success`, classNames.track),
style: {
...successTrackStyle,
...styles.track
}
}))), infoPosition === 'outer' && children);
};
var _default = exports.default = Line;
+13
View File
@@ -0,0 +1,13 @@
import * as React from 'react';
import type { ProgressProps, ProgressSemanticClassNames, ProgressSemanticStyles } from './progress';
interface ProgressStepsProps extends Omit<ProgressProps, 'classNames' | 'styles'> {
steps: number;
strokeColor?: string | string[];
railColor?: string;
/** @deprecated Please use `railColor` instead */
trailColor?: string;
classNames: ProgressSemanticClassNames;
styles: ProgressSemanticStyles;
}
declare const Steps: React.FC<ProgressStepsProps>;
export default Steps;
+59
View File
@@ -0,0 +1,59 @@
"use strict";
"use client";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = require("clsx");
var _utils = require("./utils");
const Steps = props => {
const {
classNames,
styles,
size,
steps,
rounding: customRounding = Math.round,
percent = 0,
strokeWidth = 8,
strokeColor,
railColor,
trailColor,
prefixCls,
children
} = props;
const current = customRounding(steps * (percent / 100));
const stepWidth = size === 'small' ? 2 : 14;
const mergedSize = size ?? [stepWidth, strokeWidth];
const [width, height] = (0, _utils.getSize)(mergedSize, 'step', {
steps,
strokeWidth
});
const unitWidth = width / steps;
const styledSteps = Array.from({
length: steps
});
const mergedRailColor = railColor ?? trailColor;
for (let i = 0; i < steps; i++) {
const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
styledSteps[i] = /*#__PURE__*/React.createElement("div", {
key: i,
className: (0, _clsx.clsx)(`${prefixCls}-steps-item`, {
[`${prefixCls}-steps-item-active`]: i <= current - 1
}, classNames.track),
style: {
backgroundColor: i <= current - 1 ? color : mergedRailColor,
width: unitWidth,
height,
...styles.track
}
});
}
return /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.clsx)(`${prefixCls}-steps-body`, classNames.body),
style: styles.body
}, styledSteps, children);
};
var _default = exports.default = Steps;
+3
View File
@@ -0,0 +1,3 @@
import Progress from './progress';
export type { ProgressAriaProps, ProgressProps, ProgressSemanticClassNames, ProgressSemanticName, ProgressSemanticStyles, } from './progress';
export default Progress;
+10
View File
@@ -0,0 +1,10 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _progress = _interopRequireDefault(require("./progress"));
var _default = exports.default = _progress.default;
+85
View File
@@ -0,0 +1,85 @@
import * as React from 'react';
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
import type { SizeType } from '../config-provider/SizeContext';
export type ProgressSemanticName = keyof ProgressSemanticClassNames & keyof ProgressSemanticStyles;
export type ProgressSemanticClassNames = {
root?: string;
body?: string;
rail?: string;
track?: string;
indicator?: string;
};
export type ProgressSemanticStyles = {
root?: React.CSSProperties;
body?: React.CSSProperties;
rail?: React.CSSProperties;
track?: React.CSSProperties;
indicator?: React.CSSProperties;
};
export type ProgressClassNamesType = SemanticClassNamesType<ProgressProps, ProgressSemanticClassNames>;
export type ProgressStylesType = SemanticStylesType<ProgressProps, ProgressSemanticStyles>;
export declare const ProgressTypes: readonly ["line", "circle", "dashboard"];
export type ProgressType = (typeof ProgressTypes)[number];
declare const ProgressStatuses: readonly ["normal", "exception", "active", "success"];
/**
* Note: `default` is deprecated and will be removed in v7, please use `medium` instead.
*/
export type ProgressSize = Exclude<SizeType, 'large'> | 'default';
export type StringGradients = Record<string, string>;
type FromToGradients = {
from: string;
to: string;
};
export type ProgressGradient = {
direction?: string;
} & (StringGradients | FromToGradients);
export interface PercentPositionType {
align?: 'start' | 'center' | 'end';
type?: 'inner' | 'outer';
}
export interface SuccessProps {
percent?: number;
strokeColor?: string;
}
export type ProgressAriaProps = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>;
export type GapPlacement = 'top' | 'bottom' | 'start' | 'end';
export type GapPosition = 'top' | 'bottom' | 'left' | 'right';
export interface ProgressProps extends ProgressAriaProps {
prefixCls?: string;
className?: string;
rootClassName?: string;
classNames?: ProgressClassNamesType;
styles?: ProgressStylesType;
type?: ProgressType;
percent?: number;
format?: (percent?: number, successPercent?: number) => React.ReactNode;
status?: (typeof ProgressStatuses)[number];
showInfo?: boolean;
strokeWidth?: number;
strokeLinecap?: 'butt' | 'square' | 'round';
strokeColor?: string | string[] | ProgressGradient;
/** @deprecated Please use `railColor` instead */
trailColor?: string;
railColor?: string;
/** @deprecated Use `size` instead */
width?: number;
success?: SuccessProps;
style?: React.CSSProperties;
gapDegree?: number;
gapPlacement?: GapPlacement;
/** @deprecated please use `gapPlacement` instead */
gapPosition?: GapPosition;
size?: number | [number | string, number] | ProgressSize | {
width?: number;
height?: number;
};
steps?: number | {
count: number;
gap: number;
};
percentPosition?: PercentPositionType;
children?: React.ReactNode;
rounding?: (step: number) => number;
}
declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
export default Progress;
+198
View File
@@ -0,0 +1,198 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ProgressTypes = void 0;
var React = _interopRequireWildcard(require("react"));
var _fastColor = require("@ant-design/fast-color");
var _CheckCircleFilled = _interopRequireDefault(require("@ant-design/icons/CheckCircleFilled"));
var _CheckOutlined = _interopRequireDefault(require("@ant-design/icons/CheckOutlined"));
var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons/CloseCircleFilled"));
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
var _util = require("@rc-component/util");
var _clsx = require("clsx");
var _hooks = require("../_util/hooks");
var _is = require("../_util/is");
var _warning = require("../_util/warning");
var _context = require("../config-provider/context");
var _Circle = _interopRequireDefault(require("./Circle"));
var _Line = _interopRequireDefault(require("./Line"));
var _Steps = _interopRequireDefault(require("./Steps"));
var _style = _interopRequireDefault(require("./style"));
var _utils = require("./utils");
const ProgressTypes = exports.ProgressTypes = ['line', 'circle', 'dashboard'];
const ProgressStatuses = ['normal', 'exception', 'active', 'success'];
const Progress = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
prefixCls: customizePrefixCls,
className,
rootClassName,
classNames,
styles,
steps,
strokeColor,
percent = 0,
size = 'medium',
showInfo = true,
type = 'line',
status,
format,
style,
percentPosition = {},
...restProps
} = props;
// ========================= MISC =========================
const {
align: infoAlign = 'end',
type: infoPosition = 'outer'
} = percentPosition;
const strokeColorNotArray = Array.isArray(strokeColor) ? strokeColor[0] : strokeColor;
const strokeColorNotGradient = typeof strokeColor === 'string' || Array.isArray(strokeColor) ? strokeColor : undefined;
const strokeColorIsBright = React.useMemo(() => {
if (strokeColorNotArray) {
const color = typeof strokeColorNotArray === 'string' ? strokeColorNotArray : Object.values(strokeColorNotArray)[0];
return new _fastColor.FastColor(color).isLight();
}
return false;
}, [strokeColor]);
const percentNumber = React.useMemo(() => {
const successPercent = (0, _utils.getSuccessPercent)(props);
return Number.parseInt(successPercent !== undefined ? (successPercent ?? 0)?.toString() : (percent ?? 0)?.toString(), 10);
}, [percent, props.success]);
const progressStatus = React.useMemo(() => {
if (!ProgressStatuses.includes(status) && percentNumber >= 100) {
return 'success';
}
return status || 'normal';
}, [status, percentNumber]);
// ======================= Context ========================
const {
getPrefixCls,
direction,
className: contextClassName,
style: contextStyle,
classNames: contextClassNames,
styles: contextStyles
} = (0, _context.useComponentConfig)('progress');
const prefixCls = getPrefixCls('progress', customizePrefixCls);
const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
const mergedProps = {
...props,
percent,
type,
size,
showInfo,
percentPosition
};
// ======================== Styles ========================
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([contextClassNames, classNames], [contextStyles, styles], {
props: mergedProps
});
// ========================= Info =========================
const isLineType = type === 'line';
const isPureLineType = isLineType && !steps;
const progressInfo = React.useMemo(() => {
if (!showInfo) {
return null;
}
const successPercent = (0, _utils.getSuccessPercent)(props);
let text;
const textFormatter = format || (number => `${number}%`);
const isBrightInnerColor = isLineType && strokeColorIsBright && infoPosition === 'inner';
if (infoPosition === 'inner' || format || progressStatus !== 'exception' && progressStatus !== 'success') {
text = textFormatter((0, _utils.validProgress)(percent), (0, _utils.validProgress)(successPercent));
} else if (progressStatus === 'exception') {
text = isLineType ? /*#__PURE__*/React.createElement(_CloseCircleFilled.default, null) : /*#__PURE__*/React.createElement(_CloseOutlined.default, null);
} else if (progressStatus === 'success') {
text = isLineType ? /*#__PURE__*/React.createElement(_CheckCircleFilled.default, null) : /*#__PURE__*/React.createElement(_CheckOutlined.default, null);
}
return /*#__PURE__*/React.createElement("span", {
className: (0, _clsx.clsx)(`${prefixCls}-indicator`, {
[`${prefixCls}-indicator-bright`]: isBrightInnerColor,
[`${prefixCls}-indicator-${infoAlign}`]: isPureLineType,
[`${prefixCls}-indicator-${infoPosition}`]: isPureLineType
}, mergedClassNames.indicator),
style: mergedStyles.indicator,
title: typeof text === 'string' ? text : undefined
}, text);
}, [showInfo, percent, percentNumber, progressStatus, type, prefixCls, format, isLineType, strokeColorIsBright, infoPosition, infoAlign, isPureLineType, mergedClassNames.indicator, mergedStyles.indicator]);
if (process.env.NODE_ENV !== 'production') {
const warning = (0, _warning.devUseWarning)('Progress');
[['width', 'size'], ['trailColor', 'railColor'], ['gapPosition', 'gapPlacement']].forEach(([deprecatedName, newName]) => {
warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
});
if (type === 'circle' || type === 'dashboard') {
if (Array.isArray(size)) {
process.env.NODE_ENV !== "production" ? warning(false, 'usage', 'Type "circle" and "dashboard" do not accept array as `size`, please use number or preset size instead.') : void 0;
} else if ((0, _is.isPlainObject)(size)) {
process.env.NODE_ENV !== "production" ? warning(false, 'usage', 'Type "circle" and "dashboard" do not accept object as `size`, please use number or preset size instead.') : void 0;
}
}
warning.deprecated(size !== 'default', 'size="default"', 'size="medium"');
}
// ======================== Render ========================
const sharedProps = {
...props,
classNames: mergedClassNames,
styles: mergedStyles
};
let progress;
// Render progress shape
if (type === 'line') {
progress = steps ? (/*#__PURE__*/React.createElement(_Steps.default, {
...sharedProps,
strokeColor: strokeColorNotGradient,
prefixCls: prefixCls,
steps: (0, _is.isPlainObject)(steps) ? steps.count : steps
}, progressInfo)) : (/*#__PURE__*/React.createElement(_Line.default, {
...sharedProps,
strokeColor: strokeColorNotArray,
prefixCls: prefixCls,
direction: direction,
percentPosition: {
align: infoAlign,
type: infoPosition
}
}, progressInfo));
} else if (type === 'circle' || type === 'dashboard') {
progress = /*#__PURE__*/React.createElement(_Circle.default, {
...sharedProps,
strokeColor: strokeColorNotArray,
prefixCls: prefixCls,
progressStatus: progressStatus
}, progressInfo);
}
const classString = (0, _clsx.clsx)(prefixCls, `${prefixCls}-status-${progressStatus}`, {
[`${prefixCls}-${type === 'dashboard' && 'circle' || type}`]: type !== 'line',
[`${prefixCls}-inline-circle`]: type === 'circle' && (0, _utils.getSize)(size, 'circle')[0] <= 20,
[`${prefixCls}-line`]: isPureLineType,
[`${prefixCls}-line-align-${infoAlign}`]: isPureLineType,
[`${prefixCls}-line-position-${infoPosition}`]: isPureLineType,
[`${prefixCls}-steps`]: steps,
[`${prefixCls}-show-info`]: showInfo,
[`${prefixCls}-small`]: size === 'small',
[`${prefixCls}-rtl`]: direction === 'rtl'
}, contextClassName, className, rootClassName, mergedClassNames.root, hashId, cssVarCls);
return /*#__PURE__*/React.createElement("div", {
ref: ref,
style: {
...contextStyle,
...mergedStyles.root,
...style
},
className: classString,
role: "progressbar",
"aria-valuenow": percentNumber,
"aria-valuemin": 0,
"aria-valuemax": 100,
...(0, _util.omit)(restProps, ['railColor', 'trailColor', 'strokeWidth', 'width', 'gapDegree', 'gapPosition', 'gapPlacement', 'strokeLinecap', 'success'])
}, progress);
});
if (process.env.NODE_ENV !== 'production') {
Progress.displayName = 'Progress';
}
var _default = exports.default = Progress;
+37
View File
@@ -0,0 +1,37 @@
import type { GetDefaultToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc 进度条默认颜色
* @descEN Default color of progress bar
*/
defaultColor: string;
/**
* @desc 进度条剩余部分颜色
* @descEN Color of remaining part of progress bar
*/
remainingColor: string;
/**
* @desc 圆形进度条文字颜色
* @descEN Text color of circular progress bar
*/
circleTextColor: string;
/**
* @desc 条状进度条圆角
* @descEN Border radius of line progress bar
*/
lineBorderRadius: number;
/**
* @desc 圆形进度条文本大小
* @descEN Text size of circular progress bar
*/
circleTextFontSize: string;
/**
* @desc 圆形进度条图标大小
* @descEN Icon size of circular progress bar
*/
circleIconFontSize: string;
}
export declare const LineStrokeColorVar = "--progress-line-stroke-color";
export declare const prepareComponentToken: GetDefaultToken<'Progress'>;
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
export default _default;
+295
View File
@@ -0,0 +1,295 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.prepareComponentToken = exports.default = exports.LineStrokeColorVar = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _style = require("../../style");
var _internal = require("../../theme/internal");
const LineStrokeColorVar = exports.LineStrokeColorVar = '--progress-line-stroke-color';
const genAntProgressActive = isRtl => {
const direction = isRtl ? '100%' : '-100%';
return new _cssinjs.Keyframes(`antProgress${isRtl ? 'RTL' : 'LTR'}Active`, {
'0%': {
transform: `translateX(${direction}) scaleX(0)`,
opacity: 0.1
},
'20%': {
transform: `translateX(${direction}) scaleX(0)`,
opacity: 0.5
},
to: {
transform: 'translateX(0) scaleX(1)',
opacity: 0
}
});
};
// ====================================================================
// == Base ==
// ====================================================================
const genBaseStyle = token => {
const {
componentCls: progressCls,
iconCls: iconPrefixCls
} = token;
return {
[progressCls]: {
...(0, _style.resetComponent)(token),
display: 'inline-flex',
'&-rtl': {
direction: 'rtl'
},
[`${progressCls}-indicator`]: {
color: token.colorText,
lineHeight: 1,
whiteSpace: 'nowrap',
verticalAlign: 'middle',
wordBreak: 'normal',
[iconPrefixCls]: {
fontSize: token.fontSize
}
},
[`&${progressCls}-status-exception`]: {
[`${progressCls}-indicator`]: {
color: token.colorError
}
},
[`&${progressCls}-status-success`]: {
[`${progressCls}-indicator`]: {
color: token.colorSuccess
}
}
}
};
};
// ====================================================================
// == Line ==
// ====================================================================
const genLineStyle = token => {
const {
componentCls
} = token;
return {
[`${componentCls}-line`]: {
position: 'relative',
width: '100%',
fontSize: token.fontSize,
[`${componentCls}-body`]: {
display: 'inline-flex',
alignItems: 'center',
width: '100%',
gap: token.marginXS
},
[`${componentCls}-rail`]: {
flex: 'auto',
background: token.remainingColor,
borderRadius: token.lineBorderRadius,
position: 'relative',
width: '100%',
overflow: 'hidden'
},
[`&${componentCls}-status-active`]: {
[`${componentCls}-track:after`]: {
content: '""',
position: 'absolute',
inset: 0,
backgroundColor: token.colorBgContainer,
borderRadius: 'inherit',
opacity: 0,
animationName: genAntProgressActive(),
animationDuration: token.progressActiveMotionDuration,
animationTimingFunction: token.motionEaseOutQuint,
animationIterationCount: 'infinite'
}
},
[`${componentCls}-track`]: {
position: 'absolute',
insetInlineStart: 0,
insetBlock: 0,
borderRadius: 'inherit',
background: token.defaultColor,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
minWidth: 'max-content',
display: 'flex',
alignItems: 'center',
'&-success': {
background: token.colorSuccess
}
},
[`&${componentCls}-status-exception`]: {
[`${componentCls}-track`]: {
background: token.colorError
}
},
[`&${componentCls}-status-success`]: {
[`${componentCls}-track`]: {
background: token.colorSuccess
}
},
// >>>>> indicator
// >>> Outer
[`${componentCls}-indicator-outer`]: {
[`&${componentCls}-indicator-start`]: {
order: -1
}
},
[`${componentCls}-body-layout-bottom`]: {
flexDirection: 'column',
alignItems: 'center',
gap: token.marginXXS
},
// >>> Inner
[`${componentCls}-indicator${componentCls}-indicator-inner`]: {
color: token.colorWhite,
paddingInline: token.paddingXXS,
width: '100%',
display: 'flex',
justifyContent: 'center',
[`&${componentCls}-indicator-end`]: {
justifyContent: 'end'
},
[`&${componentCls}-indicator-start`]: {
justifyContent: 'start'
},
[`&${componentCls}-indicator-bright`]: {
color: 'rgba(0, 0, 0, 0.45)'
}
}
}
};
};
// ====================================================================
// == Circle ==
// ====================================================================
const genCircleStyle = token => {
const {
componentCls: progressCls,
iconCls: iconPrefixCls
} = token;
return {
[`${progressCls}-circle`]: {
[`${progressCls}-circle-rail`]: {
stroke: token.remainingColor
},
[`${progressCls}-body:not(${progressCls}-circle-gradient)`]: {
[`${progressCls}-circle-path`]: {
stroke: token.defaultColor
}
},
[`${progressCls}-body`]: {
position: 'relative',
lineHeight: 1,
backgroundColor: 'transparent'
},
[`${progressCls}-indicator`]: {
position: 'absolute',
insetBlockStart: '50%',
insetInlineStart: 0,
width: '100%',
margin: 0,
padding: 0,
color: token.circleTextColor,
fontSize: token.circleTextFontSize,
lineHeight: 1,
whiteSpace: 'normal',
textAlign: 'center',
transform: 'translateY(-50%)',
[iconPrefixCls]: {
fontSize: token.circleIconFontSize
}
},
[`&${progressCls}-status-exception`]: {
[`${progressCls}-body:not(${progressCls}-circle-gradient)`]: {
[`${progressCls}-circle-path`]: {
stroke: token.colorError
}
}
},
[`&${progressCls}-status-success`]: {
[`${progressCls}-body:not(${progressCls}-circle-gradient)`]: {
[`${progressCls}-circle-path`]: {
stroke: token.colorSuccess
}
}
}
},
[`${progressCls}-inline-circle`]: {
lineHeight: 1,
[`${progressCls}-inner`]: {
verticalAlign: 'bottom'
}
}
};
};
// ====================================================================
// == Step ==
// ====================================================================
const genStepStyle = token => {
const {
componentCls: progressCls
} = token;
return {
[progressCls]: {
[`${progressCls}-steps`]: {
display: 'inline-block',
'&-body': {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: token.progressStepMarginInlineEnd,
[`${progressCls}-indicator`]: {
marginInlineStart: token.marginXS
}
},
'&-item': {
flexShrink: 0,
minWidth: token.progressStepMinWidth,
backgroundColor: token.remainingColor,
transition: `all ${token.motionDurationSlow}`,
'&-active': {
backgroundColor: token.defaultColor
}
}
}
}
};
};
// ====================================================================
// == Small Line ==
// ====================================================================
const genSmallLine = token => {
const {
componentCls: progressCls,
iconCls: iconPrefixCls
} = token;
return {
[progressCls]: {
[`${progressCls}-small&-line, ${progressCls}-small&-line ${progressCls}-indicator ${iconPrefixCls}`]: {
fontSize: token.fontSizeSM
}
}
};
};
// ====================================================================
// == Export ==
// ====================================================================
const prepareComponentToken = token => ({
circleTextColor: token.colorText,
defaultColor: token.colorInfo,
remainingColor: token.colorFillSecondary,
lineBorderRadius: 100,
// magic for capsule shape, should be a very large number
circleTextFontSize: '1em',
circleIconFontSize: `${token.fontSize / token.fontSizeSM}em`
});
exports.prepareComponentToken = prepareComponentToken;
var _default = exports.default = (0, _internal.genStyleHooks)('Progress', token => {
const progressStepMarginInlineEnd = token.calc(token.marginXXS).div(2).equal();
const progressToken = (0, _internal.mergeToken)(token, {
progressStepMarginInlineEnd,
progressStepMinWidth: progressStepMarginInlineEnd,
progressActiveMotionDuration: '2.4s'
});
return [genBaseStyle(progressToken), genLineStyle(progressToken), genCircleStyle(progressToken), genStepStyle(progressToken), genSmallLine(progressToken)];
}, prepareComponentToken);
+10
View File
@@ -0,0 +1,10 @@
import type { CircleProps } from './Circle';
import type { ProgressProps } from './progress';
export declare function validProgress(progress?: number): number;
export declare function getSuccessPercent({ success }: ProgressProps): number | undefined;
export declare const getPercentage: ({ percent, success }: ProgressProps) => number[];
export declare const getStrokeColor: ({ success, strokeColor, }: Partial<CircleProps>) => (string | Record<PropertyKey, string>)[];
export declare const getSize: (size: ProgressProps["size"], type: ProgressProps["type"] | "step", extra?: {
steps?: number;
strokeWidth?: number;
}) => [number, number];
+85
View File
@@ -0,0 +1,85 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getStrokeColor = exports.getSize = exports.getPercentage = void 0;
exports.getSuccessPercent = getSuccessPercent;
exports.validProgress = validProgress;
var _colors = require("@ant-design/colors");
var _is = require("../_util/is");
function validProgress(progress) {
if (!progress || progress < 0) {
return 0;
}
if (progress > 100) {
return 100;
}
return progress;
}
function getSuccessPercent({
success
}) {
let percent;
if (success && 'percent' in success) {
percent = success.percent;
}
return percent;
}
const getPercentage = ({
percent,
success
}) => {
const realSuccessPercent = validProgress(getSuccessPercent({
success
}));
return [realSuccessPercent, validProgress(validProgress(percent) - realSuccessPercent)];
};
exports.getPercentage = getPercentage;
const getStrokeColor = ({
success = {},
strokeColor
}) => {
const {
strokeColor: successColor
} = success;
return [successColor || _colors.presetPrimaryColors.green, strokeColor || null];
};
exports.getStrokeColor = getStrokeColor;
const getSize = (size, type, extra) => {
let width = -1;
let height = -1;
if (type === 'step') {
const steps = extra.steps;
const strokeWidth = extra.strokeWidth;
if (typeof size === 'string' || typeof size === 'undefined') {
width = size === 'small' ? 2 : 14;
height = strokeWidth ?? 8;
} else if ((0, _is.isNumber)(size)) {
[width, height] = [size, size];
} else {
[width = 14, height = 8] = Array.isArray(size) ? size : [size.width, size.height];
}
width *= steps;
} else if (type === 'line') {
const strokeWidth = extra?.strokeWidth;
if (typeof size === 'string' || typeof size === 'undefined') {
height = strokeWidth || (size === 'small' ? 6 : 8);
} else if ((0, _is.isNumber)(size)) {
[width, height] = [size, size];
} else {
[width = -1, height = 8] = Array.isArray(size) ? size : [size.width, size.height];
}
} else if (type === 'circle' || type === 'dashboard') {
if (typeof size === 'string' || typeof size === 'undefined') {
[width, height] = size === 'small' ? [60, 60] : [120, 120];
} else if ((0, _is.isNumber)(size)) {
[width, height] = [size, size];
} else if (Array.isArray(size)) {
width = size[0] ?? size[1] ?? 120;
height = size[0] ?? size[1] ?? 120;
}
}
return [width, height];
};
exports.getSize = getSize;