94 lines
2.3 KiB
JavaScript
94 lines
2.3 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import './WindowLevelPreferences.styl';
|
||
|
|
|
||
|
|
export class WindowLevelPreferences extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
data: this.props.windowLevelData,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
static propTypes = {
|
||
|
|
windowLevelData: PropTypes.object.isRequired,
|
||
|
|
onChange: PropTypes.func,
|
||
|
|
};
|
||
|
|
|
||
|
|
onChange(event, key, field) {
|
||
|
|
const data = this.state.data;
|
||
|
|
const entry = data[key];
|
||
|
|
entry[field] = event.target.value;
|
||
|
|
this.setState({ data });
|
||
|
|
|
||
|
|
if (this.props.onChange) {
|
||
|
|
this.props.onChange(data);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getWLPreferencesRows(key) {
|
||
|
|
const entry = this.state.data[key];
|
||
|
|
return (
|
||
|
|
<tr key={key}>
|
||
|
|
<td className="p-r-1 text-center">{key}</td>
|
||
|
|
<td className="p-r-1">
|
||
|
|
<label className="wrapperLabel">
|
||
|
|
<input
|
||
|
|
value={entry.description}
|
||
|
|
type="text"
|
||
|
|
className="form-control"
|
||
|
|
onChange={event => {
|
||
|
|
this.onChange(event, key, 'description');
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
</td>
|
||
|
|
<td className="p-r-1">
|
||
|
|
<label className="wrapperLabel">
|
||
|
|
<input
|
||
|
|
value={entry.window}
|
||
|
|
type="number"
|
||
|
|
className="form-control"
|
||
|
|
onChange={event => {
|
||
|
|
this.onChange(event, key, 'window');
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
</td>
|
||
|
|
<td className="p-r-1">
|
||
|
|
<label className="wrapperLabel">
|
||
|
|
<input
|
||
|
|
value={entry.level}
|
||
|
|
type="number"
|
||
|
|
className="form-control"
|
||
|
|
onChange={event => {
|
||
|
|
this.onChange(event, key, 'level');
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<table className="full-width">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th className="p-x-1 text-center presetIndex">Preset</th>
|
||
|
|
<th className="p-x-1">Description</th>
|
||
|
|
<th className="p-x-1">Window</th>
|
||
|
|
<th className="p-x-1">Level</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{Object.keys(this.state.data).map(key => {
|
||
|
|
return this.getWLPreferencesRows(key);
|
||
|
|
})}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|