Merge pull request #4529 from paulkaplan/support-is-discrete-sliders

Support isDiscrete sliders

src/components/monitor-list/monitor-list.jsx

@@ -27,6 +27,7 @@ const MonitorList = props => (
                         draggable={props.draggable}
                         height={monitorData.height}
                         id={monitorData.id}
+                        isDiscrete={monitorData.isDiscrete}
                         key={monitorData.id}
                         max={monitorData.sliderMax}
                         min={monitorData.sliderMin}

src/components/monitor/slider-monitor.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import styles from './monitor.css';
 
-const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate}) => (
+const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSliderUpdate}) => (
     <div className={styles.defaultMonitor}>
         <div className={styles.row}>
             <div className={styles.label}>
@@ -22,6 +22,7 @@ const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate})
                 className={classNames(styles.slider, 'no-drag')} // Class used on parent Draggable to prevent drags
                 max={max}
                 min={min}
+                step={isDiscrete ? 1 : 0.01}
                 type="range"
                 value={value}
                 onChange={onSliderUpdate}
@@ -33,6 +34,7 @@ const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate})
 
 SliderMonitor.propTypes = {
     categoryColor: PropTypes.string.isRequired,
+    isDiscrete: PropTypes.bool,
     label: PropTypes.string.isRequired,
     max: PropTypes.number,
     min: PropTypes.number,
@@ -44,6 +46,7 @@ SliderMonitor.propTypes = {
 };
 
 SliderMonitor.defaultProps = {
+    isDiscrete: true,
     min: 0,
     max: 100
 };

src/containers/monitor.jsx

@@ -169,6 +169,7 @@ class Monitor extends React.Component {
                 {...monitorProps}
                 draggable={this.props.draggable}
                 height={this.props.height}
+                isDiscrete={this.props.isDiscrete}
                 max={this.props.max}
                 min={this.props.min}
                 mode={this.props.mode}
@@ -192,6 +193,7 @@ Monitor.propTypes = {
     height: PropTypes.number,
     id: PropTypes.string.isRequired,
     intl: intlShape,
+    isDiscrete: PropTypes.bool,
     max: PropTypes.number,
     min: PropTypes.number,
     mode: PropTypes.oneOf(['default', 'slider', 'large', 'list']),

test/unit/components/monitor-list.test.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
+import MonitorList from '../../../src/components/monitor-list/monitor-list.jsx';
+import {OrderedMap} from 'immutable';
+import configureStore from 'redux-mock-store';
+import {Provider} from 'react-redux';
+
+describe('MonitorListComponent', () => {
+    const store = configureStore()({scratchGui: {
+        monitorLayout: {
+            monitors: {},
+            savedMonitorPositions: {}
+        },
+        vm: {
+            runtime: {
+                requestUpdateMonitor: () => {},
+                getLabelForOpcode: () => ''
+            }
+        }
+    }});
+    const draggable = false;
+    const onMonitorChange = jest.fn();
+    const stageSize = {
+        width: 100,
+        height: 100,
+        widthDefault: 100,
+        heightDefault: 100
+    };
+
+    let monitors = OrderedMap({});
+
+    // Wrap this in a function so it gets test specific states and can be reused.
+    const getComponent = function () {
+        return (
+            <Provider store={store}>
+                <MonitorList
+                    draggable={draggable}
+                    monitors={monitors}
+                    stageSize={stageSize}
+                    onMonitorChange={onMonitorChange}
+                />
+            </Provider>
+        );
+    };
+
+    test('it renders the correct step size for discrete sliders', () => {
+        monitors = OrderedMap({
+            id1: {
+                visible: true,
+                mode: 'slider',
+                isDiscrete: true
+            }
+        });
+        const wrapper = mountWithIntl(getComponent());
+        const input = wrapper.find('input');
+        expect(input.props().step).toBe(1);
+    });
+
+    test('it renders the correct step size for non-discrete sliders', () => {
+        monitors = OrderedMap({
+            id1: {
+                visible: true,
+                mode: 'slider',
+                isDiscrete: false
+            }
+        });
+        const wrapper = mountWithIntl(getComponent());
+        const input = wrapper.find('input');
+        expect(input.props().step).toBe(0.01);
+    });
+});