diff --git a/extensions/vtk/src/toolbarComponents/SlabThicknessToolbarComponent.js b/extensions/vtk/src/toolbarComponents/SlabThicknessToolbarComponent.js
index 50327f3e4..08fc9e96e 100644
--- a/extensions/vtk/src/toolbarComponents/SlabThicknessToolbarComponent.js
+++ b/extensions/vtk/src/toolbarComponents/SlabThicknessToolbarComponent.js
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
-import { Range, Checkbox, Select } from '@ohif/ui';
+import { Range, Checkbox, OldSelect } from '@ohif/ui';
import './slab-thickness-toolbar-button.styl';
@@ -16,6 +16,10 @@ const ToolbarLabel = props => {
return
{label}
;
};
+ToolbarLabel.propTypes = {
+ label: PropTypes.string.isRequired,
+};
+
const ToolbarSlider = props => {
const { value, min, max, onChange } = props;
return (
@@ -33,6 +37,13 @@ const ToolbarSlider = props => {
);
};
+ToolbarSlider.propTypes = {
+ value: PropTypes.number.isRequired,
+ min: PropTypes.number.isRequired,
+ max: PropTypes.number.isRequired,
+ onChange: PropTypes.func.isRequired,
+};
+
const _getSelectOptions = button => {
return button.operationButtons.map(button => {
return {
@@ -184,12 +195,12 @@ function SlabThicknessToolbarComponent({
checked={state.modeChecked}
onChange={onChangeCheckbox}
>
-
+ >
);
diff --git a/platform/ui/src/elements/form/OldSelect.js b/platform/ui/src/elements/form/OldSelect.js
new file mode 100644
index 000000000..3a59f70fc
--- /dev/null
+++ b/platform/ui/src/elements/form/OldSelect.js
@@ -0,0 +1,49 @@
+import './Select.css';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class Select extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: this.props.value,
+ };
+ }
+
+ handleChange = event => {
+ const value = event.target.value;
+ this.setState({ value });
+ if (this.props.onChange) this.props.onChange(value);
+ };
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+Select.propTypes = {
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ key: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ })
+ ),
+ value: PropTypes.string,
+ onChange: PropTypes.func,
+};
+
+export default Select;
diff --git a/platform/ui/src/elements/form/Select.css b/platform/ui/src/elements/form/Select.css
index 13741eb1e..58c9357c1 100644
--- a/platform/ui/src/elements/form/Select.css
+++ b/platform/ui/src/elements/form/Select.css
@@ -15,6 +15,7 @@
border: none;
font-weight: normal;
border-radius: 4px;
+ background-image: none;
}
.select-ohif-container .select-ohif::-ms-expand {
@@ -32,3 +33,31 @@
.select-ohif-container .select-ohif option {
font-weight: normal;
}
+
+/** Compatibility styles for MIP */
+
+.select-ohif {
+ display: block;
+ font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+ sans-serif;
+ font-size: 0.8em;
+ font-weight: 600;
+ color: #444;
+ line-height: 1.3;
+ padding: 0.6em 1.4em 0.5em 0.8em;
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ border: 1px solid #aaa;
+ box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+ border-radius: 0.5em;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
+ linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+ background-repeat: no-repeat, repeat;
+ background-position: right 0.7em top 50%, 0 0;
+ background-size: 0.65em auto, 100%;
+}
diff --git a/platform/ui/src/elements/form/Select.js b/platform/ui/src/elements/form/Select.js
index 8a997ebbb..3bf135cad 100644
--- a/platform/ui/src/elements/form/Select.js
+++ b/platform/ui/src/elements/form/Select.js
@@ -31,10 +31,7 @@ class Select extends Component {
-
-
);
}
}
diff --git a/platform/ui/src/elements/form/index.js b/platform/ui/src/elements/form/index.js
index 434c015dd..9aff64155 100644
--- a/platform/ui/src/elements/form/index.js
+++ b/platform/ui/src/elements/form/index.js
@@ -1,6 +1,10 @@
+// Temp
+import OldSelect from './OldSelect.js';
+
export { Select } from './Select.js';
export { Label } from './Label.js';
export { Range } from './Range.js';
export { TextArea } from './TextArea.js';
export { TextInput } from './TextInput.js';
export { DropdownMenu } from './DropdownMenu.js';
+export { OldSelect };
diff --git a/platform/ui/src/index.js b/platform/ui/src/index.js
index d11e5fa6f..61cd90214 100644
--- a/platform/ui/src/index.js
+++ b/platform/ui/src/index.js
@@ -30,6 +30,7 @@ import {
Icon,
DropdownMenu as Dropdown,
Select,
+ OldSelect,
Label,
Range,
TextArea,
@@ -73,6 +74,7 @@ export {
RoundedButtonGroup,
ScrollableArea,
Select,
+ OldSelect,
SelectTree,
SimpleDialog,
StudyBrowser,