@gez/date-time-kit
Version:
291 lines (290 loc) • 9.81 kB
JavaScript
var __freeze = Object.freeze;
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
import {
debounce,
getCurrentTzOffset,
granHelper
} from "../../utils/index.mjs";
import { weekKey } from "../calendar/index.mjs";
import { Ele as PopoverEle } from "../popover/index.mjs";
import {
clearupPopEleAttrSync2Parent,
isPopoverAttrKey,
parentPopAttrSync2PopEle,
popEleAttrSync2Parent,
popoverAttrKeys
} from "../popover/attr-sync-helper.mjs";
import {
UiBase
} from "../web-component-base/index.mjs";
import styleStr from "./index.css.mjs";
import html, { utcText } from "./index.html.mjs";
import {
UTCInfo2LocaleInfo,
genPeriodTimes,
localeInfo2UTCInfo,
quickGenPeriodTime,
quickGenPeriodTimeInfo,
quickGenPeriodTimes,
quickKeys
} from "./quick-key.mjs";
export {
genPeriodTimes,
quickGenPeriodTime,
quickGenPeriodTimes,
quickGenPeriodTimeInfo,
localeInfo2UTCInfo,
UTCInfo2LocaleInfo,
quickKeys,
weekKey
};
export const granularityList = granHelper.dateTime.list;
export class Ele extends UiBase {
constructor() {
super(...arguments);
__publicField(this, "_updatePeriodSelector", super._genRenderFn(() => {
var _a2;
this._els.periodSelector.weekStartAt = this.weekStartAt;
if (((_a2 = this.$0(_j || (_j = __template([".menu.custom"])))) == null ? void 0 : _a2.style.display) === "none") return;
const ele = this._els.periodSelector;
const startTime = this.startTime;
const endTime = this.endTime;
if (startTime !== "" && endTime !== "") {
ele.timeStart = startTime;
ele.timeEnd = endTime;
} else {
const defaultPeriod = this.quickGenPeriodTime("last30Days");
ele.timeStart = defaultPeriod.start;
ele.timeEnd = defaultPeriod.end;
}
ele.minGranularity = this.minGranularity;
ele.showCalendarDatePoint();
}));
__publicField(this, "_renderTz", super._genRenderFn(() => {
const tzOffset = this.tzOffset;
this.$(_k || (_k = __template(['input[name="tz"]']))).forEach((radio) => {
radio.checked = +radio.value === tzOffset;
});
this.$0(_l || (_l = __template([".tz-trigger bdo"]))).textContent = utcText(tzOffset);
}));
__publicField(this, "_updateRadio", super._genRenderFn(() => {
const quickKey = this.quickKey;
this.$0(_m || (_m = __template(['input[name="radio"][value="', '"]'])), quickKey).checked = true;
}));
__publicField(this, "_onPopoverChange", (e) => {
if (!(e.target instanceof PopoverEle)) return;
if (e.detail === false) {
this._showMenu("top");
}
});
__publicField(this, "_onTzTriggerClick", () => this._showMenu("tz"));
__publicField(this, "_onCustomTriggerClick", (e) => {
e.preventDefault();
this._showMenu("custom");
});
__publicField(this, "_onBackBtnClick", () => this._showMenu("top"));
__publicField(this, "_dispatchTimeChangeEvent", debounce(() => {
const quickKey = this.quickKey;
if (quickKey !== "custom") {
const t = this.quickGenPeriodTimeInfo(quickKey);
this.dispatchEvent("time-changed", t, true);
return;
}
this.dispatchEvent(
"time-changed",
{
tzOffset: this.tzOffset,
start: this.startTime,
end: this.endTime,
type: "custom"
},
true
);
}));
__publicField(this, "_onRadioChange", (e) => {
if (!(e.target instanceof HTMLInputElement)) return;
if (e.target.type !== "radio") return;
const { name, value } = e.target;
if (name === "radio") {
const v = value;
if (v === "custom") return;
this.quickKey = v;
} else if (name === "tz") {
this.tzOffset = +value;
}
});
__publicField(this, "_onDoneBtnClick", (_e2) => {
const selector = this._els.periodSelector;
selector.abortSelecting();
this._showMenu("top");
let { timeStart, timeEnd } = selector;
if (timeStart > timeEnd) [timeStart, timeEnd] = [timeEnd, timeStart];
this.startTime = timeStart;
this.endTime = timeEnd;
this.quickKey = "custom";
this._dispatchTimeChangeEvent();
});
__publicField(this, "genPeriodTimes", (options) => genPeriodTimes({ weekStartAt: this.weekStartAt, ...options }));
__publicField(this, "quickGenPeriodTimes", (periods) => quickGenPeriodTimes({ weekStartAt: this.weekStartAt, periods }));
__publicField(this, "quickGenPeriodTime", (period) => quickGenPeriodTime(period, { weekStartAt: this.weekStartAt }));
__publicField(this, "quickGenPeriodTimeInfo", (type) => quickGenPeriodTimeInfo(
type,
{ weekStartAt: this.weekStartAt },
this.tzOffset
));
}
static get observedAttributes() {
return [
...super.observedAttributes,
"tz-offset",
"week-start-at",
"quick-key",
"start-time",
"end-time",
"min-granularity",
"exclude-field",
...popoverAttrKeys
];
}
get tzOffset() {
return +this._getAttr("tz-offset", "" + getCurrentTzOffset());
}
set tzOffset(v) {
if (!Number.isSafeInteger(v)) return;
this.setAttribute("tz-offset", "" + v);
}
get quickKey() {
return this._getAttr("quick-key", "all");
}
set quickKey(val) {
if (!quickKeys.includes(val)) return;
this.setAttribute("quick-key", val);
}
get weekStartAt() {
return this._getAttr("week-start-at", "sun");
}
set weekStartAt(val) {
if (!weekKey.includes(val)) return;
this.setAttribute("week-start-at", val);
}
get startTime() {
const v = this._getAttr("start-time", "");
if (v === "") return "";
return new Date(Number.isNaN(+v) ? v : +v);
}
set startTime(val) {
if (val === "") {
this.removeAttribute("start-time");
return;
}
const v = new Date(val);
if (Number.isNaN(+v)) return;
this.setAttribute("start-time", +v + "");
}
get endTime() {
const v = this._getAttr("end-time", "" + this.startTime);
if (v === "") return "";
return new Date(Number.isNaN(+v) ? v : +v);
}
set endTime(val) {
if (val === "") {
this.removeAttribute("end-time");
return;
}
const v = new Date(val);
if (Number.isNaN(+v)) return;
this.setAttribute("end-time", +v + "");
}
get minGranularity() {
return this._getAttr("min-granularity", "millisecond");
}
set minGranularity(val) {
if (!granHelper.dateTime.has(val)) return;
this.setAttribute("min-granularity", val);
}
get excludeField() {
const v = this._getAttr("exclude-field", "") || "";
if (v === "") return [];
return v.split(",").map((i) => i.trim());
}
set excludeField(v) {
if (!Array.isArray(v) || v.length === 0) {
this.removeAttribute("exclude-field");
return;
}
const arr = v.filter(
(i) => quickKeys.includes(i) || i === "timezone"
);
this.setAttribute("exclude-field", arr.join(","));
}
get _staticEls() {
return {
...super._staticEls,
periodSelector: this.$0(_a || (_a = __template(["dt-period-selector"]))),
popover: this.$0(_b || (_b = __template(["dt-popover"])))
};
}
connectedCallback() {
if (!super.connectedCallback()) return;
this._renderTz();
this._updateRadio();
this._updatePeriodSelector();
const { _els } = this;
this._bindEvt(_els.popover)("open-change", this._onPopoverChange);
this._bindEvt(_c || (_c = __template([".tz-trigger"])))("click", this._onTzTriggerClick);
this._bindEvt(_d || (_d = __template([".custom-trigger"])))("click", this._onCustomTriggerClick);
this._bindEvt(_e || (_e = __template([".menu.tz .title svg"])))("click", this._onBackBtnClick);
this._bindEvt(_f || (_f = __template([".menu.custom .title svg"])))("click", this._onBackBtnClick);
this._bindEvt(_g || (_g = __template([".menu"])))("change", this._onRadioChange);
this._bindEvt(_h || (_h = __template(["#reset"])))("click", this._updatePeriodSelector);
this._bindEvt(_i || (_i = __template(["#done"])))("click", this._onDoneBtnClick);
popEleAttrSync2Parent(this, this._els.popover);
}
disconnectedCallback() {
clearupPopEleAttrSync2Parent(this);
return super.disconnectedCallback();
}
_onAttrChanged(name, oldValue, newValue) {
super._onAttrChanged(name, oldValue, newValue);
if (isPopoverAttrKey(name)) {
parentPopAttrSync2PopEle(
name,
oldValue,
newValue,
this._els.popover
);
return;
}
if (name === "tz-offset") {
this._renderTz();
this._dispatchTimeChangeEvent();
}
if (name === "quick-key") {
this._updateRadio();
this._dispatchTimeChangeEvent();
}
if (name === "week-start-at") {
this._updatePeriodSelector();
}
if (name === "start-time" || name === "end-time") {
if (this.quickKey !== "custom") return;
this._updatePeriodSelector();
}
}
_showMenu(type) {
this.$(_n || (_n = __template([".menu"]))).forEach(
(menu) => menu.classList.contains(type) ? menu.slot = "pop" : menu.removeAttribute("slot")
);
if (type === "custom") {
this._updatePeriodSelector();
}
}
}
__publicField(Ele, "tagName", "dt-quick-selector");
__publicField(Ele, "_style", styleStr);
__publicField(Ele, "_template", html);
Ele.define();