97 lines
2.9 KiB
JavaScript
97 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Trans, translate } from 'react-i18next';
|
|
import Tooltip from 'rc-tooltip';
|
|
import Slider from 'rc-slider';
|
|
import 'rc-slider/assets/index.css';
|
|
|
|
// https://www.npmjs.com/package/rc-slider
|
|
const createSliderWithTooltip = Slider.createSliderWithTooltip;
|
|
const Handle = Slider.Handle;
|
|
|
|
const handle = (props) => {
|
|
const { value, dragging, index, ...restProps } = props;
|
|
return (
|
|
<Tooltip prefixCls="rc-slider-tooltip" overlay={value} visible={dragging} placement="top" key={index} >
|
|
<Handle value={value} {...restProps} />
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
const wrapperStyle = { width: 400, margin: 50 };
|
|
|
|
// https://github.com/react-component/slider/tree/master/examples
|
|
|
|
class DistanceSlider extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
value: 10
|
|
};
|
|
this.onSliderChange = this.onSliderChange.bind(this);
|
|
this.onAfterChange = this.onAfterChange.bind(this);
|
|
this.props.onChange(10);
|
|
}
|
|
|
|
onSliderChange(value) {
|
|
// console.log(value);
|
|
this.setState({
|
|
value
|
|
});
|
|
this.props.onChange(value);
|
|
}
|
|
|
|
onAfterChange(value) {
|
|
// console.log(`After change: ${value}`); //eslint-disable-line
|
|
this.props.onChange(value);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div style={wrapperStyle}>
|
|
<p><Trans parent="span">¿A que distancia a la redonda quieres recibir notificaciones?</Trans></p>
|
|
<Slider min={5}
|
|
max={105}
|
|
value={this.state.value}
|
|
trackStyle={{ backgroundColor: 'green', height: 8 }}
|
|
railStyle={{ backgroundColor: 'orange', height: 8 }}
|
|
dotStyle={{ top: 0, marginLeft: -1, width: 2, height: 8 }}
|
|
marks={{
|
|
10: {style: {}, label: "10км"},
|
|
20: {style: {}, label: "20"},
|
|
30: {style: {}, label: "30"},
|
|
40: {style: {}, label: "40"},
|
|
50: {style: {}, label: "50"},
|
|
60: {style: {}, label: "60"},
|
|
70: {style: {}, label: "70"},
|
|
80: {style: {}, label: "80"},
|
|
90: {style: {}, label: "90"},
|
|
100: {style: {}, label: "100км"}
|
|
}}
|
|
handleStyle={{
|
|
borderColor: 'green',
|
|
height: 20,
|
|
width: 20,
|
|
marginLeft: -10,
|
|
marginTop: -6,
|
|
/* backgroundColor: 'gray', */
|
|
}}
|
|
onAfterChange={this.onAfterChange}
|
|
onChange={this.onSliderChange}
|
|
defaultValue={10}
|
|
step={5}
|
|
handle={handle} />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
DistanceSlider.defaultProps = {
|
|
onChange: null
|
|
};
|
|
|
|
DistanceSlider.propTypes = {
|
|
onChange: PropTypes.func
|
|
};
|
|
|
|
export default translate([], { wait: true })(DistanceSlider);
|