Add label formatter

Author: davidchin

example/js/App.js

@@ -54,6 +54,10 @@ class App extends React.Component {
     console.log(value);
   }
 
+  formatLabel(labelValue) {
+    return labelValue.toFixed(2);
+  }
+
   render() {
     const defaultValue = 2;
     const defaultValue2 = {
@@ -74,6 +78,7 @@ class App extends React.Component {
         <InputRange
           maxValue={20}
           minValue={0}
+          labelSuffix="kg"
           value={this.state.value4}
           onChange={this.handleValue4Change.bind(this)}
           onChangeComplete={this.handleChangeComplete.bind(this)}
@@ -82,6 +87,7 @@ class App extends React.Component {
         <InputRange
           maxValue={10}
           minValue={-10}
+          formatLabel={this.formatLabel.bind(this)}
           value={this.state.value2}
           defaultValue={defaultValue}
           onChange={this.handleValue2Change.bind(this)}

scss/_InputRangeLabel.scss

@@ -2,6 +2,7 @@
   color: $InputRange-label-color;
   font-family: $InputRange-fontFamily;
   font-size: 0.8rem;
+  white-space: nowrap;
 }
 
 .InputRange-label--min,

src/InputRange/InputRange.js

@@ -187,6 +187,7 @@ function renderSliders(inputRange) {
         ariaLabelledby={ inputRange.props.ariaLabelledby }
         ariaControls={ inputRange.props.ariaControls }
         classNames={ classNames }
+        formatLabel={ inputRange.formatLabel }
         key={ key }
         maxValue={ maxValue }
         minValue={ minValue }
@@ -240,6 +241,7 @@ export default class InputRange extends React.Component {
 
     // Auto-bind
     autobind([
+      'formatLabel',
       'handleInteractionEnd',
       'handleInteractionStart',
       'handleKeyDown',
@@ -367,6 +369,21 @@ export default class InputRange extends React.Component {
     this.updateValue(key, value);
   }
 
+  /**
+   * Format label
+   * @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
    * @param {SyntheticEvent} event - User event
@@ -548,7 +565,8 @@ export default class InputRange extends React.Component {
         onTouchStart={ this.handleTouchStart }>
         <Label
           className={ classNames.labelMin }
-          containerClassName={ classNames.labelContainer }>
+          containerClassName={ classNames.labelContainer }
+          formatLabel={ this.formatLabel }>
           { this.props.minValue }
         </Label>
 
@@ -563,7 +581,8 @@ export default class InputRange extends React.Component {
 
         <Label
           className={ classNames.labelMax }
-          containerClassName={ classNames.labelContainer }>
+          containerClassName={ classNames.labelContainer }
+          formatLabel={ this.formatLabel }>
           { this.props.maxValue }
         </Label>
 
@@ -581,6 +600,9 @@ export default class InputRange extends React.Component {
  * @property {Function} classNames
  * @property {Function} defaultValue
  * @property {Function} disabled
+ * @property {Function} formatLabel
+ * @property {Function} labelPrefix
+ * @property {Function} labelSuffix
  * @property {Function} maxValue
  * @property {Function} minValue
  * @property {Function} name
@@ -595,6 +617,9 @@ InputRange.propTypes = {
   classNames: React.PropTypes.objectOf(React.PropTypes.string),
   defaultValue: maxMinValuePropType,
   disabled: React.PropTypes.bool,
+  formatLabel: React.PropTypes.func,
+  labelPrefix: React.PropTypes.string,
+  labelSuffix: React.PropTypes.string,
   maxValue: maxMinValuePropType,
   minValue: maxMinValuePropType,
   name: React.PropTypes.string,
@@ -610,6 +635,8 @@ InputRange.propTypes = {
  * @property {Object.<string, string>} defaultClassNames
  * @property {Range|number} defaultValue
  * @property {boolean} disabled
+ * @property {string} labelPrefix
+ * @property {string} labelSuffix
  * @property {number} maxValue
  * @property {number} minValue
  * @property {number} step
@@ -619,6 +646,8 @@ InputRange.defaultProps = {
   classNames: defaultClassNames,
   defaultValue: 0,
   disabled: false,
+  labelPrefix: '',
+  labelSuffix: '',
   maxValue: 10,
   minValue: 0,
   step: 1,

src/InputRange/Label.js

@@ -17,11 +17,14 @@ export default class Label extends React.Component {
    */
   render() {
     const { className, containerClassName } = this.props;
+    const labelValue = this.props.formatLabel ?
+                       this.props.formatLabel(this.props.children) :
+                       this.props.children;
 
     return (
       <span className={ className }>
         <span className={ containerClassName }>
-          { this.props.children }
+          { labelValue }
         </span>
       </span>
     );
@@ -34,9 +37,11 @@ export default class Label extends React.Component {
  * @property {Function} children
  * @property {Function} className
  * @property {Function} containerClassName
+ * @property {Function} formatLabel
  */
 Label.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   containerClassName: React.PropTypes.string,
+  formatLabel: React.PropTypes.func,
 };

src/InputRange/Slider.js

@@ -154,7 +154,8 @@ export default class Slider extends React.Component {
         style={ style }>
         <Label
           className={ classNames.labelValue }
-          containerClassName={ classNames.labelContainer }>
+          containerClassName={ classNames.labelContainer }
+          formatLabel={ this.props.formatLabel }>
           { this.props.value }
         </Label>
 
@@ -184,6 +185,7 @@ export default class Slider extends React.Component {
  * @property {Function} ariaLabelledby
  * @property {Function} ariaControls
  * @property {Function} className
+ * @property {Function} formatLabel
  * @property {Function} maxValue
  * @property {Function} minValue
  * @property {Function} onSliderKeyDown
@@ -196,6 +198,7 @@ Slider.propTypes = {
   ariaLabelledby: React.PropTypes.string,
   ariaControls: React.PropTypes.string,
   classNames: React.PropTypes.objectOf(React.PropTypes.string),
+  formatLabel: React.PropTypes.func,
   maxValue: React.PropTypes.number,
   minValue: React.PropTypes.number,
   onSliderKeyDown: React.PropTypes.func.isRequired,

test/InputRange.spec.js

@@ -179,6 +179,42 @@ describe('InputRange', () => {
     });
   });
 
+  describe('formatLabel', () => {
+    it('should format label by prepending prefix label if it is provided', () => {
+      inputRange = renderComponent(
+        <InputRange labelPrefix="$" value={value} onChange={onChange} />
+      );
+
+      const output = inputRange.formatLabel(5);
+
+      expect(output).toEqual('$5');
+    });
+
+    it('should format label by appending suffix label if it is provided', () => {
+      inputRange = renderComponent(
+        <InputRange labelSuffix="kg" value={value} onChange={onChange} />
+      );
+
+      const output = inputRange.formatLabel(5);
+
+      expect(output).toEqual('5kg');
+    });
+
+    it('should format label by calling custom formatter if it provided', () => {
+      function formatLabel(labelValue) {
+        return `${labelValue} burgers`;
+      }
+
+      inputRange = renderComponent(
+        <InputRange formatLabel={formatLabel} value={value} onChange={onChange} />
+      );
+
+      const output = inputRange.formatLabel(5);
+
+      expect(output).toEqual('5 burgers');
+    });
+  });
+
   describe('handleSliderMouseMove', () => {
     let slider;
     let event;