зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1397114 - Disable smooth scrolling when value changes come from input box r=mconley
MozReview-Commit-ID: 9ZLSB2HQvcu --HG-- extra : rebase_source : af5aad09637255596b8fa51f39ce069970e1f699
This commit is contained in:
Родитель
5362aea0cf
Коммит
1cc0b91e89
|
@ -133,7 +133,7 @@ function DatePicker(context) {
|
||||||
/**
|
/**
|
||||||
* Update date picker and its components.
|
* Update date picker and its components.
|
||||||
*/
|
*/
|
||||||
_update() {
|
_update(options = {}) {
|
||||||
const { dateKeeper, isMonthPickerVisible } = this.state;
|
const { dateKeeper, isMonthPickerVisible } = this.state;
|
||||||
|
|
||||||
if (isMonthPickerVisible) {
|
if (isMonthPickerVisible) {
|
||||||
|
@ -148,7 +148,8 @@ function DatePicker(context) {
|
||||||
dateObj: dateKeeper.state.dateObj,
|
dateObj: dateKeeper.state.dateObj,
|
||||||
months: this.state.months,
|
months: this.state.months,
|
||||||
years: this.state.years,
|
years: this.state.years,
|
||||||
toggleMonthPicker: this.state.toggleMonthPicker
|
toggleMonthPicker: this.state.toggleMonthPicker,
|
||||||
|
noSmoothScroll: options.noSmoothScroll
|
||||||
});
|
});
|
||||||
this.components.calendar.setProps({
|
this.components.calendar.setProps({
|
||||||
isVisible: !isMonthPickerVisible,
|
isVisible: !isMonthPickerVisible,
|
||||||
|
@ -269,7 +270,7 @@ function DatePicker(context) {
|
||||||
dateKeeper.setSelection({
|
dateKeeper.setSelection({
|
||||||
year, month, day
|
year, month, day
|
||||||
});
|
});
|
||||||
this._update();
|
this._update({ noSmoothScroll: true });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -350,14 +351,14 @@ function DatePicker(context) {
|
||||||
items: props.months,
|
items: props.months,
|
||||||
isInfiniteScroll: true,
|
isInfiniteScroll: true,
|
||||||
isValueSet: this.state.isMonthSet,
|
isValueSet: this.state.isMonthSet,
|
||||||
smoothScroll: !this.state.firstOpened
|
smoothScroll: !(this.state.firstOpened || props.noSmoothScroll)
|
||||||
});
|
});
|
||||||
this.components.year.setState({
|
this.components.year.setState({
|
||||||
value: props.dateObj.getUTCFullYear(),
|
value: props.dateObj.getUTCFullYear(),
|
||||||
items: props.years,
|
items: props.years,
|
||||||
isInfiniteScroll: false,
|
isInfiniteScroll: false,
|
||||||
isValueSet: this.state.isYearSet,
|
isValueSet: this.state.isYearSet,
|
||||||
smoothScroll: !this.state.firstOpened
|
smoothScroll: !(this.state.firstOpened || props.noSmoothScroll)
|
||||||
});
|
});
|
||||||
this.state.firstOpened = false;
|
this.state.firstOpened = false;
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -124,8 +124,6 @@ function Spinner(props, context) {
|
||||||
/**
|
/**
|
||||||
* Whenever scroll event is detected:
|
* Whenever scroll event is detected:
|
||||||
* - Update the index state
|
* - Update the index state
|
||||||
* - If a smooth scroll has reached its destination, set [isScrolling] state
|
|
||||||
* to false
|
|
||||||
* - If the value has changed, update the [value] state and call [setValue]
|
* - If the value has changed, update the [value] state and call [setValue]
|
||||||
* - If infinite scrolling is on, reset the scrolling position if necessary
|
* - If infinite scrolling is on, reset the scrolling position if necessary
|
||||||
*/
|
*/
|
||||||
|
@ -138,14 +136,8 @@ function Spinner(props, context) {
|
||||||
|
|
||||||
const value = itemsView[this.state.index + viewportTopOffset].value;
|
const value = itemsView[this.state.index + viewportTopOffset].value;
|
||||||
|
|
||||||
// Check if smooth scrolling has reached its destination.
|
// Call setValue if value has changed
|
||||||
// This prevents input box jump when input box changes values.
|
if (this.state.value != value) {
|
||||||
if (this.state.value == value && this.state.isScrolling) {
|
|
||||||
this.state.isScrolling = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Call setValue if value has changed, and is not smooth scrolling
|
|
||||||
if (this.state.value != value && !this.state.isScrolling) {
|
|
||||||
this.state.value = value;
|
this.state.value = value;
|
||||||
this.props.setValue(value);
|
this.props.setValue(value);
|
||||||
}
|
}
|
||||||
|
@ -444,10 +436,6 @@ function Spinner(props, context) {
|
||||||
_smoothScrollToIndex(index) {
|
_smoothScrollToIndex(index) {
|
||||||
const element = this.elements.spinner.children[index];
|
const element = this.elements.spinner.children[index];
|
||||||
if (element) {
|
if (element) {
|
||||||
// Set the isScrolling flag before smooth scrolling begins
|
|
||||||
// and remove it when it has reached the destination.
|
|
||||||
// This prevents input box jump when input box changes values
|
|
||||||
this.state.isScrolling = true;
|
|
||||||
element.scrollIntoView({
|
element.scrollIntoView({
|
||||||
behavior: "smooth", block: "start"
|
behavior: "smooth", block: "start"
|
||||||
});
|
});
|
||||||
|
|
Загрузка…
Ссылка в новой задаче