Added dotStyle and activeDotStyle. This commit resolves #291 (#292)

react-component · Jul 4, 2017 · f571a1e · f571a1e
1 parent 4feebbe
commit f571a1e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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