diff --git a/README.md b/README.md index b1b1521..e67ce02 100644 --- a/README.md +++ b/README.md @@ -102,27 +102,15 @@ ReactDOM.render(, container); defaultValue - number - 0 - If range is `false`, this prop will set the initial position of the handle. - - - defaultValues - [number, number] - [0, 0] - If range is `true`, this prop will set initial positions of handles respectively. + number or [number, number] + 0 or [0, 0] + Set initial positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]` value - number + number or [number, number] - If range is `false`, this prop will set the current position of the handle. - - - values - [number, number] - - If range is `true`, this prop will set current positions of handles respectively. + Set current positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]` marks @@ -131,7 +119,7 @@ ReactDOM.render(, container); Mark every step for the slider, it will ignore the `step` parameter if it has been defined. Does not work with `range` - isIncluded + included boolean true If the value is `true`, it means a continuous value interval, otherwise, it is a independent value. @@ -161,10 +149,10 @@ ReactDOM.render(, container); Set the animation for tooltip if it shows. - withDots + dots bool false - 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. + 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. diff --git a/examples/simple.js b/examples/simple.js index 7f588f8..32d738b 100644 --- a/examples/simple.js +++ b/examples/simple.js @@ -3,6 +3,7 @@ require('rc-slider/assets/index.less'); var React = require('react'); +var ReactDOM = require('react-dom'); var Slider = require('rc-slider'); var style = {width:400,margin:50}; @@ -10,7 +11,7 @@ function onChange(v) { console.log(v); } -React.render( +ReactDOM.render(

基础滑块

@@ -22,15 +23,15 @@ React.render(

基础滑块,step=20 带原点

- +

双滑块

- +

双滑块,step=20

- +

分段式滑块(包含关系)

@@ -38,7 +39,7 @@ React.render(

分段式滑块(并列关系)

- +
, document.getElementById('__react-content')); diff --git a/package.json b/package.json index ca44490..993012b 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "lint" ], "dependencies": { - "rc-tooltip": "2.x", + "rc-tooltip": "~3.0.4", "rc-util": "2.x" } } diff --git a/src/Marks.jsx b/src/Marks.jsx index d4afefa..7a03023 100644 --- a/src/Marks.jsx +++ b/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, diff --git a/src/Slider.jsx b/src/Slider.jsx index 9ea885e..e312fed 100644 --- a/src/Slider.jsx +++ b/src/Slider.jsx @@ -37,15 +37,16 @@ class Slider extends React.Component { let upperBound; let lowerBound; if (props.range) { - const values = (props.values || props.defaultValues); - upperBound = this.trimAlignValue(values[1]); - lowerBound = this.trimAlignValue(values[0]); + const value = (props.value || props.defaultValue || [0, 0]); + upperBound = this.trimAlignValue(value[1]); + lowerBound = this.trimAlignValue(value[0]); } else if (props.marks.length > 0) { upperBound = this.calcValueFromProps(props); } else { // Note: Maybe `value` is `0`. // So, check the existence of `value` with `in`. - const value = ('value' in props ? props.value : props.defaultValue); + const defaultValue = ('defaultValue' in props ? props.defaultValue : 0); + const value = ('value' in props ? props.value : defaultValue); upperBound = this.trimAlignValue(value); } @@ -72,11 +73,11 @@ class Slider extends React.Component { componentWillReceiveProps(nextProps) { if (nextProps.range) { - const values = nextProps.values; - if (values) { + const value = nextProps.value; + if (value) { this.setState({ - upperBound: values[1], - lowerBound: values[0], + upperBound: value[1], + lowerBound: value[0], }); } } else if ('value' in nextProps) { @@ -124,7 +125,12 @@ class Slider extends React.Component { if (props.range) { // `this.state` will not be updated immediately after `this.setState`. // So, create a similar object. - const data = Object.assign({}, state, {[state.handle]: value}); + // const data = Object.assign({}, state, {[state.handle]: value}); + const data = { + upperBound: state.upperBound, + lowerBound: state.lowerBound, + }; + data[state.handle] = value; this.triggerEvents('onChange', [data.lowerBound, data.upperBound]); } else { this.triggerEvents('onChange', value); @@ -154,11 +160,25 @@ class Slider extends React.Component { this.startValue = value; this.startPosition = position; - const {upperBound, lowerBound} = this.state; - const isUpperBoundCloser = Math.abs(upperBound - value) < Math.abs(lowerBound - value); - let valueNeedChanging = (!this.props.range || isUpperBoundCloser) ? 'upperBound' : 'lowerBound'; - const isAtTheSamePoint = (upperBound === lowerBound); - valueNeedChanging = isAtTheSamePoint ? this.state.recent : valueNeedChanging; + const state = this.state; + const {upperBound, lowerBound} = state; + + let valueNeedChanging = 'upperBound'; + if (this.props.range) { + const isLowerBoundCloser = Math.abs(upperBound - value) > Math.abs(lowerBound - value); + if (isLowerBoundCloser) { + valueNeedChanging = 'lowerBound'; + } + + const isAtTheSamePoint = (upperBound === lowerBound); + if (isAtTheSamePoint) { + valueNeedChanging = state.recent; + } + + if (isAtTheSamePoint && (value !== upperBound)) { + valueNeedChanging = value < upperBound ? 'lowerBound' : 'upperBound'; + } + } this.setState({ handle: valueNeedChanging, @@ -167,7 +187,12 @@ class Slider extends React.Component { }); if (this.props.range) { - const data = Object.assign({}, this.state, {[valueNeedChanging]: value}); + // const data = Object.assign({}, state, {[valueNeedChanging]: value}); + const data = { + upperBound: state.upperBound, + lowerBound: state.lowerBound, + }; + data[valueNeedChanging] = value; this.triggerEvents('onChange', [data.lowerBound, data.upperBound]); } else { this.triggerEvents('onChange', value); @@ -305,7 +330,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, isIncluded, dots, withDots, range} = props; const {marks, step, max, min, tipTransitionName, children} = props; const marksLen = marks.length; @@ -319,7 +344,7 @@ class Slider extends React.Component { const lowerOffset = this.calcOffset(lowerBound); let track = null; - if (isIncluded || range) { + if ((included && isIncluded) || range) { const trackClassName = prefixCls + '-track'; track = ; } @@ -338,19 +363,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 || withDots))) { const stepsClassName = prefixCls + '-step'; const stepNum = marksLen > 0 ? marksLen : Math.floor((max - min) / step) + 1; steps = (); + included={(included && isIncluded) || range} />); } let mark = null; if (marksLen > 0) { const markClassName = prefixCls + '-mark'; mark = (); + index={upperIndex} included={(included && isIncluded)} />); } return ( @@ -372,14 +397,19 @@ Slider.propTypes = { min: React.PropTypes.number, max: React.PropTypes.number, step: React.PropTypes.number, - defaultValue: React.PropTypes.number, - defaultValues: React.PropTypes.arrayOf(React.PropTypes.number), + defaultValue: React.PropTypes.oneOfType([ + React.PropTypes.number, + React.PropTypes.arrayOf(React.PropTypes.number), + ]), defaultIndex: React.PropTypes.number, - value: React.PropTypes.number, - values: React.PropTypes.arrayOf(React.PropTypes.number), + value: React.PropTypes.oneOfType([ + React.PropTypes.number, + React.PropTypes.arrayOf(React.PropTypes.number), + ]), index: React.PropTypes.number, marks: React.PropTypes.array, - isIncluded: React.PropTypes.bool, + isIncluded: React.PropTypes.bool, // @Deprecated + included: React.PropTypes.bool, className: React.PropTypes.string, prefixCls: React.PropTypes.string, disabled: React.PropTypes.bool, @@ -388,7 +418,8 @@ Slider.propTypes = { onChange: React.PropTypes.func, onAfterChange: React.PropTypes.func, tipTransitionName: React.PropTypes.string, - withDots: React.PropTypes.bool, + withDots: React.PropTypes.bool, // @Deprecated + dots: React.PropTypes.bool, range: React.PropTypes.bool, }; @@ -396,16 +427,16 @@ Slider.defaultProps = { min: 0, max: 100, step: 1, - defaultValue: 0, - defaultValues: [0, 0], defaultIndex: 0, marks: [], - isIncluded: true, + isIncluded: true, // @Deprecated + included: true, className: '', prefixCls: 'rc-slider', disabled: false, tipTransitionName: '', - withDots: false, + withDots: false, // @Deprecated + dots: false, range: false, }; diff --git a/src/Steps.jsx b/src/Steps.jsx index ea7ec08..da2cdb0 100644 --- a/src/Steps.jsx +++ b/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, diff --git a/tests/index.spec.js b/tests/index.spec.js index b2b5057..57e6341 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -42,8 +42,8 @@ describe('rc-slider', function () { expect(node.find('.rc-slider-track').length).to.be(1); expect(slider.state.upperBound).to.be(0); - var sliderWithDots = React.render( - , + var sliderWithDots = ReactDOM.render( + , div ); var node1 = $(div);