DoubleSliderWidget

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';

import equals from 'mout/src/array/equals';

import style from 'PVWStyle/ReactWidgets/DoubleSliderWidget.mcss';

export default class DoubleSliderWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
txtValue: null,
value:
props.value || props.value === 0
? props.value
: 0.5 * (props.max + props.min),
};

// Bind callback
this.textInput = this.textInput.bind(this);
this.sliderInput = this.sliderInput.bind(this);
}

componentWillReceiveProps(nextProps) {
const previous = this.props;
const next = nextProps;

if (!equals(previous, next)) {
this.setState({
value: next.value ? next.value : 0.5 * (next.max + next.min),
});
}
}

textInput(e) {
const value = Number(e.target.value);
if (!Number.isNaN(value) && e.target.value.length > 0) {
this.setState({ value, txtValue: e.target.value });
if (this.props.onChange) {
this.props.onChange(this.props.name, value);
}
} else {
this.setState({
txtValue: e.target.value,
});
}
}

sliderInput(e) {
const min = Number(this.props.min);
const max = Number(this.props.max);
const delta = max - min;
const value =
(delta * Number(e.target.value)) / Number(this.props.size) + min;

this.setState({ value, txtValue: null });
if (this.props.onChange) {
this.props.onChange(this.props.name, value);
}
}

render() {
const [min, max, size, value] = [
this.props.min,
this.props.max,
this.props.size,
this.state.value,
];

return (
<div className={style.container}>
<input
type="range"
className={style.rangeInput}
value={Math.floor(((value - min) / (max - min)) * size)}
onChange={this.sliderInput}
min="0"
max={size}
/>
<input
type="text"
className={style.textInput}
pattern="-*[0-9]*.*[0-9]*"
value={
this.state.txtValue !== null
? this.state.txtValue
: this.state.value
}
onChange={this.textInput}
/>
</div>
);
}
}

DoubleSliderWidget.propTypes = {
max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
min: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
name: PropTypes.string,
onChange: PropTypes.func,
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};

DoubleSliderWidget.defaultProps = {
max: 1,
min: 0,
size: 100,
name: 'DoubleValue',
onChange: undefined,
value: undefined,
};