Merge pull request #1796 from react-toolbox/fix-key-events-slider-disabled
Don't handle key events if slider is disabledold
commit
24b98ed854
|
@ -10,6 +10,13 @@ import events from '../utils/events';
|
||||||
import InjectProgressBar from '../progress_bar/ProgressBar';
|
import InjectProgressBar from '../progress_bar/ProgressBar';
|
||||||
import InjectInput from '../input/Input';
|
import InjectInput from '../input/Input';
|
||||||
|
|
||||||
|
const KEYS = {
|
||||||
|
ENTER: 'Enter',
|
||||||
|
ESC: 'Escape',
|
||||||
|
ARROW_UP: 'ArrowUp',
|
||||||
|
ARROW_DOWN: 'ArrowDown',
|
||||||
|
};
|
||||||
|
|
||||||
const factory = (ProgressBar, Input) => {
|
const factory = (ProgressBar, Input) => {
|
||||||
class Slider extends Component {
|
class Slider extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
@ -97,12 +104,6 @@ const factory = (ProgressBar, Input) => {
|
||||||
events.removeEventsFromDocument(this.getKeyboardEvents());
|
events.removeEventsFromDocument(this.getKeyboardEvents());
|
||||||
}
|
}
|
||||||
|
|
||||||
getInput() {
|
|
||||||
return this.inputNode && this.inputNode.getWrappedInstance
|
|
||||||
? this.inputNode.getWrappedInstance()
|
|
||||||
: this.inputNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
getKeyboardEvents() {
|
getKeyboardEvents() {
|
||||||
return {
|
return {
|
||||||
keydown: this.handleKeyDown,
|
keydown: this.handleKeyDown,
|
||||||
|
@ -148,13 +149,17 @@ const factory = (ProgressBar, Input) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleKeyDown = (event) => {
|
handleKeyDown = (event) => {
|
||||||
if ([13, 27].indexOf(event.keyCode) !== -1) this.getInput().blur();
|
const { disabled, step } = this.props;
|
||||||
if (event.keyCode === 38) this.addToValue(this.props.step);
|
const { ARROW_DOWN, ARROW_UP, ENTER, ESC } = KEYS;
|
||||||
if (event.keyCode === 40) this.addToValue(-this.props.step);
|
|
||||||
|
if (disabled) return;
|
||||||
|
if ([ENTER, ESC].includes(event.code)) this.inputNode.blur();
|
||||||
|
if (event.code === ARROW_UP) this.addToValue(step);
|
||||||
|
if (event.code === ARROW_DOWN) this.addToValue(-step);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleMouseDown = (event) => {
|
handleMouseDown = (event) => {
|
||||||
if (this.state.inputFocused) this.getInput().blur();
|
if (this.state.inputFocused) this.inputNode.blur();
|
||||||
events.addEventsToDocument(this.getMouseEventMap());
|
events.addEventsToDocument(this.getMouseEventMap());
|
||||||
this.start(events.getMousePosition(event));
|
this.start(events.getMousePosition(event));
|
||||||
events.pauseEvent(event);
|
events.pauseEvent(event);
|
||||||
|
@ -192,7 +197,7 @@ const factory = (ProgressBar, Input) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleTouchStart = (event) => {
|
handleTouchStart = (event) => {
|
||||||
if (this.state.inputFocused) this.getInput().blur();
|
if (this.state.inputFocused) this.inputNode.blur();
|
||||||
this.start(events.getTouchPosition(event));
|
this.start(events.getTouchPosition(event));
|
||||||
events.addEventsToDocument(this.getTouchEventMap());
|
events.addEventsToDocument(this.getTouchEventMap());
|
||||||
events.pauseEvent(event);
|
events.pauseEvent(event);
|
||||||
|
@ -257,7 +262,7 @@ const factory = (ProgressBar, Input) => {
|
||||||
if (!this.props.editable) return undefined;
|
if (!this.props.editable) return undefined;
|
||||||
return (
|
return (
|
||||||
<Input
|
<Input
|
||||||
ref={(node) => { this.inputNode = node; }}
|
innerRef={(node) => { this.inputNode = node; }}
|
||||||
className={this.props.theme.input}
|
className={this.props.theme.input}
|
||||||
disabled={this.props.disabled}
|
disabled={this.props.disabled}
|
||||||
onFocus={this.handleInputFocus}
|
onFocus={this.handleInputFocus}
|
||||||
|
|
|
@ -63,6 +63,17 @@ describe('Slider', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('#handleKeyDown', () => {
|
||||||
|
it('does not call addToValue if is disabled', () => {
|
||||||
|
const slider = shallow(<Slider disabled />).instance();
|
||||||
|
slider.addToValue = jest.fn();
|
||||||
|
|
||||||
|
slider.handleKeyDown({ keyCode: 40 });
|
||||||
|
|
||||||
|
expect(slider.addToValue).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('#render', () => {
|
describe('#render', () => {
|
||||||
it('contains a linear progress bar with proper properties', () => {
|
it('contains a linear progress bar with proper properties', () => {
|
||||||
const wrapper = mount(<Slider min={100} max={1000} value={140} />);
|
const wrapper = mount(<Slider min={100} max={1000} value={140} />);
|
||||||
|
|
Loading…
Reference in New Issue