Browse Source

fix: Carousel compatible with vertical property (#35349)

pull/35387/head
haipeng 3 years ago
committed by GitHub
parent
commit
a217301cb7
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 16
      components/carousel/index.tsx

16
components/carousel/index.tsx

@ -30,7 +30,17 @@ export interface CarouselRef {
} }
const Carousel = React.forwardRef<CarouselRef, CarouselProps>( const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
({ dots = true, arrows = false, draggable = false, dotPosition = 'bottom', ...props }, ref) => { (
{
dots = true,
arrows = false,
draggable = false,
dotPosition = 'bottom',
vertical = dotPosition === 'left' || dotPosition === 'right',
...props
},
ref,
) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext); const { getPrefixCls, direction } = React.useContext(ConfigContext);
const slickRef = React.useRef<any>(); const slickRef = React.useRef<any>();
@ -60,6 +70,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
}, [props.children]); }, [props.children]);
const newProps = { const newProps = {
vertical,
...props, ...props,
}; };
@ -69,7 +80,6 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
const prefixCls = getPrefixCls('carousel', newProps.prefixCls); const prefixCls = getPrefixCls('carousel', newProps.prefixCls);
const dotsClass = 'slick-dots'; const dotsClass = 'slick-dots';
newProps.vertical = dotPosition === 'left' || dotPosition === 'right';
const enableDots = !!dots; const enableDots = !!dots;
const dsClass = classNames( const dsClass = classNames(
@ -80,7 +90,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
const className = classNames(prefixCls, { const className = classNames(prefixCls, {
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-vertical`]: newProps.vertical, [`${prefixCls}-vertical`]: dotPosition === 'left' || dotPosition === 'right',
}); });
return ( return (

Loading…
Cancel
Save