first commit
This commit is contained in:
6
frontend/node_modules/antd/es/spin/Indicator/Looper.d.ts
generated
vendored
Normal file
6
frontend/node_modules/antd/es/spin/Indicator/Looper.d.ts
generated
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import * as React from 'react';
|
||||
export interface IndicatorProps {
|
||||
prefixCls: string;
|
||||
percent?: number;
|
||||
}
|
||||
export default function Looper(props: IndicatorProps): React.JSX.Element;
|
||||
26
frontend/node_modules/antd/es/spin/Indicator/Looper.js
generated
vendored
Normal file
26
frontend/node_modules/antd/es/spin/Indicator/Looper.js
generated
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Progress from './Progress';
|
||||
export default function Looper(props) {
|
||||
const {
|
||||
prefixCls,
|
||||
percent = 0
|
||||
} = props;
|
||||
const dotClassName = `${prefixCls}-dot`;
|
||||
const holderClassName = `${dotClassName}-holder`;
|
||||
const hideClassName = `${holderClassName}-hidden`;
|
||||
// ===================== Render =====================
|
||||
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
||||
className: classNames(holderClassName, percent > 0 && hideClassName)
|
||||
}, /*#__PURE__*/React.createElement("span", {
|
||||
className: classNames(dotClassName, `${prefixCls}-dot-spin`)
|
||||
}, [1, 2, 3, 4].map(i => (/*#__PURE__*/React.createElement("i", {
|
||||
className: `${prefixCls}-dot-item`,
|
||||
key: i
|
||||
}))))), /*#__PURE__*/React.createElement(Progress, {
|
||||
prefixCls: prefixCls,
|
||||
percent: percent
|
||||
}));
|
||||
}
|
||||
7
frontend/node_modules/antd/es/spin/Indicator/Progress.d.ts
generated
vendored
Normal file
7
frontend/node_modules/antd/es/spin/Indicator/Progress.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
import * as React from 'react';
|
||||
export interface ProgressProps {
|
||||
prefixCls: string;
|
||||
percent: number;
|
||||
}
|
||||
declare const Progress: React.FC<Readonly<ProgressProps>>;
|
||||
export default Progress;
|
||||
68
frontend/node_modules/antd/es/spin/Indicator/Progress.js
generated
vendored
Normal file
68
frontend/node_modules/antd/es/spin/Indicator/Progress.js
generated
vendored
Normal file
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
|
||||
const viewSize = 100;
|
||||
const borderWidth = viewSize / 5;
|
||||
const radius = viewSize / 2 - borderWidth / 2;
|
||||
const circumference = radius * 2 * Math.PI;
|
||||
const position = 50;
|
||||
const CustomCircle = props => {
|
||||
const {
|
||||
dotClassName,
|
||||
style,
|
||||
hasCircleCls
|
||||
} = props;
|
||||
return /*#__PURE__*/React.createElement("circle", {
|
||||
className: classNames(`${dotClassName}-circle`, {
|
||||
[`${dotClassName}-circle-bg`]: hasCircleCls
|
||||
}),
|
||||
r: radius,
|
||||
cx: position,
|
||||
cy: position,
|
||||
strokeWidth: borderWidth,
|
||||
style: style
|
||||
});
|
||||
};
|
||||
const Progress = ({
|
||||
percent,
|
||||
prefixCls
|
||||
}) => {
|
||||
const dotClassName = `${prefixCls}-dot`;
|
||||
const holderClassName = `${dotClassName}-holder`;
|
||||
const hideClassName = `${holderClassName}-hidden`;
|
||||
const [render, setRender] = React.useState(false);
|
||||
// ==================== Visible =====================
|
||||
useLayoutEffect(() => {
|
||||
if (percent !== 0) {
|
||||
setRender(true);
|
||||
}
|
||||
}, [percent !== 0]);
|
||||
// ==================== Progress ====================
|
||||
const safePtg = Math.max(Math.min(percent, 100), 0);
|
||||
// ===================== Render =====================
|
||||
if (!render) {
|
||||
return null;
|
||||
}
|
||||
const circleStyle = {
|
||||
strokeDashoffset: `${circumference / 4}`,
|
||||
strokeDasharray: `${circumference * safePtg / 100} ${circumference * (100 - safePtg) / 100}`
|
||||
};
|
||||
return /*#__PURE__*/React.createElement("span", {
|
||||
className: classNames(holderClassName, `${dotClassName}-progress`, safePtg <= 0 && hideClassName)
|
||||
}, /*#__PURE__*/React.createElement("svg", {
|
||||
viewBox: `0 0 ${viewSize} ${viewSize}`,
|
||||
role: "progressbar",
|
||||
"aria-valuemin": 0,
|
||||
"aria-valuemax": 100,
|
||||
"aria-valuenow": safePtg
|
||||
}, /*#__PURE__*/React.createElement(CustomCircle, {
|
||||
dotClassName: dotClassName,
|
||||
hasCircleCls: true
|
||||
}), /*#__PURE__*/React.createElement(CustomCircle, {
|
||||
dotClassName: dotClassName,
|
||||
style: circleStyle
|
||||
})));
|
||||
};
|
||||
export default Progress;
|
||||
7
frontend/node_modules/antd/es/spin/Indicator/index.d.ts
generated
vendored
Normal file
7
frontend/node_modules/antd/es/spin/Indicator/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
import * as React from 'react';
|
||||
export interface IndicatorProps {
|
||||
prefixCls: string;
|
||||
indicator?: React.ReactNode;
|
||||
percent?: number;
|
||||
}
|
||||
export default function Indicator(props: IndicatorProps): React.JSX.Element;
|
||||
25
frontend/node_modules/antd/es/spin/Indicator/index.js
generated
vendored
Normal file
25
frontend/node_modules/antd/es/spin/Indicator/index.js
generated
vendored
Normal file
@@ -0,0 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { cloneElement } from '../../_util/reactNode';
|
||||
import Looper from './Looper';
|
||||
export default function Indicator(props) {
|
||||
var _a;
|
||||
const {
|
||||
prefixCls,
|
||||
indicator,
|
||||
percent
|
||||
} = props;
|
||||
const dotClassName = `${prefixCls}-dot`;
|
||||
if (indicator && /*#__PURE__*/React.isValidElement(indicator)) {
|
||||
return cloneElement(indicator, {
|
||||
className: classNames((_a = indicator.props) === null || _a === void 0 ? void 0 : _a.className, dotClassName),
|
||||
percent
|
||||
});
|
||||
}
|
||||
return /*#__PURE__*/React.createElement(Looper, {
|
||||
prefixCls: prefixCls,
|
||||
percent: percent
|
||||
});
|
||||
}
|
||||
36
frontend/node_modules/antd/es/spin/index.d.ts
generated
vendored
Normal file
36
frontend/node_modules/antd/es/spin/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
import * as React from 'react';
|
||||
declare const _SpinSizes: readonly ["small", "default", "large"];
|
||||
export type SpinSize = (typeof _SpinSizes)[number];
|
||||
export type SpinIndicator = React.ReactElement<HTMLElement>;
|
||||
export interface SpinProps {
|
||||
/** Customize prefix class name */
|
||||
prefixCls?: string;
|
||||
/** Additional class name of Spin */
|
||||
className?: string;
|
||||
/** Additional root class name of Spin */
|
||||
rootClassName?: string;
|
||||
/** Whether Spin is spinning */
|
||||
spinning?: boolean;
|
||||
/** Style of Spin */
|
||||
style?: React.CSSProperties;
|
||||
/** Size of Spin, options: `small`, `default` and `large` */
|
||||
size?: SpinSize;
|
||||
/** Customize description content when Spin has children */
|
||||
tip?: React.ReactNode;
|
||||
/** Specifies a delay in milliseconds for loading state (prevent flush) */
|
||||
delay?: number;
|
||||
/** The className of wrapper when Spin has children */
|
||||
wrapperClassName?: string;
|
||||
/** React node of the spinning indicator */
|
||||
indicator?: SpinIndicator;
|
||||
/** Children of Spin */
|
||||
children?: React.ReactNode;
|
||||
/** Display a backdrop with the `Spin` component */
|
||||
fullscreen?: boolean;
|
||||
percent?: number | 'auto';
|
||||
}
|
||||
export type SpinType = React.FC<SpinProps> & {
|
||||
setDefaultIndicator: (indicator: React.ReactNode) => void;
|
||||
};
|
||||
declare const Spin: SpinType;
|
||||
export default Spin;
|
||||
121
frontend/node_modules/antd/es/spin/index.js
generated
vendored
Normal file
121
frontend/node_modules/antd/es/spin/index.js
generated
vendored
Normal file
@@ -0,0 +1,121 @@
|
||||
"use client";
|
||||
|
||||
var __rest = this && this.__rest || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { debounce } from 'throttle-debounce';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import { useComponentConfig } from '../config-provider/context';
|
||||
import Indicator from './Indicator';
|
||||
import useStyle from './style/index';
|
||||
import usePercent from './usePercent';
|
||||
const _SpinSizes = ['small', 'default', 'large'];
|
||||
// Render indicator
|
||||
let defaultIndicator;
|
||||
function shouldDelay(spinning, delay) {
|
||||
return !!spinning && !!delay && !Number.isNaN(Number(delay));
|
||||
}
|
||||
const Spin = props => {
|
||||
var _a;
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
spinning: customSpinning = true,
|
||||
delay = 0,
|
||||
className,
|
||||
rootClassName,
|
||||
size = 'default',
|
||||
tip,
|
||||
wrapperClassName,
|
||||
style,
|
||||
children,
|
||||
fullscreen = false,
|
||||
indicator,
|
||||
percent
|
||||
} = props,
|
||||
restProps = __rest(props, ["prefixCls", "spinning", "delay", "className", "rootClassName", "size", "tip", "wrapperClassName", "style", "children", "fullscreen", "indicator", "percent"]);
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction,
|
||||
className: contextClassName,
|
||||
style: contextStyle,
|
||||
indicator: contextIndicator
|
||||
} = useComponentConfig('spin');
|
||||
const prefixCls = getPrefixCls('spin', customizePrefixCls);
|
||||
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
|
||||
const [spinning, setSpinning] = React.useState(() => customSpinning && !shouldDelay(customSpinning, delay));
|
||||
const mergedPercent = usePercent(spinning, percent);
|
||||
React.useEffect(() => {
|
||||
if (customSpinning) {
|
||||
const showSpinning = debounce(delay, () => {
|
||||
setSpinning(true);
|
||||
});
|
||||
showSpinning();
|
||||
return () => {
|
||||
var _a;
|
||||
(_a = showSpinning === null || showSpinning === void 0 ? void 0 : showSpinning.cancel) === null || _a === void 0 ? void 0 : _a.call(showSpinning);
|
||||
};
|
||||
}
|
||||
setSpinning(false);
|
||||
}, [delay, customSpinning]);
|
||||
const isNestedPattern = React.useMemo(() => typeof children !== 'undefined' && !fullscreen, [children, fullscreen]);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning('Spin');
|
||||
process.env.NODE_ENV !== "production" ? warning(!tip || isNestedPattern || fullscreen, 'usage', '`tip` only work in nest or fullscreen pattern.') : void 0;
|
||||
}
|
||||
const spinClassName = classNames(prefixCls, contextClassName, {
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-spinning`]: spinning,
|
||||
[`${prefixCls}-show-text`]: !!tip,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl'
|
||||
}, className, !fullscreen && rootClassName, hashId, cssVarCls);
|
||||
const containerClassName = classNames(`${prefixCls}-container`, {
|
||||
[`${prefixCls}-blur`]: spinning
|
||||
});
|
||||
const mergedIndicator = (_a = indicator !== null && indicator !== void 0 ? indicator : contextIndicator) !== null && _a !== void 0 ? _a : defaultIndicator;
|
||||
const mergedStyle = Object.assign(Object.assign({}, contextStyle), style);
|
||||
const spinElement = /*#__PURE__*/React.createElement("div", Object.assign({}, restProps, {
|
||||
style: mergedStyle,
|
||||
className: spinClassName,
|
||||
"aria-live": "polite",
|
||||
"aria-busy": spinning
|
||||
}), /*#__PURE__*/React.createElement(Indicator, {
|
||||
prefixCls: prefixCls,
|
||||
indicator: mergedIndicator,
|
||||
percent: mergedPercent
|
||||
}), tip && (isNestedPattern || fullscreen) ? (/*#__PURE__*/React.createElement("div", {
|
||||
className: `${prefixCls}-text`
|
||||
}, tip)) : null);
|
||||
if (isNestedPattern) {
|
||||
return wrapCSSVar(/*#__PURE__*/React.createElement("div", Object.assign({}, restProps, {
|
||||
className: classNames(`${prefixCls}-nested-loading`, wrapperClassName, hashId, cssVarCls)
|
||||
}), spinning && /*#__PURE__*/React.createElement("div", {
|
||||
key: "loading"
|
||||
}, spinElement), /*#__PURE__*/React.createElement("div", {
|
||||
className: containerClassName,
|
||||
key: "container"
|
||||
}, children)));
|
||||
}
|
||||
if (fullscreen) {
|
||||
return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
|
||||
className: classNames(`${prefixCls}-fullscreen`, {
|
||||
[`${prefixCls}-fullscreen-show`]: spinning
|
||||
}, rootClassName, hashId, cssVarCls)
|
||||
}, spinElement));
|
||||
}
|
||||
return wrapCSSVar(spinElement);
|
||||
};
|
||||
Spin.setDefaultIndicator = indicator => {
|
||||
defaultIndicator = indicator;
|
||||
};
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Spin.displayName = 'Spin';
|
||||
}
|
||||
export default Spin;
|
||||
26
frontend/node_modules/antd/es/spin/style/index.d.ts
generated
vendored
Normal file
26
frontend/node_modules/antd/es/spin/style/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
import type { GetDefaultToken } from '../../theme/internal';
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 内容区域高度
|
||||
* @descEN Height of content area
|
||||
*/
|
||||
contentHeight: number | string;
|
||||
/**
|
||||
* @desc 加载图标尺寸
|
||||
* @descEN Loading icon size
|
||||
*/
|
||||
dotSize: number;
|
||||
/**
|
||||
* @desc 小号加载图标尺寸
|
||||
* @descEN Small loading icon size
|
||||
*/
|
||||
dotSizeSM: number;
|
||||
/**
|
||||
* @desc 大号加载图标尺寸
|
||||
* @descEN Large loading icon size
|
||||
*/
|
||||
dotSizeLG: number;
|
||||
}
|
||||
export declare const prepareComponentToken: GetDefaultToken<'Spin'>;
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
|
||||
export default _default;
|
||||
280
frontend/node_modules/antd/es/spin/style/index.js
generated
vendored
Normal file
280
frontend/node_modules/antd/es/spin/style/index.js
generated
vendored
Normal file
@@ -0,0 +1,280 @@
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import { resetComponent } from '../../style';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
const antSpinMove = new Keyframes('antSpinMove', {
|
||||
to: {
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
const antRotate = new Keyframes('antRotate', {
|
||||
to: {
|
||||
transform: 'rotate(405deg)'
|
||||
}
|
||||
});
|
||||
const genSpinStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
calc
|
||||
} = token;
|
||||
return {
|
||||
[componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
color: token.colorPrimary,
|
||||
fontSize: 0,
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
opacity: 0,
|
||||
transition: `transform ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
|
||||
'&-spinning': {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
opacity: 1
|
||||
},
|
||||
[`${componentCls}-text`]: {
|
||||
fontSize: token.fontSize,
|
||||
paddingTop: calc(calc(token.dotSize).sub(token.fontSize)).div(2).add(2).equal()
|
||||
},
|
||||
'&-fullscreen': {
|
||||
position: 'fixed',
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
backgroundColor: token.colorBgMask,
|
||||
zIndex: token.zIndexPopupBase,
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
opacity: 0,
|
||||
visibility: 'hidden',
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
'&-show': {
|
||||
opacity: 1,
|
||||
visibility: 'visible'
|
||||
},
|
||||
[componentCls]: {
|
||||
[`${componentCls}-dot-holder`]: {
|
||||
color: token.colorWhite
|
||||
},
|
||||
[`${componentCls}-text`]: {
|
||||
color: token.colorTextLightSolid
|
||||
}
|
||||
}
|
||||
},
|
||||
'&-nested-loading': {
|
||||
position: 'relative',
|
||||
[`> div > ${componentCls}`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
zIndex: 4,
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
maxHeight: token.contentHeight,
|
||||
[`${componentCls}-dot`]: {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
insetInlineStart: '50%',
|
||||
margin: calc(token.dotSize).mul(-1).div(2).equal()
|
||||
},
|
||||
[`${componentCls}-text`]: {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
width: '100%',
|
||||
textShadow: `0 1px 2px ${token.colorBgContainer}` // FIXME: shadow
|
||||
},
|
||||
[`&${componentCls}-show-text ${componentCls}-dot`]: {
|
||||
marginTop: calc(token.dotSize).div(2).mul(-1).sub(10).equal()
|
||||
},
|
||||
'&-sm': {
|
||||
[`${componentCls}-dot`]: {
|
||||
margin: calc(token.dotSizeSM).mul(-1).div(2).equal()
|
||||
},
|
||||
[`${componentCls}-text`]: {
|
||||
paddingTop: calc(calc(token.dotSizeSM).sub(token.fontSize)).div(2).add(2).equal()
|
||||
},
|
||||
[`&${componentCls}-show-text ${componentCls}-dot`]: {
|
||||
marginTop: calc(token.dotSizeSM).div(2).mul(-1).sub(10).equal()
|
||||
}
|
||||
},
|
||||
'&-lg': {
|
||||
[`${componentCls}-dot`]: {
|
||||
margin: calc(token.dotSizeLG).mul(-1).div(2).equal()
|
||||
},
|
||||
[`${componentCls}-text`]: {
|
||||
paddingTop: calc(calc(token.dotSizeLG).sub(token.fontSize)).div(2).add(2).equal()
|
||||
},
|
||||
[`&${componentCls}-show-text ${componentCls}-dot`]: {
|
||||
marginTop: calc(token.dotSizeLG).div(2).mul(-1).sub(10).equal()
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${componentCls}-container`]: {
|
||||
position: 'relative',
|
||||
transition: `opacity ${token.motionDurationSlow}`,
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
zIndex: 10,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: token.colorBgContainer,
|
||||
opacity: 0,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
content: '""',
|
||||
pointerEvents: 'none'
|
||||
}
|
||||
},
|
||||
[`${componentCls}-blur`]: {
|
||||
clear: 'both',
|
||||
opacity: 0.5,
|
||||
userSelect: 'none',
|
||||
pointerEvents: 'none',
|
||||
'&::after': {
|
||||
opacity: 0.4,
|
||||
pointerEvents: 'auto'
|
||||
}
|
||||
}
|
||||
},
|
||||
// tip
|
||||
// ------------------------------
|
||||
'&-tip': {
|
||||
color: token.spinDotDefault
|
||||
},
|
||||
// holder
|
||||
// ------------------------------
|
||||
[`${componentCls}-dot-holder`]: {
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
fontSize: token.dotSize,
|
||||
display: 'inline-block',
|
||||
transition: `transform ${token.motionDurationSlow} ease, opacity ${token.motionDurationSlow} ease`,
|
||||
transformOrigin: '50% 50%',
|
||||
lineHeight: 1,
|
||||
color: token.colorPrimary,
|
||||
'&-hidden': {
|
||||
transform: 'scale(0.3)',
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
// progress
|
||||
// ------------------------------
|
||||
[`${componentCls}-dot-progress`]: {
|
||||
position: 'absolute',
|
||||
inset: 0
|
||||
},
|
||||
// dots
|
||||
// ------------------------------
|
||||
[`${componentCls}-dot`]: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
fontSize: token.dotSize,
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
'&-item': {
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
width: calc(token.dotSize).sub(calc(token.marginXXS).div(2)).div(2).equal(),
|
||||
height: calc(token.dotSize).sub(calc(token.marginXXS).div(2)).div(2).equal(),
|
||||
background: 'currentColor',
|
||||
borderRadius: '100%',
|
||||
transform: 'scale(0.75)',
|
||||
transformOrigin: '50% 50%',
|
||||
opacity: 0.3,
|
||||
animationName: antSpinMove,
|
||||
animationDuration: '1s',
|
||||
animationIterationCount: 'infinite',
|
||||
animationTimingFunction: 'linear',
|
||||
animationDirection: 'alternate',
|
||||
'&:nth-child(1)': {
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
animationDelay: '0s'
|
||||
},
|
||||
'&:nth-child(2)': {
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
animationDelay: '0.4s'
|
||||
},
|
||||
'&:nth-child(3)': {
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
animationDelay: '0.8s'
|
||||
},
|
||||
'&:nth-child(4)': {
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
animationDelay: '1.2s'
|
||||
}
|
||||
},
|
||||
'&-spin': {
|
||||
transform: 'rotate(45deg)',
|
||||
animationName: antRotate,
|
||||
animationDuration: '1.2s',
|
||||
animationIterationCount: 'infinite',
|
||||
animationTimingFunction: 'linear'
|
||||
},
|
||||
'&-circle': {
|
||||
strokeLinecap: 'round',
|
||||
transition: ['stroke-dashoffset', 'stroke-dasharray', 'stroke', 'stroke-width', 'opacity'].map(item => `${item} ${token.motionDurationSlow} ease`).join(','),
|
||||
fillOpacity: 0,
|
||||
stroke: 'currentcolor'
|
||||
},
|
||||
'&-circle-bg': {
|
||||
stroke: token.colorFillSecondary
|
||||
}
|
||||
},
|
||||
// small
|
||||
[`&-sm ${componentCls}-dot`]: {
|
||||
'&, &-holder': {
|
||||
fontSize: token.dotSizeSM
|
||||
}
|
||||
},
|
||||
[`&-sm ${componentCls}-dot-holder`]: {
|
||||
i: {
|
||||
width: calc(calc(token.dotSizeSM).sub(calc(token.marginXXS).div(2))).div(2).equal(),
|
||||
height: calc(calc(token.dotSizeSM).sub(calc(token.marginXXS).div(2))).div(2).equal()
|
||||
}
|
||||
},
|
||||
// large
|
||||
[`&-lg ${componentCls}-dot`]: {
|
||||
'&, &-holder': {
|
||||
fontSize: token.dotSizeLG
|
||||
}
|
||||
},
|
||||
[`&-lg ${componentCls}-dot-holder`]: {
|
||||
i: {
|
||||
width: calc(calc(token.dotSizeLG).sub(token.marginXXS)).div(2).equal(),
|
||||
height: calc(calc(token.dotSizeLG).sub(token.marginXXS)).div(2).equal()
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-show-text ${componentCls}-text`]: {
|
||||
display: 'block'
|
||||
}
|
||||
})
|
||||
};
|
||||
};
|
||||
export const prepareComponentToken = token => {
|
||||
const {
|
||||
controlHeightLG,
|
||||
controlHeight
|
||||
} = token;
|
||||
return {
|
||||
contentHeight: 400,
|
||||
dotSize: controlHeightLG / 2,
|
||||
dotSizeSM: controlHeightLG * 0.35,
|
||||
dotSizeLG: controlHeight
|
||||
};
|
||||
};
|
||||
// ============================== Export ==============================
|
||||
export default genStyleHooks('Spin', token => {
|
||||
const spinToken = mergeToken(token, {
|
||||
spinDotDefault: token.colorTextDescription
|
||||
});
|
||||
return genSpinStyle(spinToken);
|
||||
}, prepareComponentToken);
|
||||
1
frontend/node_modules/antd/es/spin/usePercent.d.ts
generated
vendored
Normal file
1
frontend/node_modules/antd/es/spin/usePercent.d.ts
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export default function usePercent(spinning: boolean, percent?: number | 'auto'): number | undefined;
|
||||
32
frontend/node_modules/antd/es/spin/usePercent.js
generated
vendored
Normal file
32
frontend/node_modules/antd/es/spin/usePercent.js
generated
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
import * as React from 'react';
|
||||
const AUTO_INTERVAL = 200;
|
||||
const STEP_BUCKETS = [[30, 0.05], [70, 0.03], [96, 0.01]];
|
||||
export default function usePercent(spinning, percent) {
|
||||
const [mockPercent, setMockPercent] = React.useState(0);
|
||||
const mockIntervalRef = React.useRef(null);
|
||||
const isAuto = percent === 'auto';
|
||||
React.useEffect(() => {
|
||||
if (isAuto && spinning) {
|
||||
setMockPercent(0);
|
||||
mockIntervalRef.current = setInterval(() => {
|
||||
setMockPercent(prev => {
|
||||
const restPTG = 100 - prev;
|
||||
for (let i = 0; i < STEP_BUCKETS.length; i += 1) {
|
||||
const [limit, stepPtg] = STEP_BUCKETS[i];
|
||||
if (prev <= limit) {
|
||||
return prev + restPTG * stepPtg;
|
||||
}
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}, AUTO_INTERVAL);
|
||||
}
|
||||
return () => {
|
||||
if (mockIntervalRef.current) {
|
||||
clearInterval(mockIntervalRef.current);
|
||||
mockIntervalRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [isAuto, spinning]);
|
||||
return isAuto ? mockPercent : percent;
|
||||
}
|
||||
Reference in New Issue
Block a user