Skip to content

Commit 1eedc58

Browse files
davidchindavidchin
committed
Remove values prop, use value instead
1 parent e162997 commit 1eedc58

File tree

8 files changed

+64
-63
lines changed

8 files changed

+64
-63
lines changed

‎README.md‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ If accepting a range of values:
1717

1818
```{js}
1919
import React from 'react';
20+
import ReactDOM from 'react-dom';
2021
import InputRange from 'react-input-range';
2122
2223
class App extends React.Component {
@@ -42,20 +43,20 @@ class App extends React.Component {
4243
<InputRange
4344
maxValue={20}
4445
minValue={0}
45-
values={this.state.values}
46+
value={this.state.values}
4647
onChange={this.handleValuesChange.bind(this)}
4748
/>
4849
);
4950
}
5051
}
5152
52-
React.render(
53+
ReactDOM.render(
5354
<App />,
5455
document.getElementById('app')
5556
);
5657
```
5758

58-
If accepting a single value, use `value` prop instead of `values`, i.e.:
59+
If accepting a single value, pass a number to `value` prop, i.e.:
5960

6061
```{js}
6162
<InputRange
@@ -67,20 +68,18 @@ If accepting a single value, use `value` prop instead of `values`, i.e.:
6768
```
6869

6970
### Options
70-
Property | Type | Description
71-
:-----------------------|:------------------------|:----------------------------------
72-
ariaLabelledby |string |`aria-labelledby` attribute
73-
classNames |Object.&lt;string&gt; |CSS class names
74-
defaultValue |number |Default value
75-
defaultValues |Object |Default values
76-
disabled |boolean |Disabled or not
77-
maxValue |number |Maximum value it can accept
78-
minValue |number |Minimum value it can accept
79-
name |string |Name of `form` input
80-
onChange |Function |`onChange` callback (required)
81-
step |number |Increment/decrement value
82-
value |number |Current value
83-
values |Object |Current range of values
71+
Property | Type | Description
72+
:-----------------------|:-----------------------------------|:----------------------------------
73+
ariaLabelledby |string |`aria-labelledby` attribute
74+
classNames |Object.&lt;string&gt; |CSS class names
75+
defaultValue |number &vert; Object.&lt;number&gt; |Default value(s)
76+
disabled |boolean |Disabled or not
77+
maxValue |number |Maximum value it can accept
78+
minValue |number |Minimum value it can accept
79+
name |string |Name of `form` input
80+
onChange |Function |`onChange` callback (required)
81+
step |number |Increment/decrement value
82+
value |number &vert; Object.&lt;number&gt; |Current value(s) (required)
8483

8584
## Development
8685

‎example/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<body>
1010
<div id="app"></div>
1111

12-
<script src="https://fb.me/react-0.14.3.js"></script>
13-
<script src="https://fb.me/react-dom-0.14.3.js"></script>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
1414
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.js"></script>
1515
<script src="./build/example.js"></script>
1616
</body>

