mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Only calculate opening direction when we are opening the datepicker (#18313)
This commit is contained in:
parent
1247a5c8d3
commit
03a21d5519
@ -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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user