Change slider component libraries

The old library wasn't being maintained and we need something up-to-date to be able to upgrade React.
philippotto · Oct 13, 2017 · 4c7e672 · 4c7e672
1 parent 0226757
commit 4c7e672
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 80 deletions.
diff --git a/app/scripts/views/pitch_settings_view.js b/app/scripts/views/pitch_settings_view.js
@@ -89,15 +89,15 @@ export default class PitchSettingsView extends Component {
         <RangeSettingComponent
           rangeMin={50}
           rangeMax={99}
-          values={this.props.settings.automaticDifficulty.accuracyGoal * 100}
+          values={parseInt(this.props.settings.automaticDifficulty.accuracyGoal * 100, 10)}
           onChange={value => accuracyStateChanger(value / 100)}
           valueToString={el => `${el}%`}
           label={"Accuracy goal"}
         />
         <RangeSettingComponent
           rangeMin={10}
           rangeMax={100}
-          values={this.props.settings.automaticDifficulty.newNotesShare * 100}
+          values={parseInt(this.props.settings.automaticDifficulty.newNotesShare * 100, 10)}
           onChange={value => newNotesShareStateChanger(value / 100)}
           valueToString={el => `${el}%`}
           label={"Share of new notes"}
@@ -110,23 +110,32 @@ export default class PitchSettingsView extends Component {
         <RangeSettingComponent
           rangeMin={1}
           rangeMax={5}
-          values={this.props.settings.chordSizeRanges.treble}
+          values={{
+            from: this.props.settings.chordSizeRanges.treble[0],
+            to: this.props.settings.chordSizeRanges.treble[1]
+          }}
           onChange={this.buildStateChanger("chordSizeRanges.treble")}
           label={"Treble notes/chord"}
           disabled={!isMidiAvailable}
         />
         <RangeSettingComponent
           rangeMin={1}
           rangeMax={5}
-          values={this.props.settings.chordSizeRanges.bass}
+          values={{
+            from: this.props.settings.chordSizeRanges.bass[0],
+            to: this.props.settings.chordSizeRanges.bass[1]
+          }}
           onChange={this.buildStateChanger("chordSizeRanges.bass")}
           label={"Bass notes/chord"}
           disabled={!isMidiAvailable}
         />
         <RangeSettingComponent
           rangeMin={0}
           rangeMax={14}
-          values={this.props.settings.keySignature}
+          values={{
+            from: this.props.settings.keySignature[0],
+            to: this.props.settings.keySignature[1]
+          }}
           onChange={this.buildStateChanger("keySignature")}
           valueToString={KeyConverter.keySignatureValueToString}
           label={"Signature"}

diff --git a/app/scripts/views/range_setting_component.js b/app/scripts/views/range_setting_component.js
@@ -1,11 +1,9 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import RangeSlider from "react-range-slider-bem";
+import { Range } from "rc-slider";
 import SettingLine from "./setting_line";
 import _ from "lodash";
 
-const multiplier = 10;
-
 export default class RangeSettingComponent extends Component {
   static defaultProps = {
     valueToString: _.identity,
@@ -15,7 +13,13 @@ export default class RangeSettingComponent extends Component {
   static propTypes = {
     rangeMin: PropTypes.number.isRequired,
     rangeMax: PropTypes.number.isRequired,
-    values: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+    values: PropTypes.oneOfType([
+      PropTypes.shape({
+        from: PropTypes.number,
+        to: PropTypes.number
+      }),
+      PropTypes.number
+    ]).isRequired,
     onChange: PropTypes.func.isRequired,
     label: PropTypes.string,
     valueToString: PropTypes.func,
@@ -25,63 +29,53 @@ export default class RangeSettingComponent extends Component {
   constructor(props, context) {
     super(props, context);
     this.state = {
-      values: this.valuesFromProps(this.props)
+      values: this.convertValues(this.props.values)
     };
   }
 
-  valuesFromProps(props) {
-    let values = _.isArray(props.values) ? props.values : [props.values];
-    return values.map(el => el * multiplier);
+  /**
+   * Converts values recieved as props to expected form for state
+   *
+   * @param {number | {from: number, to: number}} values
+   * @returns {number[]}
+   */
+  convertValues(values) {
+    return typeof values === "object" ? [values.from, values.to] : [values];
   }
 
   componentWillReceiveProps(newProps) {
-    this.setState = {
-      values: this.valuesFromProps(newProps)
-    };
-  }
-
-  onChange(event, index, values) {
     this.setState({
-      values: values.map(el => el.value)
+      values: this.convertValues(newProps.values)
     });
   }
 
-  onAfterChange() {
-    if (this.props.disabled) {
-      return;
-    }
-    let newValues = this.state.values.map(this.quantitizeValue).map(el => el / multiplier);
-    this.props.onChange(newValues.length === 1 ? newValues[0] : newValues);
+  onChange(values) {
+    this.setState({
+      values: values
+    });
   }
 
-  quantitizeValue(value) {
-    return Math.round(value / multiplier) * multiplier;
+  onAfterChange(values) {
+    this.props.onChange(values.length === 1 ? values[0] : values);
   }
 
   render() {
-    const upscaledRangeMin = this.props.rangeMin * multiplier;
-    const upscaledRangeMax = this.props.rangeMax * multiplier;
-
-    let renderedRangeValues = this.state.values;
-    let quantitizedValues = this.state.values.map(this.quantitizeValue);
-
-    const downScaledValues = quantitizedValues.map(el => Math.round(el / multiplier));
     const rangeContainerStyle = {
       marginBottom: -2
     };
 
-    const valueLabel = this.props.label + ": " + downScaledValues.map(this.props.valueToString).join(" - ");
+    const valueLabel = this.props.label + ": " + this.state.values.map(this.props.valueToString).join(" - ");
 
     return (
       <SettingLine label={valueLabel}>
         <div style={rangeContainerStyle}>
-          <RangeSlider
-            cursor
-            value={renderedRangeValues}
-            min={upscaledRangeMin}
-            max={upscaledRangeMax}
+          <Range
+            value={this.state.values}
+            min={this.props.rangeMin}
+            max={this.props.rangeMax}
             onChange={this.onChange.bind(this)}
             onAfterChange={this.onAfterChange.bind(this)}
+            allowCross={false}
             disabled={this.props.disabled}
           />
         </div>

diff --git a/app/styles/index.less b/app/styles/index.less
@@ -1,14 +1,13 @@
 // @import "../../node_modules/bootstrap/less/bootstrap.less";
 @import (less) "../../node_modules/chartist/dist/chartist.min.css";
 @import (less) "../../node_modules/flexboxgrid/dist/flexboxgrid.min.css";
-@import (less) "./slider.css";
+@import (less) "./slider.less";
 @import (less) "./checkbox.css";
 @import (less) "./chartist_modifications.less";
 @import (less) "./beat_visualization.less";
 @import (less) "./claviature.less";
 @import (less) "./star_animation.less";
 
-
 @import url(http://fonts.googleapis.com/css?family=Poiret+One);
 @import url(http://fonts.googleapis.com/css?family=Droid+Sans:400);
 

diff --git a/app/styles/slider.css b/app/styles/slider.css
diff --git a/app/styles/slider.less b/app/styles/slider.less
@@ -0,0 +1,30 @@
+@import (less) "../../node_modules/rc-slider/assets/index.css";
+
+.rc-slider:not(.rc-slider-disabled) {
+  .rc-slider-rail {
+    background: rgba(0, 0, 0, 0.68);
+    box-shadow: 1px 1px 0.9px rgba(0, 0, 0, 0.3), 0 0 1px hsla(0, 0%, 5%, 0.3);
+  }
+
+  .rc-slider-handle {
+    box-shadow: 0 0 4px #670000;
+    border: 1px solid black;
+  }
+
+  .rc-slider-handle:hover,
+  .rc-slider-handle:active {
+    border-color: #670000;
+    box-shadow: 0 0 8px #670000;
+  }
+
+  .rc-slider-handle:focus {
+    border-color: #670000;
+    box-shadow: 0 0 1px 4px #fa9494;
+  }
+  .rc-slider-track {
+    background: #000;
+  }
+}
+.rc-slider-disabled {
+  background: none;
+}
diff --git a/package.json b/package.json
@@ -22,11 +22,11 @@
     "html-loader": "^0.4.3",
     "lodash": "^4.5.1",
     "prop-types": "^15.5.10",
+    "rc-slider": "^8.3.1",
     "react": "^15.6.1",
     "react-bootstrap": "^0.31.1",
     "react-dom": "^15.6.1",
     "react-motion": "^0.5.0",
-    "react-range-slider-bem": "^0.2.11",
     "vexflow": "^1.2.41"
   },
   "devDependencies": {