Skip to content

Commit

Permalink
Picker only emit user change (ElemeFE#6214)
Browse files Browse the repository at this point in the history 
* only emit user change for timepicker and datepicker

* Test: remove custom timeout
  • Loading branch information
@Dreamacro @Leopoldthecoder
Dreamacro authored and Leopoldthecoder committed Sep 20, 2017
1 parent b922664 commit 1912c47
Show file tree
Hide file tree
Showing 9 changed files with 43 additions and 41 deletions.
2 changes: 1 addition & 1 deletion packages/date-picker/src/basic/date-table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@
this.$emit('pick', {
minDate: this.minDate,
maxDate: this.maxDate
});
}, true, false);
}
}
},
Expand Down
6 changes: 3 additions & 3 deletions packages/date-picker/src/basic/year-table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,19 +88,19 @@
},
nextTenYear() {
this.$emit('pick', Number(this.year) + 10, false);
this.$emit('pick', Number(this.year) + 10, false, true);
},
prevTenYear() {
this.$emit('pick', Number(this.year) - 10, false);
this.$emit('pick', Number(this.year) - 10, false, true);
},
handleYearTableClick(event) {
const target = event.target;
if (target.tagName === 'A') {
if (hasClass(target.parentNode, 'disabled')) return;
const year = target.textContent || target.innerText;
this.$emit('pick', Number(year));
this.$emit('pick', Number(year), true, true);
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions packages/date-picker/src/panel/date-range.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@
this.minDate = newVal[0] ? toDate(newVal[0]) : null;
this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
if (this.minDate) this.date = new Date(this.minDate);
this.handleConfirm(true);
this.handleConfirm(true, false);
}
}
},
Expand Down Expand Up @@ -392,15 +392,15 @@
}
},
handleRangePick(val, close = true) {
handleRangePick(val, close = true, user = true) {
if (this.maxDate === val.maxDate && this.minDate === val.minDate) {
return;
}
this.onPick && this.onPick(val);
this.maxDate = val.maxDate;
this.minDate = val.minDate;
if (!close || this.showTime) return;
this.handleConfirm();
this.handleConfirm(false, user);
},
changeToToday() {
Expand Down Expand Up @@ -477,9 +477,9 @@
this.resetDate();
},
handleConfirm(visible = false) {
handleConfirm(visible = false, user = true) {
if (this.minDate && this.maxDate) {
this.$emit('pick', [this.minDate, this.maxDate], visible);
this.$emit('pick', [this.minDate, this.maxDate], visible, user);
}
},
Expand Down
21 changes: 10 additions & 11 deletions packages/date-picker/src/panel/date.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@
this.date = newVal;
this.year = newVal.getFullYear();
this.month = newVal.getMonth();
this.$emit('pick', newVal, false);
this.$emit('pick', newVal, false, false);
}
},
Expand Down Expand Up @@ -190,7 +190,7 @@
methods: {
handleClear() {
this.date = this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date();
this.$emit('pick');
this.$emit('pick', this.date);
},
resetDate() {
Expand Down Expand Up @@ -256,7 +256,7 @@
}
},
handleTimePick(picker, visible, first) {
handleTimePick(picker, visible) {
if (picker) {
let oldDate = new Date(this.date.getTime());
let hour = picker.getHours();
Expand All @@ -273,9 +273,7 @@
this.date = new Date(oldDate.getTime());
}
if (!first) {
this.timePickerVisible = visible;
}
this.timePickerVisible = visible;
},
handleMonthPick(month) {
Expand All @@ -294,28 +292,28 @@
}
},
handleDatePick(value) {
handleDatePick(value, close, user = true) {
if (this.selectionMode === 'day') {
if (!this.showTime) {
this.$emit('pick', new Date(value.getTime()));
this.$emit('pick', new Date(value.getTime()), false, user);
}
this.date.setFullYear(value.getFullYear());
this.date.setMonth(value.getMonth(), value.getDate());
} else if (this.selectionMode === 'week') {
this.week = value.week;
this.$emit('pick', value.date);
this.$emit('pick', value.date, false, user);
}
this.resetDate();
},
handleYearPick(year, close = true) {
handleYearPick(year, close = true, user) {
this.year = year;
if (!close) return;
this.date.setFullYear(year);
if (this.selectionMode === 'year') {
this.$emit('pick', new Date(year, 0, 1));
this.$emit('pick', new Date(year, 0, 1), false, user);
} else {
this.currentView = 'month';
}
Expand All @@ -330,6 +328,7 @@
},
confirm() {
console.log(111);
this.date.setMilliseconds(0);
this.$emit('pick', this.date);
},
Expand Down
16 changes: 8 additions & 8 deletions packages/date-picker/src/panel/time-range.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,12 +147,12 @@
hours: time.minTime.getHours(),
minutes: time.minTime.getMinutes(),
seconds: time.minTime.getSeconds()
});
}, true);
this.handleMaxChange({
hours: time.maxTime.getHours(),
minutes: time.maxTime.getMinutes(),
seconds: time.maxTime.getSeconds()
});
}, true);
},
handleClear() {
Expand All @@ -163,18 +163,18 @@
this.$emit('pick');
},
handleChange() {
handleChange(notUser) {
if (this.minTime > this.maxTime) return;
MIN_TIME.setFullYear(this.minTime.getFullYear());
MIN_TIME.setMonth(this.minTime.getMonth(), this.minTime.getDate());
MAX_TIME.setFullYear(this.maxTime.getFullYear());
MAX_TIME.setMonth(this.maxTime.getMonth(), this.maxTime.getDate());
this.$refs.minSpinner.selectableRange = [[MIN_TIME, this.maxTime]];
this.$refs.maxSpinner.selectableRange = [[this.minTime, MAX_TIME]];
this.handleConfirm(true);
this.handleConfirm(true, false, notUser);
},
handleMaxChange(date) {
handleMaxChange(date, notUser) {
if (date.hours !== undefined) {
this.maxTime.setHours(date.hours);
this.maxHours = this.maxTime.getHours();
Expand All @@ -190,7 +190,7 @@
this.handleChange();
},
handleMinChange(date) {
handleMinChange(date, notUser) {
if (date.hours !== undefined) {
this.minTime.setHours(date.hours);
this.minHours = this.minTime.getHours();
Expand All @@ -217,15 +217,15 @@
this.selectionRange = [start + this.offset, end + this.offset];
},
handleConfirm(visible = false, first = false) {
handleConfirm(visible = false, first = false, notUser = false) {
const minSelectableRange = this.$refs.minSpinner.selectableRange;
const maxSelectableRange = this.$refs.maxSpinner.selectableRange;
this.minTime = limitRange(this.minTime, minSelectableRange);
this.maxTime = limitRange(this.maxTime, maxSelectableRange);
if (first) return;
this.$emit('pick', [this.minTime, this.maxTime], visible, first);
this.$emit('pick', [this.minTime, this.maxTime], visible, !notUser);
},
adjustScrollTop() {
Expand Down
7 changes: 4 additions & 3 deletions packages/date-picker/src/panel/time-select.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,9 @@
value(val) {
if (!val) return;
if (this.minTime && compareTime(val, this.minTime) < 0) {
this.$emit('pick');
this.$emit('pick', '', false, false);
} else if (this.maxTime && compareTime(val, this.maxTime) > 0) {
this.$emit('pick');
this.$emit('pick', '', false, false);
}
this.$nextTick(() => this.scrollToOption());
}
Expand All @@ -95,7 +95,7 @@
},
handleClear() {
this.$emit('pick');
this.$emit('pick', '', false, false);
},
scrollToOption(className = 'selected') {
Expand All @@ -122,6 +122,7 @@
}
if (!items[index].disabled) {
this.value = items[index].value;
this.$emit('pick', this.value, true);
}
}
},
Expand Down
15 changes: 7 additions & 8 deletions packages/date-picker/src/panel/time.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
hours: date.getHours(),
minutes: date.getMinutes(),
seconds: date.getSeconds()
});
}, true);
this.$nextTick(_ => this.adjustScrollTop());
},
Expand Down Expand Up @@ -121,7 +121,7 @@
methods: {
handleClear() {
this.$emit('pick');
this.$emit('pick', '', false, true);
},
handleCancel() {
Expand All @@ -132,10 +132,10 @@
this.minutes = this.currentDate.getMinutes();
this.seconds = this.currentDate.getSeconds();
const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'));
this.$emit('pick', date);
this.$emit('pick', date, false, true);
},
handleChange(date) {
handleChange(date, notUser) {
if (date.hours !== undefined) {
this.currentDate.setHours(date.hours);
this.hours = this.currentDate.getHours();
Expand All @@ -148,19 +148,18 @@
this.currentDate.setSeconds(date.seconds);
this.seconds = this.currentDate.getSeconds();
}
this.handleConfirm(true);
this.handleConfirm(true, null, notUser);
},
setSelectionRange(start, end) {
this.$emit('select-range', start, end);
this.selectionRange = [start, end];
},
handleConfirm(visible = false, first) {
handleConfirm(visible = false, first, notUser = false) {
if (first) return;
const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'));
this.$emit('pick', date, visible, first);
this.$emit('pick', date, visible, !notUser);
},
adjustScrollTop() {
Expand Down
6 changes: 4 additions & 2 deletions packages/date-picker/src/picker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,6 @@ export default {
}
},
displayValue(val) {
this.$emit('change', val);
this.dispatch('ElFormItem', 'el.form.change');
}
},
Expand Down Expand Up @@ -492,10 +491,13 @@ export default {
this.picker.resetView && this.picker.resetView();
this.picker.$on('dodestroy', this.doDestroy);
this.picker.$on('pick', (date = '', visible = false) => {
this.picker.$on('pick', (date = '', visible = false, user = true) => {
// do not emit if values are same
if (!valueEquals(this.value, date)) {
this.$emit('input', date);
if (user && this.value !== date) {
this.$nextTick(() => this.$emit('change', this.displayValue));
};
}
this.pickerVisible = this.picker.visible = visible;
this.picker.resetView && this.picker.resetView();
Expand Down
1 change: 1 addition & 0 deletions packages/date-picker/src/picker/date-picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default {
if (keyCode === 9 || keyCode === 27 || keyCode === 13) {
this.pickerVisible = false;
event.stopPropagation();
this.picker.confirm();
this.currentValue = this.picker.date;
this.$refs.reference.$refs.input.blur();
return;
Expand Down

0 comments on commit 1912c47

Please sign in to comment.