mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-12 12:23:08 +08:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

refactor: Carousel migrate to genComponentStyleHook (#34902)

Browse Source
This commit is contained in:
MadCcc 2022-04-07 17:02:54 +08:00 committed by GitHub
parent c18dea7c2d
commit 8dd16a1f57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/_util/theme/interface.ts
View File

@ -41,6 +41,7 @@ export interface OverrideToken {
// Customize component // Customize component
Affix?: {}; Affix?: {};
Button?: ButtonComponentToken; Button?: ButtonComponentToken;
Carousel?: {};
Cascader?: CascaderComponentToken; Cascader?: CascaderComponentToken;
Divider?: DividerComponentToken; Divider?: DividerComponentToken;
Empty?: EmptyComponentToken; Empty?: EmptyComponentToken;

2
components/carousel/index.tsx
View File

@ -79,7 +79,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
typeof dots === 'boolean' ? false : dots?.className, typeof dots === 'boolean' ? false : dots?.className,
); );
const [wrapSSR, hashId] = useStyle(prefixCls, getPrefixCls()); const [wrapSSR, hashId] = useStyle(prefixCls);
const className = classNames( const className = classNames(
prefixCls, prefixCls,

54
components/carousel/style/index.tsx
View File

@ -1,27 +1,18 @@
// deps-lint-skip-all // deps-lint-skip-all
import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs';
import { import { resetComponent, GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
DerivativeToken,
resetComponent,
UseComponentStyleResult,
useStyleRegister,
useToken,
GenerateStyle,
} from '../../_util/theme';
interface CarouselToken extends DerivativeToken { interface CarouselToken extends FullToken<'Carousel'> {
antPrefixCls: string;
carouselPrefixCls: string;
carouselDotWidth: CSSObject['width']; carouselDotWidth: CSSObject['width'];
carouselDotHeight: CSSObject['height']; carouselDotHeight: CSSObject['height'];
carouselDotActiveWidth: CSSObject['width']; carouselDotActiveWidth: CSSObject['width'];
} }
const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = token => { const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = token => {
const { carouselPrefixCls, antPrefixCls } = token; const { componentCls, antCls } = token;
return { return {
[`.${carouselPrefixCls}`]: { [componentCls]: {
...resetComponent(token), ...resetComponent(token),
'.slick-slider': { '.slick-slider': {
@ -57,14 +48,14 @@ const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = token => {
pointerEvents: 'none', pointerEvents: 'none',
// https://github.com/ant-design/ant-design/issues/23294 // https://github.com/ant-design/ant-design/issues/23294
[`input.${antPrefixCls}-radio-input, input.${antPrefixCls}-checkbox-input`]: { [`input${antCls}-radio-input, input${antCls}-checkbox-input`]: {
visibility: 'hidden', visibility: 'hidden',
}, },
'&.slick-active': { '&.slick-active': {
pointerEvents: 'auto', pointerEvents: 'auto',
[`input.${antPrefixCls}-radio-input, input.${antPrefixCls}-checkbox-input`]: { [`input${antCls}-radio-input, input${antCls}-checkbox-input`]: {
visibility: 'visible', visibility: 'visible',
}, },
}, },
@ -254,7 +245,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = token => {
}; };
const genCarouselVerticalStyle: GenerateStyle<CarouselToken, CSSObject> = token => { const genCarouselVerticalStyle: GenerateStyle<CarouselToken, CSSObject> = token => {
const { carouselPrefixCls } = token; const { componentCls } = token;
const reverseSizeOfDot = { const reverseSizeOfDot = {
width: token.carouselDotHeight, width: token.carouselDotHeight,
@ -262,7 +253,7 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken, CSSObject> = token
}; };
return { return {
[`.${carouselPrefixCls}-vertical`]: { [`${componentCls}-vertical`]: {
'.slick-dots': { '.slick-dots': {
top: '50%', top: '50%',
bottom: 'auto', bottom: 'auto',
@ -302,25 +293,25 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken, CSSObject> = token
}; };
const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => { const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
const { carouselPrefixCls } = token; const { componentCls } = token;
return [ return [
{ {
[`.${carouselPrefixCls}-rtl`]: { [`${componentCls}-rtl`]: {
direction: 'rtl', direction: 'rtl',
// Dots // Dots
'.slick-dots': { '.slick-dots': {
[`.${carouselPrefixCls}-rtl&`]: { [`${componentCls}-rtl&`]: {
flexDirection: 'row-reverse', flexDirection: 'row-reverse',
}, },
}, },
}, },
}, },
{ {
[`.${carouselPrefixCls}-vertical`]: { [`${componentCls}-vertical`]: {
'.slick-dots': { '.slick-dots': {
[`.${carouselPrefixCls}-rtl&`]: { [`${componentCls}-rtl&`]: {
flexDirection: 'column', flexDirection: 'column',
}, },
}, },
@ -330,26 +321,17 @@ const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default function useStyle(prefixCls: string, antPrefixCls: string): UseComponentStyleResult { export default genComponentStyleHook('Carousel', token => {
const [theme, token, hashId] = useToken();
const carouselToken: CarouselToken = { const carouselToken: CarouselToken = {
...token, ...token,
carouselPrefixCls: prefixCls,
antPrefixCls,
// FIXME // FIXME
carouselDotWidth: 16, carouselDotWidth: 16,
carouselDotHeight: 3, carouselDotHeight: 3,
carouselDotActiveWidth: 24, carouselDotActiveWidth: 24,
}; };
return [ return [
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ genCarouselStyle(carouselToken),
genCarouselStyle(carouselToken), genCarouselVerticalStyle(carouselToken),
genCarouselVerticalStyle(carouselToken), genCarouselRtlStyle(carouselToken),
genCarouselRtlStyle(carouselToken),
]),
hashId,
]; ];
} });