Skip to content
Permalink
Browse files

refator: Stop passing components in callbacks

  • Loading branch information...
davidchin committed Jan 26, 2017
1 parent cc045bc commit c824064aa95890d60b0ac296c080e68021ff2288
@@ -32,43 +32,43 @@ export default class ExampleApp extends React.Component {
this.handleValue5Change = this.handleValue5Change.bind(this);
}

handleValueChange(component, value) {
handleValueChange(value) {
this.setState({
value: value || 0,
});
}

handleValue2Change(component, value) {
handleValue2Change(value) {
this.setState({
value2: value || 0,
});
}

handleValue3Change(component, value) {
handleValue3Change(value) {
this.setState({
value3: value || 0,
});
}

handleValue4Change(component, values) {
handleValue4Change(values) {
this.setState({
value4: values,
});
}

handleValue5Change(component, values) {
handleValue5Change(values) {
this.setState({
value5: values,
});
}

handleValue6Change(component, values) {
handleValue6Change(values) {
this.setState({
value6: values,
});
}

handleChangeComplete(component, value) {
handleChangeComplete(value) {
console.log(value);
}

@@ -40,7 +40,7 @@ declare namespace ReactInputRange {
maxValue?: number;
minValue?: number;
name?: string;
onChange: (element: this, value: (number | IRange)) => void;
onChange: (value: (number | IRange)) => void;
onChangeComplete?: () => void;
step?: number;
value: number | IRange;
@@ -159,19 +159,6 @@ export default class InputRange extends React.Component {
return 'max';
}

/**
* Get the key name of a slider
* @param {Slider} slider - React component
* @return {string} Key name
*/
getKeyFromSlider(slider) {
if (slider === this.sliderMinNode) {
return 'min';
}

return 'max';
}

/**
* Get all slider keys of inputRange
* @return {string[]} Key names
@@ -286,9 +273,9 @@ export default class InputRange extends React.Component {
}

if (this.isMultiValue()) {
this.props.onChange(this, values);
this.props.onChange(values);
} else {
this.props.onChange(this, values.max);
this.props.onChange(values.max);
}
}

@@ -332,14 +319,13 @@ export default class InputRange extends React.Component {
/**
* Handle any mousemove event received by the slider
* @param {SyntheticEvent} event - User event
* @param {Slider} slider - React component
* @param {string} key - Slider type
*/
handleSliderMouseMove(event, slider) {
handleSliderMouseMove(event, key) {
if (this.props.disabled) {
return;
}

const key = this.getKeyFromSlider(slider);
const position = valueTransformer.positionFromEvent(event, this.getTrackClientRect());

requestAnimationFrame(() => this.updatePosition(key, position));
@@ -348,15 +334,14 @@ export default class InputRange extends React.Component {
/**
* Handle any keydown event received by the slider
* @param {SyntheticEvent} event - User event
* @param {string} key - Slider type
* @param {Slider} slider - React component
*/
handleSliderKeyDown(event, slider) {
handleSliderKeyDown(event, key) {
if (this.props.disabled) {
return;
}

const key = this.getKeyFromSlider(slider);

switch (event.keyCode) {
case LEFT_ARROW:
case DOWN_ARROW:
@@ -378,10 +363,9 @@ export default class InputRange extends React.Component {
/**
* Handle any mousedown event received by the track
* @param {SyntheticEvent} event - User event
* @param {Track} track - React component
* @param {Point} position - Mousedown position
*/
handleTrackMouseDown(event, track, position) {
handleTrackMouseDown(event, position) {
if (this.props.disabled) {
return;
}
@@ -411,7 +395,7 @@ export default class InputRange extends React.Component {
}

if (this.startValue !== this.props.value) {
this.props.onChangeComplete(this, this.props.value);
this.props.onChangeComplete(this.props.value);
}

this.startValue = null;
@@ -525,11 +509,11 @@ export default class InputRange extends React.Component {

/**
* Get an array of hidden input HTML for rendering
* @return {?string[]} Array of HTML
* @return {string[]} Array of HTML
*/
renderHiddenInputs() {
if (!this.props.name) {
return;
return [];
}

const isMultiValue = this.isMultiValue();
@@ -18,6 +18,7 @@ export default class Slider extends React.Component {
* @property {Function} onSliderKeyDown
* @property {Function} onSliderMouseMove
* @property {Function} percentage
* @property {Function} type
* @property {Function} value
*/
static get propTypes() {
@@ -31,6 +32,7 @@ export default class Slider extends React.Component {
onSliderKeyDown: React.PropTypes.func.isRequired,
onSliderMouseMove: React.PropTypes.func.isRequired,
percentage: React.PropTypes.number.isRequired,
type: React.PropTypes.string.isRequired,
value: React.PropTypes.number.isRequired,
};
}
@@ -102,7 +104,7 @@ export default class Slider extends React.Component {
* @param {SyntheticEvent} event - User event
*/
handleMouseMove(event) {
this.props.onSliderMouseMove(event, this);
this.props.onSliderMouseMove(event, this.props.type);
}

/**
@@ -123,7 +125,7 @@ export default class Slider extends React.Component {
* @param {SyntheticEvent} event - User event
*/
handleTouchMove(event) {
this.props.onSliderMouseMove(event, this);
this.props.onSliderMouseMove(event, this.props.type);
}

/**
@@ -143,7 +145,7 @@ export default class Slider extends React.Component {
* @param {SyntheticEvent} event - User event
*/
handleKeyDown(event) {
this.props.onSliderKeyDown(event, this);
this.props.onSliderKeyDown(event, this.props.type);
}

/**
@@ -66,7 +66,7 @@ export default class Track extends React.Component {
y: 0,
};

this.props.onTrackMouseDown(event, this, position);
this.props.onTrackMouseDown(event, position);
}

/**
Oops, something went wrong.

0 comments on commit c824064

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