@memobit/libs 3.1.3 → 3.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,63 +1,74 @@
|
|
|
1
1
|
import './Drawer.css';
|
|
2
|
-
import { Icon as
|
|
3
|
-
import { useBodyScrollLock as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { Tooltip as
|
|
2
|
+
import { Icon as T } from "../Icon/Icon2.js";
|
|
3
|
+
import { useBodyScrollLock as Z } from "../../hooks/useBodyScrollLock.js";
|
|
4
|
+
import { Button as l } from "../Button/Button2.js";
|
|
5
|
+
import { Tooltip as v } from "../Tooltip/Tooltip2.js";
|
|
6
6
|
/* empty css */
|
|
7
|
-
import
|
|
8
|
-
import { Fragment as
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
const [
|
|
12
|
-
if (
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const e =
|
|
16
|
-
|
|
7
|
+
import V, { useEffect as b, useState as W } from "react";
|
|
8
|
+
import { Fragment as X, jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
9
|
+
var q = 1e3, N = 0, o = [], U = ({ isOpen: n, onClose: s, position: p = "left", width: g = "320px", maxWidth: C = "none", margin: I = 0, borderRadius: E = 0, shadow: z = "none", children: S, title: c, icon: m, className: j = "", showOverlay: D = !0, lockScroll: F = !0, hideClose: $ = !1, actions: _ = [], onBack: f, backLabel: B = "Back", primary: t, secondary: a, footer: h }) => {
|
|
10
|
+
Z(n && F);
|
|
11
|
+
const [w, L] = W(0);
|
|
12
|
+
if (b(() => {
|
|
13
|
+
if (!n) return;
|
|
14
|
+
N += 1;
|
|
15
|
+
const e = N;
|
|
16
|
+
return L(e), o.push(e), () => {
|
|
17
|
+
const d = o.indexOf(e);
|
|
18
|
+
d !== -1 && o.splice(d, 1);
|
|
19
|
+
};
|
|
20
|
+
}, [n]), b(() => {
|
|
21
|
+
if (!n) return;
|
|
22
|
+
const e = (d) => {
|
|
23
|
+
d.key !== "Escape" || o[o.length - 1] !== w || s();
|
|
17
24
|
};
|
|
18
25
|
return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
|
|
19
|
-
}, [
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"--drawer-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
}, [
|
|
27
|
+
n,
|
|
28
|
+
s,
|
|
29
|
+
w
|
|
30
|
+
]), !n) return null;
|
|
31
|
+
const u = (e) => typeof e == "number" ? `${e}px` : e, k = q + w * 2, R = {
|
|
32
|
+
"--drawer-width": g,
|
|
33
|
+
"--drawer-max-width": u(C),
|
|
34
|
+
"--drawer-margin": u(I),
|
|
35
|
+
"--drawer-border-radius": u(E),
|
|
36
|
+
"--drawer-shadow": z,
|
|
37
|
+
zIndex: k + 1
|
|
38
|
+
}, A = h || t || a;
|
|
39
|
+
return /* @__PURE__ */ i(X, { children: [D && /* @__PURE__ */ r("div", {
|
|
29
40
|
className: "drawer-overlay",
|
|
30
|
-
onClick:
|
|
31
|
-
style: { zIndex:
|
|
32
|
-
}), /* @__PURE__ */
|
|
33
|
-
className: `drawer drawer--${
|
|
34
|
-
style:
|
|
41
|
+
onClick: s,
|
|
42
|
+
style: { zIndex: k }
|
|
43
|
+
}), /* @__PURE__ */ i("div", {
|
|
44
|
+
className: `drawer drawer--${p} ${j}`,
|
|
45
|
+
style: R,
|
|
35
46
|
children: [
|
|
36
|
-
/* @__PURE__ */
|
|
47
|
+
/* @__PURE__ */ i("div", {
|
|
37
48
|
className: "drawer__header",
|
|
38
49
|
children: [
|
|
39
|
-
|
|
40
|
-
title:
|
|
50
|
+
f && /* @__PURE__ */ r(v, {
|
|
51
|
+
title: B,
|
|
41
52
|
position: "bottom",
|
|
42
|
-
children: /* @__PURE__ */ r(
|
|
53
|
+
children: /* @__PURE__ */ r(l, {
|
|
43
54
|
className: "drawer__back",
|
|
44
|
-
onClick:
|
|
55
|
+
onClick: f,
|
|
45
56
|
size: "small",
|
|
46
57
|
variant: "ghost",
|
|
47
58
|
icon: "arrow-left"
|
|
48
59
|
})
|
|
49
60
|
}),
|
|
50
|
-
(
|
|
61
|
+
(c || m) && /* @__PURE__ */ i("h2", {
|
|
51
62
|
className: "drawer__title",
|
|
52
|
-
children: [
|
|
63
|
+
children: [m && /* @__PURE__ */ r(T, { name: m }), c && /* @__PURE__ */ r("span", {
|
|
53
64
|
className: "drawer__title-text",
|
|
54
|
-
children:
|
|
65
|
+
children: c
|
|
55
66
|
})]
|
|
56
67
|
}),
|
|
57
68
|
_.length > 0 && /* @__PURE__ */ r("div", {
|
|
58
69
|
className: "drawer__header-actions",
|
|
59
70
|
children: _.map((e) => {
|
|
60
|
-
const
|
|
71
|
+
const d = /* @__PURE__ */ r(l, {
|
|
61
72
|
disabled: e.disabled,
|
|
62
73
|
onClick: e.onClick,
|
|
63
74
|
icon: e.icon,
|
|
@@ -65,20 +76,20 @@ var X = 1e3, x = 0, Q = ({ isOpen: d, onClose: n, position: b = "left", width: N
|
|
|
65
76
|
size: e.size ?? "small",
|
|
66
77
|
variant: e.variant ?? "ghost",
|
|
67
78
|
children: e.label
|
|
68
|
-
}),
|
|
69
|
-
return
|
|
70
|
-
title:
|
|
79
|
+
}), x = e.title ?? e.label;
|
|
80
|
+
return x ? /* @__PURE__ */ r(v, {
|
|
81
|
+
title: x,
|
|
71
82
|
position: "bottom",
|
|
72
|
-
children:
|
|
73
|
-
}, e.id) : /* @__PURE__ */ r(
|
|
83
|
+
children: d
|
|
84
|
+
}, e.id) : /* @__PURE__ */ r(V.Fragment, { children: d }, e.id);
|
|
74
85
|
})
|
|
75
86
|
}),
|
|
76
|
-
|
|
87
|
+
!$ && /* @__PURE__ */ r(v, {
|
|
77
88
|
title: "Close drawer",
|
|
78
|
-
children: /* @__PURE__ */ r(
|
|
89
|
+
children: /* @__PURE__ */ r(l, {
|
|
79
90
|
className: "drawer__close",
|
|
80
91
|
icon: "clear",
|
|
81
|
-
onClick:
|
|
92
|
+
onClick: s,
|
|
82
93
|
size: "medium",
|
|
83
94
|
variant: "ghost"
|
|
84
95
|
})
|
|
@@ -87,22 +98,22 @@ var X = 1e3, x = 0, Q = ({ isOpen: d, onClose: n, position: b = "left", width: N
|
|
|
87
98
|
}),
|
|
88
99
|
/* @__PURE__ */ r("div", {
|
|
89
100
|
className: "drawer__content",
|
|
90
|
-
children:
|
|
101
|
+
children: S
|
|
91
102
|
}),
|
|
92
|
-
|
|
103
|
+
A && /* @__PURE__ */ i("div", {
|
|
93
104
|
className: "drawer__footer",
|
|
94
|
-
children: [
|
|
105
|
+
children: [h && /* @__PURE__ */ r("div", {
|
|
95
106
|
className: "drawer__footer-content",
|
|
96
|
-
children:
|
|
97
|
-
}), (t || a) && /* @__PURE__ */
|
|
107
|
+
children: h
|
|
108
|
+
}), (t || a) && /* @__PURE__ */ i("div", {
|
|
98
109
|
className: "drawer__footer-actions",
|
|
99
|
-
children: [a && /* @__PURE__ */ r(
|
|
110
|
+
children: [a && /* @__PURE__ */ r(l, {
|
|
100
111
|
variant: a.variant || "default",
|
|
101
112
|
icon: a.icon,
|
|
102
113
|
disabled: a.disabled,
|
|
103
114
|
onClick: a.onClick,
|
|
104
115
|
children: a.text
|
|
105
|
-
}), t && /* @__PURE__ */ r(
|
|
116
|
+
}), t && /* @__PURE__ */ r(l, {
|
|
106
117
|
variant: t.variant || "info",
|
|
107
118
|
icon: t.icon,
|
|
108
119
|
disabled: t.disabled,
|
|
@@ -115,5 +126,5 @@ var X = 1e3, x = 0, Q = ({ isOpen: d, onClose: n, position: b = "left", width: N
|
|
|
115
126
|
})] });
|
|
116
127
|
};
|
|
117
128
|
export {
|
|
118
|
-
|
|
129
|
+
U as Drawer
|
|
119
130
|
};
|
|
@@ -4,8 +4,8 @@ import { addDays as Z, addMonths as H } from "../../helpers/Datetime.js";
|
|
|
4
4
|
import { useSwipe as ee } from "../../hooks/useSwipe.js";
|
|
5
5
|
import { buildDroppedStart as te, getWeekDays as ae, startOfDay as T } from "./EventCalendar.helpers.js";
|
|
6
6
|
import { DayAgenda as ne } from "../DayAgenda/DayAgenda2.js";
|
|
7
|
-
import { ToggleButtons as
|
|
8
|
-
import { EventCalendarMonth as
|
|
7
|
+
import { ToggleButtons as re } from "../ToggleButtons/ToggleButtons2.js";
|
|
8
|
+
import { EventCalendarMonth as le } from "./EventCalendar.Month.js";
|
|
9
9
|
import { EventCalendarWeek as oe } from "./EventCalendar.Week.js";
|
|
10
10
|
/* empty css */
|
|
11
11
|
import { useCallback as s, useMemo as ie, useState as f } from "react";
|
|
@@ -18,61 +18,61 @@ var se = [{
|
|
|
18
18
|
key: "week",
|
|
19
19
|
label: "Week",
|
|
20
20
|
icon: "calendar-week"
|
|
21
|
-
}], ce = (
|
|
21
|
+
}], ce = (r) => r.toLocaleDateString(void 0, {
|
|
22
22
|
month: "long",
|
|
23
23
|
year: "numeric"
|
|
24
|
-
}),
|
|
25
|
-
const
|
|
26
|
-
return t.getFullYear() !== a.getFullYear() ? `${t.getDate()} ${
|
|
24
|
+
}), d = (r) => r.toLocaleDateString(void 0, { month: "short" }), de = (r, D) => {
|
|
25
|
+
const l = ae(r, D), t = l[0], a = l[l.length - 1];
|
|
26
|
+
return t.getFullYear() !== a.getFullYear() ? `${t.getDate()} ${d(t)} ${t.getFullYear()} – ${a.getDate()} ${d(a)} ${a.getFullYear()}` : t.getMonth() !== a.getMonth() ? `${t.getDate()} ${d(t)} – ${a.getDate()} ${d(a)} ${a.getFullYear()}` : `${t.getDate()} – ${a.getDate()} ${d(a)} ${a.getFullYear()}`;
|
|
27
27
|
};
|
|
28
|
-
function Se({ activeHours:
|
|
29
|
-
const [A, E] = f(() => T(
|
|
30
|
-
$ && $(e),
|
|
31
|
-
}, [
|
|
32
|
-
w && w(e),
|
|
33
|
-
}, [w,
|
|
28
|
+
function Se({ activeHours: r, className: D, date: l, dayAgenda: t = !1, dayEndHour: a = 24, dayStartHour: y = 0, defaultDurationMinutes: C = 30, emptyLabel: Y, events: b, firstDayOfWeek: v = 0, headerExtra: z, hourHeight: V = 44, maxEventsPerDay: W = 3, onDateChange: $, onDayClick: _, onEventClick: m, onEventDrop: g, onViewChange: w, renderEvent: B, showHeader: x = !0, showWeekNumbers: L = !1, swipeNavigation: P = !0, view: h }) {
|
|
29
|
+
const [A, E] = f(() => T(l ?? /* @__PURE__ */ new Date())), [O, R] = f(h ?? "month"), [c, S] = f(null), [I, u] = f(null), o = l ?? A, i = h ?? O, q = !!g, M = s((e) => {
|
|
30
|
+
$ && $(e), l || E(e);
|
|
31
|
+
}, [l, $]), G = s((e) => {
|
|
32
|
+
w && w(e), h || R(e);
|
|
33
|
+
}, [w, h]), p = s((e) => {
|
|
34
34
|
M(i === "month" ? H(o, e) : Z(o, e * 7));
|
|
35
35
|
}, [
|
|
36
36
|
o,
|
|
37
37
|
i,
|
|
38
38
|
M
|
|
39
39
|
]), J = s((e, X) => {
|
|
40
|
-
!
|
|
41
|
-
}, [
|
|
40
|
+
!c || !g || (g(c, te(c, e, X)), S(null));
|
|
41
|
+
}, [c, g]), k = s((e) => u(T(e)), []), K = s((e) => {
|
|
42
42
|
if (t) {
|
|
43
43
|
k(e.start);
|
|
44
44
|
return;
|
|
45
45
|
}
|
|
46
|
-
|
|
46
|
+
m?.(e);
|
|
47
47
|
}, [
|
|
48
48
|
t,
|
|
49
|
-
|
|
49
|
+
m,
|
|
50
50
|
k
|
|
51
51
|
]), Q = ee({
|
|
52
52
|
enabled: P,
|
|
53
53
|
onSwipeLeft: () => p(1),
|
|
54
54
|
onSwipeRight: () => p(-1)
|
|
55
|
-
}), U = ie(() => i === "month" ? ce(o) : de(o,
|
|
55
|
+
}), U = ie(() => i === "month" ? ce(o) : de(o, v), [
|
|
56
56
|
o,
|
|
57
57
|
i,
|
|
58
|
-
|
|
58
|
+
v
|
|
59
59
|
]), j = {
|
|
60
|
-
activeHours:
|
|
60
|
+
activeHours: r,
|
|
61
61
|
date: o,
|
|
62
62
|
dragEnabled: q,
|
|
63
|
-
draggingId:
|
|
63
|
+
draggingId: c?.id ?? null,
|
|
64
64
|
events: b,
|
|
65
|
-
firstDayOfWeek:
|
|
65
|
+
firstDayOfWeek: v,
|
|
66
66
|
onDayClick: _,
|
|
67
67
|
onDragEnd: () => S(null),
|
|
68
68
|
onDragStart: (e) => S(e),
|
|
69
69
|
onDrop: J,
|
|
70
|
-
onEventClick: t ||
|
|
70
|
+
onEventClick: t || m ? K : void 0,
|
|
71
71
|
renderEvent: B,
|
|
72
72
|
showWeekNumbers: L
|
|
73
73
|
};
|
|
74
74
|
return /* @__PURE__ */ F("div", {
|
|
75
|
-
className: ["event-calendar",
|
|
75
|
+
className: ["event-calendar", D ?? ""].filter(Boolean).join(" "),
|
|
76
76
|
children: [
|
|
77
77
|
x && /* @__PURE__ */ F("div", {
|
|
78
78
|
className: "event-calendar__header",
|
|
@@ -109,7 +109,7 @@ function Se({ activeHours: l, className: v, date: r, dayAgenda: t = !1, dayEndHo
|
|
|
109
109
|
className: "event-calendar__header-extra",
|
|
110
110
|
children: z
|
|
111
111
|
}),
|
|
112
|
-
/* @__PURE__ */ n(
|
|
112
|
+
/* @__PURE__ */ n(re, {
|
|
113
113
|
onToggleChange: (e) => G(e),
|
|
114
114
|
size: "small",
|
|
115
115
|
state: i,
|
|
@@ -120,7 +120,7 @@ function Se({ activeHours: l, className: v, date: r, dayAgenda: t = !1, dayEndHo
|
|
|
120
120
|
/* @__PURE__ */ n("div", {
|
|
121
121
|
className: "event-calendar__viewport",
|
|
122
122
|
...Q,
|
|
123
|
-
children: i === "month" ? /* @__PURE__ */ n(
|
|
123
|
+
children: i === "month" ? /* @__PURE__ */ n(le, {
|
|
124
124
|
...j,
|
|
125
125
|
emptyLabel: Y,
|
|
126
126
|
maxEventsPerDay: W,
|
|
@@ -134,19 +134,17 @@ function Se({ activeHours: l, className: v, date: r, dayAgenda: t = !1, dayEndHo
|
|
|
134
134
|
})
|
|
135
135
|
}),
|
|
136
136
|
I && /* @__PURE__ */ n(ne, {
|
|
137
|
-
activeHours:
|
|
137
|
+
activeHours: r,
|
|
138
138
|
date: I,
|
|
139
|
-
onDateChange:
|
|
139
|
+
onDateChange: u,
|
|
140
140
|
emptyLabel: Y,
|
|
141
141
|
events: b,
|
|
142
142
|
isOpen: !0,
|
|
143
143
|
onAdd: _ ? (e) => {
|
|
144
|
-
|
|
145
|
-
} : void 0,
|
|
146
|
-
onClose: () => m(null),
|
|
147
|
-
onEventClick: c ? (e) => {
|
|
148
|
-
m(null), c(e);
|
|
144
|
+
u(null), _(e);
|
|
149
145
|
} : void 0,
|
|
146
|
+
onClose: () => u(null),
|
|
147
|
+
onEventClick: m,
|
|
150
148
|
renderEvent: B
|
|
151
149
|
})
|
|
152
150
|
]
|
|
@@ -1,31 +1,27 @@
|
|
|
1
|
-
import { useEffect as
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
document.body.style.overflow = t, document.body.style.position = l, document.body.style.top = n, document.body.style.left = y, document.body.style.right = r, document.body.style.width = s, window.scrollTo(0, c), o.current = null;
|
|
9
|
-
};
|
|
10
|
-
if (e) {
|
|
11
|
-
if (!o.current) {
|
|
12
|
-
const t = window.scrollY;
|
|
13
|
-
o.current = {
|
|
1
|
+
import { useEffect as c } from "react";
|
|
2
|
+
var t = 0, e = null, m = (d) => {
|
|
3
|
+
c(() => {
|
|
4
|
+
if (d) {
|
|
5
|
+
if (t += 1, t === 1) {
|
|
6
|
+
const o = window.scrollY;
|
|
7
|
+
e = {
|
|
14
8
|
overflow: document.body.style.overflow,
|
|
15
9
|
position: document.body.style.position,
|
|
16
10
|
top: document.body.style.top,
|
|
17
11
|
left: document.body.style.left,
|
|
18
12
|
right: document.body.style.right,
|
|
19
13
|
width: document.body.style.width,
|
|
20
|
-
scrollY:
|
|
21
|
-
}, document.body.style.overflow = "hidden", document.body.style.position = "fixed", document.body.style.top = `-${
|
|
14
|
+
scrollY: o
|
|
15
|
+
}, document.body.style.overflow = "hidden", document.body.style.position = "fixed", document.body.style.top = `-${o}px`, document.body.style.left = "0", document.body.style.right = "0", document.body.style.width = "100%";
|
|
22
16
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
return () => {
|
|
18
|
+
if (t -= 1, t > 0 || !e) return;
|
|
19
|
+
const { left: o, overflow: l, position: y, right: n, scrollY: s, top: i, width: r } = e;
|
|
20
|
+
document.body.style.overflow = l, document.body.style.position = y, document.body.style.top = i, document.body.style.left = o, document.body.style.right = n, document.body.style.width = r, window.scrollTo(0, s), e = null;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
}, [d]);
|
|
28
24
|
};
|
|
29
25
|
export {
|
|
30
|
-
|
|
26
|
+
m as useBodyScrollLock
|
|
31
27
|
};
|
package/dist/version.js
CHANGED
package/dist/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memobit/libs",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.4",
|
|
4
4
|
"description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|