mirror of
https://github.com/wassname/slider.git
synced 2026-09-09 11:35:22 +08:00
style: update code style
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
+1
-1
@@ -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>,
|
||||
|
||||
+13
-13
@@ -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>
|
||||
|
||||
+11
-11
@@ -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>
|
||||
|
||||
+2
-2
@@ -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',
|
||||
|
||||
+14
-14
@@ -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} />
|
||||
|
||||
+11
-11
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user