feat: rename APIs

README.md

@@ -131,7 +131,7 @@ ReactDOM.render(<Rcslider />, container);
           <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>isIncluded</td>
+          <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>
@@ -161,10 +161,10 @@ ReactDOM.render(<Rcslider />, container);
           <td>Set the animation for tooltip if it shows.</td>
         </tr>
         <tr>
-          <td>withDots</td>
+          <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 `withDots` to  `true` if you want to render the slider bar with dots.</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>
         </tr>
     </tbody>
 </table>

examples/simple.js

@@ -22,7 +22,7 @@ React.render(
     </div>
     <div style={style}>
       <p>基础滑块，step=20 带原点</p>
-      <Slider withDots step={20} />
+      <Slider dots step={20} />
     </div>
     <div style={style}>
       <p>双滑块</p>
@@ -30,7 +30,7 @@ React.render(
     </div>
     <div style={style}>
       <p>双滑块，step=20 </p>
-      <Slider range={true} withDots step={20} values={[0, 30]} onChange={onChange} isIncluded={false} />
+      <Slider range={true} dots step={20} values={[0, 30]} onChange={onChange} included={false} />
     </div>
     <div style={style}>
       <p>分段式滑块（包含关系）</p>
@@ -38,7 +38,7 @@ React.render(
     </div>
     <div style={style}>
       <p>分段式滑块（并列关系）</p>
-      <Slider marks={["状态1","状态2","状态3","状态4"]} isIncluded={false} defaultIndex={1} />
+      <Slider marks={["状态1","状态2","状态3","状态4"]} included={false} defaultIndex={1} />
     </div>
   </div>
   , document.getElementById('__react-content'));

src/Marks.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import rcUtil from 'rc-util';
 
-const Marks = ({className, marks, index, isIncluded}) => {
+const Marks = ({className, marks, index, included}) => {
   const marksLen = marks.length;
   const unit = 100 / (marksLen - 1);
   const markWidth = unit / 2 + '%';
 
   const elements = [];
   for (let i = 0; i < marksLen; i++) {
-    const isActived = (isIncluded && i <= index) || (!isIncluded && i === index);
+    const isActived = (included && i <= index) || (!included && i === index);
     const markClassName = rcUtil.classSet({
       [className + '-text']: true,
       [className + '-text-active']: isActived,

src/Slider.jsx

@@ -305,7 +305,7 @@ class Slider extends React.Component {
   render() {
     const {handle, upperBound, lowerBound} = this.state;
     const props = this.props;
-    const {className, prefixCls, disabled, isIncluded, withDots, range} = props;
+    const {className, prefixCls, disabled, included, dots, range} = props;
     const {marks, step, max, min, tipTransitionName, children} = props;
     const marksLen = marks.length;
 
@@ -319,7 +319,7 @@ class Slider extends React.Component {
     const lowerOffset = this.calcOffset(lowerBound);
 
     let track = null;
-    if (isIncluded || range) {
+    if (included || range) {
       const trackClassName = prefixCls + '-track';
       track = <Track className={trackClassName} offset={lowerOffset} length={upperOffset - lowerOffset} />;
     }
@@ -338,19 +338,19 @@ class Slider extends React.Component {
     const upperIndex = this.getIndex(upperBound);
 
     let steps = null;
-    if (marksLen > 0 || (step > 1 && withDots)) {
+    if (marksLen > 0 || (step > 1 && dots)) {
       const stepsClassName = prefixCls + '-step';
       const stepNum = marksLen > 0 ? marksLen : Math.floor((max - min) / step) + 1;
       steps = (<Steps className={stepsClassName} stepNum={stepNum}
                  lowerIndex={this.getIndex(lowerBound)} upperIndex={upperIndex}
-                 isIncluded={isIncluded || range} />);
+                 included={included || range} />);
     }
 
     let mark = null;
     if (marksLen > 0) {
       const markClassName = prefixCls + '-mark';
       mark = (<Marks className={markClassName} marks={marks}
-                 index={upperIndex} isIncluded={isIncluded} />);
+                 index={upperIndex} included={included} />);
     }
 
     return (
@@ -379,7 +379,7 @@ Slider.propTypes = {
   values: React.PropTypes.arrayOf(React.PropTypes.number),
   index: React.PropTypes.number,
   marks: React.PropTypes.array,
-  isIncluded: React.PropTypes.bool,
+  included: React.PropTypes.bool,
   className: React.PropTypes.string,
   prefixCls: React.PropTypes.string,
   disabled: React.PropTypes.bool,
@@ -388,7 +388,7 @@ Slider.propTypes = {
   onChange: React.PropTypes.func,
   onAfterChange: React.PropTypes.func,
   tipTransitionName: React.PropTypes.string,
-  withDots: React.PropTypes.bool,
+  dots: React.PropTypes.bool,
   range: React.PropTypes.bool,
 };
 
@@ -400,12 +400,12 @@ Slider.defaultProps = {
   defaultValues: [0, 0],
   defaultIndex: 0,
   marks: [],
-  isIncluded: true,
+  included: true,
   className: '',
   prefixCls: 'rc-slider',
   disabled: false,
   tipTransitionName: '',
-  withDots: false,
+  dots: false,
   range: false,
 };
 

src/Steps.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import rcUtil from 'rc-util';
 
-const Steps = ({className, stepNum, isIncluded, lowerIndex, upperIndex}) => {
+const Steps = ({className, stepNum, included, lowerIndex, upperIndex}) => {
   const dotClassName = className.replace('step', 'dot');
   const unit = 100 / (stepNum - 1);
 
@@ -10,8 +10,8 @@ const Steps = ({className, stepNum, isIncluded, lowerIndex, upperIndex}) => {
     const offset = unit * i + '%';
     const style = { left: offset };
 
-    const isActived = (isIncluded && i <= upperIndex && i >= lowerIndex ) ||
-            (!isIncluded && i === upperIndex);
+    const isActived = (included && i <= upperIndex && i >= lowerIndex ) ||
+            (!included && i === upperIndex);
     const stepClassName = rcUtil.classSet({
       [dotClassName]: true,
       [dotClassName + '-active']: isActived,

tests/index.spec.js

@@ -43,7 +43,7 @@ describe('rc-slider', function () {
     expect(slider.state.upperBound).to.be(0);
 
     var sliderWithDots = React.render(
-      <Slider className='rc-slider' step={20} withDots/>,
+      <Slider className='rc-slider' step={20} dots/>,
       div
     );
     var node1 = $(div);