From 329c2580fbb9de8e332697766b75fbeaab27945a Mon Sep 17 00:00:00 2001 From: jajugoguma Date: Mon, 21 Nov 2022 17:35:55 +0900 Subject: [PATCH 1/4] feat: add `silent` option on setTime API for preventing firing `change` event --- src/js/timepicker/index.js | 23 ++++++++++++++--------- src/js/timepicker/selectbox.js | 16 ++++++++++------ src/js/timepicker/spinbox.js | 19 ++++++++++++------- 3 files changed, 36 insertions(+), 22 deletions(-) diff --git a/src/js/timepicker/index.js b/src/js/timepicker/index.js index 1542323..ac547b6 100644 --- a/src/js/timepicker/index.js +++ b/src/js/timepicker/index.js @@ -441,8 +441,9 @@ var TimePicker = defineClass( /** * Set values in spinboxes from time * @private + * @param {boolean} silent flag for firing 'change' event */ - syncToInputs: function() { + syncToInputs: function(silent) { var hour = this.hour; var minute = this.minute; @@ -450,8 +451,8 @@ var TimePicker = defineClass( hour = util.getMeridiemHour(hour); } - this.hourInput.setValue(hour); - this.minuteInput.setValue(minute); + this.hourInput.setValue(hour, silent); + this.minuteInput.setValue(minute, silent); }, /** @@ -626,8 +627,9 @@ var TimePicker = defineClass( * Set time * @param {number} hour for time picker - (0~23) * @param {number} minute for time picker + * @param {boolean} silent if it set true, 'change' event will not be fired. */ - setTime: function(hour, minute) { + setTime: function(hour, minute, silent) { if (!this.validItems(hour, minute)) { return; } @@ -635,7 +637,7 @@ var TimePicker = defineClass( this.hour = hour; this.minute = minute; - this.syncToInputs(); + this.syncToInputs(silent); if (this.showMeridiem) { this.syncToMeridiemElements(); } @@ -651,10 +653,12 @@ var TimePicker = defineClass( * console.log(e.hour, e.minute); * }); */ - this.fire('change', { - hour: this.hour, - minute: this.minute - }); + if (!silent) { + this.fire('change', { + hour: this.hour, + minute: this.minute + }); + } }, /** @@ -902,6 +906,7 @@ var TimePicker = defineClass( this.removeEvents(); removeElement(this.element); + // eslint-disable-next-line max-len this.container = this.showMeridiem = this.hourInput = this.minuteInput = this.hour = this.minute = this.inputType = this.element = this.meridiemElement = this.amEl = this.pmEl = null; } } diff --git a/src/js/timepicker/selectbox.js b/src/js/timepicker/selectbox.js index 38cc5d3..907d183 100644 --- a/src/js/timepicker/selectbox.js +++ b/src/js/timepicker/selectbox.js @@ -172,13 +172,16 @@ var Selectbox = defineClass( /** * Set new value * @private + * @param {boolean} silent flag for firing 'change' event */ - _setNewValue: function() { + _setNewValue: function(silent) { var newValue = Number(this._element.value); this._selectedIndex = inArray(newValue, this._items); - this.fire('change', { - value: newValue - }); + if (!silent) { + this.fire('change', { + value: newValue + }); + } }, /** @@ -192,14 +195,15 @@ var Selectbox = defineClass( /** * Set value * @param {number} value - New value + * @param {boolean} silent - flag for firing 'change' event */ - setValue: function(value) { + setValue: function(value, silent) { var newIndex = inArray(value, this._items); if (newIndex > -1 && newIndex !== this._selectedIndex) { this._selectedIndex = newIndex; this._element.value = value; - this._setNewValue(); + this._setNewValue(silent); } }, diff --git a/src/js/timepicker/spinbox.js b/src/js/timepicker/spinbox.js index 2152017..5b135b8 100644 --- a/src/js/timepicker/spinbox.js +++ b/src/js/timepicker/spinbox.js @@ -247,8 +247,9 @@ var Spinbox = defineClass( /** * Change value to input-box if it is valid. * @private + * @param {boolean} silent flag for firing 'change' event */ - _changeToInputValue: function() { + _changeToInputValue: function(silent) { var newValue = Number(this._inputElement.value); var newIndex = inArray(newValue, this._items); @@ -260,22 +261,26 @@ var Spinbox = defineClass( } if (newIndex === -1) { - this.setValue(this._items[this._selectedIndex]); + this.setValue(this._items[this._selectedIndex], silent); } else { this._selectedIndex = newIndex; - this.fire('change', { - value: newValue - }); + + if (!silent) { + this.fire('change', { + value: newValue + }); + } } }, /** * Set value to input-box. * @param {number} value - Value + * @param {boolean} silent - flag for firing 'change' event */ - setValue: function(value) { + setValue: function(value, silent) { this._inputElement.value = util.formatTime(value, this._format); - this._changeToInputValue(); + this._changeToInputValue(silent); }, /** From 3895baf658247ddf9915edc12ebc1160fac4db02 Mon Sep 17 00:00:00 2001 From: jajugoguma Date: Tue, 22 Nov 2022 15:12:46 +0900 Subject: [PATCH 2/4] docs: change comments --- src/js/timepicker/index.js | 2 +- src/js/timepicker/selectbox.js | 4 ++-- src/js/timepicker/spinbox.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/js/timepicker/index.js b/src/js/timepicker/index.js index ac547b6..f622c36 100644 --- a/src/js/timepicker/index.js +++ b/src/js/timepicker/index.js @@ -441,7 +441,7 @@ var TimePicker = defineClass( /** * Set values in spinboxes from time * @private - * @param {boolean} silent flag for firing 'change' event + * @param {boolean} silent prevents firing 'change' event if it is true. */ syncToInputs: function(silent) { var hour = this.hour; diff --git a/src/js/timepicker/selectbox.js b/src/js/timepicker/selectbox.js index 907d183..d05898c 100644 --- a/src/js/timepicker/selectbox.js +++ b/src/js/timepicker/selectbox.js @@ -172,7 +172,7 @@ var Selectbox = defineClass( /** * Set new value * @private - * @param {boolean} silent flag for firing 'change' event + * @param {boolean} silent prevents firing 'change' event if it is true. */ _setNewValue: function(silent) { var newValue = Number(this._element.value); @@ -195,7 +195,7 @@ var Selectbox = defineClass( /** * Set value * @param {number} value - New value - * @param {boolean} silent - flag for firing 'change' event + * @param {boolean} silent - prevents firing 'change' event if it is true. */ setValue: function(value, silent) { var newIndex = inArray(value, this._items); diff --git a/src/js/timepicker/spinbox.js b/src/js/timepicker/spinbox.js index 5b135b8..18841b9 100644 --- a/src/js/timepicker/spinbox.js +++ b/src/js/timepicker/spinbox.js @@ -247,7 +247,7 @@ var Spinbox = defineClass( /** * Change value to input-box if it is valid. * @private - * @param {boolean} silent flag for firing 'change' event + * @param {boolean} silent prevents firing 'change' event if it is true. */ _changeToInputValue: function(silent) { var newValue = Number(this._inputElement.value); @@ -276,7 +276,7 @@ var Spinbox = defineClass( /** * Set value to input-box. * @param {number} value - Value - * @param {boolean} silent - flag for firing 'change' event + * @param {boolean} silent - prevents firing 'change' event if it is true. */ setValue: function(value, silent) { this._inputElement.value = util.formatTime(value, this._format); From 69413a7ef4f485144b6ed353ebf9a2ae561d407c Mon Sep 17 00:00:00 2001 From: jajugoguma Date: Tue, 22 Nov 2022 15:18:25 +0900 Subject: [PATCH 3/4] test: add tests for custom event --- test/timepicker/timepicker.spec.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/test/timepicker/timepicker.spec.js b/test/timepicker/timepicker.spec.js index ee9308b..5944386 100644 --- a/test/timepicker/timepicker.spec.js +++ b/test/timepicker/timepicker.spec.js @@ -562,3 +562,21 @@ describe('Set selectable range', function() { expect(timepickerNoMeridiem.getMinute()).toBe(36); }); }); + +describe('custom event', function() { + it('should fire change event when the value is changed', function() { + var spy = jest.fn(); + timepickerNoMeridiem.on('change', spy); + + timepickerNoMeridiem.setTime(10, 9); + expect(spy).toHaveBeenCalled(); + }); + + it('should not fire change event when the value is changed', function() { + var spy = jest.fn(); + timepickerNoMeridiem.on('change', spy); + + timepickerNoMeridiem.setTime(10, 9, true); + expect(spy).not.toHaveBeenCalled(); + }); +}); From 135ab8a4e35104bcf82fec55e486bf5aa5d25f87 Mon Sep 17 00:00:00 2001 From: jajugoguma Date: Tue, 22 Nov 2022 16:28:43 +0900 Subject: [PATCH 4/4] fix: change silent option to optional --- src/js/timepicker/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/timepicker/index.js b/src/js/timepicker/index.js index f622c36..ff746f0 100644 --- a/src/js/timepicker/index.js +++ b/src/js/timepicker/index.js @@ -627,7 +627,7 @@ var TimePicker = defineClass( * Set time * @param {number} hour for time picker - (0~23) * @param {number} minute for time picker - * @param {boolean} silent if it set true, 'change' event will not be fired. + * @param {boolean} [silent] if it set true, 'change' event will not be fired. */ setTime: function(hour, minute, silent) { if (!this.validItems(hour, minute)) {