From 6925570467560374c37231b66ed43aad06521e38 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 29 Jan 2018 19:48:56 +0100 Subject: [PATCH 1/4] Don't handle key events if slider is disabled --- components/slider/Slider.js | 17 ++++++++++++++--- components/slider/__tests__/index.spec.js | 11 +++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/components/slider/Slider.js b/components/slider/Slider.js index 01edef5c..7c21d4d5 100644 --- a/components/slider/Slider.js +++ b/components/slider/Slider.js @@ -10,6 +10,13 @@ import events from '../utils/events'; import InjectProgressBar from '../progress_bar/ProgressBar'; import InjectInput from '../input/Input'; +const KEYS = { + ENTER: 13, + ESC: 27, + ARROW_UP: 38, + ARROW_DOWN: 40, +}; + const factory = (ProgressBar, Input) => { class Slider extends Component { static propTypes = { @@ -148,9 +155,13 @@ const factory = (ProgressBar, Input) => { }; handleKeyDown = (event) => { - if ([13, 27].indexOf(event.keyCode) !== -1) this.getInput().blur(); - if (event.keyCode === 38) this.addToValue(this.props.step); - if (event.keyCode === 40) this.addToValue(-this.props.step); + const { disabled, step } = this.props; + const { ARROW_DOWN, ARROW_UP, ENTER, ESC } = KEYS; + + if (disabled) return; + if ([ENTER, ESC].includes(event.keyCode)) this.getInput().blur(); + if (event.keyCode === ARROW_UP) this.addToValue(step); + if (event.keyCode === ARROW_DOWN) this.addToValue(-step); }; handleMouseDown = (event) => { diff --git a/components/slider/__tests__/index.spec.js b/components/slider/__tests__/index.spec.js index 6a5c429e..c215c10a 100644 --- a/components/slider/__tests__/index.spec.js +++ b/components/slider/__tests__/index.spec.js @@ -63,6 +63,17 @@ describe('Slider', () => { }); }); + describe('#handleKeyDown', () => { + it('does not call addToValue if is disabled', () => { + const slider = shallow().instance(); + slider.addToValue = jest.fn(); + + slider.handleKeyDown({ keyCode: 40 }); + + expect(slider.addToValue).not.toHaveBeenCalled(); + }); + }); + describe('#render', () => { it('contains a linear progress bar with proper properties', () => { const wrapper = mount(); From a7d0c5ba53d4e1b6ed75a97aa803313e6a4760d8 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 29 Jan 2018 20:47:44 +0100 Subject: [PATCH 2/4] Use innerRef to blur input --- components/slider/Slider.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/components/slider/Slider.js b/components/slider/Slider.js index 7c21d4d5..3e25b945 100644 --- a/components/slider/Slider.js +++ b/components/slider/Slider.js @@ -104,12 +104,6 @@ const factory = (ProgressBar, Input) => { events.removeEventsFromDocument(this.getKeyboardEvents()); } - getInput() { - return this.inputNode && this.inputNode.getWrappedInstance - ? this.inputNode.getWrappedInstance() - : this.inputNode; - } - getKeyboardEvents() { return { keydown: this.handleKeyDown, @@ -159,13 +153,13 @@ const factory = (ProgressBar, Input) => { const { ARROW_DOWN, ARROW_UP, ENTER, ESC } = KEYS; if (disabled) return; - if ([ENTER, ESC].includes(event.keyCode)) this.getInput().blur(); + if ([ENTER, ESC].includes(event.keyCode)) this.inputNode.blur(); if (event.keyCode === ARROW_UP) this.addToValue(step); if (event.keyCode === ARROW_DOWN) this.addToValue(-step); }; handleMouseDown = (event) => { - if (this.state.inputFocused) this.getInput().blur(); + if (this.state.inputFocused) this.inputNode.blur(); events.addEventsToDocument(this.getMouseEventMap()); this.start(events.getMousePosition(event)); events.pauseEvent(event); @@ -203,7 +197,7 @@ const factory = (ProgressBar, Input) => { }; handleTouchStart = (event) => { - if (this.state.inputFocused) this.getInput().blur(); + if (this.state.inputFocused) this.inputNode.blur(); this.start(events.getTouchPosition(event)); events.addEventsToDocument(this.getTouchEventMap()); events.pauseEvent(event); @@ -268,7 +262,7 @@ const factory = (ProgressBar, Input) => { if (!this.props.editable) return undefined; return ( { this.inputNode = node; }} + innerRef={(node) => { this.inputNode = node; }} className={this.props.theme.input} disabled={this.props.disabled} onFocus={this.handleInputFocus} From f8a7e88259e5971f2949ba8145b022e7cd69338f Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Wed, 21 Feb 2018 20:29:08 +0100 Subject: [PATCH 3/4] Use code instead of keyCode --- components/slider/Slider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/slider/Slider.js b/components/slider/Slider.js index 3e25b945..07b10b1d 100644 --- a/components/slider/Slider.js +++ b/components/slider/Slider.js @@ -153,9 +153,9 @@ const factory = (ProgressBar, Input) => { const { ARROW_DOWN, ARROW_UP, ENTER, ESC } = KEYS; if (disabled) return; - if ([ENTER, ESC].includes(event.keyCode)) this.inputNode.blur(); - if (event.keyCode === ARROW_UP) this.addToValue(step); - if (event.keyCode === ARROW_DOWN) this.addToValue(-step); + 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) => { From 6fa13f1c5ca885697b62bb55d3d1ac1b6702baf5 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Sat, 3 Mar 2018 12:01:46 +0100 Subject: [PATCH 4/4] =?UTF-8?q?Use=20proper=20code=20values=20in=20KEYS=20?= =?UTF-8?q?constant=20=F0=9F=A4=A6=F0=9F=8F=BB=E2=80=8D=E2=99=82=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/slider/Slider.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/slider/Slider.js b/components/slider/Slider.js index 07b10b1d..092e44de 100644 --- a/components/slider/Slider.js +++ b/components/slider/Slider.js @@ -11,10 +11,10 @@ import InjectProgressBar from '../progress_bar/ProgressBar'; import InjectInput from '../input/Input'; const KEYS = { - ENTER: 13, - ESC: 27, - ARROW_UP: 38, - ARROW_DOWN: 40, + ENTER: 'Enter', + ESC: 'Escape', + ARROW_UP: 'ArrowUp', + ARROW_DOWN: 'ArrowDown', }; const factory = (ProgressBar, Input) => {