Only calculate opening direction when we are opening the datepicker (#18313)

This commit is contained in:
Bram Kragten 2023-10-23 09:58:20 +02:00 committed by GitHub
parent 1247a5c8d3
commit 03a21d5519
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -19,7 +19,7 @@ import {
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property } from "lit/decorators";
import { customElement, property, state } from "lit/decorators";
import { calcDate } from "../common/datetime/calc_date";
import { firstWeekdayIndex } from "../common/datetime/first_weekday";
import { formatDate } from "../common/datetime/format_date";
@ -58,19 +58,15 @@ export class HaDateRangePicker extends LitElement {
@property({ type: Boolean }) private minimal = false;
@property() private _openingDirection = "right";
@property() public openingDirection?: "right" | "left" | "center" | "inline";
@state() private _calcedOpeningDirection?:
| "right"
| "left"
| "center"
| "inline";
protected willUpdate(changedProps: PropertyValues) {
// set dialog opening direction based on position
const datePickerPosition = this.getBoundingClientRect().x;
if (datePickerPosition > (2 * window.innerWidth) / 3) {
this._openingDirection = "left";
} else if (datePickerPosition < window.innerWidth / 3) {
this._openingDirection = "right";
} else {
this._openingDirection = "center";
}
if (
(!this.hasUpdated && this.ranges === undefined) ||
(changedProps.has("hass") &&
@ -158,10 +154,11 @@ export class HaDateRangePicker extends LitElement {
start-date=${this.startDate}
end-date=${this.endDate}
?ranges=${this.ranges !== false}
opening-direction=${this._openingDirection}
opening-direction=${this.openingDirection ||
this._calcedOpeningDirection}
first-day=${firstWeekdayIndex(this.hass.locale)}
>
<div slot="input" class="date-range-inputs">
<div slot="input" class="date-range-inputs" @click=${this._handleClick}>
${!this.minimal
? html`<ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
<ha-textfield
@ -265,6 +262,22 @@ export class HaDateRangePicker extends LitElement {
}
}
private _handleClick() {
// calculate opening direction if not set
if (!this._dateRangePicker.open && !this.openingDirection) {
const datePickerPosition = this.getBoundingClientRect().x;
let opens: "right" | "left" | "center" | "inline";
if (datePickerPosition > (2 * window.innerWidth) / 3) {
opens = "left";
} else if (datePickerPosition < window.innerWidth / 3) {
opens = "right";
} else {
opens = "center";
}
this._calcedOpeningDirection = opens;
}
}
static get styles(): CSSResultGroup {
return css`
ha-svg-icon {