Merge pull request #549 from benjycui/feat-slider

Feat slider

components/slider/demo/basic.md

@@ -2,7 +2,7 @@
 
 - order: 0
 
-基本滑动条。
+基本滑动条。当 `range` 为 `true` 时，渲染为双滑块。当 `disabled` 为 `true` 时，滑块处于不可用状态。
 
 ---
 
@@ -10,8 +10,9 @@
 import { Slider } from 'antd';
 
 ReactDOM.render(<div>
-  <Slider />
-  <Slider defaultValue={65} disabled />
+  <Slider defaultValue={30} />
+  <Slider range defaultValue={[20, 50]} />
+  <Slider range defaultValue={[20, 50]} disabled />
 </div>
 , document.getElementById('components-slider-demo-basic'));
 ````
@@ -20,4 +21,8 @@ ReactDOM.render(<div>
 .code-box-demo .ant-slider {
   margin-bottom: 50px;
 }
+
+.code-box-demo .ant-slider:last-child {
+  margin-bottom: 0;
+}
 </style>

components/slider/demo/event.md

@@ -0,0 +1,22 @@
+# 事件
+
+- order: 4
+
+当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
+
+---
+
+````jsx
+import { Slider } from 'antd';
+
+function log(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+<div>
+  <Slider defaultValue={30} onChange={log} />
+  <Slider range step={10} defaultValue={[20, 50]} onChange={log} />
+</div>
+, document.getElementById('components-slider-demo-event'));
+````

components/slider/demo/mark.md

@@ -2,19 +2,29 @@
 
 - order: 3
 
-使用 `marks` 属性标注分段式滑块，结合 `index` 可以指定滑块按钮初始位置。
+使用 `marks` 属性标注分段式滑块，使用 `value` / `defaultValue` 指定滑块位置。可以结合 `step` `included` 使用。
 
 ---
 
 ````jsx
 import { Slider } from 'antd';
 
+const marks = {
+  0: '0°C',
+  26: '26°C',
+  37: '37°C',
+  100: '100°C'
+};
+
 ReactDOM.render(
-<div className="sliderContainer">
+<div>
   <p>包含关系</p>
-  <Slider marks={["状态1","状态2","状态3","状态4"]} defaultIndex={1} />
+  <Slider marks={marks} defaultValue={37} />
+  <Slider range marks={marks} defaultValue={[26, 37]} />
   <p>并列关系</p>
-  <Slider marks={["状态1","状态2","状态3","状态4"]} included={false} defaultIndex={1} />
+  <Slider marks={marks} included={false} defaultValue={37} />
+  <p>结合 `step`</p>
+  <Slider marks={marks} step={10} defaultValue={37} />
 </div>
 , document.getElementById('components-slider-demo-mark'));
 ````

components/slider/demo/range.md

@@ -1,18 +0,0 @@
-# 双滑块
-
-- order: 4
-
-设置 `range` 为 `true`，将会渲染两个滑块。
-
----
-
-````jsx
-import { Slider } from 'antd';
-
-ReactDOM.render(
-<div>
-  <Slider range defaultValue={[0, 30]} />
-  <Slider range step={10} value={[20, 50]} />
-</div>
-, document.getElementById('components-slider-demo-range'));
-````

components/slider/index.jsx

@@ -9,6 +9,34 @@ export default React.createClass({
     };
   },
   render() {
-    return <Slider {...this.props} />;
+    const {isIncluded, marks, index, defaultIndex, ...rest} = this.props;
+
+    if (isIncluded !== undefined) {
+      // 兼容 `isIncluded`
+      rest.included = isIncluded;
+    }
+
+    if (Array.isArray(marks)) {
+      // 兼容当 marks 为数组的情况
+      rest.min = 0;
+      rest.max = marks.length - 1;
+      rest.step = 1;
+
+      if (index !== undefined) {
+        rest.value = index;
+      }
+      if (defaultIndex !== undefined) {
+        rest.defaultValue = defaultIndex;
+      }
+
+      rest.marks = {};
+      marks.forEach((val, idx) => {
+        rest.marks[idx] = val;
+      });
+    } else {
+      rest.marks = marks;
+    }
+
+    return <Slider {...rest} />;
   }
 });

components/slider/index.md

@@ -19,10 +19,9 @@
 | min        | Number			| 0				| 最小值
 | max        | Number			| 100           | 最大值
 | step       | Number			| 1				| 步长，取值必须大于 0，并且可被 (max - min) 整除
-| value             | Number or [Number, Number]|             | 设置当前取值。当 `range` 为 `false` 时，使用 `Number`。否则用 `[Number, Number]`
-| defaultValue      | Number or [Number, Number]| 0 or [0, 0] | 设置初始取值。当 `range` 为 `false` 时，使用 `Number`。否则用 `[Number, Number]`
-| marks      | Array		    | [] 			| 分段标记，标记每一个 step，如果 step 属性没有定义，则 `marks` 属性会被忽略。当 `range` 为 `true` 时，忽略该属性
-| included   | Boolean			| true			| 分段式滑块，值为 true 时表示值为包含关系，false 表示并列
-| index      | Number 			|            	| 为具备 `step` 或者 `marks` 的 slider 提供滑块操作的当前位置。当 `range` 为 `true` 时，忽略该属性
-| defaultIndex      | Number 			| 0           	| 为具备 `step` 或者 `marks` 的 slider 提供滑块操作的初始位置。当 `range` 为 `true` 时，忽略该属性
-| disabled   | Boolean 			| false         | 值为 `true` 时，滑块为 disable 禁用状态
+| value             | Number or [Number, Number]|             | 设置当前取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`
+| defaultValue      | Number or [Number, Number]| 0 or [0, 0] | 设置初始取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`
+| marks      | Object {Number: String}		    | {} 		  | 分段标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内
+| included   | Boolean			| true			| `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列
+| disabled   | Boolean 			| false         | 值为 `true` 时，滑块为禁用状态
+| onChange   | Function         | NOOP          | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。

package.json

@@ -52,7 +52,7 @@
     "rc-queue-anim": "~0.11.2",
     "rc-radio": "~2.0.0",
     "rc-select": "~5.1.2",
-    "rc-slider": "~2.3.2",
+    "rc-slider": "~3.0.0",
     "rc-steps": "~1.4.1",
     "rc-switch": "~1.3.1",
     "rc-table": "~3.6.1",