‎example/js/App.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,50 +9,50 @@ class App extends React.Component {
99
value: 5,
1010
value2: null,
1111
value3: 10,
12-
values: {
12+
value4: {
1313
min: 5,
1414
max: 10,
1515
},
16-
values2: {
16+
value5: {
1717
min: null,
1818
max: null,
1919
}
2020
};
2121
}
2222

23-
handleValuesChange(component, values) {
23+
handleValueChange(component, value) {
2424
this.setState({
25-
values: values,
25+
value: value || 0,
2626
});
2727
}
2828

29-
handleValues2Change(component, values) {
29+
handleValue2Change(component, value) {
3030
this.setState({
31-
values2: values,
31+
value2: value || 0,
3232
});
3333
}
3434

35-
handleValueChange(component, value) {
35+
handleValue3Change(component, value) {
3636
this.setState({
37-
value: value || 0,
37+
value3: value || 0,
3838
});
3939
}
4040

41-
handleValue2Change(component, value) {
41+
handleValue4Change(component, values) {
4242
this.setState({
43-
value2: value || 0,
43+
value4: values,
4444
});
4545
}
4646

47-
handleValue3Change(component, value) {
47+
handleValue5Change(component, values) {
4848
this.setState({
49-
value3: value || 0,
49+
value5: values,
5050
});
5151
}
5252

5353
render() {
5454
const defaultValue = 2;
55-
const defaultValues = {
55+
const defaultValue2 = {
5656
min: 2,
5757
max: 8,
5858
};
@@ -69,24 +69,24 @@ class App extends React.Component {
6969
<InputRange
7070
maxValue={20}
7171
minValue={0}
72-
values={this.state.values}
73-
onChange={this.handleValuesChange.bind(this)}
72+
value={this.state.value4}
73+
onChange={this.handleValue4Change.bind(this)}
7474
/>
7575

7676
<InputRange
77-
maxValue={20}
78-
minValue={0}
77+
maxValue={10}
78+
minValue={-10}
7979
value={this.state.value2}
8080
defaultValue={defaultValue}
8181
onChange={this.handleValue2Change.bind(this)}
8282
/>
8383

8484
<InputRange
85-
maxValue={20}
86-
minValue={0}
87-
values={this.state.values2}
88-
defaultValues={defaultValues}
89-
onChange={this.handleValues2Change.bind(this)}
85+
maxValue={10}
86+
minValue={-10}
87+
value={this.state.value5}
88+
defaultValue={defaultValue2}
89+
onChange={this.handleValue5Change.bind(this)}
9090
/>
9191

9292
<InputRange

‎src/InputRange/InputRange.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Track from './Track';
44
import Label from './Label';
55
import defaultClassNames from './defaultClassNames';
66
import valueTransformer from './valueTransformer';
7-
import { autobind, captialize, distanceTo, length } from './util';
7+
import { autobind, captialize, distanceTo, isObject, length } from './util';
88
import { maxMinValuePropType } from './propTypes';
99

1010
// Constants
@@ -167,8 +167,8 @@ class InputRange extends React.Component {
167167
}
168168

169169
get isMultiValue() {
170-
return this.props.hasOwnProperty('defaultValues') ||
171-
this.props.hasOwnProperty('values');
170+
return isObject(this.props.value) ||
171+
isObject(this.props.defaultValue);
172172
}
173173

174174
// Methods
@@ -315,23 +315,23 @@ InputRange.propTypes = {
315315
ariaLabelledby: React.PropTypes.string,
316316
classNames: React.PropTypes.objectOf(React.PropTypes.string),
317317
defaultValue: maxMinValuePropType,
318-
defaultValues: maxMinValuePropType,
319318
disabled: React.PropTypes.bool,
320319
maxValue: maxMinValuePropType,
321320
minValue: maxMinValuePropType,
322321
name: React.PropTypes.string,
323322
onChange: React.PropTypes.func.isRequired,
324323
step: React.PropTypes.number,
325324
value: maxMinValuePropType,
326-
values: maxMinValuePropType,
327325
};
328326

329327
InputRange.defaultProps = {
330328
classNames: defaultClassNames,
329+
defaultValue: 0,
331330
disabled: false,
332-
minValue: 0,
333331
maxValue: 10,
332+
minValue: 0,
334333
step: 1,
334+
value: null,
335335
};
336336

337337
export default InputRange;

‎src/InputRange/propTypes.js‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,19 @@ function maxMinValuePropType(props) {
55
const maxValue = props.maxValue;
66
const minValue = props.minValue;
77
const value = props.value;
8-
const values = props.values;
98
const defaultValue = props.defaultValue;
10-
const defaultValues = props.defaultValues;
9+
const isValueNumber = isNumber(value);
10+
const isDefaultValueNumber = isNumber(defaultValue);
11+
const isValueNumberObject = objectOf(value, isNumber);
12+
const isDefaultValueNumberObject = objectOf(defaultValue, isNumber);
1113

12-
if (!values &&
13-
!defaultValues &&
14-
!isNumber(value) &&
15-
!isNumber(defaultValue)) {
16-
return new Error('`value` or `defaultValue` must be a number');
14+
if (value === undefined) {
15+
return new Error('`value` must be defined');
1716
}
1817

19-
if (!isNumber(value) &&
20-
!isNumber(defaultValue) &&
21-
!objectOf(values, isNumber) &&
22-
!objectOf(defaultValues, isNumber)) {
23-
return new Error('`values` or `defaultValues` must be an object of numbers');
18+
if (!isValueNumber && !isDefaultValueNumber &&
19+
!isValueNumberObject && !isDefaultValueNumberObject) {
20+
return new Error('`value` or `defaultValue` must be a number or an array');
2421
}
2522

2623
if (minValue >= maxValue) {

‎src/InputRange/util.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ function isNumber(number) {
4040
return typeof number === 'number';
4141
}
4242

43+
function isObject(object) {
44+
return object !== null && typeof object === 'object';
45+
}
46+
4347
function isEmpty(obj) {
4448
if (!obj) {
4549
return true;
@@ -67,7 +71,7 @@ function arrayOf(array, predicate) {
6771
}
6872

6973
function objectOf(object, predicate, keys) {
70-
if (typeof object !== 'object') {
74+
if (!isObject(object)) {
7175
return false;
7276
}
7377

@@ -100,6 +104,7 @@ const util = {
100104
extend,
101105
isEmpty,
102106
isNumber,
107+
isObject,
103108
length,
104109
objectOf,
105110
omit,

‎src/InputRange/valueTransformer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ function valueFromPosition(inputRange, position) {
1818

1919
function valuesFromProps(inputRange, { props } = inputRange) {
2020
if (inputRange.isMultiValue) {
21-
let values = props.values;
21+
let values = props.value;
2222

2323
if (isEmpty(values) || !objectOf(values, isNumber)) {
24-
values = props.defaultValues;
24+
values = props.defaultValue;
2525
}
2626

2727
return Object.create(values);

‎test/InputRange.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ describe('InputRange', () => {
1919

2020
onChange = jasmine.createSpy('onChange');
2121
inputRange = renderComponent(
22-
<InputRange maxValue={20} minValue={0} values={values} onChange={onChange} />
22+
<InputRange maxValue={20} minValue={0} value={values} onChange={onChange} />
2323
);
2424
});
2525

0 commit comments

Comments
 (0)