jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 17:26:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
1 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/ha-date-range-picker.ts
View File

@ -19,7 +19,7 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { calcDate } from "../common/datetime/calc_date"; import { calcDate } from "../common/datetime/calc_date";
import { firstWeekdayIndex } from "../common/datetime/first_weekday"; import { firstWeekdayIndex } from "../common/datetime/first_weekday";
import { formatDate } from "../common/datetime/format_date"; import { formatDate } from "../common/datetime/format_date";
@ -58,19 +58,15 @@ export class HaDateRangePicker extends LitElement {
@property({ type: Boolean }) private minimal = false; @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) { 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 ( if (
(!this.hasUpdated && this.ranges === undefined) || (!this.hasUpdated && this.ranges === undefined) ||
(changedProps.has("hass") && (changedProps.has("hass") &&
@ -158,10 +154,11 @@ export class HaDateRangePicker extends LitElement {
start-date=${this.startDate} start-date=${this.startDate}
end-date=${this.endDate} end-date=${this.endDate}
?ranges=${this.ranges !== false} ?ranges=${this.ranges !== false}
opening-direction=${this._openingDirection} opening-direction=${this.openingDirection ||
this._calcedOpeningDirection}
first-day=${firstWeekdayIndex(this.hass.locale)} 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 ${!this.minimal
? html`<ha-svg-icon .path=${mdiCalendar}></ha-svg-icon> ? html`<ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
<ha-textfield <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 { static get styles(): CSSResultGroup {
return css` return css`
ha-svg-icon { ha-svg-icon {