1
This commit is contained in:
+12
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
|
||||
import Progress from './progress';
|
||||
export type { ProgressAriaProps, ProgressProps, ProgressSemanticClassNames, ProgressSemanticName, ProgressSemanticStyles, } from './progress';
|
||||
export default Progress;
|
||||
+10
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
|
||||
Reference in New Issue
Block a user