Merge pull request #52 from mapbox/IE-compatible

Use react-range for input sliders to support IE
mapbox · Oct 19, 2015 · 5bd823b · 5bd823b
2 parents 2d20fa2 + c72abb9
commit 5bd823b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/index.js b/index.js
@@ -3,6 +3,7 @@
 var React = require('react');
 var { parseCSSColor } = require('csscolorparser');
 var extend = require('xtend');
+var Range = require('react-range');
 
 var XYControl = require('./src/xy');
 
@@ -279,7 +280,7 @@ module.exports = React.createClass({
                 onChange={this._onXYChange.bind(null, colorAttribute)} />
             </div>
             <div className={`cp-colormode-slider cp-colormode-attribute-slider ${colorAttribute}`}>
-              <input
+              <Range
                 value={colorAttributeValue}
                 style={hueSlide}
                 onChange={this._onColorSliderChange.bind(null, colorAttribute)}
@@ -397,7 +398,7 @@ module.exports = React.createClass({
               </fieldset>
             </div>
             <fieldset className='cp-fill-tile'>
-              <input
+              <Range
                 className='cp-alpha-slider-input'
                 value={a}
                 onChange={this._onAlphaSliderChange}

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     ]
   },
   "scripts": {
-    "test": "npm run lint && browserify test/test.js | tap-closer | smokestack -b firefox",
+    "test": "npm run lint && browserify test/test.js | tap-closer | smokestack -b firefox | tap-status",
     "lint": "eslint --no-eslintrc -c .eslintrc index.js src",
     "start": "node server.js",
     "build": "NODE_ENV=production browserify example/index.js | uglifyjs -c -m > example/bundle.js"
@@ -29,6 +29,7 @@
     "colr-convert": "^1.0.4",
     "csscolorparser": "^1.0.2",
     "react": "^0.13.3",
+    "react-range": "0.0.5",
     "xtend": "^4.0.0"
   },
   "devDependencies": {
@@ -41,7 +42,7 @@
     "eslint-plugin-react": "^2.2.0",
     "react-hot-loader": "^1.2.9",
     "smokestack": "^3.3.0",
-    "tap-closer": "^1.0.0",
+    "tap-status": "^1.0.1",
     "tape": "^4.0.0",
     "uglify-js": "^2.4.20",
     "webpack": "^1.12.0",

diff --git a/test/test.js b/test/test.js
@@ -82,15 +82,15 @@ test('component basics', (t) => {
   t.equal(colorSlider.classList.contains('v'), true, 'slider for value is present when HSV (v) input is in focus.');
 
   colorSliderInput.value = 0;
-  TestUtils.Simulate.change(colorSliderInput);
+  TestUtils.Simulate.click(colorSliderInput);
 
   t.equal(v.value, '0', 'HSV (v) input attribute changed to 0 after adjusting the color slider');
-  TestUtils.Simulate.change(v);
+  TestUtils.Simulate.click(v);
 
   t.equal(hex.value, '000000', 'input updates HEX to #000000');
 
   alphaSliderInput.value = 50;
-  TestUtils.Simulate.change(alphaSliderInput);
+  TestUtils.Simulate.click(alphaSliderInput);
   t.equal(onChangeObj.a, 0.5, 'alpha output is adjusted');
 
   t.end();
@@ -141,6 +141,7 @@ test('component options', (t) => {
     b: 0,
     a: 1,
     hex: '000',
+    input: 'hex',
     mode: 'hsv',
     colorAttribute: 'g'
   };
@@ -176,6 +177,7 @@ test('rgb value', (t) => {
     b: 255,
     a: 1,
     hex: '0ff',
+    input: 'hex',
     mode: 'rgb',
     colorAttribute: 'h'
   };
@@ -199,8 +201,7 @@ test('rgba value', (t) => {
   );
 
   t.ok(colorpickr, 'colorpickr component with options is rendered in document');
-
-  TestUtils.Simulate.change(TestUtils.findRenderedDOMComponentWithClass(colorpickr, 'cp-hex-input').getDOMNode());
+  TestUtils.Simulate.click(TestUtils.findRenderedDOMComponentWithClass(colorpickr, 'cp-mode-hsv').getDOMNode());
 
   const expectOnChangeToBe = {
     h: 180,
@@ -211,10 +212,18 @@ test('rgba value', (t) => {
     b: 255,
     a: 0.5,
     hex: '0ff',
-    mode: 'rgb',
+    mode: 'hsv',
     colorAttribute: 'h'
   };
 
   t.deepEqual(onChangeObj, expectOnChangeToBe, 'onChange object reflects options passed');
   t.end();
 });
+
+// close the smokestack window once tests are complete
+test('shutdown', function(t) {
+  t.end();
+  setTimeout(function() {
+    window.close();
+  });
+});