diff --git a/README.md b/README.md index 08b4004..80bc15a 100644 --- a/README.md +++ b/README.md @@ -85,6 +85,9 @@ onChange |Function |`onChange` callbac onChangeComplete |Function |`onChangeComplete` callback step |number |Increment/decrement value value |number | Object.<number> |Current value(s) (required) +Track |Function |Override default Track Component +Slider |Function |Override default Slider Component +Label |Function |Override default Label Component ## Development diff --git a/src/InputRange/InputRange.js b/src/InputRange/InputRange.js index 3156c5d..7856161 100644 --- a/src/InputRange/InputRange.js +++ b/src/InputRange/InputRange.js @@ -3,9 +3,9 @@ */ import React from 'react'; -import Slider from './Slider'; -import Track from './Track'; -import Label from './Label'; +import { default as DefaultSlider } from './Slider'; +import { default as DefaultTrack } from './Track'; +import { default as DefaultLabel } from './Label'; import defaultClassNames from './defaultClassNames'; import valueTransformer from './valueTransformer'; import { autobind, captialize, distanceTo, isDefined, isObject, length } from './util'; @@ -163,7 +163,7 @@ function getKeyByPosition(inputRange, position) { * @return {Array.} Array of HTML */ function renderSliders(inputRange) { - const { classNames } = inputRange.props; + const { classNames, Slider, Label } = inputRange.props; const sliders = []; const keys = getKeys(inputRange); const values = valueTransformer.valuesFromProps(inputRange); @@ -196,7 +196,8 @@ function renderSliders(inputRange) { percentage={ percentage } ref={ ref } type={ key } - value={ value } /> + value={ value } + Label={ Label } /> ); sliders.push(slider); @@ -549,7 +550,7 @@ export default class InputRange extends React.Component { * @return {string} Component JSX */ render() { - const { classNames } = this.props; + const { classNames, Label, Track, children } = this.props; const componentClassName = getComponentClassName(this); const values = valueTransformer.valuesFromProps(this); const percentages = valueTransformer.percentagesFromValues(this, values); @@ -586,6 +587,8 @@ export default class InputRange extends React.Component { { this.props.maxValue } + { children } + { renderHiddenInputs(this) } ); @@ -610,6 +613,10 @@ export default class InputRange extends React.Component { * @property {Function} onChangeComplete * @property {Function} step * @property {Function} value + * @property {Function} Track + * @property {Function} Slider + * @property {Function} Label + * @property {Function} children */ InputRange.propTypes = { ariaLabelledby: React.PropTypes.string, @@ -627,6 +634,10 @@ InputRange.propTypes = { onChangeComplete: React.PropTypes.func, step: React.PropTypes.number, value: maxMinValuePropType, + Track: React.PropTypes.func, + Slider: React.PropTypes.func, + Label: React.PropTypes.func, + children: React.PropTypes.any, }; /** @@ -641,6 +652,9 @@ InputRange.propTypes = { * @property {number} minValue * @property {number} step * @property {Range|number} value + * @property {Function} Track + * @property {Function} Slider + * @property {Function} Label */ InputRange.defaultProps = { classNames: defaultClassNames, @@ -652,4 +666,7 @@ InputRange.defaultProps = { minValue: 0, step: 1, value: null, + Track: DefaultTrack, + Slider: DefaultSlider, + Label: DefaultLabel, }; diff --git a/src/InputRange/Slider.js b/src/InputRange/Slider.js index 6d3e531..f312d18 100644 --- a/src/InputRange/Slider.js +++ b/src/InputRange/Slider.js @@ -3,7 +3,7 @@ */ import React from 'react'; -import Label from './Label'; +import { default as DefaultLabel } from './Label'; import { autobind } from './util'; /** @@ -144,7 +144,7 @@ export default class Slider extends React.Component { * @return {string} Component JSX */ render() { - const classNames = this.props.classNames; + const { classNames, Label, children } = this.props; const style = getStyle(this); return ( @@ -174,6 +174,8 @@ export default class Slider extends React.Component { onTouchStart={ this.handleTouchStart } role="slider"> + + { children } ); } @@ -193,6 +195,8 @@ export default class Slider extends React.Component { * @property {Function} percentage * @property {Function} type * @property {Function} value + * @property {Function} Label + * @property {Function} children */ Slider.propTypes = { ariaLabelledby: React.PropTypes.string, @@ -206,4 +210,13 @@ Slider.propTypes = { percentage: React.PropTypes.number.isRequired, type: React.PropTypes.string.isRequired, value: React.PropTypes.number.isRequired, + Label: React.PropTypes.func, + children: React.PropTypes.any, +}; + +/** + * @property {Function} Label + */ +Slider.defaultProps = { + Label: DefaultLabel, }; diff --git a/src/InputRange/index.js b/src/InputRange/index.js index 1efe83a..5951dad 100644 --- a/src/InputRange/index.js +++ b/src/InputRange/index.js @@ -3,6 +3,9 @@ */ import InputRange from './InputRange'; +import Track from './Track'; +import Slider from './Slider'; +import Label from './Label'; /** * An object describing the position of a point @@ -19,3 +22,4 @@ import InputRange from './InputRange'; */ export default InputRange; +export {Track, Slider, Label};