mirror of
https://github.com/wassname/slider.git
synced 2026-09-09 11:35:22 +08:00
update examples at 1429717243780
This commit is contained in:
yiminghe
@@ -1,147 +0,0 @@
|
||||
# rc-slider
|
||||
---
|
||||
|
||||
slider ui component for react
|
||||
|
||||
[![NPM version][npm-image]][npm-url]
|
||||
[](http://spmjs.io/package/rc-slider)
|
||||
[![build status][travis-image]][travis-url]
|
||||
[![Test coverage][coveralls-image]][coveralls-url]
|
||||
[![gemnasium deps][gemnasium-image]][gemnasium-url]
|
||||
[![node version][node-image]][node-url]
|
||||
[![npm download][download-image]][download-url]
|
||||
[](https://saucelabs.com/u/rc-slider)
|
||||
|
||||
[](https://saucelabs.com/u/rc-slider)
|
||||
|
||||
[npm-image]: http://img.shields.io/npm/v/rc-slider.svg?style=flat-square
|
||||
[npm-url]: http://npmjs.org/package/rc-slider
|
||||
[travis-image]: https://img.shields.io/travis/react-component/slider.svg?style=flat-square
|
||||
[travis-url]: https://travis-ci.org/react-component/slider
|
||||
[coveralls-image]: https://img.shields.io/coveralls/react-component/slider.svg?style=flat-square
|
||||
[coveralls-url]: https://coveralls.io/r/react-component/slider?branch=master
|
||||
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/slider.svg?style=flat-square
|
||||
[gemnasium-url]: https://gemnasium.com/react-component/slider
|
||||
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
|
||||
[node-url]: http://nodejs.org/download/
|
||||
[download-image]: https://img.shields.io/npm/dm/rc-slider.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/rc-slider
|
||||
|
||||
## Screenshots
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1ki8fXeprXXXXXXXX.png" width="550"/>
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1pPhfXhBqXXXXXXXX.png" width="550"/>
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1wO8fXd4rXXXXXXXX.png" width="550"/>
|
||||
|
||||
|
||||
## Feature
|
||||
|
||||
* support ie8,ie8+,chrome,firefox,safari
|
||||
|
||||
### Keyboard
|
||||
|
||||
|
||||
|
||||
## install
|
||||
|
||||
[](https://npmjs.org/package/rc-slider)
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var Rcslider = require('rc-slider');
|
||||
var React = require('react');
|
||||
React.render(<Rcslider />, container);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### props
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>String</td>
|
||||
<td>rc-slider</td>
|
||||
<td>additional css class of root dom node</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>min</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>The minimum value of the slider</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>max</td>
|
||||
<td>number</td>
|
||||
<td>100</td>
|
||||
<td>The maximum value of the slider</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>step</td>
|
||||
<td>number</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>Determines the initial positions of the handles.</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</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>index</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>For step or marks slider, determine the initial positions of the handles.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>If true the handles can't be moved.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Development
|
||||
|
||||
```
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
http://localhost:8000/examples/
|
||||
|
||||
online example: http://react-component.github.io/slider/build/examples/
|
||||
|
||||
## Test Case
|
||||
|
||||
http://localhost:8000/tests/runner.html?coverage
|
||||
|
||||
## Coverage
|
||||
|
||||
http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage
|
||||
|
||||
## License
|
||||
|
||||
rc-slider is released under the MIT license.
|
||||
@@ -1,124 +0,0 @@
|
||||
@prefixClass: rc-slider;
|
||||
|
||||
// color
|
||||
@disabledColor: #e7eaec;
|
||||
|
||||
.@{prefixClass} {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
background-color: #e9e9e9;
|
||||
|
||||
&-track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background-color: #b2e9fd;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-handle {
|
||||
position: absolute;
|
||||
margin-left: -7px;
|
||||
margin-top: -5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
cursor: default;
|
||||
border-radius: 50%;
|
||||
border: solid 2px #d9d9d9;
|
||||
background-color: #fff;
|
||||
z-index: 2;
|
||||
|
||||
&:hover {
|
||||
border-color: #999;
|
||||
}
|
||||
&-active {
|
||||
border-color: #8cddfc;
|
||||
&:active {
|
||||
border-color: #2db7f5;
|
||||
background-color: #2db7f5;
|
||||
box-shadow: 0 0 0 5px rgba(45, 183, 245, .3);
|
||||
}
|
||||
&:hover {
|
||||
border-color: #23c0fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-mark {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&-mark-text {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
line-height: 1.5;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
&-active {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&-step {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-dot {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
margin-left: -4px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border: 2px solid #fff;
|
||||
background-color: #bcbcbc;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
&:first-child {
|
||||
margin-left: -2px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-left: -6px;
|
||||
}
|
||||
&-active {
|
||||
background-color: #8cddfc;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
background-color: @disabledColor;
|
||||
|
||||
.@{prefixClass}-track {
|
||||
background-color: @disabledColor;
|
||||
}
|
||||
|
||||
.@{prefixClass}-handle {
|
||||
border-color: @disabledColor;
|
||||
background-color: #fff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.@{prefixClass}-mark-text, .dot {
|
||||
cursor: not-allowed!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
placeholder
|
||||
@@ -1,8 +0,0 @@
|
||||
/** @jsx React.DOM */
|
||||
// use jsx to render html, do not modify simple.html
|
||||
require('rc-slider/assets/index.css');
|
||||
var Slider = require('rc-slider');
|
||||
var React = require('react');
|
||||
// React.render(<Sliders marks={["一","二","三","四","五"]} index={3}/>, document.getElementById('__react-content'));
|
||||
// React.render(<Slider className='rc-slider' step={20}/>, document.getElementById('__react-content'));
|
||||
React.render(<Slider />, document.getElementById('__react-content'));
|
||||
@@ -1,56 +0,0 @@
|
||||
/**
|
||||
* Copyright 2013-2014 Facebook, Inc.
|
||||
*
|
||||
* This file contains a modified version of:
|
||||
* https://github.com/facebook/react/blob/v0.12.0/src/vendor/stubs/EventListener.js
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*
|
||||
* TODO: remove in favour of solution provided by:
|
||||
* https://github.com/facebook/react/issues/285
|
||||
*/
|
||||
|
||||
/**
|
||||
* Does not take into account specific nature of platform.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var EventListener = {
|
||||
/**
|
||||
* Listen to DOM events during the bubble phase.
|
||||
*
|
||||
* @param {DOMEventTarget} target DOM element to register listener on.
|
||||
* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
|
||||
* @param {function} callback Callback function.
|
||||
* @return {object} Object with a `remove` method.
|
||||
*/
|
||||
listen: function listen(target, eventType, callback) {
|
||||
if (target.addEventListener) {
|
||||
target.addEventListener(eventType, callback, false);
|
||||
return {
|
||||
remove: function remove() {
|
||||
target.removeEventListener(eventType, callback, false);
|
||||
}
|
||||
};
|
||||
} else if (target.attachEvent) {
|
||||
target.attachEvent('on' + eventType, callback);
|
||||
return {
|
||||
remove: function remove() {
|
||||
target.detachEvent('on' + eventType, callback);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = EventListener;
|
||||
-389
@@ -1,389 +0,0 @@
|
||||
/** @jsx React.DOM */
|
||||
var React = require('react');
|
||||
var EventListener = require('./EventListener');
|
||||
|
||||
function pauseEvent(e) {
|
||||
if (e.stopPropagation) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
}
|
||||
e.cancelBubble = true;
|
||||
e.returnValue = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
function prefixClsFn(prefixCls) {
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
return args.map((s)=> {
|
||||
return prefixCls + '-' + s;
|
||||
}).join(' ');
|
||||
}
|
||||
|
||||
var Slider = React.createClass({
|
||||
propTypes: {
|
||||
min: React.PropTypes.number,
|
||||
max: React.PropTypes.number,
|
||||
step: React.PropTypes.number,
|
||||
value: React.PropTypes.number,
|
||||
index: React.PropTypes.number,
|
||||
marks: React.PropTypes.array,
|
||||
className: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
onBeforeChange: React.PropTypes.func,
|
||||
onChange: React.PropTypes.func,
|
||||
onAfterChange: React.PropTypes.func
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: 0,
|
||||
marks: [],
|
||||
className: 'rc-slider',
|
||||
disabled: false,
|
||||
index: 0
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
var props = this.props;
|
||||
var value = this._trimAlignValue(props.value);
|
||||
var marksLen = props.marks.length;
|
||||
if (marksLen > 0) {
|
||||
value = ((props.max - props.min) / (marksLen - 1)) * (props.index);
|
||||
value = value.toFixed(5);
|
||||
}
|
||||
|
||||
return {
|
||||
upperBound: 0,
|
||||
sliderLength: 0,
|
||||
value: value,
|
||||
active: props.disabled ? '' : ((value > props.min || props.index > 0) ? 'active' : '')
|
||||
};
|
||||
},
|
||||
|
||||
componentWillReceiveProps: function(newProps) {
|
||||
var value = newProps.value;
|
||||
this.state.value = this._trimAlignValue(value, newProps);
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
this._onHandleResizeListener = EventListener.listen(window, 'resize', this.handleResize);
|
||||
this.handleResize();
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
if (this._onHandleResizeListener) {
|
||||
this._onHandleResizeListener.remove();
|
||||
}
|
||||
},
|
||||
|
||||
getValue: function() {
|
||||
return this.state.value;
|
||||
},
|
||||
|
||||
getIndex: function() {
|
||||
var props = this.props;
|
||||
if (props.marks.length === 0) {
|
||||
return;
|
||||
}
|
||||
var value = this.state.value;
|
||||
var unit = (props.max - props.min) / (props.marks.length - 1);
|
||||
return Math.floor(value / unit);
|
||||
},
|
||||
|
||||
_trimAlignValue: function(val, props) {
|
||||
props = props || this.props;
|
||||
|
||||
var step = props.marks.length > 0 ? (props.max - props.min) / (props.marks.length - 1) : props.step;
|
||||
|
||||
if (val <= props.min) {
|
||||
val = props.min;
|
||||
}
|
||||
if (val >= props.max) {
|
||||
val = props.max;
|
||||
}
|
||||
|
||||
var valModStep = (val - props.min) % step;
|
||||
var alignValue = val - valModStep;
|
||||
|
||||
if (Math.abs(valModStep) * 2 >= step) {
|
||||
alignValue += (valModStep > 0) ? step : (-step);
|
||||
}
|
||||
|
||||
return parseFloat(alignValue.toFixed(5));
|
||||
},
|
||||
|
||||
_calcOffset: function(value) {
|
||||
var ratio = (value - this.props.min) / (this.props.max - this.props.min);
|
||||
return ratio * this.state.upperBound;
|
||||
},
|
||||
|
||||
_calcValue: function(offset) {
|
||||
var ratio = offset / this.state.upperBound;
|
||||
return ratio * (this.props.max - this.props.min) + this.props.min;
|
||||
},
|
||||
|
||||
_calValueByPos: function (position, callback) {
|
||||
var pixelOffset = position - this.state.sliderStart;
|
||||
// pixelOffset -= (this.state.handleSize / 2);
|
||||
|
||||
var nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
|
||||
|
||||
this.setState({value: nextValue, active: 'active'}, callback);
|
||||
},
|
||||
|
||||
_getMousePosition: function(e) {
|
||||
return e.pageX || (e.clientX + document.documentElement.scrollLeft);
|
||||
},
|
||||
|
||||
_triggerEvents: function(event) {
|
||||
var props = this.props;
|
||||
var hasMarks = props.marks && props.marks.length > 0;
|
||||
if (props[event]) {
|
||||
props[event](hasMarks ? this.getIndex() : this.state.value);
|
||||
}
|
||||
},
|
||||
|
||||
_addEventHandles: function() {
|
||||
this._onMouseMoveListener = EventListener.listen(document, 'mousemove', this._onMouseMove);
|
||||
this._onMouseUpListener = EventListener.listen(document, 'mouseup', this._onMouseUp);
|
||||
},
|
||||
|
||||
_removeEventHandles: function () {
|
||||
if (this._onMouseMoveListener) {
|
||||
this._onMouseMoveListener.remove();
|
||||
}
|
||||
|
||||
if (this._onMouseUpListener) {
|
||||
this._onMouseUpListener.remove();
|
||||
}
|
||||
},
|
||||
|
||||
_start: function(position) {
|
||||
if (document.activeElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
|
||||
this._triggerEvents('onBeforeChange');
|
||||
|
||||
this.setState({
|
||||
startValue: this.state.value,
|
||||
startPosition: position
|
||||
});
|
||||
},
|
||||
|
||||
_end: function() {
|
||||
this._removeEventHandles();
|
||||
this.setState(this._triggerEvents.bind(this, 'onAfterChange'));
|
||||
},
|
||||
|
||||
_onMouseUp: function() {
|
||||
this._end();
|
||||
},
|
||||
|
||||
_onMouseMove: function(e) {
|
||||
pauseEvent(e);
|
||||
var position = this._getMousePosition(e);
|
||||
var props = this.props;
|
||||
var state = this.state;
|
||||
|
||||
var value = state.value;
|
||||
var oldValue = value;
|
||||
|
||||
var diffPosition = position - state.startPosition;
|
||||
|
||||
var diffValue = diffPosition / (state.sliderLength) * (props.max - props.min);
|
||||
var newValue = this._trimAlignValue(state.startValue + diffValue);
|
||||
|
||||
value = newValue;
|
||||
|
||||
if (newValue !== oldValue) {
|
||||
this.setState({value: value, active: 'active'} ,this._triggerEvents.bind(this, 'onChange'));
|
||||
}
|
||||
},
|
||||
|
||||
handleResize: function() {
|
||||
var slider = this.refs.slider.getDOMNode();
|
||||
var rect = slider.getBoundingClientRect();
|
||||
|
||||
var sliderMin = rect.left;
|
||||
var sliderMax = rect.right;
|
||||
|
||||
this.setState({
|
||||
upperBound: slider.clientWidth,
|
||||
sliderLength: Math.abs(sliderMax - sliderMin),
|
||||
sliderStart: sliderMin
|
||||
});
|
||||
},
|
||||
|
||||
handleMouseDown: function() {
|
||||
return (e) => {
|
||||
if (this.props.disabled) {
|
||||
return;
|
||||
}
|
||||
var position = this._getMousePosition(e);
|
||||
this._start(position);
|
||||
this._addEventHandles();
|
||||
pauseEvent(e);
|
||||
};
|
||||
},
|
||||
|
||||
handleSliderMouseDown: function(e) {
|
||||
if (this.props.disabled) {
|
||||
return;
|
||||
}
|
||||
var position = this._getMousePosition(e);
|
||||
this._calValueByPos(position,
|
||||
() => {
|
||||
this._triggerEvents('onChange');
|
||||
this._start(position);
|
||||
this._addEventHandles();
|
||||
}
|
||||
);
|
||||
pauseEvent(e);
|
||||
},
|
||||
|
||||
renderSteps: function() {
|
||||
var props = this.props;
|
||||
var marksLen = props.marks.length;
|
||||
var stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1;
|
||||
var unit = this.state.sliderLength / (stepNum - 1);
|
||||
|
||||
var prefixCls = props.className;
|
||||
var stepClassName = prefixClsFn(prefixCls, 'step');
|
||||
|
||||
var elements = [];
|
||||
for (var i = 0; i < stepNum; i++) {
|
||||
var offset = unit * i;
|
||||
var style = {
|
||||
left: offset.toFixed(5)
|
||||
};
|
||||
var className = prefixClsFn(prefixCls, 'dot');
|
||||
if (i <= this.getIndex() || (this._calcValue(offset) <= this.getValue())) {
|
||||
className = prefixClsFn(prefixCls, 'dot', 'dot-active');
|
||||
}
|
||||
elements[i] = (
|
||||
<span className={className} style={style} ref={'step'+i}></span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={stepClassName}>
|
||||
{elements}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
renderMark: function(i) {
|
||||
var marks = this.props.marks;
|
||||
var marksLen = marks.length;
|
||||
var unit = this.state.sliderLength / (marksLen - 1);
|
||||
var offset = unit * i;
|
||||
|
||||
var style = {
|
||||
width: (unit / 2).toFixed(5)
|
||||
};
|
||||
|
||||
if (i === (marksLen - 1)) {
|
||||
style.right = '0';
|
||||
style.width = 'auto';
|
||||
}else {
|
||||
style.left = (i > 0 ? (offset - (unit / 4)).toFixed(5) : offset);
|
||||
}
|
||||
|
||||
var prefixCls = this.props.className;
|
||||
var className = prefixClsFn(prefixCls, 'mark-text');
|
||||
|
||||
if (i <= this.getIndex()) {
|
||||
className = prefixClsFn(prefixCls, 'mark-text', 'mark-text-active');
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={className} style={style}>{this.props.marks[i]}</span>
|
||||
);
|
||||
},
|
||||
|
||||
renderMarks: function() {
|
||||
var marks = this.props.marks;
|
||||
var marksLen = marks.length;
|
||||
var elements = [];
|
||||
for (var i = 0; i < marksLen; i++) {
|
||||
elements[i] = this.renderMark(i);
|
||||
}
|
||||
|
||||
var prefixCls = this.props.className;
|
||||
var className = prefixClsFn(prefixCls, 'mark');
|
||||
|
||||
return (
|
||||
<div className={className} onMouseDown={this.handleSliderMouseDown}>
|
||||
{elements}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
renderHandle: function(offset) {
|
||||
var handleStyle = {
|
||||
left: offset
|
||||
};
|
||||
|
||||
var prefixCls = this.props.className;
|
||||
var className = prefixClsFn(prefixCls, 'handle');
|
||||
|
||||
if (this.state.active) {
|
||||
className = prefixClsFn(prefixCls, 'handle', 'handle-active');
|
||||
}
|
||||
|
||||
return (
|
||||
<a className={className}
|
||||
ref = "handle"
|
||||
style = {handleStyle}
|
||||
href = "#"
|
||||
onMouseDown={this.handleMouseDown}></a>
|
||||
);
|
||||
},
|
||||
|
||||
renderTrack: function(offset) {
|
||||
var style = {
|
||||
width: offset
|
||||
};
|
||||
|
||||
var prefixCls = this.props.className;
|
||||
var trackClassName = prefixClsFn(prefixCls, 'track');
|
||||
|
||||
return (
|
||||
<div className={trackClassName} ref="track" style={style}></div>
|
||||
);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var state = this.state;
|
||||
var props = this.props;
|
||||
|
||||
var value = state.value;
|
||||
var offset = this._calcOffset(value);
|
||||
|
||||
var track = this.renderTrack(offset);
|
||||
var handles = this.renderHandle(offset);
|
||||
var steps = (props.step > 1 || props.marks.length > 0) ? this.renderSteps() : null;
|
||||
var sliderMarks = (props.marks.length > 0) ? this.renderMarks() : null;
|
||||
|
||||
var prefixCls = props.className;
|
||||
var sliderClassName = props.disabled ? prefixClsFn(prefixCls, 'disabled') : prefixCls;
|
||||
|
||||
return (
|
||||
<div className={sliderClassName} ref="slider" onMouseDown={this.handleSliderMouseDown}>
|
||||
{track}
|
||||
{handles}
|
||||
{steps}
|
||||
{sliderMarks}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Slider;
|
||||
@@ -1,56 +0,0 @@
|
||||
{
|
||||
"name": "rc-slider",
|
||||
"version": "1.0.0",
|
||||
"description": "slider ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"react-slider",
|
||||
"slider"
|
||||
],
|
||||
"homepage": "http://github.com/react-component/slider",
|
||||
"author": "sima.zhang1990@gmail.com",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:react-component/slider.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "http://github.com/react-component/slider/issues"
|
||||
},
|
||||
"licenses": "MIT",
|
||||
"spm": {
|
||||
"dependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"config":{
|
||||
"port": 8000
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rc-tools run build",
|
||||
"less": "rc-tools run less",
|
||||
"gh-pages": "rc-tools run gh-pages",
|
||||
"history": "rc-tools run history",
|
||||
"start": "node-dev --harmony node_modules/.bin/rc-server",
|
||||
"publish": "spm publish && rc-tools run tag",
|
||||
"lint": "rc-tools run lint",
|
||||
"test": "",
|
||||
"saucelabs": "rc-tools run saucelabs",
|
||||
"browser-test": "rc-tools run browser-test",
|
||||
"browser-test-cover": "rc-tools run browser-test-cover"
|
||||
},
|
||||
"devDependencies": {
|
||||
"expect.js": "0.3.x",
|
||||
"precommit-hook": "1.x",
|
||||
"rc-server": "2.x",
|
||||
"rc-tools": "2.x",
|
||||
"react": "0.13.x",
|
||||
"node-dev":"2.x",
|
||||
"jquery": "^1.11.2",
|
||||
"css-loader": "^0.9.1"
|
||||
},
|
||||
"precommit": [
|
||||
"lint",
|
||||
"less"
|
||||
]
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
/** @jsx React.DOM */
|
||||
var expect = require('expect.js');
|
||||
var Slider = require('../index.js');
|
||||
var React = require('react');
|
||||
var TestUtils = React.addons.TestUtils;
|
||||
var Simulate = TestUtils.Simulate;
|
||||
var $ = require('jquery');
|
||||
|
||||
describe('rc-slider', function () {
|
||||
this.timeout(5000);
|
||||
var div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
|
||||
afterEach(function () {
|
||||
React.unmountComponentAtNode(div);
|
||||
});
|
||||
|
||||
it('should render a simple slider with value correctly!', function () {
|
||||
var slider = React.render(
|
||||
<Slider className='rc-slider' value={40}/>,
|
||||
div
|
||||
);
|
||||
var node = $(div);
|
||||
expect(node.find('.rc-slider').length).to.be(1);
|
||||
expect(node.find('.rc-slider-handle').length).to.be(1);
|
||||
expect(node.find('.rc-slider-track').length).to.be(1);
|
||||
expect(slider.getValue()).to.be(40);
|
||||
var trackWidth = node.find('.rc-slider-track')[0].style.width;
|
||||
expect(trackWidth).to.eql(node.find('.rc-slider-handle')[0].style.left);
|
||||
});
|
||||
|
||||
it('should render a slider with correct numbers of step!', function () {
|
||||
var slider = React.render(
|
||||
<Slider className='rc-slider' step={20}/>,
|
||||
div
|
||||
);
|
||||
var node = $(div);
|
||||
expect(node.find('.rc-slider').length).to.be(1);
|
||||
expect(node.find('.rc-slider-handle').length).to.be(1);
|
||||
expect(node.find('.rc-slider-track').length).to.be(1);
|
||||
expect(node.find('.rc-slider-dot').length).to.be(6);
|
||||
expect(slider.getValue()).to.be(0);
|
||||
});
|
||||
|
||||
it('should render a slider with marks correctly!', function () {
|
||||
var slider = React.render(
|
||||
<Slider marks={["一","二","三","四","五"]} index={3} />,
|
||||
div
|
||||
);
|
||||
var node = $(div);
|
||||
expect(node.find('.rc-slider').length).to.be(1);
|
||||
expect(node.find('.rc-slider-handle').length).to.be(1);
|
||||
expect(node.find('.rc-slider-track').length).to.be(1);
|
||||
expect(node.find('.rc-slider-dot').length).to.be(slider.props.marks.length);
|
||||
expect(node.find('.rc-slider-mark').length).to.be(1);
|
||||
expect(node.find('.rc-slider-mark-text').length).to.be(slider.props.marks.length);
|
||||
expect(slider.getIndex()).to.be(3);
|
||||
});
|
||||
|
||||
it('should mouseDown works!', function (done) {
|
||||
var slider = React.render(
|
||||
<Slider marks={["一","二","三","四","五"]} />,
|
||||
div
|
||||
);
|
||||
var selectedStep = slider.refs.step3.getDOMNode();
|
||||
|
||||
Simulate.mouseDown(selectedStep);
|
||||
|
||||
setTimeout( function() {
|
||||
expect(slider.state.active).to.be('active');
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
stub
|
||||
Reference in New Issue
Block a user