From fd6c393f660ef21bc22ffb42f978a23062f92d25 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Tue, 17 Nov 2015 16:04:50 +0800
Subject: [PATCH] feat: `Steps` should not depend on `marks`

---
 src/Slider.jsx | 34 ++++++++++++++--------------------
 src/Steps.jsx  | 25 +++++++++++++------------
 2 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/Slider.jsx b/src/Slider.jsx
index 99fe49a..87423ca 100644
--- a/src/Slider.jsx
+++ b/src/Slider.jsx
@@ -233,9 +233,9 @@ class Slider extends React.Component {
   }
 
   getPoints() {
-    const {marks, step, dots, min, max} = this.props;
+    const {marks, step, min, max} = this.props;
     const points = new Set(Object.keys(marks));
-    if (step > 1 && dots) {
+    if (step > 1) {
       for (let i = min; i <= max; i = i + step) {
         points.add(i);
       }
@@ -262,10 +262,7 @@ class Slider extends React.Component {
   trimAlignValue(v) {
     const state = this.state || {};
     const {handle, lowerBound, upperBound} = state;
-    const props = this.props;
-    const {marks, min, max} = props;
-    const marksLen = Object.keys(marks).length;
-    const step = (marksLen > 0) ? (max - min) / (marksLen - 1) : props.step;
+    const {min, max} = this.props;
 
     let val = v;
     if (val <= min) {
@@ -281,14 +278,11 @@ class Slider extends React.Component {
       val = upperBound;
     }
 
-    const valModStep = (val - min) % step;
+    const points = this.getPoints().map(parseFloat);
+    const diffs = points.map((point) => Math.abs(val - point));
+    const closestPoint = points[diffs.indexOf(Math.min.apply(Math, diffs))];
 
-    let alignValue = val - valModStep;
-    if (Math.abs(valModStep) * 2 >= step) {
-      alignValue += (valModStep > 0) ? step : (-step);
-    }
-
-    return parseFloat(alignValue.toFixed(5));
+    return closestPoint;
   }
 
   calcOffset(value) {
@@ -310,9 +304,9 @@ class Slider extends React.Component {
   }
 
   calcValueFromIndex(index, props) {
-    const marksLen = Object.keys(props.marks).length;
-    if (marksLen > 0) {
-      const value = ((props.max - props.min) / (marksLen - 1)) * (index);
+    const marksCount = Object.keys(props.marks).length;
+    if (marksCount > 0) {
+      const value = ((props.max - props.min) / (marksCount - 1)) * (index);
       return parseFloat(value.toFixed(5));
     }
     return ('value' in props ? props.value : props.defaultValue);
@@ -367,9 +361,9 @@ class Slider extends React.Component {
 
   render() {
     const {handle, upperBound, lowerBound} = this.state;
-    const {className, prefixCls, disabled, included, range,
+    const {className, prefixCls, disabled, dots, included, range,
            marks, max, min, tipTransitionName, tipFormatter, children} = this.props;
-    const marksLen = Object.keys(marks).length;
+    const marksCount = Object.keys(marks).length;
 
     const sliderClassName = classSet({
       [prefixCls]: true,
@@ -387,7 +381,7 @@ class Slider extends React.Component {
     }
 
     const handleClassName = prefixCls + '-handle';
-    const isNoTip = (marksLen > 0) && !tipFormatter;
+    const isNoTip = (marksCount > 0) && !tipFormatter;
     const upper = (<Handle className={handleClassName} tipTransitionName={tipTransitionName} noTip={isNoTip} tipFormatter={tipFormatter}
                      offset={upperOffset} value={upperBound} dragging={handle === 'upperBound'} />);
 
@@ -405,7 +399,7 @@ class Slider extends React.Component {
         {track}
         {upper}
         {lower}
-        <Steps prefixCls={prefixCls} points={this.getPoints()}
+        <Steps prefixCls={prefixCls} points={this.getPoints()} dots={dots}
                included={isIncluded} lowerBound={lowerBound}
                upperBound={upperBound} max={max} min={min} />
         <Marks className={prefixCls + '-mark'} marks={marks}
diff --git a/src/Steps.jsx b/src/Steps.jsx
index 816dcd5..38e3394 100644
--- a/src/Steps.jsx
+++ b/src/Steps.jsx
@@ -1,21 +1,22 @@
 import React from 'react';
 import { classSet } from 'rc-util';
 
-const Steps = ({prefixCls, points, included, lowerBound, upperBound, max, min}) => {
+const Steps = ({prefixCls, points, dots, included, lowerBound, upperBound, max, min}) => {
   const range = max - min;
-  const elements = points.map(parseFloat).map((point) => {
-    const offset = (point - min) / range * 100 + '%';
-    const style = { left: offset };
+  const elements = points.filter((point) => typeof point === 'string' || dots).map(parseFloat)
+          .map((point) => {
+            const offset = (point - min) / range * 100 + '%';
+            const style = { left: offset };
 
-    const isActived = (!included && point === upperBound) ||
-            (included && point <= upperBound && point >= lowerBound);
-    const pointClassName = classSet({
-      [prefixCls + '-dot']: true,
-      [prefixCls + '-dot-active']: isActived,
-    });
+            const isActived = (!included && point === upperBound) ||
+                    (included && point <= upperBound && point >= lowerBound);
+            const pointClassName = classSet({
+              [prefixCls + '-dot']: true,
+              [prefixCls + '-dot-active']: isActived,
+            });
 
-    return <span className={pointClassName} style={style} key={point} />;
-  });
+            return <span className={pointClassName} style={style} key={point} />;
+          });
 
   return <div className={prefixCls + '-step'}>{elements}</div>;
 };