refactor: Tidy up exposed props

example/js/example-app.jsx

@@ -9,109 +9,51 @@ export default class ExampleApp extends React.Component {
 
     this.state = {
       value: 5,
-      value2: null,
+      value2: 10,
       value3: 10,
       value4: {
         min: 5,
         max: 10,
       },
-      value5: null,
     };
-
-    this.handleValueChange = this.handleValueChange.bind(this);
-    this.handleValue2Change = this.handleValue2Change.bind(this);
-    this.handleValue3Change = this.handleValue3Change.bind(this);
-    this.handleValue4Change = this.handleValue4Change.bind(this);
-    this.handleValue5Change = this.handleValue5Change.bind(this);
-  }
-
-  handleValueChange(value) {
-    this.setState({
-      value: value || 0,
-    });
-  }
-
-  handleValue2Change(value) {
-    this.setState({
-      value2: value || 0,
-    });
-  }
-
-  handleValue3Change(value) {
-    this.setState({
-      value3: value || 0,
-    });
-  }
-
-  handleValue4Change(values) {
-    this.setState({
-      value4: values,
-    });
-  }
-
-  handleValue5Change(values) {
-    this.setState({
-      value5: values,
-    });
-  }
-
-  handleChangeComplete(value) {
-    console.log(value);
-  }
-
-  formatLabel(labelValue) {
-    return labelValue.toFixed(2);
   }
 
   render() {
-    const defaultValue = 2;
-    const defaultValue2 = {
-      min: 2,
-      max: 8,
-    };
-
     return (
       <form className="form">
         <InputRange
           maxValue={20}
           minValue={0}
           value={this.state.value}
-          onChange={this.handleValueChange}
-          onChangeComplete={this.handleChangeComplete}
+          onChange={value => this.setState({ value })}
+          onChangeComplete={value => console.log(value)}
         />
 
         <InputRange
           maxValue={20}
           minValue={0}
-          labelSuffix="kg"
-          value={this.state.value4}
-          onChange={this.handleValue4Change}
-          onChangeComplete={this.handleChangeComplete}
-        />
-
-        <InputRange
-          maxValue={10}
-          minValue={-10}
-          formatLabel={this.formatLabel}
+          disabled
           value={this.state.value2}
-          defaultValue={defaultValue}
-          onChange={this.handleValue2Change}
+          onChange={value => this.setState({ value })}
+          onChangeComplete={value => console.log(value)}
         />
 
         <InputRange
-          maxValue={10}
-          minValue={-10}
-          value={this.state.value5}
-          defaultValue={defaultValue2}
-          onChange={this.handleValue5Change}
+          maxValue={20}
+          minValue={0}
+          formatLabel={value => value.toFixed(2)}
+          value={this.state.value3}
+          onChange={value => this.setState({ value3: value })}
+          onChangeComplete={value => console.log(value)}
         />
 
         <InputRange
           maxValue={20}
           minValue={0}
-          disabled
-          value={this.state.value3}
-          onChange={this.handleValue3Change}
+          labelSuffix="kg"
+          value={this.state.value4}
+          onChange={value => this.setState({ value4: value })}
+          onChangeComplete={value => console.log(value)}
         />
       </form>
     );

react-input-range.d.ts

@@ -22,11 +22,8 @@ declare interface InputRangeProps {
   ariaLabelledby?: string;
   ariaControls?: string;
   classNames?: InputRangeClassNames;
-  defaultValue?: Range | number;
   disabled?: boolean;
-  formatLabel?: (value: number) => string;
-  labelPrefix?: string;
-  labelSuffix?: string;
+  formatLabel?: (value: number, type: string) => string;
   maxValue?: number;
   minValue?: number;
   name?: string;

src/js/input-range/input-range.jsx

@@ -24,11 +24,8 @@ export default class InputRange extends React.Component {
       ariaLabelledby: React.PropTypes.string,
       ariaControls: React.PropTypes.string,
       classNames: React.PropTypes.objectOf(React.PropTypes.string),
-      defaultValue: valuePropType,
       disabled: React.PropTypes.bool,
       formatLabel: React.PropTypes.func,
-      labelPrefix: React.PropTypes.string,
-      labelSuffix: React.PropTypes.string,
       maxValue: rangePropType,
       minValue: rangePropType,
       name: React.PropTypes.string,
@@ -48,10 +45,7 @@ export default class InputRange extends React.Component {
   static get defaultProps() {
     return {
       classNames: DEFAULT_CLASS_NAMES,
-      defaultValue: 0,
       disabled: false,
-      labelPrefix: '',
-      labelSuffix: '',
       maxValue: 10,
       minValue: 0,
       step: 1,
@@ -65,11 +59,8 @@ export default class InputRange extends React.Component {
    * @param {string} [props.ariaLabelledby]
    * @param {string} [props.ariaControls]
    * @param {Object<string, string>} [props.classNames = DEFAULT_CLASS_NAMES]
-   * @param {number|Range} [props.defaultValue = 0]
    * @param {boolean} [props.disabled = false]
    * @param {Function} [props.formatLabel]
-   * @param {string} [props.labelPrefix = '']
-   * @param {string} [props.labelSuffix = '']
    * @param {number|Range} [props.maxValue = 10]
    * @param {number|Range} [props.minValue = 0]
    * @param {string} [props.name]
@@ -100,7 +91,6 @@ export default class InputRange extends React.Component {
     this.trackNode = null;
 
     autobind([
-      'formatLabel',
       'handleInteractionEnd',
       'handleInteractionStart',
       'handleKeyDown',
@@ -212,7 +202,7 @@ export default class InputRange extends React.Component {
    * @return {boolean}
    */
   isMultiValue() {
-    return isObject(this.props.value) || isObject(this.props.defaultValue);
+    return isObject(this.props.value);
   }
 
   /**
@@ -338,22 +328,6 @@ export default class InputRange extends React.Component {
     this.updateValue(key, value);
   }
 
-  /**
-   * Format label
-   * @private
-   * @param {number} labelValue - Label value
-   * @return {string} Formatted label value
-   */
-  formatLabel(labelValue) {
-    const { formatLabel, labelPrefix, labelSuffix } = this.props;
-
-    if (formatLabel) {
-      return formatLabel(labelValue, { labelPrefix, labelSuffix });
-    }
-
-    return `${labelPrefix}${labelValue}${labelSuffix}`;
-  }
-
   /**
    * Handle any mousemove event received by the slider
    * @private
@@ -428,7 +402,7 @@ export default class InputRange extends React.Component {
       return;
     }
 
-    this.startValue = this.props.value || this.props.defaultValue;
+    this.startValue = this.props.value;
   }
 
   /**
@@ -541,7 +515,7 @@ export default class InputRange extends React.Component {
           ariaLabelledby={this.props.ariaLabelledby}
           ariaControls={this.props.ariaControls}
           classNames={this.props.classNames}
-          formatLabel={this.formatLabel}
+          formatLabel={this.props.formatLabel}
           key={key}
           maxValue={maxValue}
           minValue={minValue}
@@ -602,7 +576,7 @@ export default class InputRange extends React.Component {
         onTouchStart={this.handleTouchStart}>
         <Label
           classNames={this.props.classNames}
-          formatLabel={this.formatLabel}
+          formatLabel={this.props.formatLabel}
           type="min">
           {this.props.minValue}
         </Label>
@@ -618,7 +592,7 @@ export default class InputRange extends React.Component {
 
         <Label
           classNames={this.props.classNames}
-          formatLabel={this.formatLabel}
+          formatLabel={this.props.formatLabel}
           type="max">
           {this.props.maxValue}
         </Label>

src/js/input-range/label.jsx

@@ -5,7 +5,7 @@ import React from 'react';
  * Label React component
  */
 export default function Label(props) {
-  const labelValue = props.formatLabel ? props.formatLabel(props.children) : props.children;
+  const labelValue = props.formatLabel ? props.formatLabel(props.children, props.type) : props.children;
 
   return (
     <span className={props.classNames[`${props.type}Label`]}>

src/js/input-range/value-prop-type.js

@@ -1,4 +1,4 @@
-import { isDefined, isNumber, isObject } from '../utils';
+import { isNumber, isObject } from '../utils';
 
 /**
  * @ignore
@@ -9,10 +9,6 @@ export default function valuePropType(props, propName) {
   const { maxValue, minValue } = props;
   const value = props[propName];
 
-  if (!isDefined(value) && (isDefined(props.defaultValue) || isDefined(props.value))) {
-    return;
-  }
-
   if (!isNumber(value) && (!isObject(value) || !isNumber(value.min) || !isNumber(value.max))) {
     return new Error(`"${propName}" must be a number or a range object`);
   }

src/js/input-range/value-transformer.js

@@ -1,4 +1,4 @@
-import { clamp, isEmpty, isNumber, objectOf } from '../utils';
+import { clamp } from '../utils';
 
 /**
  * Convert position into percentage value
@@ -39,20 +39,12 @@ export function getValueFromPosition(position, minValue, maxValue, trackClientRe
  */
 export function getValueFromProps(props, isMultiValue) {
   if (isMultiValue) {
-    let values = props.value;
-
-    if (isEmpty(values) || !objectOf(values, isNumber)) {
-      values = props.defaultValue;
-    }
-
-    return { ...values };
+    return { ...props.value };
   }
 
-  const value = isNumber(props.value) ? props.value : props.defaultValue;
-
   return {
     min: props.minValue,
-    max: value,
+    max: props.value,
   };
 }
 

test/input-range/input-range.spec.jsx

@@ -367,18 +367,4 @@ describe('InputRange', () => {
       expect(InputRange.propTypes.value(props, 'value')).toEqual(jasmine.any(Error));
     });
   });
-
-  it('returns an error if the default value is not in the expected format', () => {
-    const sampleProps = [
-      { defaultValue: { a: 3, b: 6 }, minValue: 2, maxValue: 10 },
-      { defaultValue: { min: 1, max: 6 }, minValue: 2, maxValue: 10 },
-      { defaultValue: { min: 2, max: 11 }, minValue: 2, maxValue: 10 },
-      { defaultValue: 11, minValue: 2, maxValue: 10 },
-      { defaultValue: null, minValue: 2, maxValue: 10 },
-    ];
-
-    sampleProps.forEach(props => {
-      expect(InputRange.propTypes.defaultValue(props, 'defaultValue')).toEqual(jasmine.any(Error));
-    });
-  });
 });