LookupTableManagerControl

Source

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

import CollapsibleWidget from '../../Widgets/CollapsibleWidget';
import LookupTableWidget from '../../Widgets/LookupTableWidget';
import DropDownWidget from '../../Widgets/DropDownWidget';

export default class LookupTableManagerControl extends React.Component {
constructor(props) {
super(props);

const luts = props.lookupTableManager.luts;
const fields = Object.keys(luts);
const field = props.field || fields[0];

this.state = {
field,
fields,
};

// Bind callback
this.onFieldsChange = this.onFieldsChange.bind(this);
}

componentWillMount() {
this.changeSubscription = this.props.lookupTableManager.onFieldsChange(
(data, enevelope) => {
const fields = Object.keys(this.props.lookupTableManager.luts);
this.setState({
fields,
});
}
);
}

componentWillUnmount() {
if (this.changeSubscription) {
this.changeSubscription.unsubscribe();
this.changeSubscription = null;
}
}

onFieldsChange(newVal) {
this.props.lookupTableManager.updateActiveLookupTable(newVal);
this.setState({
field: newVal,
});
}

render() {
const lutManager = this.props.lookupTableManager;
const lut = lutManager.getLookupTable(this.state.field);
const originalRange = lut.getScalarRange();

return (
<CollapsibleWidget
title="Lookup Table"
activeSubTitle
subtitle={
<DropDownWidget
field={this.state.field}
fields={this.state.fields}
onChange={this.onFieldsChange}
/>
}
>
<LookupTableWidget
lookupTableManager={lutManager}
lookupTable={lut}
originalRange={originalRange}
/>
</CollapsibleWidget>
);
}
}

LookupTableManagerControl.propTypes = {
field: PropTypes.string.isRequired,
lookupTableManager: PropTypes.object.isRequired,
};