feat: 🆕 add support use dots to provide dotsClasses (#21848)

* add support use dots to provide dotsClasse

* update docs

* rename dotsClass to className

* typo

Co-authored-by: Amumu <yoyo837@hotmail.com>

components/carousel/__tests__/index.test.js

@@ -126,4 +126,18 @@ describe('Carousel', () => {
       ).toBeTruthy();
     });
   });
+
+  describe('dots precise control by plain object', () => {
+    it('use dots to provide dotsClasse', () => {
+      const wrapper = mount(
+        <Carousel dots={{ className: 'customDots' }}>
+          <div>1</div>
+          <div>2</div>
+          <div>3</div>
+        </Carousel>,
+      );
+      wrapper.update();
+      expect(wrapper.find('.slick-dots').hasClass('customDots')).toBeTruthy();
+    });
+  });
 });

components/carousel/index.en-US.md

@@ -20,7 +20,7 @@ A carousel component. Scales with its container.
 | autoplay | Whether to scroll automatically | boolean | `false` |  |
 | beforeChange | Callback function called before the current index changes | function(from, to) | - |  |
 | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom |  |
-| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |  |
+| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others  | boolean \| { className?:string } | `true` |  |
 | easing | Transition interpolation function name | string | `linear` |  |
 | effect | Transition effect | `scrollx` \| `fade` | `scrollx` |  |
 

components/carousel/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import isPlainObject from 'lodash/isPlainObject';
 import debounce from 'lodash/debounce';
 import { Settings } from '@ant-design/react-slick';
 import classNames from 'classnames';
@@ -14,13 +15,18 @@ export type CarouselEffect = 'scrollx' | 'fade';
 export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
 
 // Carousel
-export interface CarouselProps extends Settings {
+export interface CarouselProps extends Omit<Settings, 'dots' | 'dotsClass'> {
   effect?: CarouselEffect;
   style?: React.CSSProperties;
   prefixCls?: string;
   slickGoTo?: number;
   dotPosition?: DotPosition;
   children?: React.ReactNode;
+  dots?:
+    | boolean
+    | {
+        className?: string;
+      };
 }
 
 export default class Carousel extends React.Component<CarouselProps, {}> {
@@ -106,7 +112,13 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
     const dotsClass = 'slick-dots';
     const dotPosition = this.getDotPosition();
     props.vertical = dotPosition === 'left' || dotPosition === 'right';
-    props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'}`;
+
+    const enableDots = props.dots === true || isPlainObject(props.dots);
+    const dsClass = classNames(
+      dotsClass,
+      `${dotsClass}-${dotPosition || 'bottom'}`,
+      typeof props.dots === 'boolean' ? false : props.dots?.className,
+    );
 
     const className = classNames(prefixCls, {
       [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -115,7 +127,7 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
 
     return (
       <div className={className}>
-        <SlickCarousel ref={this.saveSlick} {...props} />
+        <SlickCarousel ref={this.saveSlick} {...props} dots={enableDots} dotsClass={dsClass} />
       </div>
     );
   };

components/carousel/index.zh-CN.md

@@ -21,7 +21,7 @@ subtitle: 走马灯
 | autoplay | 是否自动切换 | boolean | false |  |  |
 | beforeChange | 切换面板的回调 | function(from, to) | 无 |  |  |
 | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom |  |
-| dots | 是否显示面板指示点 | boolean | true |  |  |
+| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?:string } | true |  |  |
 | easing | 动画效果 | string | linear |  |  |
 | effect | 动画效果函数，可取 scrollx, fade | string | scrollx |  |  |