Improve throttle UX

Closes #9
This commit is contained in:
Luminarys 2018-03-13 17:40:46 -07:00
parent 9888226287
commit 7b1a89ca90

View File

@ -11,26 +11,34 @@ export default class Throttle extends Component {
super(); super();
this.setLimit = this.setLimit.bind(this); this.setLimit = this.setLimit.bind(this);
this.setUnit = this.setUnit.bind(this); this.setUnit = this.setUnit.bind(this);
this.state = { unit: "MiB/s" }; this.state = { custom: 1024 * 1024, unit: "MiB/s" };
} }
setLimit(limit) { setLimit(limit) {
const { onChange } = this.props; const { onChange } = this.props;
const { unit } = this.state; const { unit } = this.state;
let custom = this.props.limit;
if (custom <= 0 || custom === null) {
custom = this.state.custom;
}
if (isNaN(limit)) {
limit = 0;
}
const converted = limit <= 0 || limit === null ? const converted = limit <= 0 || limit === null ?
limit : convertToBitrate(limit, unit); limit : convertToBitrate(limit, unit);
onChange && onChange(converted); onChange && onChange(converted);
this.setState({ unit, custom });
} }
setUnit(unit) { setUnit(unit) {
const limit = convertFromBitrate(this.props.limit, this.state.unit); const limit = convertFromBitrate(this.props.limit, this.state.unit);
this.setState({ unit }); this.setState({ unit, custom: this.state.custom });
this.setLimit(limit); this.setLimit(limit);
} }
render() { render() {
const { global, limit, legend, prop } = this.props; const { global, limit, legend, prop } = this.props;
const { unit } = this.state; const { unit, custom } = this.state;
return ( return (
<div> <div>
<FormGroup tag="fieldset"> <FormGroup tag="fieldset">
@ -65,7 +73,7 @@ export default class Throttle extends Component {
type="radio" type="radio"
name={prop} name={prop}
id={`${prop}-custom`} id={`${prop}-custom`}
onChange={e => this.setLimit(1)} onChange={e => this.setLimit(convertFromBitrate(custom, unit))}
checked={limit !== -1 && limit !== null} checked={limit !== -1 && limit !== null}
/> Custom /> Custom
</Label> </Label>