ScalarRangeWidget

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';
import style from 'PVWStyle/ReactWidgets/ScalarRangeWidget.mcss';

export default class ScalarRangeWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
max: props.max || 1,
min: props.min || 0,
};

// Bind callback
this.updateRange = this.updateRange.bind(this);
this.apply = this.apply.bind(this);
}

componentWillReceiveProps(nextProps) {
const { min, max } = nextProps;
if (this.state.min !== min || this.state.max !== max) {
this.setState({ min, max });
}
}

updateRange(event) {
const name = event.target.name;
const value = event.target.value;

if (!Number.isNaN(parseFloat(value)) && Number.isFinite(Number(value))) {
this.setState({ [name]: value });
}
}

apply(event) {
let { min, max } = this.state;
const type = event.target.dataset.type;

min = Number(min);
max = Number(max);

if (this.props.onApply) {
this.props.onApply({ type, min, max });
}
}

render() {
if (!this.props.visible) {
return null;
}

return (
<div className={style.container}>
<input
className={style.rangeInput}
type="text"
pattern="-*[0-9]*.*[0-9]*"
name="min"
value={this.state.min}
onChange={this.updateRange}
/>
<input
className={style.rangeInput}
type="text"
pattern="-*[0-9]*.*[0-9]*"
name="max"
value={this.state.max}
onChange={this.updateRange}
/>
<div className={style.actionLine}>
<i
onClick={this.apply}
data-type="data"
className={style.dataRangeIcon}
/>
<i
onClick={this.apply}
data-type="time"
className={style.timeRangeIcon}
/>
<i
onClick={this.apply}
data-type="custom"
className={style.customRangeIcon}
/>
</div>
</div>
);
}
}

ScalarRangeWidget.propTypes = {
max: PropTypes.number,
min: PropTypes.number,
onApply: PropTypes.func,
visible: PropTypes.bool,
};

ScalarRangeWidget.defaultProps = {
max: undefined,
min: undefined,
onApply: undefined,
visible: false,
};