Added dotStyle and activeDotStyle

react-component · Jul 1, 2017 · 665708a · 665708a
1 parent 89353ad
commit 665708a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
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 = dotStyle || {};
+    if (isActived && activeDotStyle) {
+      style = { ...style, ...activeDotStyle };
+    }
+    style = vertical ? { bottom: offset, ...style } : { left: offset, ...style };
     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 = {
@@ -216,6 +218,8 @@ export default function createSlider(Component) {
         maximumTrackStyle,
         style,
         railStyle,
+        dotStyle,
+        activeDotStyle,
       } = this.props;
       const { tracks, handles } = super.render();
 
@@ -252,6 +256,8 @@ export default function createSlider(Component) {
             upperBound={this.getUpperBound()}
             max={max}
             min={min}
+            dotStyle={dotStyle}
+            activeDotStyle={activeDotStyle}
           />
           {handles}
           <Marks