react-box-tools
Version:
Box tools react components, utils and hooks
483 lines (482 loc) • 13.9 kB
JavaScript
import { jsxs as H, jsx as t, Fragment as se } from "react/jsx-runtime";
import { c as B } from "./clsx-DG-5vF7T.js";
import { useContext as G, createContext as Fe, useState as I, useMemo as q, useLayoutEffect as ce } from "react";
import { D as le } from "./dropdown-B4geQ7fC.js";
import { C as me, a as ie } from "./right-UM02doIS.js";
const he = (u) => {
const {
month: w
} = u, {
daysOfWeek: y,
isRefillDay: l,
refilldays: a = !1,
getClassDay: m,
event: p
} = G(U);
return /* @__PURE__ */ H("table", { className: "month", children: [
/* @__PURE__ */ t("thead", { className: "week-days", children: /* @__PURE__ */ t("tr", { children: y.map((f, h) => /* @__PURE__ */ t("th", { children: f.substring(0, 2) }, h)) }) }),
/* @__PURE__ */ t("tbody", { className: "month-days", children: w.map((f, h) => /* @__PURE__ */ t("tr", { children: f.map((r, c) => /* @__PURE__ */ t(
"td",
{
onClick: () => p.onSelect(r),
className: B(`day ${m(r)}`),
onMouseDown: () => p.onRangeStart(r),
onMouseEnter: () => p.onRangeHover(r),
onMouseUp: () => p.onRangeEnd(r),
children: l(r) && !a ? "" : r.key
},
c
)) }, h)) })
] });
};
function $e(u, w, y = "es") {
const a = new Intl.DateTimeFormat(y, {
weekday: "short",
day: "numeric",
month: "short",
year: "numeric"
}).formatToParts(u), m = w.replace(/(ddd|dd|mmm|mm|yyyy)/g, (p) => {
var f, h, r, c, R;
switch (p) {
case "ddd":
return ((f = a.find((D) => D.type === "weekday")) == null ? void 0 : f.value) ?? "";
case "dd":
return ((r = (h = a.find((D) => D.type === "day")) == null ? void 0 : h.value) == null ? void 0 : r.padStart(2, "0")) ?? "";
case "mmm":
return de(
((c = a.find((D) => D.type === "month")) == null ? void 0 : c.value) ?? ""
);
case "mm":
return (u.getMonth() + 1).toString().padStart(2, "0");
case "yyyy":
return ((R = a.find((D) => D.type === "year")) == null ? void 0 : R.value) ?? "";
default:
return p;
}
});
return de(m);
}
function de(u) {
return u.charAt(0).toUpperCase() + u.slice(1);
}
const U = Fe({
culture: "es",
date: {
today: 0,
instance: /* @__PURE__ */ new Date(),
month: { key: 0, name: "", year: 0 },
year: 0,
surroundingYear: 0,
manyYears: !1
},
monthList: [],
monthRows: [],
daysOfWeek: [],
prevMonth: () => {
},
nextMonth: () => {
},
selectMonth: () => {
},
goToMonth: () => {
},
setYear: () => {
},
goToYear: () => {
},
setSurroundingYear: () => {
},
yearList: [],
isRefillDay: () => !1,
getClassDay: () => "",
event: {
onSelect: () => {
},
onRangeStart: () => {
},
onRangeHover: () => {
},
onRangeEnd: () => {
}
}
}), Oe = (u) => {
const {
children: w,
culture: y = "en",
monthsToShow: l,
refilldays: a = !1,
range: m = !1,
todayText: p,
onSelected: f,
onSelectedRange: h,
onLoad: r,
value: c,
minDate: R,
maxDate: D
} = u, C = Ie({
culture: y,
monthsToShow: l,
range: m,
onSelected: f,
onSelectedRange: h,
onLoad: r,
value: c,
minDate: R,
maxDate: D
}), Y = {
monthsToShow: l,
refilldays: a,
todayText: p,
...C
};
return /* @__PURE__ */ t(U.Provider, { value: Y, children: w });
}, Le = ({
monthDropDown: u,
yearDropDown: w,
icons: y = {}
}) => {
const {
date: l,
monthRows: a,
monthList: m,
prevMonth: p,
selectMonth: f,
setSurroundingYear: h,
yearList: r,
monthsToShow: c = 1,
goToYear: R,
nextMonth: D
} = G(U), C = l.month, Y = l.year, S = l.manyYears, d = () => {
const T = a[a.length - 1], s = T[T.length - 1][0].find((L) => L.type === "month");
let F = C;
return m.map(
(L) => L.map((W) => (W.key === (s == null ? void 0 : s.month) && (F = W), !0))
), {
month: c > 1 ? `${C.name} - ${F.name}` : C.name,
year: S ? `${Y} - ${s == null ? void 0 : s.year}` : Y
};
};
return /* @__PURE__ */ H("div", { className: "dp-controls", children: [
/* @__PURE__ */ t("button", { className: "control prev-month", onClick: p, children: y.prev ?? /* @__PURE__ */ t(me, {}) }),
/* @__PURE__ */ t(
le,
{
mode: "click",
width: "auto",
...u,
target: /* @__PURE__ */ t("button", { className: "control current-month", children: d().month }),
className: `month-list ${u.className}`,
children: /* @__PURE__ */ t("table", { className: "months", children: /* @__PURE__ */ t("tbody", { children: m.map((T, x) => /* @__PURE__ */ t("tr", { children: T.map((s, F) => /* @__PURE__ */ t(
"td",
{
className: B(
`${s.type === "dsbl" ? "disabled" : "drp-item"} ${s.key === C.key && "current-month"}`
),
onClick: () => {
s.type !== "dsbl" && f(s);
},
children: `${s.name}`
},
F
)) }, x)) }) })
}
),
/* @__PURE__ */ t(
le,
{
mode: "click",
width: "auto",
...w,
target: /* @__PURE__ */ t("button", { className: "control current-year", children: d().year }),
className: `year-list ${u.className}`,
children: /* @__PURE__ */ H("div", { className: "controls", children: [
/* @__PURE__ */ t(
"button",
{
className: "prev-year",
onClick: () => {
h(l.surroundingYear - 3);
},
children: y.prev ?? /* @__PURE__ */ t(me, {})
}
),
/* @__PURE__ */ t("table", { className: "years", children: /* @__PURE__ */ t("tbody", { children: r.map((T, x) => /* @__PURE__ */ t("tr", { children: T.map((s, F) => /* @__PURE__ */ t(
"td",
{
className: B(
`${s.type === "dsbl" ? "disabled" : "drp-item"} ${s.key === Y && "current-year"}`
),
onClick: () => {
s.type !== "dsbl" && R(s.key);
},
children: s.key
},
F
)) }, x)) }) }),
/* @__PURE__ */ t(
"button",
{
className: "next-year",
onClick: () => {
h(l.surroundingYear + 3);
},
children: y.next ?? /* @__PURE__ */ t(ie, {})
}
)
] })
}
),
/* @__PURE__ */ t("button", { className: "control next-month", onClick: D, children: y.next ?? /* @__PURE__ */ t(ie, {}) })
] });
}, Pe = () => {
const {
monthsToShow: u = 1,
monthRows: w,
culture: y,
date: l,
todayText: a = {}
} = G(U), { show: m = !0, format: p = "ddd, dd mmm yyyy" } = a;
return /* @__PURE__ */ H(se, { children: [
u === 1 ? /* @__PURE__ */ t(se, { children: w.map(
(f) => f.map((h, r) => /* @__PURE__ */ t(he, { month: h }, r))
) }) : /* @__PURE__ */ t("table", { className: "calendar", children: /* @__PURE__ */ t("tbody", { children: w.map((f, h) => /* @__PURE__ */ t("tr", { className: "items", children: f.map((r, c) => /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t(he, { month: r }) }, c)) }, h)) }) }),
m && /* @__PURE__ */ t("span", { className: "today-txt", children: $e(l.instance, p, y) })
] });
}, Ae = Object.assign(Oe, {
Months: Pe,
Controls: Le
}), Ie = (u) => {
const {
culture: w = "es",
monthsToShow: y = 1,
range: l = !1,
minDate: a,
maxDate: m,
onSelected: p = () => {
},
onSelectedRange: f = () => {
},
onLoad: h = () => {
},
value: r
} = u, c = /* @__PURE__ */ new Date(), R = c.getFullYear(), D = c.getDate(), C = c.getMonth(), Y = a == null ? void 0 : a.getTime(), S = m == null ? void 0 : m.getTime(), [d, T] = I({}), x = (e) => new Date(e.year, e.month, e.key), s = (e) => e.type === "prev" || e.type === "next", F = (e) => {
s(e) || l || (d.day = e, p(x(e)));
}, L = (e) => {
if (!(s(e) || !l)) {
var n = x(e), o = d.from ?? /* @__PURE__ */ new Date(), i = d.to ?? /* @__PURE__ */ new Date();
if (i.getTime() > o.getTime() && d.range) {
J(e);
return;
}
T({
day: e,
from: n,
to: n,
range: !0
});
}
}, W = (e) => {
s(e) || !l || d.range && T({
...d,
to: x(e)
});
}, J = (e) => {
var n = d.from ?? /* @__PURE__ */ new Date(), o = d.to ?? /* @__PURE__ */ new Date();
s(e) || !l || n.getTime() === o.getTime() || (T({
...d,
to: x(e),
range: !1
}), f({ from: n, to: o }));
}, ue = (e) => {
var n = s(e);
const o = e.key === D && e.month === C && e.year === R;
var i = d.day;
const N = i && i.key === e.key && i.month === e.month && i.year === e.year;
let k, g = "";
if (k = n ? "refill" : o ? "today" : N ? "selected" : "", !n && l && d.from && d.to && e.type === "month") {
const { from: $, to: O } = d, P = x(e);
g = P >= $ && P <= O ? "range" : "";
}
return `${k} ${g}`;
}, K = new Intl.DateTimeFormat(w, {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long"
}), ye = () => {
const e = [];
for (let n = 0; n < 7; n++) {
const o = new Date(2e3, 0, n + 3), i = K.format(o);
e.push(i);
}
return e;
}, Q = (e) => {
var n;
return ((n = K.formatToParts(e).find((o) => o.type === "month")) == null ? void 0 : n.value) ?? "";
}, [M, fe] = I({
key: c.getMonth(),
name: Q(c),
year: c.getFullYear()
}), _ = (e) => {
c.setMonth(e);
const n = new Date(M.year, e, 1);
fe({
key: e,
name: Q(n),
year: c.getFullYear()
});
}, ge = () => {
const e = new Intl.DateTimeFormat(w, {
month: "long"
}), n = [];
for (let g = 0; g < 12; g++) {
var o = new Date(v, g, Y ? a == null ? void 0 : a.getDate() : 1), i = S ? new Date(v, g).getTime() : 0, N = !0;
Y && Y > o.getTime() && (N = !1), S && S < i && (N = !1), n.push({
key: g,
name: e.format(o),
year: v,
type: N ? "" : "dsbl"
});
}
const k = [];
for (; n.length > 0; )
k.push(n.splice(0, 2));
return k;
}, [v, V] = I(c.getFullYear()), [E, pe] = I(v), z = (e) => {
V(e), c.setFullYear(e);
}, ve = () => {
const e = [];
for (let i = E - 7; i <= E + 4; i++) {
let N = (a == null ? void 0 : a.getFullYear()) ?? 0, k = (m == null ? void 0 : m.getFullYear()) ?? 0, g = !0;
Y && N > i && (g = !1), S && k < i && (g = !1);
var n = {
key: i,
type: g ? "" : "dsbl"
};
e.push(n);
}
const o = [];
for (; e.length > 0; )
o.push(e.splice(0, 3));
return o;
}, [j, A] = I(M.key), ke = () => {
if (m) {
var e = new Date(v, j), n = new Date(m.getFullYear(), m.getMonth());
if (e.getTime() === n.getTime()) return;
}
let o = j + 1;
o === 12 && (o = 0, z(v + 1)), A(o), _(o);
}, we = () => {
if (a) {
var e = new Date(v, j), n = new Date(a.getFullYear(), a.getMonth());
if (e.getTime() === n.getTime()) return;
}
let o = j - 1;
o < 0 && (o = 11, z(v - 1)), A(o), _(o);
}, De = (e) => {
A(e.key), _(e.key);
}, Me = (e = 1) => {
const n = [];
for (let k = 1; k <= e; k++) {
const g = new Date(v, M.key + k, 0), $ = g.getMonth(), O = g.getFullYear(), P = g.getDate(), X = new Date(
v,
k === 1 ? M.key : M.key + (k - 1),
1
).getDay(), Re = M.key === 11 ? 0 : M.key + k, Ce = M.key === 11 ? v + 1 : v, Z = new Date(Ce, Re - 1, 0).getDate(), ee = X === 0 ? 6 : X - 1, Se = 42 - (P + ee), te = [];
for (let b = Z - ee + 1; b <= Z; b++)
te.push({
key: b,
month: $,
year: O,
type: "prev"
});
const ne = [];
for (let b = 1; b <= P; b++) {
var o = new Date(O, $, b).getTime(), i = !0;
Y && Y > o && (i = !1), S && S < o && (i = !1), ne.push({
key: b,
month: $,
year: O,
type: i ? "month" : "next"
});
}
const oe = [];
for (let b = 1; b <= Se; b++)
oe.push({
key: b,
month: $,
year: O,
type: "next"
});
const ae = [], re = [...te, ...ne, ...oe];
for (; re.length > 0; )
ae.push(re.splice(0, 7));
M.key + k, n.push(ae);
}
const N = [];
for (; n.length > 0; )
N.push(n.splice(0, 3));
return N;
}, Ye = y > 1 && M.key === 11, Te = q(() => Me(y), [y, v, M]), be = q(() => ge(), [v, M]), xe = q(() => ve(), [E]), Ne = {
onSelect: F,
onRangeStart: L,
onRangeHover: W,
onRangeEnd: J
};
return ce(() => {
if (r && r instanceof Date && !l) {
var e = r, n = {
key: e.getDate(),
month: e.getMonth(),
year: e.getFullYear(),
type: "month"
};
T({
...d,
day: n
}), h({ date: e });
}
}, []), ce(() => {
if (r && !(r instanceof Date) && l) {
var e = r;
T({
...d,
from: e.from,
to: e.to,
range: !1
}), h({ dateRange: { from: e.from, to: e.to } });
}
}, []), {
culture: w,
date: {
today: c.getDate(),
instance: c,
month: M,
year: v,
surroundingYear: E,
manyYears: Ye
},
monthRows: Te,
monthList: be,
daysOfWeek: ye(),
prevMonth: we,
nextMonth: ke,
selectMonth: De,
goToMonth: _,
setYear: V,
goToYear: z,
yearList: xe,
setSurroundingYear: pe,
isRefillDay: s,
getClassDay: ue,
event: Ne
};
};
export {
U as C,
he as M,
Oe as a,
Ae as b,
$e as d,
Ie as u
};