From 88c26cc575ac53568edbe20ad67e51b7475afd50 Mon Sep 17 00:00:00 2001 From: jbadan Date: Mon, 12 Aug 2019 15:33:00 -0700 Subject: [PATCH 1/3] datepicker onblur callback --- src/DatePicker/DatePicker.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index 546403527..daa50607c 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -207,12 +207,17 @@ class DatePicker extends Component { clickOutside = () => { this.validateDates(); - this.setState({ hidden: true }); + this.setState({ + hidden: true + }, () => { + this.props.onBlur({ + date: this.state.selectedDate, + formattedDate: this.state.formattedDate + }); + }); }; updateDate = (date) => { - // console.log('Inside updateDate function. The event is: ', date); - if (this.props.enableRangeSelection) { if (date.length === 2) { let firstDateMonth = date[0].getMonth() + 1; @@ -269,7 +274,7 @@ class DatePicker extends Component { render() { const { enableRangeSelection, disableWeekends, disableBeforeDate, disableAfterDate, disableWeekday, disablePastDates, disableFutureDates, blockedDates, disabledDates, - compact, className, inputProps, buttonProps, ...props } = this.props; + compact, className, inputProps, buttonProps, onBlur, ...props } = this.props; const datePickerClasses = classnames( 'fd-date-picker', @@ -303,6 +308,8 @@ class DatePicker extends Component { onBlur({ date: this.state.selectedDate, + formattedDate: this.state.formattedDate })} onChange={this.modifyDate} onClick={() => this.openCalendar('input')} onKeyPress={this.sendUpdate} @@ -350,7 +357,12 @@ DatePicker.propTypes = { buttonProps: PropTypes.object, compact: PropTypes.bool, enableRangeSelection: PropTypes.bool, - inputProps: PropTypes.object + inputProps: PropTypes.object, + onBlur: PropTypes.func +}; + +DatePicker.defaultProps = { + onBlur: () => {} }; DatePicker.propDescriptions = { From 79329974b8b19cab436b2c9f9697876231eabd37 Mon Sep 17 00:00:00 2001 From: jbadan Date: Mon, 12 Aug 2019 15:41:33 -0700 Subject: [PATCH 2/3] add prop description --- src/DatePicker/DatePicker.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index daa50607c..7791244b8 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -367,7 +367,8 @@ DatePicker.defaultProps = { DatePicker.propDescriptions = { ...Calendar.propDescriptions, - enableRangeSelection: 'Set to **true** to enable the selection of a date range (begin and end).' + enableRangeSelection: 'Set to **true** to enable the selection of a date range (begin and end).', + onBlur: 'Callback function for onBlur events. In the object returned, date is the date object and formattedDate is the formatted date.' }; export default DatePicker; From a1ec193f6f7eab2f9774581364ee29d5005250b3 Mon Sep 17 00:00:00 2001 From: jbadan Date: Tue, 13 Aug 2019 08:45:45 -0700 Subject: [PATCH 3/3] add tests/pr feedback --- src/DatePicker/DatePicker.js | 12 +++++++++--- src/DatePicker/DatePicker.test.js | 31 +++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index 7791244b8..354345e8c 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -271,6 +271,13 @@ class DatePicker extends Component { } } + _handleBlur = () => { + this.props.onBlur({ + date: this.state.selectedDate, + formattedDate: this.state.formattedDate + }); + }; + render() { const { enableRangeSelection, disableWeekends, disableBeforeDate, disableAfterDate, disableWeekday, disablePastDates, disableFutureDates, blockedDates, disabledDates, @@ -308,8 +315,7 @@ class DatePicker extends Component { onBlur({ date: this.state.selectedDate, - formattedDate: this.state.formattedDate })} + onBlur={this._handleBlur} onChange={this.modifyDate} onClick={() => this.openCalendar('input')} onKeyPress={this.sendUpdate} @@ -368,7 +374,7 @@ DatePicker.defaultProps = { DatePicker.propDescriptions = { ...Calendar.propDescriptions, enableRangeSelection: 'Set to **true** to enable the selection of a date range (begin and end).', - onBlur: 'Callback function for onBlur events. In the object returned, date is the date object and formattedDate is the formatted date.' + onBlur: 'Callback function for onBlur events. In the object returned, `date` is the date object and `formattedDate` is the formatted date.' }; export default DatePicker; diff --git a/src/DatePicker/DatePicker.test.js b/src/DatePicker/DatePicker.test.js index 70fffa5b3..418bad833 100644 --- a/src/DatePicker/DatePicker.test.js +++ b/src/DatePicker/DatePicker.test.js @@ -367,6 +367,37 @@ describe('', () => { expect(wrapper.state('formattedDate')).toEqual('05/04/2018'); }); + describe('onBlur callback', () => { + test('should call onBlur after clicking outside calendar overlay', () => { + const blur = jest.fn(); + const element = mount(); + + element.find('button.fd-popover__control.fd-button--light.sap-icon--calendar').simulate('click', { type: 'input' }); + + element.find('table.fd-calendar__table tbody.fd-calendar__group tr.fd-calendar__row td.fd-calendar__item:not(.fd-calendar__item--other-month)') + .at(0) + .simulate('click'); + + let event = new MouseEvent('mousedown', { target: document.querySelector('body') }); + document.dispatchEvent(event); + + expect(blur).toHaveBeenCalledTimes(1); + + expect(blur).toHaveBeenCalledWith(expect.objectContaining({ date: expect.any(Date) })); + }); + test('should call onBlur after leaving input', () => { + const blur = jest.fn(); + const element = mount(); + + element.find('input[type="text"]').simulate('click', { type: 'input' }); + + let event = new MouseEvent('mousedown', { target: document.querySelector('body') }); + document.dispatchEvent(event); + + expect(blur).toHaveBeenCalledTimes(1); + }); + }); + describe('Prop spreading', () => { test('should allow props to be spread to the DatePicker component', () => { const element = mount();