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

style: update code style

Browse Source
This commit is contained in:
Benjy Cui
2016-08-12 15:40:06 +08:00
parent 8fd94b4eb1
commit bc2da18f46
12 changed files with 71 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/custom-handles.js
+2 -2
View File
@@ -4,7 +4,7 @@ const React = require('react');
const ReactDOM = require('react-dom');
const Slider = require('rc-slider');
const wrapperStyle = {width: 400, margin: 50};
const wrapperStyle = { width: 400, margin: 50 };
const handleStyle = {
position: 'absolute',
@@ -20,7 +20,7 @@ const handleStyle = {
};
const CustomHandle = props => {
const style = Object.assign({left: props.offset + '%'}, handleStyle);
const style = Object.assign({ left: props.offset + '%' }, handleStyle);
return (
<div style={style}>val: {props.value}</div>
);
examples/marks.js
+1 -1
View File
@@ -4,7 +4,7 @@ const React = require('react');
const ReactDOM = require('react-dom');
const Slider = require('rc-slider');
const style = {width: 400, margin: 50};
const style = { width: 400, margin: 50 };
const marks = {
'-10': '-10°C',
0: <strong>0°C</strong>,
examples/range.js
+13 -13
View File
@@ -5,37 +5,37 @@ const React = require('react');
const ReactDOM = require('react-dom');
const Slider = require('rc-slider');
const style = {width: 400, margin: 50};
const style = { width: 400, margin: 50 };
function log(value) {
console.log(value);
}
const CustomizedRange = React.createClass({
getInitialState: function() {
getInitialState() {
return {
lowerBound: 20,
upperBound: 40,
value: [20, 40],
};
},
onLowerBoundChange: function(e) {
onLowerBoundChange(e) {
this.setState({ lowerBound: +e.target.value });
},
onUpperBoundChange: function(e) {
onUpperBoundChange(e) {
this.setState({ upperBound: +e.target.value });
},
onSliderChange: function(value) {
onSliderChange(value) {
log(value);
this.setState({
value: value,
value,
});
},
handleApply: function() {
handleApply() {
const { lowerBound, upperBound } = this.state;
this.setState({ value: [lowerBound, upperBound]});
this.setState({ value: [lowerBound, upperBound] });
},
render: function() {
render() {
return (
<div>
<label>LowerBound: </label>
@@ -59,20 +59,20 @@ const DynamicBounds = React.createClass({
max: 100,
};
},
onSliderChange: function(value) {
onSliderChange(value) {
log(value);
},
onMinChange: function(e) {
onMinChange(e) {
this.setState({
min: +e.target.value || 0,
});
},
onMaxChange: function(e) {
onMaxChange(e) {
this.setState({
max: +e.target.value || 100,
});
},
render: function() {
render() {
return (
<div>
<label>Min: </label>
examples/slider.js
+11 -11
View File
@@ -5,7 +5,7 @@ const React = require('react');
const ReactDOM = require('react-dom');
const Slider = require('rc-slider');
const style = {width: 400, margin: 50};
const style = { width: 400, margin: 50 };
function log(value) {
console.log(value);
@@ -17,46 +17,46 @@ function percentFormatter(v) {
}
const CustomizedSlider = React.createClass({
getInitialState: function() {
getInitialState() {
return {
value: 50,
};
},
onSliderChange: function(value) {
onSliderChange(value) {
log(value);
this.setState({
value: value,
value,
});
},
onAfterChange: function(value) {
onAfterChange(value) {
console.log(value);
},
render: function() {
render() {
return <Slider value={this.state.value} onChange={this.onSliderChange} onAfterChange={this.onAfterChange} />;
},
});
const DynamicBounds = React.createClass({
getInitialState: function() {
getInitialState() {
return {
min: 0,
max: 100,
};
},
onSliderChange: function(value) {
onSliderChange(value) {
log(value);
},
onMinChange: function(e) {
onMinChange(e) {
this.setState({
min: +e.target.value || 0,
});
},
onMaxChange: function(e) {
onMaxChange(e) {
this.setState({
max: +e.target.value || 100,
});
},
render: function() {
render() {
return (
<div>
<label>Min: </label>
examples/v-marks.js
+2 -2
View File
@@ -4,8 +4,8 @@ const React = require('react');
const ReactDOM = require('react-dom');
const Slider = require('rc-slider');
const style = {float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50};
const parentStyle = {overflow: 'hidden'};
const style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };
const parentStyle = { overflow: 'hidden' };
const marks = {
'-10': '-10°C',
examples/v-range.js
+14 -14
View File
@@ -5,38 +5,38 @@ const React = require('react');
const ReactDOM = require('react-dom');
const Slider = require('rc-slider');
const style = {float: 'left', width: 180, height: 400, marginBottom: 160, marginLeft: 50};
const parentStyle = {overflow: 'hidden'};
const style = { float: 'left', width: 180, height: 400, marginBottom: 160, marginLeft: 50 };
const parentStyle = { overflow: 'hidden' };
function log(value) {
console.log(value);
}
const CustomizedRange = React.createClass({
getInitialState: function() {
getInitialState() {
return {
lowerBound: 20,
upperBound: 40,
value: [20, 40],
};
},
onLowerBoundChange: function(e) {
onLowerBoundChange(e) {
this.setState({ lowerBound: +e.target.value });
},
onUpperBoundChange: function(e) {
onUpperBoundChange(e) {
this.setState({ upperBound: +e.target.value });
},
onSliderChange: function(value) {
onSliderChange(value) {
log(value);
this.setState({
value: value,
value,
});
},
handleApply: function() {
handleApply() {
const { lowerBound, upperBound } = this.state;
this.setState({ value: [lowerBound, upperBound]});
this.setState({ value: [lowerBound, upperBound] });
},
render: function() {
render() {
return (
<div style={style}>
<Slider range vertical allowCross={false} value={this.state.value} onChange={this.onSliderChange} />
@@ -59,20 +59,20 @@ const DynamicBounds = React.createClass({
max: 100,
};
},
onSliderChange: function(value) {
onSliderChange(value) {
log(value);
},
onMinChange: function(e) {
onMinChange(e) {
this.setState({
min: +e.target.value || 0,
});
},
onMaxChange: function(e) {
onMaxChange(e) {
this.setState({
max: +e.target.value || 100,
});
},
render: function() {
render() {
return (
<div style={style}>
<Slider range vertical defaultValue={[20, 50]} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
examples/v-slider.js
+11 -11
View File
@@ -5,8 +5,8 @@ const React = require('react');
const ReactDOM = require('react-dom');
const Slider = require('rc-slider');
const style = {float: 'left', width: 200, height: 400, marginBottom: 160, marginLeft: 50};
const parentStyle = {overflow: 'hidden'};
const style = { float: 'left', width: 200, height: 400, marginBottom: 160, marginLeft: 50 };
const parentStyle = { overflow: 'hidden' };
function log(value) {
console.log(value);
@@ -18,43 +18,43 @@ function percentFormatter(v) {
}
const CustomizedSlider = React.createClass({
getInitialState: function() {
getInitialState() {
return {
value: 50,
};
},
onSliderChange: function(value) {
onSliderChange(value) {
log(value);
this.setState({
value: value,
value,
});
},
render: function() {
render() {
return <Slider vertical value={this.state.value} onChange={this.onSliderChange} />;
},
});
const DynamicBounds = React.createClass({
getInitialState: function() {
getInitialState() {
return {
min: 0,
max: 100,
};
},
onSliderChange: function(value) {
onSliderChange(value) {
log(value);
},
onMinChange: function(e) {
onMinChange(e) {
this.setState({
min: +e.target.value || 0,
});
},
onMaxChange: function(e) {
onMaxChange(e) {
this.setState({
max: +e.target.value || 100,
});
},
render: function() {
render() {
return (
<div style={style}>
<p>Slider with dynamic `min` `max`</p>
src/Marks.jsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
import classNames from 'classnames';
const Marks = ({className, vertical, marks, included, upperBound, lowerBound, max, min}) => {
const Marks = ({ className, vertical, marks, included, upperBound, lowerBound, max, min }) => {
const marksKeys = Object.keys(marks);
const marksCount = marksKeys.length;
const unit = 100 / (marksCount - 1);
src/Slider.jsx
+12 -12
View File
@@ -30,7 +30,7 @@ class Slider extends React.Component {
constructor(props) {
super(props);
const {range, min, max} = props;
const { range, min, max } = props;
const initialValue = range ? Array.apply(null, Array(range + 1)).map(() => min) : min;
const defaultValue = ('defaultValue' in props ? props.defaultValue : initialValue);
const value = (props.value !== undefined ? props.value : defaultValue);
@@ -46,7 +46,7 @@ class Slider extends React.Component {
this.state = {
handle: null,
recent: recent,
recent,
bounds,
};
}
@@ -54,7 +54,7 @@ class Slider extends React.Component {
componentWillReceiveProps(nextProps) {
if (!('value' in nextProps || 'min' in nextProps || 'max' in nextProps)) return;
const {bounds} = this.state;
const { bounds } = this.state;
if (nextProps.range) {
const value = nextProps.value || bounds;
const nextBounds = value.map(v => this.trimAlignValue(v, nextProps));
@@ -82,10 +82,10 @@ class Slider extends React.Component {
if (isNotControlled) {
this.setState(state);
} else if (state.handle) {
this.setState({handle: state.handle});
this.setState({ handle: state.handle });
}
const data = {...this.state, ...state};
const data = { ...this.state, ...state };
const changedValue = props.range ? data.bounds : data.bounds[1];
props.onChange(changedValue);
}
@@ -160,7 +160,7 @@ class Slider extends React.Component {
this.startPosition = position;
const state = this.state;
const {bounds} = state;
const { bounds } = state;
let valueNeedChanging = 1;
if (this.props.range) {
@@ -197,7 +197,7 @@ class Slider extends React.Component {
}
getValue() {
const {bounds} = this.state;
const { bounds } = this.state;
return this.props.range ? bounds : bounds[1];
}
@@ -253,8 +253,8 @@ class Slider extends React.Component {
trimAlignValue(v, nextProps) {
const state = this.state || {};
const {handle, bounds} = state;
const {marks, step, min, max, allowCross} = {...this.props, ...(nextProps || {})};
const { handle, bounds } = state;
const { marks, step, min, max, allowCross } = { ...this.props, ...(nextProps || {}) };
let val = v;
if (val <= min) {
@@ -343,13 +343,13 @@ class Slider extends React.Component {
}
calcOffset(value) {
const {min, max} = this.props;
const { min, max } = this.props;
const ratio = (value - min) / (max - min);
return ratio * 100;
}
calcValue(offset) {
const {vertical, min, max} = this.props;
const { vertical, min, max } = this.props;
const ratio = Math.abs(offset / this.getSliderLength());
const value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
return value;
@@ -385,7 +385,7 @@ class Slider extends React.Component {
end(type) {
this.removeEvents(type);
this.props.onAfterChange(this.getValue());
this.setState({handle: null});
this.setState({ handle: null });
}
render() {
src/Steps.jsx
+2 -2
View File
@@ -14,8 +14,8 @@ function calcPoints(vertical, marks, dots, step, min, max) {
return points;
}
const Steps = ({prefixCls, vertical, marks, dots, step, included,
lowerBound, upperBound, max, min}) => {
const Steps = ({ prefixCls, vertical, marks, dots, step, included,
lowerBound, upperBound, max, min }) => {
const range = max - min;
const elements = calcPoints(vertical, marks, dots, step, min, max).map((point) => {
const offset = Math.abs(point - min) / range * 100 + '%';
src/Track.jsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React from 'react';
const Track = ({className, included, vertical, offset, length}) => {
const Track = ({ className, included, vertical, offset, length }) => {
const style = {
visibility: included ? 'visible' : 'hidden',
};
tests/index.spec.js
+1 -1
View File
@@ -175,7 +175,7 @@ describe('rc-slider', function test() {
});
it('should render marks correctly when `marks` is not an empty object', () => {
const marks = {0: '0', 30: '30', 100: '100'};
const marks = { 0: '0', 30: '30', 100: '100' };
const slider = ReactDOM.render(<Slider value={30} marks={marks} />, div);
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text').length).to.be(3);