@gez/date-time-kit
Version:
164 lines (163 loc) • 6.17 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;
import { granHelper } from "../../utils/index.mjs";
import { Ele as NumListEle } from "../num-list/index.mjs";
import { UiBase } from "../web-component-base/index.mjs";
import { baseCss } from "./css.mjs";
import { baseHtml } from "./html.mjs";
export const granularityList = granHelper.time.list;
export const colOrderList = ["hms", "hsm", "mhs", "msh", "shm", "smh"];
export class BaseEle extends UiBase {
constructor() {
super(...arguments);
__publicField(this, "_renderCols", super._genRenderFn(() => {
const { _els } = this;
for (const c of this.colOrder) {
_els["".concat(c, "Col")].remove();
_els.cols.appendChild(_els["".concat(c, "Col")]);
}
}));
__publicField(this, "_updateGranularity", super._genRenderFn(() => {
const { _minmaxGran, _els } = this;
const [maxG, minG] = granHelper.time.idx(
_minmaxGran.max,
_minmaxGran.min
);
const show = (el, condition) => !(el.style.display = condition ? "" : "none");
show(
_els.cols,
[
show(_els.hCol, maxG >= 3 && minG <= 3),
show(_els.mCol, maxG >= 2 && minG <= 2),
show(_els.sCol, maxG >= 1 && minG <= 1)
].some((v) => v)
);
show(_els.msWrapper, maxG >= 0 && minG <= 0);
}));
__publicField(this, "_updateColsValue", super._genRenderFn(() => {
const { millisecond, _els } = this;
const hour = Math.floor(millisecond / (60 * 60 * 1e3));
const minute = Math.floor(
millisecond % (60 * 60 * 1e3) / (60 * 1e3)
);
const second = Math.floor(millisecond % (60 * 1e3) / 1e3);
const ms = millisecond % 1e3;
_els.hList.currentNum = hour;
_els.mList.currentNum = minute;
_els.sList.currentNum = second;
_els.msInput.value = ("000" + ms).slice(-3);
}));
__publicField(this, "_onMsInput", (e) => {
if (!(e.target instanceof HTMLInputElement)) return;
let v = +e.target.value;
if (Number.isNaN(v)) v = 0;
v = Math.min(Math.max(0, Math.floor(v)), 999);
e.target.value = ("000" + v).slice(-3);
this.millisecond = this._getMsFromEle();
});
__publicField(this, "_onColsSelect", (e) => {
if (!(e.target instanceof NumListEle)) return;
e.stopPropagation();
e.target.currentNum = e.detail.newNum;
this.millisecond = this._getMsFromEle();
});
}
static get observedAttributes() {
return [
...super.observedAttributes,
"millisecond",
"max-granularity",
"min-granularity",
"col-order"
];
}
get _staticEls() {
return {
...super._staticEls,
cols: this.$0(_a || (_a = __template([".cols"]))),
hCol: this.$0(_b || (_b = __template([".col.hour"]))),
mCol: this.$0(_c || (_c = __template([".col.minute"]))),
sCol: this.$0(_d || (_d = __template([".col.second"]))),
lists: this.$(_e || (_e = __template(["dt-num-list"]))),
hList: this.$0(_f || (_f = __template(["dt-num-list.hour"]))),
mList: this.$0(_g || (_g = __template(["dt-num-list.minute"]))),
sList: this.$0(_h || (_h = __template(["dt-num-list.second"]))),
msWrapper: this.$0(_i || (_i = __template(['[part="ms-wrapper"]']))),
msInput: this.$0(_j || (_j = __template(["input#ms"])))
};
}
/** 当前时间的毫秒数，范围为一天内的毫秒数（0 到 86399999），随着用户选择时实时更新 */
get millisecond() {
const v = Math.floor(+this._getAttr("millisecond", "0"));
return Math.min(Math.max(0, v), 24 * 60 * 60 * 1e3 - 1);
}
set millisecond(v) {
v = Math.min(Math.max(0, Math.floor(v)), 24 * 60 * 60 * 1e3 - 1);
this.setAttribute("millisecond", "" + v);
}
get maxGranularity() {
return this._getAttr("max-granularity", "hour");
}
set maxGranularity(v) {
if (!granHelper.time.has(v)) return;
this.setAttribute("max-granularity", v);
}
get minGranularity() {
return this._getAttr("min-granularity", "millisecond");
}
set minGranularity(v) {
if (!granHelper.time.has(v)) return;
this.setAttribute("min-granularity", v);
}
get colOrder() {
return this._getAttr("col-order", "smh");
}
set colOrder(v) {
if (!colOrderList.includes(v)) return;
this.setAttribute("col-order", v);
}
get _minmaxGran() {
const [min, max] = granHelper.time.minmax(
this.minGranularity,
this.maxGranularity
);
return { min, max };
}
scrollToCurrentItem() {
this._els.lists.forEach((e) => e.scrollToCurrent());
}
connectedCallback() {
if (!super.connectedCallback()) return;
const { _els } = this;
_els.lists.forEach(
(e) => e.formatter = (i) => (i < 10 ? "0" : "") + i
);
this._renderCols();
this._updateGranularity();
this._updateColsValue();
this._bindEvt(_els.lists)("select-num", this._onColsSelect);
this._bindEvt(_els.msInput)("input", this._onMsInput);
return true;
}
_onAttrChanged(name, oldValue, newValue) {
super._onAttrChanged(name, oldValue, newValue);
if (name === "max-granularity" || name === "min-granularity")
this._updateGranularity();
else if (name === "col-order") this._renderCols();
else if (name === "millisecond") this._updateColsValue();
}
_getMsFromEle() {
const { _els } = this;
const hour = _els.hList.currentNum;
const minute = _els.mList.currentNum;
const second = _els.sList.currentNum;
const ms = Math.min(Math.max(0, +_els.msInput.value || 0), 999);
return ((hour * 60 + minute) * 60 + second) * 1e3 + ms;
}
}
__publicField(BaseEle, "_style", baseCss);
__publicField(BaseEle, "_template", baseHtml);