vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Fixes for the slider

old
Javi Velasco 2015-11-02 16:38:35 +01:00
parent dcd95e64cc
commit 31762b7768
2 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/slider/__tests__/index.spec.jsx
View File

@ -120,6 +120,7 @@ describe('Slider', function () {
props = { min: -500, max: 500 };
state = { sliderStart: 0, sliderLength: 1000 };
slider = utils.renderComponent(Slider, props, state);
slider.handleResize = (event, callback) => { callback(); };
});
it('sets pressed state when knob is clicked', function () {
@ -132,30 +133,32 @@ describe('Slider', function () {
expect(slider.state.pressed).toEqual(true);
});
// it('sets a proper value when the slider is clicked', function () {
// TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 200 });
// expect(slider.state.value).toEqual(-300);
// });
it('sets a proper value when the slider is clicked', function () {
TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 200 });
expect(slider.state.value).toEqual(-300);
});
// it('sets a proper value when the slider is touched', function () {
// TestUtils.Simulate.touchStart(slider.refs.slider, {touches: [{pageX: 200, pageY: 0}]});
// expect(slider.state.value).toEqual(-300);
// });
it('sets a proper value when the slider is touched', function () {
TestUtils.Simulate.touchStart(slider.refs.slider, {touches: [{pageX: 200, pageY: 0}]});
expect(slider.state.value).toEqual(-300);
});
it('changes its value when input changes', function () {
it('changes input value when slider changes', function () {
slider = utils.renderComponent(Slider, {editable: true}, {sliderStart: 0, sliderLength: 1000});
slider.handleResize = (event, callback) => { callback(); };
input = TestUtils.findRenderedComponentWithType(slider, Input);
TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
expect(input.state.value).toEqual(90);
});
it('changes its value when input is blurred', function () {
slider = utils.renderComponent(Slider, {editable: true, value: 50});
input = TestUtils.findRenderedComponentWithType(slider, Input);
TestUtils.Simulate.change(input.refs.input, {target: {value: '80'}});
TestUtils.Simulate.blur(input.refs.input);
expect(slider.state.value).toEqual(80);
});
// it('changes input value when slider changes', function () {
// slider = utils.renderComponent(Slider, {editable: true}, {sliderStart: 0, sliderLength: 1000});
// input = TestUtils.findRenderedComponentWithType(slider, Input);
// TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
// expect(input.state.value).toEqual(90);
// });
it('calls onChange callback when the value is changed', function () {
const onChangeSpy = sinon.spy();
slider = utils.renderComponent(Slider, {onChange: onChangeSpy}, {sliderStart: 0, sliderLength: 1000});

20
components/slider/index.jsx
View File

@ -51,11 +51,10 @@ class Slider extends React.Component {
}
}
handleResize = (callback) => {
handleResize = (event, callback) => {
const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
this.setState({sliderStart: left, sliderLength: right - left}, () => {
if (callback) callback();
});
const cb = callback || () => {};
this.setState({sliderStart: left, sliderLength: right - left}, cb);
};
handleSliderFocus = () => {
@ -66,19 +65,20 @@ class Slider extends React.Component {
utils.events.removeEventsFromDocument(this.getKeyboardEvents());
};
handleInputChange = () => {
handleInputBlur = () => {
this.setState({value: this.trimValue(this.refs.input.getValue()) });
};
handleKeyDown = (event) => {
if ([13, 27].indexOf(event.keyCode) !== -1) ReactDOM.findDOMNode(this).blur();
if ([13, 27].indexOf(event.keyCode) !== -1) {
this.refs.input.blur();
ReactDOM.findDOMNode(this).blur();
}
if (event.keyCode === 38) this.addToValue(this.props.step);
if (event.keyCode === 40) this.addToValue(-this.props.step);
if (event.keyCode !== 9) utils.events.pauseEvent(event);
};
handleMouseDown = (event) => {
utils.events.addEventsToDocument(this.getMouseEventMap());
this.start(utils.events.getMousePosition(event));
utils.events.pauseEvent(event);
@ -128,7 +128,7 @@ class Slider extends React.Component {
}
start (position) {
this.handleResize(() => {
this.handleResize(null, () => {
this.setState({pressed: true, value: this.positionToValue(position)});
});
}
@ -192,7 +192,7 @@ class Slider extends React.Component {
<Input
ref='input'
className={style.input}
onChange={this.handleInputChange}
onBlur={this.handleInputBlur}
value={this.valueForInput(this.state.value)} />
);
}