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,