ayongui
Version:
89 lines (88 loc) • 3.1 kB
JavaScript
import { j as t } from "../../../react/jsx-runtime.mjs";
import { useState as x, useRef as b, useEffect as S } from "react";
import "./TimePicker.less.mjs";
import R from "../button/index.mjs";
const v = (s, u) => Array.from({ length: u - s + 1 }, (p, m) => ({ label: String(m + s).padStart(2, "0") })), j = v(0, 23), a = v(0, 59), M = v(0, 59);
let d, L, T, _;
d = /* @__PURE__ */ new Date();
L = String(d.getHours()).padStart(2, "0");
T = String(d.getMinutes()).padStart(2, "0");
_ = String(d.getSeconds()).padStart(2, "0");
const V = ({
defaultValue: s,
className: u,
value: p,
onChange: m = () => {
},
onCancel: H = () => {
}
}) => {
const h = s.split(":"), g = p.split(":"), [r, C] = x(h[0] || L), [c, N] = x(h[1] || T), [o, k] = x(h[2] || _), i = b(null), n = b(null), f = b(null), I = (e) => {
C(e);
}, $ = (e) => {
N(e);
}, z = (e) => {
k(e);
};
S(() => {
C(g[0] || "00"), N(g[1] || "00"), k(g[2] || "00");
}, [p]), S(() => {
y();
}, []);
const y = () => {
m(r + ":" + c + ":" + o);
};
S(() => {
if (i.current) {
const e = (i.current.scrollHeight - 200) / j.length, l = j.findIndex((D) => D.label === r) * e;
i.current.scrollTop = l;
}
if (n.current) {
const e = (n.current.scrollHeight - 200) / a.length;
n.current.scrollTop = a.findIndex((l) => l.label === c) * e;
}
if (f.current) {
const e = (n.current.scrollHeight - 200) / a.length;
f.current.scrollTop = M.findIndex((l) => l.label === o) * e;
}
}, [r, c, o]);
const B = "time-picker-container " + u;
return /* @__PURE__ */ t.jsxs("div", { className: B, onClick: (e) => e.stopPropagation(), children: [
/* @__PURE__ */ t.jsxs("div", { className: "box", children: [
/* @__PURE__ */ t.jsx("div", { className: "scroll-container", ref: i, children: j.map((e) => /* @__PURE__ */ t.jsx(
"div",
{
className: `option ${r === e.label ? "selected" : ""}`,
onClick: () => I(e.label),
children: e.label
},
e.label
)) }),
/* @__PURE__ */ t.jsx("div", { className: "scroll-container", ref: n, children: a.map((e) => /* @__PURE__ */ t.jsx(
"div",
{
className: `option ${c === e.label ? "selected" : ""}`,
onClick: () => $(e.label),
children: e.label
},
e.label
)) }),
/* @__PURE__ */ t.jsx("div", { className: "scroll-container", ref: f, children: M.map((e) => /* @__PURE__ */ t.jsx(
"div",
{
className: `option ${o === e.label ? "selected" : ""}`,
onClick: () => z(e.label),
children: e.label
},
e.label
)) })
] }),
/* @__PURE__ */ t.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", marginBottom: "8px" }, children: [
/* @__PURE__ */ t.jsx(R, { size: "mini", style: { marginRight: "10px" }, onClick: H, children: "取消" }),
/* @__PURE__ */ t.jsx(R, { size: "mini", type: "primary", onClick: y, children: "确定" })
] })
] });
};
export {
V as default
};