wassname/slider
1
0
Fork 0
mirror of https://github.com/wassname/slider.git synced 2026-09-09 11:35:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

correct code style

Browse Source
This commit is contained in:
simaQ
2015-04-19 16:37:28 +08:00
parent 612d0660ed
commit c90ff5f176
2 changed files with 81 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/simple.js
+1 -1
View File
@@ -3,6 +3,6 @@
require('rc-slider/assets/index.css');
var Slider = require('rc-slider');
var React = require('react');
// React.render(<Slider marks={["一","二","三","四","五"]} index={3}/>, document.getElementById('__react-content'));
// 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'));
lib/Slider.js
+80 -64
View File
@@ -2,8 +2,12 @@
var React = require('react');
function pauseEvent(e) {
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) {
e.stopPropagation();
}
if (e.preventDefault) {
e.preventDefault();
}
e.cancelBubble = true;
e.returnValue = false;
return false;
@@ -24,7 +28,7 @@ var Slider = React.createClass({
onAfterChange: React.PropTypes.func
},
getDefaultProps: function () {
getDefaultProps: function() {
return {
min: 0,
max: 100,
@@ -37,12 +41,12 @@ var Slider = React.createClass({
};
},
getInitialState: function () {
getInitialState: function() {
var props = this.props;
var value = props.value;
var marksLen = props.marks.length;
if(marksLen>0) {
value = ((props.max-props.min) / (marksLen-1))*(props.index);
if (marksLen > 0) {
value = ((props.max - props.min) / (marksLen - 1)) * (props.index);
value = value.toFixed(5);
}
@@ -50,43 +54,49 @@ var Slider = React.createClass({
upperBound: 0,
sliderLength: 0,
value: value,
active: props.disabled ? '' : ((value>0 || props.index>0) ? 'active' : '')
active: props.disabled ? '' : ((value > 0 || props.index > 0) ? 'active' : '')
};
},
componentWillReceiveProps: function (newProps) {
componentWillReceiveProps: function(newProps) {
var value = newProps.value;
this.state.value = this._trimAlignValue(value, newProps);
},
componentDidMount: function () {
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
},
componentWillUnmount: function () {
componentWillUnmount: function() {
window.removeEventListener('resize', this.handleResize);
},
getValue: function () {
getValue: function() {
return this.state.value;
},
getIndex: function () {
getIndex: function() {
var props = this.props;
if (props.marks.length === 0) return;
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);
var unit = (props.max - props.min) / (props.marks.length - 1);
return Math.floor(value / unit);
},
_trimAlignValue: function (val, props) {
_trimAlignValue: function(val, props) {
props = props || this.props;
var step = props.marks.length>0 ? (props.max-props.min) / (props.marks.length-1) : props.step;
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;
if (val <= props.min) {
val = props.min;
}
if (val >= props.max) {
val = props.max;
}
var valModStep = (val - props.min) % step;
var alignValue = val - valModStep;
@@ -98,12 +108,12 @@ var Slider = React.createClass({
return parseFloat(alignValue.toFixed(5));
},
_calcOffset: function (value) {
_calcOffset: function(value) {
var ratio = (value - this.props.min) / (this.props.max - this.props.min);
return ratio * this.state.upperBound;
},
_calcValue: function (offset) {
_calcValue: function(offset) {
var ratio = offset / this.state.upperBound;
return ratio * (this.props.max - this.props.min) + this.props.min;
},
@@ -117,13 +127,13 @@ var Slider = React.createClass({
this.setState({value: nextValue, active: 'active'}, callback.bind(this));
},
_triggerEvents: function (event) {
_triggerEvents: function(event) {
if (this.props[event]) {
this.props[event](this.state.value);
}
},
_addEventHandles: function (eventMap) {
_addEventHandles: function(eventMap) {
for (var key in eventMap) {
document.addEventListener(key, eventMap[key], false);
}
@@ -135,15 +145,17 @@ var Slider = React.createClass({
}
},
_getMouseEventMap: function () {
_getMouseEventMap: function() {
return {
'mousemove': this._onMouseMove,
'mouseup': this._onMouseUp
}
mousemove: this._onMouseMove,
mouseup: this._onMouseUp
};
},
_start: function (position) {
if (document.activeElement) document.activeElement.blur();
_start: function(position) {
if (document.activeElement) {
document.activeElement.blur();
}
this._triggerEvents('onBeforeChange');
@@ -153,17 +165,17 @@ var Slider = React.createClass({
});
},
_end: function (eventMap) {
_end: function(eventMap) {
this._removeEventHandles(eventMap);
this.setState(this._triggerEvents.bind(this, 'onAfterChange'));
},
_onMouseUp: function () {
_onMouseUp: function() {
this._end(this._getMouseEventMap());
},
_onMouseMove: function (e) {
var position = e['pageX'];
_onMouseMove: function(e) {
var position = e.pageX;
var props = this.props;
var state = this.state;
@@ -183,33 +195,37 @@ var Slider = React.createClass({
}
},
handleResize: function () {
handleResize: function() {
var slider = this.refs.slider.getDOMNode();
var rect = slider.getBoundingClientRect();
var sliderMin = rect['left'];
var sliderMax = rect['right'];
var sliderMin = rect.left;
var sliderMax = rect.right;
this.setState({
upperBound: slider['clientWidth'],
upperBound: slider.clientWidth,
sliderLength: Math.abs(sliderMax - sliderMin),
sliderStart: sliderMin
});
},
handleMouseDown: function () {
return function (e) {
if (this.props.disabled) return;
var position = e['pageX'];
handleMouseDown: function() {
return function(e) {
if (this.props.disabled) {
return;
}
var position = e.pageX;
this._start(position);
this._addEventHandles(this._getMouseEventMap());
pauseEvent(e);
}.bind(this);
},
handleSliderMouseDown: function (e) {
if (this.props.disabled) return;
var position = e['pageX'];
this._calValueByPos(position, function () {
handleSliderMouseDown: function(e) {
if (this.props.disabled) {
return;
}
var position = e.pageX;
this._calValueByPos(position, function() {
this._triggerEvents('onChange');
this._start(position);
this._addEventHandles(this._getMouseEventMap());
@@ -217,18 +233,18 @@ var Slider = React.createClass({
pauseEvent(e);
},
renderSteps: function () {
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 stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1;
var unit = this.state.sliderLength / (stepNum - 1);
var stepClassName = props.className + '-step';
var elements = [];
for(var i=0; i<stepNum; i++) {
for (var i = 0; i < stepNum; i++) {
var style = {
left: (unit*i).toFixed(5) + 'px'
left: (unit * i).toFixed(5) + 'px'
};
elements[i] = (
<span className='dot' style={style} ref={'step'+i}></span>
@@ -245,18 +261,18 @@ var Slider = React.createClass({
renderMark: function(i) {
var marks = this.props.marks;
var marksLen = marks.length;
var unit = this.state.sliderLength / (marksLen-1);
var offset = unit*i;
var unit = this.state.sliderLength / (marksLen - 1);
var offset = unit * i;
var style = {
width: (unit/2).toFixed(5) + 'px'
width: (unit / 2).toFixed(5) + 'px'
};
if(i===(marksLen-1)) {
style['right'] = '0';
style['width'] = 'auto';
}else{
style['left'] = (i>0 ? (offset - (unit/4)).toFixed(5) : offset)+ 'px';
if (i === (marksLen - 1)) {
style.right = '0';
style.width = 'auto';
}else {
style.left = (i > 0 ? (offset - (unit / 4)).toFixed(5) : offset) + 'px';
}
var className = this.props.className + '-mark-text ';
@@ -269,7 +285,7 @@ var Slider = React.createClass({
var marks = this.props.marks;
var marksLen = marks.length;
var elements = [];
for(var i=0; i<marksLen; i++) {
for (var i = 0; i < marksLen; i++) {
elements[i] = this.renderMark(i);
}
@@ -280,7 +296,7 @@ var Slider = React.createClass({
);
},
renderHandle: function (offset) {
renderHandle: function(offset) {
var handleStyle = {
left: offset + 'px'
};
@@ -295,7 +311,7 @@ var Slider = React.createClass({
);
},
renderTrack: function (offset) {
renderTrack: function(offset) {
var style = {
left: 0,
width: offset
@@ -306,7 +322,7 @@ var Slider = React.createClass({
);
},
render: function () {
render: function() {
var state = this.state;
var props = this.props;
@@ -315,8 +331,8 @@ var Slider = React.createClass({
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 steps = (props.step > 1 || props.marks.length > 0) ? this.renderSteps() : null;
var sliderMarks = (props.marks.length > 0) ? this.renderMarks() : null;
var sliderClassName = props.className + (props.disabled ? ' '+props.className+ '-disabled' : '');