From e2f5fce8e55021056600362bce45bca2b8586084 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Wed, 4 Mar 2020 14:13:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=86=95=20=20add=20support=20use?=
 =?UTF-8?q?=20dots=20to=20provide=20dotsClasses=20(#21848)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 | 14 ++++++++++++++
 components/carousel/index.en-US.md          |  2 +-
 components/carousel/index.tsx               | 18 +++++++++++++++---
 components/carousel/index.zh-CN.md          |  2 +-
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js
index 58093d3514..8927384cc3 100644
--- a/components/carousel/__tests__/index.test.js
+++ b/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();
+    });
+  });
 });
diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md
index 217b33042c..ebb4196787 100644
--- a/components/carousel/index.en-US.md
+++ b/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` |  |
 
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index 9196dc8b56..55ed78ab37 100644
--- a/components/carousel/index.tsx
+++ b/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>
     );
   };
diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
index 41fadcc516..b4e8c5cee1 100644
--- a/components/carousel/index.zh-CN.md
+++ b/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 |  |  |