Adding optional formatter for slider. My very first commit. :)

matejstrasek · Apr 13, 2016 · 6b75b4b · 6b75b4b
1 parent 1a31253
commit 6b75b4b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@
 /lib
 /node_modules
 /out
+*.idea
diff --git a/src/InputRange/InputRange.js b/src/InputRange/InputRange.js
@@ -162,8 +162,9 @@ function getKeyByPosition(inputRange, position) {
  * @param {InputRange} inputRange - React component
  * @return {Array.<string>} Array of HTML
  */
+
 function renderSliders(inputRange) {
-  const { classNames } = inputRange.props;
+  const { classNames, formatter } = inputRange.props;
   const sliders = [];
   const keys = getKeys(inputRange);
   const values = valueTransformer.valuesFromProps(inputRange);
@@ -185,6 +186,7 @@ function renderSliders(inputRange) {
     const slider = (
       <Slider
         classNames={ classNames }
+        formatter={ formatter }
         key={ key }
         maxValue={ maxValue }
         minValue={ minValue }
@@ -530,7 +532,7 @@ export default class InputRange extends React.Component {
    * @return {string} Component JSX
    */
   render() {
-    const { classNames } = this.props;
+    const { classNames, formatter } = this.props;
     const componentClassName = getComponentClassName(this);
     const values = valueTransformer.valuesFromProps(this);
     const percentages = valueTransformer.percentagesFromValues(this, values);
@@ -552,6 +554,7 @@ export default class InputRange extends React.Component {
 
         <Track
           classNames={ classNames }
+          formatter={ formatter }
           ref="track"
           percentages={ percentages }
           onTrackMouseDown={ this.handleTrackMouseDown }>
@@ -591,6 +594,7 @@ InputRange.propTypes = {
   classNames: React.PropTypes.objectOf(React.PropTypes.string),
   defaultValue: maxMinValuePropType,
   disabled: React.PropTypes.bool,
+  formatter: React.PropTypes.func,
   maxValue: maxMinValuePropType,
   minValue: maxMinValuePropType,
   name: React.PropTypes.string,

diff --git a/src/InputRange/Slider.js b/src/InputRange/Slider.js
@@ -147,6 +147,8 @@ export default class Slider extends React.Component {
     const classNames = this.props.classNames;
     const style = getStyle(this);
 
+    const labelValue = this.props.formatter ? this.props.formatter(this.props.value) : this.props.value;
+
     return (
       <span
         className={ classNames.sliderContainer }
@@ -155,9 +157,8 @@ export default class Slider extends React.Component {
         <Label
           className={ classNames.labelValue }
           containerClassName={ classNames.labelContainer }>
-          { this.props.value }
+          { labelValue }
         </Label>
-
         <a
           aria-labelledby={ this.props.ariaLabelledby }
           aria-valuemax={ this.props.maxValue }
@@ -193,6 +194,7 @@ export default class Slider extends React.Component {
 Slider.propTypes = {
   ariaLabelledby: React.PropTypes.string,
   classNames: React.PropTypes.objectOf(React.PropTypes.string),
+  formatter: React.PropTypes.func,
   maxValue: React.PropTypes.number,
   minValue: React.PropTypes.number,
   onSliderKeyDown: React.PropTypes.func.isRequired,

diff --git a/test/InputRange.spec.js b/test/InputRange.spec.js
@@ -7,6 +7,10 @@ import { renderComponent, rerenderComponent } from './TestUtil';
 let inputRange;
 let onChange;
 
+const formatter = string =>{
+  return 'i r a formatted: ' + string;
+};
+
 describe('InputRange', () => {
   let value;
   let values;
@@ -20,7 +24,7 @@ describe('InputRange', () => {
 
     onChange = jasmine.createSpy('onChange');
     inputRange = renderComponent(
-      <InputRange maxValue={20} minValue={0} value={values} onChange={onChange} />
+      <InputRange maxValue={20} minValue={0} value={values} onChange={onChange} formatter={formatter}/>
     );
   });
 
@@ -84,7 +88,7 @@ describe('InputRange', () => {
     describe('if it is not a multi-value slider', () => {
       beforeEach(() => {
         inputRange = renderComponent(
-          <InputRange maxValue={20} minValue={0} value={value} onChange={onChange} />
+          <InputRange maxValue={20} minValue={0} value={value} onChange={onChange} formatter={formatter}/>
         );
       });
 
@@ -200,7 +204,7 @@ describe('InputRange', () => {
     });
 
     it('should not set the position of a slider if disabled', () => {
-      inputRange = renderComponent(<InputRange disabled={true} defaultValue={0} onChange={onChange}/>);
+      inputRange = renderComponent(<InputRange disabled={true} defaultValue={0} onChange={onChange} formatter={formatter}/>);
       spyOn(inputRange, 'updatePosition');
       inputRange.handleSliderMouseMove(event, slider);
 
@@ -236,7 +240,7 @@ describe('InputRange', () => {
       });
 
       it('should not decrement value if disabled', () => {
-        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
+        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange} formatter={formatter}/>);
         spyOn(inputRange, 'decrementValue');
         inputRange.handleSliderKeyDown(event, slider);
 
@@ -268,7 +272,7 @@ describe('InputRange', () => {
       });
 
       it('should not decrement value if disabled', () => {
-        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
+        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange} formatter={formatter}/>);
         spyOn(inputRange, 'decrementValue');
         inputRange.handleSliderKeyDown(event, slider);
 
@@ -300,7 +304,7 @@ describe('InputRange', () => {
       });
 
       it('should not increment value if disabled', () => {
-        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
+        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange} formatter={formatter}/>);
         spyOn(inputRange, 'incrementValue');
         inputRange.handleSliderKeyDown(event, slider);
 
@@ -332,7 +336,7 @@ describe('InputRange', () => {
       });
 
       it('should not increment value if disabled', () => {
-        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
+        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange} formatter={formatter}/>);
         spyOn(inputRange, 'incrementValue');
         inputRange.handleSliderKeyDown(event, slider);
 
@@ -368,14 +372,14 @@ describe('InputRange', () => {
     });
 
     it('should not call event.preventDefault if disabled', () => {
-      inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
+      inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange} formatter={formatter}/>);
       inputRange.handleTrackMouseDown(event, track, position);
 
       expect(event.preventDefault).not.toHaveBeenCalledWith();
     });
 
     it('should not set a new position if disabled', () => {
-      inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange}/>);
+      inputRange = renderComponent(<InputRange disabled={true} defaultValue={10} onChange={onChange} formatter={formatter}/>);
       spyOn(inputRange, 'updatePosition');
       inputRange.handleTrackMouseDown(event, track, position);
 
@@ -405,7 +409,7 @@ describe('InputRange', () => {
     describe('if it is not a multi-value slider', () => {
       beforeEach(() => {
         inputRange = renderComponent(
-          <InputRange maxValue={20} minValue={0} value={value} onChange={onChange} />
+          <InputRange maxValue={20} minValue={0} value={value} onChange={onChange} formatter={formatter}/>
         );
         spyOn(inputRange, 'updatePosition');
       });
@@ -434,7 +438,7 @@ describe('InputRange', () => {
       mouseUpEvent.initMouseEvent('mouseup', true);
 
       inputRange = renderComponent(
-        <InputRange maxValue={20} minValue={0} value={value} onChange={onChange} onChangeComplete={onChangeComplete}/>
+        <InputRange maxValue={20} minValue={0} value={value} onChange={onChange} onChangeComplete={onChangeComplete} formatter={formatter}/>
       );
       slider = ReactDOM.findDOMNode(inputRange.refs.sliderMax);
     });
@@ -443,7 +447,7 @@ describe('InputRange', () => {
       slider.dispatchEvent(mouseDownEvent);
       value += 2;
       inputRange = rerenderComponent(
-        <InputRange maxValue={20} minValue={0} value={value} onChange={onChange} onChangeComplete={onChangeComplete}/>
+        <InputRange maxValue={20} minValue={0} value={value} onChange={onChange} onChangeComplete={onChangeComplete} formatter={formatter}/>
       );
       slider.dispatchEvent(mouseUpEvent);
 
@@ -453,7 +457,7 @@ describe('InputRange', () => {
     it('should not call onChangeComplete if value has not changed since the start of interaction', () => {
       slider.dispatchEvent(mouseDownEvent);
       inputRange = rerenderComponent(
-        <InputRange maxValue={20} minValue={0} value={value} onChange={onChange} onChangeComplete={onChangeComplete}/>
+        <InputRange maxValue={20} minValue={0} value={value} onChange={onChange} onChangeComplete={onChangeComplete} formatter={formatter}/>
       );
       slider.dispatchEvent(mouseUpEvent);
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,3 +7,4 @@ @@
     /lib
     /node_modules
     /out
+    *.idea