Skip to content
Permalink
Browse files

refactor: Tidy up exposed props

  • Loading branch information...
davidchin committed Jan 28, 2017
1 parent beec8a5 commit bb40806cacbaaa1bf3b63c3b5dbe7bd578c8d613
@@ -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>
);
@@ -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;
@@ -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>
@@ -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`]}>
@@ -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`);
}
@@ -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,
};
}

@@ -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));
});
});
});

0 comments on commit bb40806

Please sign in to comment.
You can’t perform that action at this time.