From 2c6e02813258c07fec14d8dbd9234908de9cecf1 Mon Sep 17 00:00:00 2001 From: Steven Cook Date: Sat, 1 Jul 2017 11:48:26 +1000 Subject: [PATCH 1/4] Added support for passing through control of mouse up and down events on days. --- src/Day.js | 6 ++++++ src/DayPicker.js | 2 ++ src/Month.js | 4 ++++ types/index.d.ts | 10 ++++++++++ 4 files changed, 22 insertions(+) diff --git a/src/Day.js b/src/Day.js index 284022e15f..29160b9c46 100644 --- a/src/Day.js +++ b/src/Day.js @@ -34,6 +34,8 @@ export default class Day extends Component { onKeyDown: PropTypes.func, onMouseEnter: PropTypes.func, onMouseLeave: PropTypes.func, + onMouseDown: PropTypes.func, + onMouseUp: propTypes.func, onTouchEnd: PropTypes.func, onTouchStart: PropTypes.func, onFocus: PropTypes.func, @@ -65,6 +67,8 @@ export default class Day extends Component { modifiers, onMouseEnter, onMouseLeave, + onMouseUp, + onMouseDown, onClick, onKeyDown, onTouchStart, @@ -111,6 +115,8 @@ export default class Day extends Component { onKeyDown={handleEvent(onKeyDown, day, modifiers)} onMouseEnter={handleEvent(onMouseEnter, day, modifiers)} onMouseLeave={handleEvent(onMouseLeave, day, modifiers)} + onMouseUp={handleEvent(onMouseUp, day, modifiers)} + onMouseDown={handleEvent(onMouseDown, day, modifiers)} onTouchEnd={handleEvent(onTouchEnd, day, modifiers)} onTouchStart={handleEvent(onTouchStart, day, modifiers)} onFocus={handleEvent(onFocus, day, modifiers)} diff --git a/src/DayPicker.js b/src/DayPicker.js index b57bd72d98..0989065ca1 100644 --- a/src/DayPicker.js +++ b/src/DayPicker.js @@ -105,6 +105,8 @@ export default class DayPicker extends Component { onDayKeyDown: PropTypes.func, onDayMouseEnter: PropTypes.func, onDayMouseLeave: PropTypes.func, + onDayMouseDown: PropTypes.func, + onDayMouseUp: PropTypes.func, onDayTouchStart: PropTypes.func, onDayTouchEnd: PropTypes.func, onDayFocus: PropTypes.func, diff --git a/src/Month.js b/src/Month.js index 3545fbab67..1dcb1a6723 100644 --- a/src/Month.js +++ b/src/Month.js @@ -54,6 +54,8 @@ export default class Month extends Component { onDayKeyDown: PropTypes.func, onDayMouseEnter: PropTypes.func, onDayMouseLeave: PropTypes.func, + onDayMouseDown: PropTypes.func, + onDAyMouseUp: PropTypes.func, onDayTouchEnd: PropTypes.func, onDayTouchStart: PropTypes.func, onWeekClick: PropTypes.func, @@ -107,6 +109,8 @@ export default class Month extends Component { onKeyDown={this.props.onDayKeyDown} onMouseEnter={this.props.onDayMouseEnter} onMouseLeave={this.props.onDayMouseLeave} + onMouseDown={this.props.onMouseDown} + onMouseUp={this.props.onMouseUp} onTouchEnd={this.props.onDayTouchEnd} onTouchStart={this.props.onDayTouchStart} > diff --git a/types/index.d.ts b/types/index.d.ts index 44b011ffee..7b334835ea 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -203,6 +203,16 @@ declare namespace DayPicker { modifiers: DayModifiers, e: React.MouseEvent ): void; + onDayMouseDown?( + day: Date, + modifiers: DayModifiers, + e: React.MouseEvent + ): void; + onDayMouseUp?( + day: Date, + modifiers: DayModifiers, + e: React.MouseEvent + ): void; onDayTouchEnd?( day: Date, modifiers: DayModifiers, From 014e533b817f884ec751422601edc0b3bcde064a Mon Sep 17 00:00:00 2001 From: Steven Cook Date: Tue, 4 Jul 2017 20:42:20 +1000 Subject: [PATCH 2/4] Corrected typos and eslint runs clean. --- src/Day.js | 2 +- src/Month.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Day.js b/src/Day.js index 29160b9c46..953bf36d0a 100644 --- a/src/Day.js +++ b/src/Day.js @@ -35,7 +35,7 @@ export default class Day extends Component { onMouseEnter: PropTypes.func, onMouseLeave: PropTypes.func, onMouseDown: PropTypes.func, - onMouseUp: propTypes.func, + onMouseUp: PropTypes.func, onTouchEnd: PropTypes.func, onTouchStart: PropTypes.func, onFocus: PropTypes.func, diff --git a/src/Month.js b/src/Month.js index 1dcb1a6723..335fdf1b5d 100644 --- a/src/Month.js +++ b/src/Month.js @@ -55,7 +55,7 @@ export default class Month extends Component { onDayMouseEnter: PropTypes.func, onDayMouseLeave: PropTypes.func, onDayMouseDown: PropTypes.func, - onDAyMouseUp: PropTypes.func, + onDayMouseUp: PropTypes.func, onDayTouchEnd: PropTypes.func, onDayTouchStart: PropTypes.func, onWeekClick: PropTypes.func, @@ -109,8 +109,8 @@ export default class Month extends Component { onKeyDown={this.props.onDayKeyDown} onMouseEnter={this.props.onDayMouseEnter} onMouseLeave={this.props.onDayMouseLeave} - onMouseDown={this.props.onMouseDown} - onMouseUp={this.props.onMouseUp} + onMouseDown={this.props.onDayMouseDown} + onMouseUp={this.props.onDayMouseUp} onTouchEnd={this.props.onDayTouchEnd} onTouchStart={this.props.onDayTouchStart} > From 47ac526dc6be3d66060e55bfd18df60e2e97db2a Mon Sep 17 00:00:00 2001 From: Steven Cook Date: Tue, 4 Jul 2017 21:21:56 +1000 Subject: [PATCH 3/4] Added tests. --- test/daypicker/events.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/test/daypicker/events.js b/test/daypicker/events.js index 4ada20aff3..798324a0f1 100644 --- a/test/daypicker/events.js +++ b/test/daypicker/events.js @@ -100,6 +100,42 @@ describe('DayPicker’s events handlers', () => { expect(arg1).toEqual({ foo: true }); expect(arg2).toBeInstanceOf(SyntheticEvent); }); + it('should call the `onDayMouseDown` event handler', () => { + const handleDayMouseDown = jest.fn(); + + const modifiers = { foo: d => d.getDate() === 15 }; + const wrapper = mount( + + ); + + wrapper.find('.DayPicker-Day--foo').simulate('mouseDown'); + + const arg0 = handleDayMouseDown.mock.calls[0][0]; + const arg1 = handleDayMouseDown.mock.calls[0][1]; + const arg2 = handleDayMouseDown.mock.calls[0][2]; + expect(arg0.getFullYear()).toEqual(new Date().getFullYear()); + expect(arg0.getMonth()).toEqual(new Date().getMonth()); + expect(arg1).toEqual({ foo: true }); + expect(arg2).toBeInstanceOf(SyntheticEvent); + }); + it('should call the `onDayMouseUp` event handler', () => { + const handleDayMouseUp = jest.fn(); + + const modifiers = { foo: d => d.getDate() === 15 }; + const wrapper = mount( + + ); + + wrapper.find('.DayPicker-Day--foo').simulate('mouseUp'); + + const arg0 = handleDayMouseUp.mock.calls[0][0]; + const arg1 = handleDayMouseUp.mock.calls[0][1]; + const arg2 = handleDayMouseUp.mock.calls[0][2]; + expect(arg0.getFullYear()).toEqual(new Date().getFullYear()); + expect(arg0.getMonth()).toEqual(new Date().getMonth()); + expect(arg1).toEqual({ foo: true }); + expect(arg2).toBeInstanceOf(SyntheticEvent); + }); it('should call the `onDayTouchStart` event handler', () => { const handleDayTouchStart = jest.fn(); From dc11b271fe8cbb47ecbf9fc0fe9afa63b4eda649 Mon Sep 17 00:00:00 2001 From: Steven Cook Date: Wed, 5 Jul 2017 07:18:14 +1000 Subject: [PATCH 4/4] Added changes to API docs. --- docs/docs/api-daypicker.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/docs/api-daypicker.md b/docs/docs/api-daypicker.md index 00fe759f5c..f1d0928140 100644 --- a/docs/docs/api-daypicker.md +++ b/docs/docs/api-daypicker.md @@ -30,7 +30,7 @@ permalink: docs/api-daypicker.html #### Events -[onBlur](#onblur), [onCaptionClick](#oncaptionclick), [onDayClick](#ondayclick), [onDayFocus](#ondayfocus), [onDayKeyDown](#ondaykeydown), [onDayMouseEnter](#ondaymouseenter), [onDayMouseLeave](#ondaymouseleave), [onDayTouchEnd](#ondaytouchend), [onDayTouchStart](#ondaytouchstart), [onFocus](#onfocus), [onKeyDown](#onkeydown), [onMonthChange](#onmonthchange) +[onBlur](#onblur), [onCaptionClick](#oncaptionclick), [onDayClick](#ondayclick), [onDayFocus](#ondayfocus), [onDayKeyDown](#ondaykeydown), [onDayMouseEnter](#ondaymouseenter), [onDayMouseLeave](#ondaymouseleave), [onDayMouseDown](#ondaymousedown), [onDayMouseUp](#ondaymouseup), [onDayTouchEnd](#ondaytouchend), [onDayTouchStart](#ondaytouchstart), [onFocus](#onfocus), [onKeyDown](#onkeydown), [onMonthChange](#onmonthchange) #### Methods @@ -372,6 +372,18 @@ Event handler when the mouse enters a day cell. Event handler when the mouse leave a day cell. +### onDayMouseDown + +| **Type**: `(day: date, modifiers: Object, e: SyntheticEvent) ⇒ |void` + +Event handler when the mouse button is pressed on a day cell. + +### onDayMouseUp + +| **Type**: `(day: date, modifiers: Object, e: SyntheticEvent) ⇒ |void` + +Event handler when the mouse button is released on a day cell. + ### onDayTouchStart | **Type**: `(day: date, modifiers: Object, e: SyntheticEvent) ⇒ |void`