2022-06-27 14:25:59 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme';
|
2022-07-11 15:35:58 +08:00
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme';
|
|
|
|
import { resetComponent } from '../../style';
|
2022-04-24 17:42:36 +08:00
|
|
|
|
|
|
|
export interface ComponentToken {
|
2022-05-19 14:00:04 +08:00
|
|
|
dotWidth: number;
|
|
|
|
dotHeight: number;
|
|
|
|
dotWidthActive: number;
|
2022-03-26 17:32:36 +08:00
|
|
|
}
|
|
|
|
|
2022-05-19 14:00:04 +08:00
|
|
|
interface CarouselToken extends FullToken<'Carousel'> {
|
|
|
|
carouselArrowSize: number;
|
|
|
|
carouselDotOffset: number;
|
|
|
|
carouselDotInline: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
const genCarouselStyle: GenerateStyle<CarouselToken> = token => {
|
2022-11-07 23:40:11 +08:00
|
|
|
const { componentCls, antCls, carouselArrowSize, carouselDotOffset, marginXXS } = token;
|
2022-05-19 14:00:04 +08:00
|
|
|
const arrowOffset = -carouselArrowSize * 1.25;
|
2022-03-26 17:32:36 +08:00
|
|
|
|
2022-11-07 23:32:46 +08:00
|
|
|
const carouselDotMargin = marginXXS;
|
|
|
|
|
2022-03-26 17:32:36 +08:00
|
|
|
return {
|
2022-04-07 17:02:54 +08:00
|
|
|
[componentCls]: {
|
2022-03-26 17:32:36 +08:00
|
|
|
...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
|
2022-04-07 17:02:54 +08:00
|
|
|
[`input${antCls}-radio-input, input${antCls}-checkbox-input`]: {
|
2022-03-26 17:32:36 +08:00
|
|
|
visibility: 'hidden',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&.slick-active': {
|
|
|
|
pointerEvents: 'auto',
|
|
|
|
|
2022-04-07 17:02:54 +08:00
|
|
|
[`input${antCls}-radio-input, input${antCls}-checkbox-input`]: {
|
2022-03-26 17:32:36 +08:00
|
|
|
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',
|
|
|
|
},
|
|
|
|
|
|
|
|
'.slick-arrow.slick-hidden': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
|
|
|
|
// Arrows
|
|
|
|
'.slick-prev, .slick-next': {
|
|
|
|
position: 'absolute',
|
|
|
|
top: '50%',
|
|
|
|
display: 'block',
|
2022-05-19 14:00:04 +08:00
|
|
|
width: carouselArrowSize,
|
|
|
|
height: carouselArrowSize,
|
|
|
|
marginTop: -carouselArrowSize / 2,
|
2022-03-26 17:32:36 +08:00
|
|
|
padding: 0,
|
|
|
|
color: 'transparent',
|
|
|
|
fontSize: 0,
|
|
|
|
lineHeight: 0,
|
|
|
|
background: 'transparent',
|
|
|
|
border: 0,
|
|
|
|
outline: 'none',
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
|
|
|
'&:hover, &:focus': {
|
|
|
|
color: 'transparent',
|
|
|
|
background: 'transparent',
|
|
|
|
outline: 'none',
|
|
|
|
|
|
|
|
'&::before': {
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'&.slick-disabled::before': {
|
|
|
|
opacity: 0.25,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'.slick-prev': {
|
2022-05-19 14:00:04 +08:00
|
|
|
insetInlineStart: arrowOffset,
|
2022-03-26 17:32:36 +08:00
|
|
|
|
|
|
|
'&::before': {
|
2022-04-19 11:27:09 +08:00
|
|
|
content: '"←"',
|
2022-03-26 17:32:36 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'.slick-next': {
|
2022-05-19 14:00:04 +08:00
|
|
|
insetInlineEnd: arrowOffset,
|
2022-03-26 17:32:36 +08:00
|
|
|
|
|
|
|
'&::before': {
|
2022-04-19 11:27:09 +08:00
|
|
|
content: '"→"',
|
2022-03-26 17:32:36 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// Dots
|
|
|
|
'.slick-dots': {
|
|
|
|
position: 'absolute',
|
|
|
|
insetInlineEnd: 0,
|
|
|
|
bottom: 0,
|
|
|
|
insetInlineStart: 0,
|
|
|
|
zIndex: 15,
|
|
|
|
display: 'flex !important',
|
|
|
|
justifyContent: 'center',
|
|
|
|
paddingInlineStart: 0,
|
|
|
|
listStyle: 'none',
|
|
|
|
|
|
|
|
'&-bottom': {
|
2022-05-19 14:00:04 +08:00
|
|
|
bottom: carouselDotOffset,
|
2022-03-26 17:32:36 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&-top': {
|
2022-05-19 14:00:04 +08:00
|
|
|
top: carouselDotOffset,
|
2022-03-26 17:32:36 +08:00
|
|
|
bottom: 'auto',
|
|
|
|
},
|
|
|
|
|
|
|
|
li: {
|
|
|
|
position: 'relative',
|
|
|
|
display: 'inline-block',
|
|
|
|
flex: '0 1 auto',
|
|
|
|
boxSizing: 'content-box',
|
2022-05-19 14:00:04 +08:00
|
|
|
width: token.dotWidth,
|
|
|
|
height: token.dotHeight,
|
2022-11-07 23:32:46 +08:00
|
|
|
marginInline: carouselDotMargin,
|
2022-03-26 17:32:36 +08:00
|
|
|
padding: 0,
|
|
|
|
textAlign: 'center',
|
2022-05-19 14:00:04 +08:00
|
|
|
textIndent: -999,
|
2022-03-26 17:32:36 +08:00
|
|
|
verticalAlign: 'top',
|
|
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
|
|
|
|
|
|
button: {
|
2022-11-07 23:32:46 +08:00
|
|
|
position: 'relative',
|
2022-03-26 17:32:36 +08:00
|
|
|
display: 'block',
|
|
|
|
width: '100%',
|
2022-05-19 14:00:04 +08:00
|
|
|
height: token.dotHeight,
|
2022-03-26 17:32:36 +08:00
|
|
|
padding: 0,
|
|
|
|
color: 'transparent',
|
|
|
|
fontSize: 0,
|
2022-06-28 20:33:01 +08:00
|
|
|
background: token.colorBgContainer,
|
2022-03-26 17:32:36 +08:00
|
|
|
border: 0,
|
|
|
|
borderRadius: 1,
|
|
|
|
outline: 'none',
|
|
|
|
cursor: 'pointer',
|
|
|
|
opacity: 0.3,
|
|
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
|
|
|
|
|
|
'&: hover, &:focus': {
|
|
|
|
opacity: 0.75,
|
|
|
|
},
|
2022-11-07 23:32:46 +08:00
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
position: 'absolute',
|
|
|
|
inset: -carouselDotMargin,
|
|
|
|
content: '""',
|
|
|
|
},
|
2022-03-26 17:32:36 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&.slick-active': {
|
2022-05-19 14:00:04 +08:00
|
|
|
width: token.dotWidthActive,
|
2022-03-26 17:32:36 +08:00
|
|
|
|
|
|
|
'& button': {
|
2022-06-28 20:33:01 +08:00
|
|
|
background: token.colorBgContainer,
|
2022-03-26 17:32:36 +08:00
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
|
|
|
|
'&: hover, &:focus': {
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-05-19 14:00:04 +08:00
|
|
|
const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = token => {
|
2022-11-07 23:32:46 +08:00
|
|
|
const { componentCls, carouselDotOffset, marginXXS } = token;
|
2022-03-26 17:32:36 +08:00
|
|
|
|
|
|
|
const reverseSizeOfDot = {
|
2022-05-19 14:00:04 +08:00
|
|
|
width: token.dotHeight,
|
|
|
|
height: token.dotWidth,
|
2022-03-26 17:32:36 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
return {
|
2022-04-07 17:02:54 +08:00
|
|
|
[`${componentCls}-vertical`]: {
|
2022-03-26 17:32:36 +08:00
|
|
|
'.slick-dots': {
|
|
|
|
top: '50%',
|
|
|
|
bottom: 'auto',
|
|
|
|
flexDirection: 'column',
|
2022-05-19 14:00:04 +08:00
|
|
|
width: token.dotHeight,
|
2022-03-26 17:32:36 +08:00
|
|
|
height: 'auto',
|
|
|
|
margin: 0,
|
|
|
|
transform: 'translateY(-50%)',
|
|
|
|
|
|
|
|
'&-left': {
|
|
|
|
insetInlineEnd: 'auto',
|
2022-05-19 14:00:04 +08:00
|
|
|
insetInlineStart: carouselDotOffset,
|
2022-03-26 17:32:36 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&-right': {
|
2022-05-19 14:00:04 +08:00
|
|
|
insetInlineEnd: carouselDotOffset,
|
2022-03-26 17:32:36 +08:00
|
|
|
insetInlineStart: 'auto',
|
|
|
|
},
|
|
|
|
|
|
|
|
li: {
|
|
|
|
// reverse width and height in vertical situation
|
|
|
|
...reverseSizeOfDot,
|
2022-11-07 23:32:46 +08:00
|
|
|
margin: `${marginXXS}px 0`,
|
2022-03-26 17:32:36 +08:00
|
|
|
verticalAlign: 'baseline',
|
|
|
|
|
|
|
|
button: reverseSizeOfDot,
|
|
|
|
|
|
|
|
'&.slick-active': {
|
|
|
|
...reverseSizeOfDot,
|
|
|
|
|
|
|
|
button: reverseSizeOfDot,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-05-19 14:00:04 +08:00
|
|
|
const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
|
2022-04-07 17:02:54 +08:00
|
|
|
const { componentCls } = token;
|
2022-03-26 17:32:36 +08:00
|
|
|
|
|
|
|
return [
|
|
|
|
{
|
2022-04-07 17:02:54 +08:00
|
|
|
[`${componentCls}-rtl`]: {
|
2022-03-26 17:32:36 +08:00
|
|
|
direction: 'rtl',
|
|
|
|
|
|
|
|
// Dots
|
|
|
|
'.slick-dots': {
|
2022-04-07 17:02:54 +08:00
|
|
|
[`${componentCls}-rtl&`]: {
|
2022-03-26 17:32:36 +08:00
|
|
|
flexDirection: 'row-reverse',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
2022-04-07 17:02:54 +08:00
|
|
|
[`${componentCls}-vertical`]: {
|
2022-03-26 17:32:36 +08:00
|
|
|
'.slick-dots': {
|
2022-04-07 17:02:54 +08:00
|
|
|
[`${componentCls}-rtl&`]: {
|
2022-03-26 17:32:36 +08:00
|
|
|
flexDirection: 'column',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-04-24 17:42:36 +08:00
|
|
|
export default genComponentStyleHook(
|
|
|
|
'Carousel',
|
2022-05-19 14:00:04 +08:00
|
|
|
token => {
|
2022-11-07 23:40:11 +08:00
|
|
|
const { controlHeightLG, controlHeightSM } = token;
|
2022-05-19 14:00:04 +08:00
|
|
|
const carouselToken = mergeToken<CarouselToken>(token, {
|
|
|
|
carouselArrowSize: controlHeightLG / 2,
|
|
|
|
carouselDotOffset: controlHeightSM / 2,
|
|
|
|
});
|
|
|
|
|
|
|
|
return [
|
|
|
|
genCarouselStyle(carouselToken),
|
|
|
|
genCarouselVerticalStyle(carouselToken),
|
|
|
|
genCarouselRtlStyle(carouselToken),
|
|
|
|
];
|
|
|
|
},
|
2022-04-24 17:42:36 +08:00
|
|
|
{
|
2022-05-19 14:00:04 +08:00
|
|
|
dotWidth: 16,
|
|
|
|
dotHeight: 3,
|
|
|
|
dotWidthActive: 24,
|
2022-04-24 17:42:36 +08:00
|
|
|
},
|
|
|
|
);
|