ensoniq-buddy/src/duration_input.jsx

133 lines
2.4 KiB
JavaScript

function split_value(x) {
if (x === undefined || x === null) return ["", 0];
if (typeof(x) == "number") return [x, 0];
var xx = x.split(':');
if (xx.length == 2) return xx;
if (xx.length == 1) return [x, 0];
return [ "", 0];
}
export function DurationToUnits(x) {
let [ time, unit ] = split_value(x);
switch (+unit) {
case 0: "seconds"; // seconds;
case 1: "milliseconds" ; // milliseconds;
case 2: "ticks"; // ticks
default: return "";
}
}
export function DurationToSeconds(x) {
let [ time, unit ] = split_value(x);
switch (+unit) {
case 0: return +time; // seconds;
case 1: return +time / 1000 ; // milliseconds;
case 2: return +time / 60; // ticks
default: return 0;
}
}
export function DurationSplit(x) {
let [ time, unit ] = split_value(x);
switch (+unit) {
case 0: return [+time, "s"]; // seconds;
case 1: return [+time / 1000, "ms"]; // milliseconds;
case 2: return [+time / 60, "ticks"]; // ticks
default: return [0, ""];
}
}
export class DurationInput extends preact.Component {
constructor(props) {
super(props);
this._amtChange = this.amtChange.bind(this);
this._unitChange = this.unitChange.bind(this);
}
amtChange(e) {
e.preventDefault();
let { value } = this.props;
var [ time, unit ] = split_value(value);
var new_time = e.target.value.replace(/^\s+|\s+$/g,"");
var n = Number(new_time);
if (Number.isNaN(n)) {
e.target.value = time;
return; // error.
}
this.change(new_time, unit);
}
unitChange(e) {
e.preventDefault();
let { value } = this.props;
var [ time, unit ] = split_value(value);
var new_unit = +e.target.value;
let s = DurationToSeconds(value);
if (new_unit == unit) return;
var new_time = 0;
switch(new_unit) {
case 0: new_time = s; break;
case 1: new_time = s * 1000; break;
case 2: new_time = s * 60; break;
}
this.change(new_time, new_unit);
}
change(time, unit) {
let { onChange } = this.props;
if (onChange) {
onChange(time + ":" + unit);
}
}
render() {
var { value,disabled } = this.props;
var [ amt, unit ] = split_value(value);
var options = ["Seconds", "Milliseconds", "Ticks"].map( (x, ix) => {
return <option key={ix} value={ix}>{x}</option>
});
return (
<>
<input type="text" value={amt} disabled={disabled} onChange={this._amtChange} />
{' '}
<select value={unit} disabled={disabled} onChange={this._unitChange}>{options}</select>
</>
);
}
}