first commit
This commit is contained in:
30
frontend/node_modules/antd/es/carousel/index.d.ts
generated
vendored
Normal file
30
frontend/node_modules/antd/es/carousel/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
import * as React from 'react';
|
||||
import type { Settings } from '@ant-design/react-slick';
|
||||
export type CarouselEffect = 'scrollx' | 'fade';
|
||||
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
|
||||
export interface CarouselProps extends Omit<Settings, 'dots' | 'dotsClass' | 'autoplay'> {
|
||||
effect?: CarouselEffect;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
rootClassName?: string;
|
||||
id?: string;
|
||||
slickGoTo?: number;
|
||||
dotPosition?: DotPosition;
|
||||
children?: React.ReactNode;
|
||||
dots?: boolean | {
|
||||
className?: string;
|
||||
};
|
||||
waitForAnimate?: boolean;
|
||||
autoplay?: boolean | {
|
||||
dotDuration?: boolean;
|
||||
};
|
||||
}
|
||||
export interface CarouselRef {
|
||||
goTo: (slide: number, dontAnimate?: boolean) => void;
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
autoPlay: (playType?: 'update' | 'leave' | 'blur') => void;
|
||||
innerSlider: any;
|
||||
}
|
||||
declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselRef>>;
|
||||
export default Carousel;
|
||||
122
frontend/node_modules/antd/es/carousel/index.js
generated
vendored
Normal file
122
frontend/node_modules/antd/es/carousel/index.js
generated
vendored
Normal file
@@ -0,0 +1,122 @@
|
||||
"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 SlickCarousel from '@ant-design/react-slick';
|
||||
import classNames from 'classnames';
|
||||
import { useComponentConfig } from '../config-provider/context';
|
||||
import useStyle, { DotDuration } from './style';
|
||||
const dotsClass = 'slick-dots';
|
||||
const ArrowButton = _a => {
|
||||
var {
|
||||
currentSlide,
|
||||
slideCount
|
||||
} = _a,
|
||||
rest = __rest(_a, ["currentSlide", "slideCount"]);
|
||||
return /*#__PURE__*/React.createElement("button", Object.assign({
|
||||
type: "button"
|
||||
}, rest));
|
||||
};
|
||||
const Carousel = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
dots = true,
|
||||
arrows = false,
|
||||
prevArrow,
|
||||
nextArrow,
|
||||
draggable = false,
|
||||
waitForAnimate = false,
|
||||
dotPosition = 'bottom',
|
||||
vertical = dotPosition === 'left' || dotPosition === 'right',
|
||||
rootClassName,
|
||||
className: customClassName,
|
||||
style,
|
||||
id,
|
||||
autoplay = false,
|
||||
autoplaySpeed = 3000,
|
||||
rtl
|
||||
} = props,
|
||||
otherProps = __rest(props, ["dots", "arrows", "prevArrow", "nextArrow", "draggable", "waitForAnimate", "dotPosition", "vertical", "rootClassName", "className", "style", "id", "autoplay", "autoplaySpeed", "rtl"]);
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction,
|
||||
className: contextClassName,
|
||||
style: contextStyle
|
||||
} = useComponentConfig('carousel');
|
||||
const slickRef = React.useRef(null);
|
||||
const goTo = (slide, dontAnimate = false) => {
|
||||
slickRef.current.slickGoTo(slide, dontAnimate);
|
||||
};
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
goTo,
|
||||
autoPlay: slickRef.current.innerSlider.autoPlay,
|
||||
innerSlider: slickRef.current.innerSlider,
|
||||
prev: slickRef.current.slickPrev,
|
||||
next: slickRef.current.slickNext
|
||||
}), [slickRef.current]);
|
||||
const {
|
||||
children,
|
||||
initialSlide = 0
|
||||
} = props;
|
||||
const count = React.Children.count(children);
|
||||
const isRTL = (rtl !== null && rtl !== void 0 ? rtl : direction === 'rtl') && !vertical;
|
||||
React.useEffect(() => {
|
||||
if (count > 0) {
|
||||
const newIndex = isRTL ? count - initialSlide - 1 : initialSlide;
|
||||
goTo(newIndex, false);
|
||||
}
|
||||
}, [count, initialSlide, isRTL]);
|
||||
const newProps = Object.assign({
|
||||
vertical,
|
||||
className: classNames(customClassName, contextClassName),
|
||||
style: Object.assign(Object.assign({}, contextStyle), style),
|
||||
autoplay: !!autoplay
|
||||
}, otherProps);
|
||||
if (newProps.effect === 'fade') {
|
||||
newProps.fade = true;
|
||||
}
|
||||
const prefixCls = getPrefixCls('carousel', newProps.prefixCls);
|
||||
const enableDots = !!dots;
|
||||
const dsClass = classNames(dotsClass, `${dotsClass}-${dotPosition}`, typeof dots === 'boolean' ? false : dots === null || dots === void 0 ? void 0 : dots.className);
|
||||
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
|
||||
const className = classNames(prefixCls, {
|
||||
[`${prefixCls}-rtl`]: isRTL,
|
||||
[`${prefixCls}-vertical`]: newProps.vertical
|
||||
}, hashId, cssVarCls, rootClassName);
|
||||
const mergedShowDuration = autoplay && (typeof autoplay === 'object' ? autoplay.dotDuration : false);
|
||||
const dotDurationStyle = mergedShowDuration ? {
|
||||
[DotDuration]: `${autoplaySpeed}ms`
|
||||
} : {};
|
||||
return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
|
||||
className: className,
|
||||
id: id,
|
||||
style: dotDurationStyle
|
||||
}, /*#__PURE__*/React.createElement(SlickCarousel, Object.assign({
|
||||
ref: slickRef
|
||||
}, newProps, {
|
||||
dots: enableDots,
|
||||
dotsClass: dsClass,
|
||||
arrows: arrows,
|
||||
prevArrow: prevArrow !== null && prevArrow !== void 0 ? prevArrow : /*#__PURE__*/React.createElement(ArrowButton, {
|
||||
"aria-label": isRTL ? 'next' : 'prev'
|
||||
}),
|
||||
nextArrow: nextArrow !== null && nextArrow !== void 0 ? nextArrow : /*#__PURE__*/React.createElement(ArrowButton, {
|
||||
"aria-label": isRTL ? 'prev' : 'next'
|
||||
}),
|
||||
draggable: draggable,
|
||||
verticalSwiping: vertical,
|
||||
autoplaySpeed: autoplaySpeed,
|
||||
waitForAnimate: waitForAnimate,
|
||||
rtl: isRTL
|
||||
}))));
|
||||
});
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Carousel.displayName = 'Carousel';
|
||||
}
|
||||
export default Carousel;
|
||||
44
frontend/node_modules/antd/es/carousel/style/index.d.ts
generated
vendored
Normal file
44
frontend/node_modules/antd/es/carousel/style/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
import type { GetDefaultToken } from '../../theme/internal';
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 指示点宽度
|
||||
* @descEN Width of indicator
|
||||
*/
|
||||
dotWidth: number | string;
|
||||
/**
|
||||
* @desc 指示点高度
|
||||
* @descEN Height of indicator
|
||||
*/
|
||||
dotHeight: number | string;
|
||||
/**
|
||||
* @desc 指示点之间的间距
|
||||
* @descEN gap between indicator
|
||||
*/
|
||||
dotGap: number;
|
||||
/**
|
||||
* @desc 指示点距离边缘的距离
|
||||
* @descEN dot offset to Carousel edge
|
||||
*/
|
||||
dotOffset: number;
|
||||
/** @deprecated Use `dotActiveWidth` instead. */
|
||||
dotWidthActive: number;
|
||||
/**
|
||||
* @desc 激活态指示点宽度
|
||||
* @descEN Width of active indicator
|
||||
*/
|
||||
dotActiveWidth: number | string;
|
||||
/**
|
||||
* @desc 切换箭头大小
|
||||
* @descEN Size of arrows
|
||||
*/
|
||||
arrowSize: number;
|
||||
/**
|
||||
* @desc 切换箭头边距
|
||||
* @descEN arrows offset to Carousel edge
|
||||
*/
|
||||
arrowOffset: number;
|
||||
}
|
||||
export declare const DotDuration = "--dot-duration";
|
||||
export declare const prepareComponentToken: GetDefaultToken<'Carousel'>;
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
|
||||
export default _default;
|
||||
381
frontend/node_modules/antd/es/carousel/style/index.js
generated
vendored
Normal file
381
frontend/node_modules/antd/es/carousel/style/index.js
generated
vendored
Normal file
@@ -0,0 +1,381 @@
|
||||
import { Keyframes, unit } from '@ant-design/cssinjs';
|
||||
import { resetComponent } from '../../style';
|
||||
import { genStyleHooks } from '../../theme/internal';
|
||||
export const DotDuration = '--dot-duration';
|
||||
const genCarouselStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
antCls
|
||||
} = token;
|
||||
return {
|
||||
[componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {
|
||||
'.slick-slider': {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
boxSizing: 'border-box',
|
||||
touchAction: 'pan-y',
|
||||
WebkitTouchCallout: 'none',
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
'.slick-track, .slick-list': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
touchAction: 'pan-y'
|
||||
}
|
||||
},
|
||||
'.slick-list': {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
overflow: 'hidden',
|
||||
'&:focus': {
|
||||
outline: 'none'
|
||||
},
|
||||
'&.dragging': {
|
||||
cursor: 'pointer'
|
||||
},
|
||||
'.slick-slide': {
|
||||
pointerEvents: 'none',
|
||||
// https://github.com/ant-design/ant-design/issues/23294
|
||||
[`input${antCls}-radio-input, input${antCls}-checkbox-input`]: {
|
||||
visibility: 'hidden'
|
||||
},
|
||||
'&.slick-active': {
|
||||
pointerEvents: 'auto',
|
||||
[`input${antCls}-radio-input, input${antCls}-checkbox-input`]: {
|
||||
visibility: 'visible'
|
||||
}
|
||||
},
|
||||
// fix Carousel content height not match parent node
|
||||
// when children is empty node
|
||||
// https://github.com/ant-design/ant-design/issues/25878
|
||||
'> div > div': {
|
||||
verticalAlign: 'bottom'
|
||||
}
|
||||
}
|
||||
},
|
||||
'.slick-track': {
|
||||
position: 'relative',
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
display: 'block',
|
||||
'&::before, &::after': {
|
||||
display: 'table',
|
||||
content: '""'
|
||||
},
|
||||
'&::after': {
|
||||
clear: 'both'
|
||||
}
|
||||
},
|
||||
'.slick-slide': {
|
||||
display: 'none',
|
||||
float: 'left',
|
||||
height: '100%',
|
||||
minHeight: 1,
|
||||
img: {
|
||||
display: 'block'
|
||||
},
|
||||
'&.dragging img': {
|
||||
pointerEvents: 'none'
|
||||
}
|
||||
},
|
||||
'.slick-initialized .slick-slide': {
|
||||
display: 'block'
|
||||
},
|
||||
'.slick-vertical .slick-slide': {
|
||||
display: 'block',
|
||||
height: 'auto'
|
||||
}
|
||||
})
|
||||
};
|
||||
};
|
||||
const genArrowsStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
motionDurationSlow,
|
||||
arrowSize,
|
||||
arrowOffset
|
||||
} = token;
|
||||
const arrowLength = token.calc(arrowSize).div(Math.SQRT2).equal();
|
||||
return {
|
||||
[componentCls]: {
|
||||
// Arrows
|
||||
'.slick-prev, .slick-next': {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
width: arrowSize,
|
||||
height: arrowSize,
|
||||
transform: 'translateY(-50%)',
|
||||
color: '#fff',
|
||||
opacity: 0.4,
|
||||
background: 'transparent',
|
||||
padding: 0,
|
||||
lineHeight: 0,
|
||||
border: 0,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
zIndex: 1,
|
||||
transition: `opacity ${motionDurationSlow}`,
|
||||
'&:hover, &:focus': {
|
||||
opacity: 1
|
||||
},
|
||||
'&.slick-disabled': {
|
||||
pointerEvents: 'none',
|
||||
opacity: 0
|
||||
},
|
||||
'&::after': {
|
||||
boxSizing: 'border-box',
|
||||
position: 'absolute',
|
||||
top: token.calc(arrowSize).sub(arrowLength).div(2).equal(),
|
||||
insetInlineStart: token.calc(arrowSize).sub(arrowLength).div(2).equal(),
|
||||
display: 'inline-block',
|
||||
width: arrowLength,
|
||||
height: arrowLength,
|
||||
border: `0 solid currentcolor`,
|
||||
borderInlineStartWidth: 2,
|
||||
borderBlockStartWidth: 2,
|
||||
borderRadius: 1,
|
||||
content: '""'
|
||||
}
|
||||
},
|
||||
'.slick-prev': {
|
||||
insetInlineStart: arrowOffset,
|
||||
'&::after': {
|
||||
transform: 'rotate(-45deg)'
|
||||
}
|
||||
},
|
||||
'.slick-next': {
|
||||
insetInlineEnd: arrowOffset,
|
||||
'&::after': {
|
||||
transform: 'rotate(135deg)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genDotsStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
dotOffset,
|
||||
dotWidth,
|
||||
dotHeight,
|
||||
dotGap,
|
||||
colorBgContainer,
|
||||
motionDurationSlow
|
||||
} = token;
|
||||
const animation = new Keyframes(`${token.prefixCls}-dot-animation`, {
|
||||
from: {
|
||||
width: 0
|
||||
},
|
||||
to: {
|
||||
width: token.dotActiveWidth
|
||||
}
|
||||
});
|
||||
return {
|
||||
[componentCls]: {
|
||||
'.slick-dots': {
|
||||
position: 'absolute',
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
zIndex: 15,
|
||||
display: 'flex !important',
|
||||
justifyContent: 'center',
|
||||
paddingInlineStart: 0,
|
||||
margin: 0,
|
||||
listStyle: 'none',
|
||||
'&-bottom': {
|
||||
bottom: dotOffset
|
||||
},
|
||||
'&-top': {
|
||||
top: dotOffset,
|
||||
bottom: 'auto'
|
||||
},
|
||||
li: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
flex: '0 1 auto',
|
||||
boxSizing: 'content-box',
|
||||
width: dotWidth,
|
||||
height: dotHeight,
|
||||
marginInline: dotGap,
|
||||
padding: 0,
|
||||
textAlign: 'center',
|
||||
textIndent: -999,
|
||||
verticalAlign: 'top',
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
borderRadius: dotHeight,
|
||||
overflow: 'hidden',
|
||||
'&::after': {
|
||||
display: 'block',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
width: 0,
|
||||
height: dotHeight,
|
||||
content: '""',
|
||||
background: 'transparent',
|
||||
borderRadius: dotHeight,
|
||||
opacity: 1,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden'
|
||||
},
|
||||
button: {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: dotHeight,
|
||||
padding: 0,
|
||||
color: 'transparent',
|
||||
fontSize: 0,
|
||||
background: colorBgContainer,
|
||||
border: 0,
|
||||
borderRadius: dotHeight,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
opacity: 0.2,
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
overflow: 'hidden',
|
||||
'&:hover': {
|
||||
opacity: 0.75
|
||||
},
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
inset: token.calc(dotGap).mul(-1).equal(),
|
||||
content: '""'
|
||||
}
|
||||
},
|
||||
'&.slick-active': {
|
||||
width: token.dotActiveWidth,
|
||||
position: 'relative',
|
||||
'&:hover': {
|
||||
opacity: 1
|
||||
},
|
||||
'&::after': {
|
||||
background: colorBgContainer,
|
||||
animationName: animation,
|
||||
animationDuration: `var(${DotDuration})`,
|
||||
animationTimingFunction: 'ease-out',
|
||||
animationFillMode: 'forwards'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genCarouselVerticalStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
dotOffset,
|
||||
arrowOffset,
|
||||
marginXXS
|
||||
} = token;
|
||||
const animation = new Keyframes(`${token.prefixCls}-dot-vertical-animation`, {
|
||||
from: {
|
||||
height: 0
|
||||
},
|
||||
to: {
|
||||
height: token.dotActiveWidth
|
||||
}
|
||||
});
|
||||
const reverseSizeOfDot = {
|
||||
width: token.dotHeight,
|
||||
height: token.dotWidth
|
||||
};
|
||||
return {
|
||||
[`${componentCls}-vertical`]: {
|
||||
'.slick-prev, .slick-next': {
|
||||
insetInlineStart: '50%',
|
||||
marginBlockStart: 'unset',
|
||||
transform: 'translateX(-50%)'
|
||||
},
|
||||
'.slick-prev': {
|
||||
insetBlockStart: arrowOffset,
|
||||
insetInlineStart: '50%',
|
||||
'&::after': {
|
||||
transform: 'rotate(45deg)'
|
||||
}
|
||||
},
|
||||
'.slick-next': {
|
||||
insetBlockStart: 'auto',
|
||||
insetBlockEnd: arrowOffset,
|
||||
'&::after': {
|
||||
transform: 'rotate(-135deg)'
|
||||
}
|
||||
},
|
||||
'.slick-dots': {
|
||||
top: '50%',
|
||||
bottom: 'auto',
|
||||
flexDirection: 'column',
|
||||
width: token.dotHeight,
|
||||
height: 'auto',
|
||||
margin: 0,
|
||||
transform: 'translateY(-50%)',
|
||||
'&-left': {
|
||||
insetInlineEnd: 'auto',
|
||||
insetInlineStart: dotOffset
|
||||
},
|
||||
'&-right': {
|
||||
insetInlineEnd: dotOffset,
|
||||
insetInlineStart: 'auto'
|
||||
},
|
||||
li: Object.assign(Object.assign({}, reverseSizeOfDot), {
|
||||
margin: `${unit(marginXXS)} 0`,
|
||||
verticalAlign: 'baseline',
|
||||
button: reverseSizeOfDot,
|
||||
'&::after': Object.assign(Object.assign({}, reverseSizeOfDot), {
|
||||
height: 0
|
||||
}),
|
||||
'&.slick-active': Object.assign(Object.assign({}, reverseSizeOfDot), {
|
||||
height: token.dotActiveWidth,
|
||||
button: Object.assign(Object.assign({}, reverseSizeOfDot), {
|
||||
height: token.dotActiveWidth
|
||||
}),
|
||||
'&::after': Object.assign(Object.assign({}, reverseSizeOfDot), {
|
||||
animationName: animation,
|
||||
animationDuration: `var(${DotDuration})`,
|
||||
animationTimingFunction: 'ease-out',
|
||||
animationFillMode: 'forwards'
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genCarouselRtlStyle = token => {
|
||||
const {
|
||||
componentCls
|
||||
} = token;
|
||||
return [{
|
||||
[`${componentCls}-rtl`]: {
|
||||
direction: 'rtl'
|
||||
}
|
||||
}, {
|
||||
[`${componentCls}-vertical`]: {
|
||||
'.slick-dots': {
|
||||
[`${componentCls}-rtl&`]: {
|
||||
flexDirection: 'column'
|
||||
}
|
||||
}
|
||||
}
|
||||
}];
|
||||
};
|
||||
export const prepareComponentToken = token => {
|
||||
const dotActiveWidth = 24;
|
||||
return {
|
||||
arrowSize: 16,
|
||||
arrowOffset: token.marginXS,
|
||||
dotWidth: 16,
|
||||
dotHeight: 3,
|
||||
dotGap: token.marginXXS,
|
||||
dotOffset: 12,
|
||||
dotWidthActive: dotActiveWidth,
|
||||
dotActiveWidth
|
||||
};
|
||||
};
|
||||
// ============================== Export ==============================
|
||||
export default genStyleHooks('Carousel', token => [genCarouselStyle(token), genArrowsStyle(token), genDotsStyle(token), genCarouselVerticalStyle(token), genCarouselRtlStyle(token)], prepareComponentToken, {
|
||||
deprecatedTokens: [['dotWidthActive', 'dotActiveWidth']]
|
||||
});
|
||||
Reference in New Issue
Block a user