Merge pull request #45 from react-component/feat-mark-as-step

Feat mark as step

README.md

@@ -88,11 +88,17 @@ ReactDOM.render(<Rcslider />, container);
           <td>100</td>
           <td>The maximum value of the slider</td>
         </tr>
+        <tr>
+          <td>marks</td>
+          <td>object {number: string}</td>
+          <td>{}</td>
+          <td>Mark on the slider. The key determines the position, and the value determines what will show.</td>
+        </tr>
         <tr>
           <td>step</td>
-          <td>number</td>
+          <td>number or `null`</td>
           <td>1</td>
-          <td>Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value.</td>
+          <td>Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value. When `marks` is not an empty object, `step` can be set to `null`, to make marks as steps.</td>
         </tr>
         <tr>
           <td>range</td>
@@ -112,35 +118,17 @@ ReactDOM.render(<Rcslider />, container);
           <td></td>
           <td>Set current positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]`</td>
         </tr>
-        <tr>
-          <td>marks</td>
-          <td>array</td>
-          <td>[]</td>
-          <td>Mark every step for the slider, it will ignore the `step` parameter if it has been defined. Does not work with `range`</td>
-        </tr>
         <tr>
           <td>included</td>
           <td>boolean</td>
           <td>true</td>
           <td>If the value is `true`, it means a continuous value interval, otherwise, it is a independent value.</td>
         </tr>
-        <tr>
-          <td>defaultIndex</td>
-          <td>number</td>
-          <td>0</td>
-          <td>For step or marks slider, determines the initial position of the handle. Does not work with `range`</td>
-        </tr>
-        <tr>
-          <td>index</td>
-          <td>number</td>
-          <td></td>
-          <td>For step or marks slider, determines current position of the handle. Does not work with `range`</td>
-        </tr>
         <tr>
           <td>disabled</td>
           <td>boolean</td>
           <td>false</td>
-          <td>If true the handles can't be moved.</td>
+          <td>If `true`, handles can't be moved.</td>
         </tr>
         <tr>
           <td>tipTransitionName</td>
@@ -150,7 +138,7 @@ ReactDOM.render(<Rcslider />, container);
         </tr>
         <tr>
           <td>tipFormatter</td>
-          <td>func</td>
+          <td>function</td>
           <td></td>
           <td>Format the value of the tooltip if it shows.</td>
         </tr>
@@ -158,7 +146,7 @@ ReactDOM.render(<Rcslider />, container);
           <td>dots</td>
           <td>bool</td>
           <td>false</td>
-          <td>For linear slider, when the `step` value is greater than 1, you can set the `dots` to  `true` if you want to render the slider bar with dots.</td>
+          <td>When the `step` value is greater than 1, you can set the `dots` to  `true` if you want to render the slider with dots.</td>
         </tr>
     </tbody>
 </table>

examples/marks.js

@@ -8,6 +8,7 @@ var Slider = require('rc-slider');
 
 var style = {width: 400, margin: 50};
 var marks = {
+  '-10': '-10°C',
   0: '0°C',
   26: '26°C',
   37: '37°C',
@@ -21,30 +22,30 @@ var log = function(value) {
 ReactDOM.render(
   <div>
     <div style={style}>
-      <p>Slider with marks, `included=true`</p>
+      <p>Slider with marks, `step=null`</p>
-      <Slider marks={marks} onChange={log} defaultValue={20} />
+      <Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
     </div>
     <div style={style}>
-      <p>Slider with marks and steps, `included=true`</p>
+      <p>Slider with marks and steps</p>
-      <Slider marks={marks} step={10} onChange={log} defaultValue={20} />
+      <Slider min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
     </div>
 
     <div style={style}>
       <p>Slider with marks, `included=false`</p>
-      <Slider marks={marks} included={false} defaultValue={20} />
+      <Slider min={-10} marks={marks} included={false} defaultValue={20} />
     </div>
     <div style={style}>
       <p>Slider with marks and steps, `included=false`</p>
-      <Slider marks={marks} step={10} included={false} defaultValue={20} />
+      <Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />
     </div>
 
     <div style={style}>
       <p>Range with marks</p>
-    <Slider range marks={marks} onChange={log} defaultValue={[20, 40]} />
+      <Slider min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />
     </div>
     <div style={style}>
       <p>Range with marks and steps</p>
-      <Slider range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
+      <Slider min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
     </div>
   </div>
   , document.getElementById('__react-content'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "slider ui component for react",
   "keywords": [
     "react",

src/Marks.jsx

@@ -17,13 +17,7 @@ const Marks = ({className, marks, included, upperBound, lowerBound, max, min}) =
     });
 
     const style = { width: markWidth };
-    if (point === marksCount - 1) {
+    style.left = (point - min) / range * 100 - unit / 4 + '%';
-      style.right = -unit / 4 + '%';
-    } else if (point === 0) {
-      style.left = -unit / 4 + '%';
-    } else {
-      style.left = (point - min) / range * 100 - unit / 4 + '%';
-    }
 
     return (<span className={markClassName} style={style} key={point}>
              {marks[point]}

src/Slider.jsx

@@ -25,10 +25,6 @@ function pauseEvent(e) {
   e.preventDefault();
 }
 
-function isEmpty(collection) {
-  return Object.keys(collection).length === 0;
-}
-
 class Slider extends React.Component {
   constructor(props) {
     super(props);
@@ -194,7 +190,7 @@ class Slider extends React.Component {
   getPoints() {
     const {marks, step, min, max} = this.props;
     const points = Object.keys(marks);
-    if (isEmpty(marks) || step > 1) {
+    if (step !== null) {
       for (let i = min; i <= max; i = i + step) {
         points.push(i);
       }
@@ -291,9 +287,8 @@ class Slider extends React.Component {
 
   render() {
     const {handle, upperBound, lowerBound} = this.state;
-    const {className, prefixCls, disabled, dots, included, range,
+    const {className, prefixCls, disabled, dots, included, range, step,
            marks, max, min, tipTransitionName, tipFormatter, children} = this.props;
-    const marksCount = Object.keys(marks).length;
 
     const sliderClassName = classSet({
       [prefixCls]: true,
@@ -311,7 +306,7 @@ class Slider extends React.Component {
     }
 
     const handleClassName = prefixCls + '-handle';
-    const isNoTip = (marksCount > 0) && !tipFormatter;
+    const isNoTip = (step === null) && !tipFormatter;
     const upper = (<Handle className={handleClassName} tipTransitionName={tipTransitionName} noTip={isNoTip} tipFormatter={tipFormatter}
                      offset={upperOffset} value={upperBound} dragging={handle === 'upperBound'} />);