Add <InputRange /> component

components/Forms/InputRange/InputRange.css

@@ -0,0 +1,58 @@
+:root {
+  --inputRange-track-height: 0.3rem;
+}
+
+.root {
+  position: relative;
+  composes: fontSmallI from '../../../globals/typography.css';
+}
+
+.input {
+  width: 100%;
+  height: calc(2 * var(--size-large));
+  transform: translateY(calc(var(--size-large) - var(--inputRange-track-height)));
+  position: relative;
+}
+
+.slider {
+  appearance: none;
+  border-radius: 100%;
+  height: var(--size-large);
+  width: var(--size-large);
+  display: block;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-greyLighter);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  left: calc(-0.5 * var(--size-large));
+  top: calc((var(--size-large) - var(--inputRange-track-height)) * -0.5);
+  position: absolute;
+}
+
+.slider:active {
+  transform: scale(1.1);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+  background-color: var(--color-greyLightest);
+}
+
+.slider:focus {
+  transform: scale(1.1);
+}
+
+.trackContainer,
+.trackActive {
+  cursor: pointer;
+  display: block;
+  height: var(--inputRange-track-height);
+  border-radius: calc(var(--inputRange-track-height) / 2);
+  position: absolute;
+  width: 100%;
+  left: 0;
+}
+
+.trackContainer {
+  background: var(--color-greyLightest);
+}
+
+.trackActive {
+  background-color: var(--color-black);
+}

components/Forms/InputRange/InputRange.js

@@ -0,0 +1,92 @@
+import React, { PropTypes, Component } from 'react';
+
+import noop from '../../../utils/noop';
+import ReactInputRange from '@appearhere/react-input-range';
+import css from './InputRange.css';
+
+export const defaultClassNames = {
+  component: css.input,
+  labelContainer: css.labelContainer,
+  labelMax: css.labelMax,
+  labelMin: css.labelMin,
+  labelValue: css.labelValue,
+  slider: css.slider,
+  sliderContainer: css.sliderContainer,
+  trackActive: css.trackActive,
+  trackContainer: css.trackContainer,
+  disabled: css.disabled,
+};
+
+export default class InputRange extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    id: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        min: PropTypes.number,
+        max: PropTypes.number,
+      }),
+    ]).isRequired,
+    onChange: PropTypes.func,
+    onChangeComplete: PropTypes.func,
+    classNames: PropTypes.shape({
+      component: PropTypes.string,
+      labelContainer: PropTypes.string,
+      labelMax: PropTypes.string,
+      labelMin: PropTypes.string,
+      labelValue: PropTypes.string,
+      slider: PropTypes.string,
+      sliderContainer: PropTypes.string,
+      trackActive: PropTypes.string,
+      trackContainer: PropTypes.string,
+      disabled: PropTypes.string,
+    }),
+    minValue: PropTypes.number.isRequired,
+    maxValue: PropTypes.number.isRequired,
+  };
+
+  static defaultProps = {
+    onChange: noop,
+    onChangeComplete: noop,
+    classNames: defaultClassNames,
+  };
+
+  handleChange = (val) => {
+    const { name, onChange } = this.props;
+    onChange(null, name, val);
+  };
+
+  handleChangeComplete = (val) => {
+    const { name, onChangeComplete } = this.props;
+    onChangeComplete(null, name, val);
+  };
+
+  render() {
+    const {
+      classNames,
+      id,
+      value,
+      minValue,
+      maxValue,
+      ...rest,
+    } = this.props;
+
+    const defaultValue = typeof value === 'object' ? { minValue, maxValue } : maxValue;
+
+    return (
+      <ReactInputRange
+        { ...rest }
+        classNames={ classNames }
+        id={ id }
+        value={ value }
+        defaultValue={ defaultValue }
+        onChange={ this.handleChange }
+        onChangeComplete={ this.handleChangeComplete }
+        minValue={ minValue }
+        maxValue={ maxValue }
+        showLabel={ false }
+      />
+    );
+  }
+}

