wip on react transition 4

Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar/ImageScrollbar.js

@@ -0,0 +1,68 @@
+import { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ImageScrollbar.styl';
+
+class ImageScrollbar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.onChange = this.onChange.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+  }
+
+  render() {
+    this.style = {
+      width: `${this.props.height}`
+    };
+
+    return (
+      <div className="scroll">
+        <div className="scroll-holder">
+          <input
+            className="imageSlider"
+            style={this.style}
+            type="range"
+            min="0"
+            max={this.props.max}
+            step="1"
+            value={this.props.value}
+            onChange={this.onChange}
+            onKeyDown={this.onKeyDown}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  onChange(event) {
+    const intValue = parseInt(event.target.value, 10);
+    this.props.onInputCallback(intValue);
+  }
+
+  onKeyDown(event) {
+    // We don't allow direct keyboard up/down input on the
+    // image sliders since the natural direction is reversed (0 is at the top)
+
+    // Store the KeyCodes in an object for readability
+    const keys = {
+        DOWN: 40,
+        UP: 38
+    };
+
+    if (event.which === keys.DOWN) {
+        OHIF.commands.run('scrollDown');
+        event.preventDefault();
+    } else if (event.which === keys.UP) {
+        OHIF.commands.run('scrollUp');
+        event.preventDefault();
+    }
+  }
+}
+
+ImageScrollbar.propTypes = {
+  value: PropTypes.number.isRequired,
+  onInputCallback: PropTypes.func.isRequired
+};
+
+export default ImageScrollbar;