diff --git a/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js b/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js index 4827f193b..f2240fe31 100644 --- a/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js +++ b/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js @@ -18,6 +18,7 @@ import { } from '@fortawesome/free-solid-svg-icons'; import CustomToolbar from '../common/CustomToolbar'; import { createZipFromRemoteFiles } from './util'; +import Loader from "../loader/Loader"; const styles = { dicomViewer: { @@ -55,6 +56,7 @@ class DicomViewer extends Component { ? 'coronal' : this.props.orientation, fullScreen: false, + ready: false }; // 3d renderer @@ -330,6 +332,7 @@ class DicomViewer extends Component { _this.configureEvents(); _this.ready = true; _this.props.onLoaded() + _this.setState({ ready: true }) }) .catch(function (error) { window.console.log('oops... something went wrong...'); @@ -692,7 +695,7 @@ class DicomViewer extends Component { } render () { - const { classes, toolbarOptions } = this.props; + const { classes, toolbarOptions, loaderOptions } = this.props; const { fullScreen } = this.state; const customButtons = this.getCustomButtons(); @@ -710,6 +713,18 @@ class DicomViewer extends Component { height: '100%', width: '100%', }; + + const loader = loaderOptions && loaderOptions.instance ? ( + + ) : const toolbar = toolbarOptions && toolbarOptions.instance ? ( + {!this.state.ready && loader} {toolbar}
- ); + ) } } @@ -832,7 +848,8 @@ DicomViewer.defaultProps = { onShiftClick: 'goToPoint', onDoubleClick: 'goToPoint', showDownloadButton: false, - toolbarOptions: null + toolbarOptions: null, + loaderOptions: null }; @@ -918,6 +935,45 @@ DicomViewer.propTypes = { */ buttonStyles: PropTypes.shape({}), }), + /** + * Options to customize the loader + */ + loaderOptions: PropTypes.shape({ + /** + * Reference to toolbar component + */ + instance: PropTypes.elementType, + /** + * Custom toolbar props + */ + props: PropTypes.shape({}), + /** + * Function to handle the close of the Loader + */ + handleClose: PropTypes.func, + /** + * Array of Custom messages to display + */ + messages: PropTypes.array, + /** + * Number of milliseconds between custom messages + */ + messagesInterval: PropTypes.number, + /** + * Number of the progress value to show in linear determinate (in percentage) + */ + elapsed: PropTypes.number, + /** + * Style to be applied to the Loader background + */ + backgroundStyle: PropTypes.shape({ + /** + * Loader's background color. Defaults to rgba(255,142,0,0.1) + */ + backgroundColor: PropTypes.string, + }), + + }), }; export default withStyles(styles)(DicomViewer);