components/Forms/InputRange/InputRange.story.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import InputRange from './InputRange';
+import transformStepValues from './transformStepValues';
+
+const bucket = [
+  0,
+  2,
+  4,
+  8,
+  16,
+  32,
+  64,
+];
+
+storiesOf('InputRange', module)
+  .add('Default InputRange', () => (
+    <InputRange
+      minValue={ 0 }
+      maxValue={ 10 }
+      value={ 4 }
+      name="Simple range input"
+      onChange={ action('Change...') }
+      onChangeComplete={ action('Change complete...') }
+    />
+  ))
+  .add('Multi InputRange', () => (
+    <InputRange
+      minValue={ 0 }
+      maxValue={ 10 }
+      value={ {
+        min: 0,
+        max: 10,
+      } }
+      name="Simple range input"
+      onChange={ action('Change...') }
+      onChangeComplete={ action('Change complete...') }
+    />
+  ))
+  .add('Non-linear default InputRange', () => {
+    const NonLinearRangeInput = transformStepValues(InputRange)(bucket);
+
+    return (
+      <NonLinearRangeInput
+        minValue={ bucket[0] }
+        maxValue={ bucket[6] }
+        value={ bucket[3] }
+        name="Simple range input"
+        onChange={ action('Change...') }
+        onChangeComplete={ action('Change complete...') }
+      />
+    );
+  })
+  .add('Non-linear multi InputRange', () => {
+    const NonLinearRangeInput = transformStepValues(InputRange)(bucket);
+
+    return (
+      <NonLinearRangeInput
+        minValue={ bucket[0] }
+        maxValue={ bucket[6] }
+        value={ {
+          min: bucket[1],
+          max: bucket[5],
+        } }
+        name="Simple range input"
+        onChange={ action('Change...') }
+        onChangeComplete={ action('Change complete...') }
+      />
+    );
+  });

components/Forms/InputRange/InputRange.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import InputRange from './InputRange';
+
+describe('Default InputRange', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    render(
+      <InputRange
+        name=""
+        value={ 0 }
+        minValue={ 0 }
+        maxValue={ 1 }
+      />,
+      div
+    );
+  });
+});
+
+describe('Multi InputRange', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    render(
+      <InputRange
+        name=""
+        value={ {
+          min: 0,
+          max: 1,
+        } }
+        minValue={ 0 }
+        maxValue={ 1 }
+      />,
+      div
+    );
+  });
+});

components/Forms/InputRange/transformStepValues.js

@@ -0,0 +1,77 @@
+import React, { PropTypes, Component } from 'react';
+import noop from '../../../utils/noop';
+
+export const getDomainValue = (rawValue, steps) => {
+  if (typeof rawValue === 'object') {
+    return {
+      min: steps[rawValue.min],
+      max: steps[rawValue.max],
+    };
+  }
+
+  return steps[rawValue];
+};
+
+export const getRawValue = (domainValue, steps) => {
+  if (typeof domainValue === 'object') {
+    return {
+      min: steps.indexOf(domainValue.min),
+      max: steps.indexOf(domainValue.max),
+    };
+  }
+
+  return steps.indexOf(domainValue);
+};
+
+const transformStepValues = WrappedComponent => steps => class extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    onChangeComplete: PropTypes.func,
+    value: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        min: PropTypes.number,
+        max: PropTypes.number,
+      }),
+    ]),
+    maxValue: PropTypes.number,
+    minValue: PropTypes.number,
+  };
+
+  static defaultProps = {
+    onChange: noop,
+    onChangeComplete: noop,
+  };
+
+  handleChange = (e, name, rawValue) => {
+    const { onChange } = this.props;
+    onChange(e, name, getDomainValue(rawValue, steps));
+  };
+
+  handleChangeComplete = (e, name, rawValue) => {
+    const { onChangeComplete } = this.props;
+    onChangeComplete(e, name, getDomainValue(rawValue, steps));
+  };
+
+  render() {
+    const { maxValue, minValue, value } = this.props;
+
+    const rawMaxValue = getRawValue(maxValue, steps);
+    const rawMinValue = getRawValue(minValue, steps);
+    const rawValues = getRawValue(value, steps);
+
+    return (
+      <WrappedComponent
+        { ...this.props }
+        maxValue={ rawMaxValue }
+        minValue={ rawMinValue }
+        value={ rawValues }
+        ref={ (c) => { this.component = c; } }
+        onChange={ this.handleChange }
+        onChangeComplete={ this.handleChangeComplete }
+      />
+    );
+  }
+};
+
+export default transformStepValues;