From f571a1eaedbf843a3abdbd987db9a797ba10cb90 Mon Sep 17 00:00:00 2001
From: tomoberry <tberrs@gmail.com>
Date: Tue, 4 Jul 2017 02:12:26 -0500
Subject: [PATCH] Added dotStyle and activeDotStyle.  This commit resolves #291
 (#292)

---
 README.md                   | 3 ++-
 examples/slider.js          | 4 ++++
 src/common/Steps.jsx        | 8 ++++++--
 src/common/createSlider.jsx | 8 ++++++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c66d53488..ab1bfa4ae 100644
--- a/README.md
+++ b/README.md
@@ -111,7 +111,8 @@ The following APIs are shared by Slider and Range.
 | handleStyle | Array[Object] \| Object | `[{}]` | The style used for handle. (`both for slider(`Object`) and range(`Array of Object`), the array will be used for mutli handle follow element order`) |
 | trackStyle | Array[Object] \| Object | `[{}]` | The style used for track. (`both for slider(`Object`) and range(`Array of Object`), the array will be used for mutli track follow element order`)|w
 | railStyle | Object | `{}` | The style used for the track base color.  |
-
+| dotStyle | Object | `{}` | The style used for the dots. |
+| activeDotStyle | Object | `{}` | The style used for the active dots. |
 
 ### Slider
 
diff --git a/examples/slider.js b/examples/slider.js
index 73de9638c..cf63a9f6b 100644
--- a/examples/slider.js
+++ b/examples/slider.js
@@ -95,6 +95,10 @@ ReactDOM.render(
       <p>Basic Slider，`step=20, dots`</p>
       <Slider dots step={20} defaultValue={100} onAfterChange={log} />
     </div>
+    <div style={style}>
+      <p>Basic Slider，`step=20, dots, dotStyle={"{borderColor: 'orange'}"}, activeDotStyle={"{borderColor: 'yellow'}"}`</p>
+      <Slider dots step={20} defaultValue={100} onAfterChange={log} dotStyle={{ borderColor: 'orange' }} activeDotStyle={{ borderColor: 'yellow' }} />
+    </div>
     <div style={style}>
       <p>Slider with tooltip, with custom `tipFormatter`</p>
       <SliderWithTooltip
diff --git a/src/common/Steps.jsx b/src/common/Steps.jsx
index 846a13acd..ed33bf805 100644
--- a/src/common/Steps.jsx
+++ b/src/common/Steps.jsx
@@ -18,14 +18,18 @@ const calcPoints = (vertical, marks, dots, step, min, max) => {
 };
 
 const Steps = ({ prefixCls, vertical, marks, dots, step, included,
-                lowerBound, upperBound, max, min }) => {
+                lowerBound, upperBound, max, min, dotStyle, activeDotStyle }) => {
   const range = max - min;
   const elements = calcPoints(vertical, marks, dots, step, min, max).map((point) => {
     const offset = `${Math.abs(point - min) / range * 100}%`;
-    const style = vertical ? { bottom: offset } : { left: offset };
 
     const isActived = (!included && point === upperBound) ||
             (included && point <= upperBound && point >= lowerBound);
+    let style = vertical ? { bottom: offset, ...dotStyle } : { left: offset, ...dotStyle };
+    if (isActived) {
+      style = { ...style, ...activeDotStyle };
+    }
+
     const pointClassName = classNames({
       [`${prefixCls}-dot`]: true,
       [`${prefixCls}-dot-active`]: isActived,
diff --git a/src/common/createSlider.jsx b/src/common/createSlider.jsx
index 4eab01948..c5e4db116 100644
--- a/src/common/createSlider.jsx
+++ b/src/common/createSlider.jsx
@@ -36,6 +36,8 @@ export default function createSlider(Component) {
       handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
       trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
       railStyle: PropTypes.object,
+      dotStyle: PropTypes.object,
+      activeDotStyle: PropTypes.object,
     };
 
     static defaultProps = {
@@ -60,6 +62,8 @@ export default function createSlider(Component) {
       trackStyle: [{}],
       handleStyle: [{}],
       railStyle: {},
+      dotStyle: {},
+      activeDotStyle: {},
     };
 
     constructor(props) {
@@ -216,6 +220,8 @@ export default function createSlider(Component) {
         maximumTrackStyle,
         style,
         railStyle,
+        dotStyle,
+        activeDotStyle,
       } = this.props;
       const { tracks, handles } = super.render();
 
@@ -252,6 +258,8 @@ export default function createSlider(Component) {
             upperBound={this.getUpperBound()}
             max={max}
             min={min}
+            dotStyle={dotStyle}
+            activeDotStyle={activeDotStyle}
           />
           {handles}
           <Marks