mimir-ui-kit 1.34.4-t → 1.34.4

package/dist/components/DatePicker/DatePickerModal.js

@@ -1,151 +1,203 @@
-import { jsx as a, Fragment as _, jsxs as u } from "react/jsx-runtime";
-import { useRef as O, useState as q, useEffect as G } from "react";
-import { week as J } from "./constants.js";
-import { c as o } from "../../styles.module-CaPkyXYQ.js";
-import { Icon as K } from "../../icons/Icon.js";
-import { formating as i } from "../../utils/index.js";
-import { Button as H } from "../Button/Button.js";
-import { parseDate as j } from "../../utils/formating/Date.js";
-function st({
-  date: l,
-  onChangeValue: E,
-  setActive: F,
-  before: D,
-  onType: d
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { week } from "./constants.js";
+import { c as cls } from "../../styles.module-B9L4B63y.js";
+import { Icon } from "../../icons/Icon.js";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+import { parseDate } from "../../utils/formating/Date.js";
+function DatePickerModal({
+  date,
+  onChangeValue,
+  setActive,
+  before,
+  onType
 }) {
-  var k;
-  const r = O(null);
-  l = isNaN(new Date(l).getTime()) ? /* @__PURE__ */ new Date() : l;
-  const h = j(l), p = j(l), f = {
-    y: h.getFullYear(),
-    d: h.getDate(),
-    m: h.getMonth() + 1
-  }, g = {
-    y: p.getFullYear(),
-    d: p.getDate(),
-    m: p.getMonth() + 1
-  }, I = 4, [n, w] = q({ y: g.y, m: g.m }), v = 368;
-  G(() => {
-    var c, s, M, W;
-    const t = window.innerHeight, e = window.innerWidth;
-    if (r.current !== null) {
-      const Y = ((s = (c = r == null ? void 0 : r.current) == null ? void 0 : c.parentElement) == null ? void 0 : s.offsetWidth) || 0, B = ((W = (M = r == null ? void 0 : r.current) == null ? void 0 : M.parentElement) == null ? void 0 : W.offsetHeight) || 0, C = r.current.getBoundingClientRect(), A = r.current.offsetHeight;
-      t < C.y + A + B ? r.current.style.top = -A + "px" : r.current.style.top = B + "px", e < C.x + v && (r.current.style.left = Y - v + "px"), r.current.style.opacity = "1";
+  var _a;
+  const field = useRef(null);
+  date = isNaN(new Date(date).getTime()) ? /* @__PURE__ */ new Date() : date;
+  const _current = parseDate(date);
+  const _selecte = parseDate(date);
+  const current = {
+    y: _current.getFullYear(),
+    d: _current.getDate(),
+    m: _current.getMonth() + 1
+  };
+  const selecte = {
+    y: _selecte.getFullYear(),
+    d: _selecte.getDate(),
+    m: _selecte.getMonth() + 1
+  };
+  const countWorkDays = 4;
+  const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
+  const blockWidth = 368;
+  useEffect(() => {
+    var _a2, _b, _c, _d;
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+    if (field.current !== null) {
+      const inputWidth = ((_b = (_a2 = field == null ? void 0 : field.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
+      const inputHeight = ((_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight) || 0;
+      const inputPosition = field.current.getBoundingClientRect();
+      const calendarSize = field.current.offsetHeight;
+      if (windowHeight < inputPosition.y + calendarSize + inputHeight) {
+        field.current.style.top = -calendarSize + "px";
+      } else {
+        field.current.style.top = inputHeight + "px";
+      }
+      if (windowWidth < inputPosition.x + blockWidth) {
+        field.current.style.left = inputWidth - blockWidth + "px";
+      }
+      field.current.style.opacity = "1";
+    }
+  }, [month]);
+  const countPrevDays = (e) => {
+    let dayOfWeek = e.getDay();
+    if (dayOfWeek === 0) dayOfWeek = 7;
+    return dayOfWeek - 1;
+  };
+  const currentMonthIndex = month.m - 1;
+  const currentMonthFull = new Date(month.y, currentMonthIndex);
+  const days = [];
+  const prevDays = () => {
+    const prevMonth = new Date(currentMonthFull);
+    prevMonth.setDate(prevMonth.getDate() - 1);
+    const lastDayPrevMohth = prevMonth.getDate();
+    const prevList = [];
+    for (let i = 0; i < countPrevDays(currentMonthFull); i++) {
+      prevList.push(lastDayPrevMohth - i);
     }
-  }, [n]);
-  const P = (t) => {
-    let e = t.getDay();
-    return e === 0 && (e = 7), e - 1;
-  }, N = n.m - 1, m = new Date(n.y, N), y = [], x = (() => {
-    const t = new Date(m);
-    t.setDate(t.getDate() - 1);
-    const e = t.getDate(), c = [];
-    for (let s = 0; s < P(m); s++)
-      c.push(e - s);
-    return c.reverse(), c;
-  })();
-  for (; m.getMonth() === N; )
-    y.push(m.getDate()), m.setDate(m.getDate() + 1);
-  const z = (() => {
-    const e = 42 - (x.length + y.length), c = [];
-    for (let s = 1; s <= e; s++)
-      c.push(s);
-    return c;
-  })(), b = (t, e) => (e = t > 12 ? e + 1 : t < 1 ? e - 1 : e, t = t > 12 ? 1 : t < 1 ? 12 : t, { y: e, m: t }), L = () => {
-    F(!1);
-  }, R = () => {
-    w(b(n.m + 1, n.y));
-  }, S = () => {
-    w(b(n.m - 1, n.y));
-  }, $ = (t) => !!(D && D.getTime() > t), V = (t) => {
-    $(
+    prevList.reverse();
+    return prevList;
+  };
+  const prevDaysArray = prevDays();
+  while (currentMonthFull.getMonth() === currentMonthIndex) {
+    days.push(currentMonthFull.getDate());
+    currentMonthFull.setDate(currentMonthFull.getDate() + 1);
+  }
+  const nextDays = () => {
+    const totalViewDays = 42;
+    const daysCount = totalViewDays - (prevDaysArray.length + days.length);
+    const nextList = [];
+    for (let i = 1; i <= daysCount; i++) {
+      nextList.push(i);
+    }
+    return nextList;
+  };
+  const nextDaysArray = nextDays();
+  const update = (m, y) => {
+    y = m > 12 ? y + 1 : m < 1 ? y - 1 : y;
+    m = m > 12 ? 1 : m < 1 ? 12 : m;
+    return { y, m };
+  };
+  const onExit = () => {
+    setActive(false);
+  };
+  const next = () => {
+    setMonth(update(month.m + 1, month.y));
+  };
+  const prev = () => {
+    setMonth(update(month.m - 1, month.y));
+  };
+  const isBefore = (activeDate) => {
+    if (before) {
+      const beforeDate = before.getTime();
+      if (beforeDate > activeDate) return true;
+    }
+    return false;
+  };
+  const send = (searchDate) => {
+    if (isBefore(
       (/* @__PURE__ */ new Date(
-        `${n.y}-${i.Number(2, n.m)}-${i.Number(2, t)}`
+        `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
       )).getTime()
-    ) || (E(
+    ))
+      return;
+    onChangeValue(
       /* @__PURE__ */ new Date(
-        `${n.y}-${i.Number(2, n.m)}-${i.Number(2, t)}`
+        `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
       )
-    ), L());
+    );
+    onExit();
   };
-  return /* @__PURE__ */ a(_, { children: /* @__PURE__ */ u(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: [o["calendar-block"]].join(" "),
-      ref: r,
+      className: [cls["calendar-block"]].join(" "),
+      ref: field,
       "data-testid": "calendar-modal",
       children: [
-        /* @__PURE__ */ u("div", { className: o.h, children: [
-          /* @__PURE__ */ a(
-            H,
+        /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
+          /* @__PURE__ */ jsx(
+            Button,
             {
-              isIconButton: !0,
+              isIconButton: true,
               iconName: "DropdownArrowLeft16px",
-              onClick: S,
+              onClick: prev,
               variant: "secondary-gray",
               size: "l"
             }
           ),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ jsxs(
             "div",
             {
-              className: o.d,
-              onClick: () => d == null ? void 0 : d("months"),
+              className: cls["d"],
+              onClick: () => onType == null ? void 0 : onType("months"),
               "data-testid": "month-year-button",
               children: [
-                (k = i.Month(n.m)) == null ? void 0 : k.name,
+                (_a = formating.Month(month.m)) == null ? void 0 : _a.name,
                 "’",
-                n.y.toString().slice(-2),
-                /* @__PURE__ */ a(K, { iconName: "DropdownArrowBottom16px" })
+                month.y.toString().slice(-2),
+                /* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
               ]
             }
           ),
-          /* @__PURE__ */ a(
-            H,
+          /* @__PURE__ */ jsx(
+            Button,
             {
-              isIconButton: !0,
+              isIconButton: true,
               iconName: "DropdownArrowRight16px",
-              onClick: R,
+              onClick: next,
               variant: "secondary-gray",
               size: "l"
             }
           )
         ] }),
-        /* @__PURE__ */ u("div", { className: o.b, children: [
-          J.map((t, e) => /* @__PURE__ */ a(
+        /* @__PURE__ */ jsxs("div", { className: cls["b"], children: [
+          week.map((i, s) => /* @__PURE__ */ jsx(
             "div",
             {
-              className: `${e > I ? [o.m, o.orange].join(" ") : o.m}`,
-              children: t
+              className: `${s > countWorkDays ? [cls["m"], cls["orange"]].join(" ") : cls["m"]}`,
+              children: i
             },
-            `v${e}`
+            `v${s}`
           )),
-          x.map((t, e) => /* @__PURE__ */ a("div", { className: o.m, children: t }, e)),
-          y.map((t, e) => /* @__PURE__ */ a(
+          prevDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key)),
+          days.map((i, s) => /* @__PURE__ */ jsx(
             "div",
             {
-              className: $(
+              className: isBefore(
                 (/* @__PURE__ */ new Date(
-                  `${n.y}-${i.Number(2, n.m)}-${i.Number(2, t)}`
+                  `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, i)}`
                 )).getTime()
-              ) ? o.m : o.a,
-              children: t !== 0 ? /* @__PURE__ */ a(
+              ) ? cls["m"] : cls["a"],
+              children: i !== 0 ? /* @__PURE__ */ jsx(
                 "b",
                 {
-                  className: f.y === n.y && f.m === n.m && f.d === t ? o.current : "",
-                  onClick: () => V(t),
-                  children: t
+                  className: current.y === month.y && current.m === month.m && current.d === i ? cls["current"] : "",
+                  onClick: () => send(i),
+                  children: i
                 }
-              ) : /* @__PURE__ */ a("p", {})
+              ) : /* @__PURE__ */ jsx("p", {})
             },
-            e
+            s
           )),
-          z.map((t, e) => /* @__PURE__ */ a("div", { className: o.m, children: t }, e))
+          nextDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key))
         ] })
       ]
     }
   ) });
 }
 export {
-  st as DatePickerModal
+  DatePickerModal
 };

package/dist/components/DatePicker/MonthPickerModal.js

@@ -1,102 +1,131 @@
-import { jsx as o, Fragment as j, jsxs as u } from "react/jsx-runtime";
-import { useRef as z, useState as A, useEffect as E } from "react";
-import { months as F } from "./constants.js";
-import { c as i } from "../../styles.module-CaPkyXYQ.js";
-import { Icon as I } from "../../icons/Icon.js";
-import { formating as c } from "../../utils/index.js";
-import { Button as v } from "../Button/Button.js";
-function q({
-  date: d,
-  onChangeValue: $,
-  before: f,
-  onType: s
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { months } from "./constants.js";
+import { c as cls } from "../../styles.module-B9L4B63y.js";
+import { Icon } from "../../icons/Icon.js";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+function MonthPickerModal({
+  date,
+  onChangeValue,
+  before,
+  onType
 }) {
-  const t = z(null), a = new Date(d), m = new Date(d), h = {
-    y: a.getFullYear(),
-    d: a.getDate(),
-    m: a.getMonth() + 1
-  }, l = {
-    y: m.getFullYear(),
-    d: m.getDate(),
-    m: m.getMonth() + 1
-  }, [n, p] = A(l.y), g = 368;
-  E(() => {
-    var N, y, x, D;
-    const e = window.innerHeight, r = window.innerWidth;
-    if (t.current !== null) {
-      const W = ((y = (N = t == null ? void 0 : t.current) == null ? void 0 : N.parentElement) == null ? void 0 : y.offsetWidth) || 0, M = (D = (x = t == null ? void 0 : t.current) == null ? void 0 : x.parentElement) == null ? void 0 : D.offsetHeight, b = t.current.getBoundingClientRect(), k = t.current.offsetHeight;
-      e < b.y + k ? t.current.style.top = -k + "px" : t.current.style.top = M + "px", r < b.x + g && (t.current.style.left = W - g + "px"), t.current.style.opacity = "1";
+  const field = useRef(null);
+  const _current = new Date(date);
+  const _selecte = new Date(date);
+  const current = {
+    y: _current.getFullYear(),
+    d: _current.getDate(),
+    m: _current.getMonth() + 1
+  };
+  const selecte = {
+    y: _selecte.getFullYear(),
+    d: _selecte.getDate(),
+    m: _selecte.getMonth() + 1
+  };
+  const [year, setYear] = useState(selecte.y);
+  const blockWidth = 368;
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+    if (field.current !== null) {
+      const inputWidth = ((_b = (_a = field == null ? void 0 : field.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
+      const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
+      const inputPosition = field.current.getBoundingClientRect();
+      const calendarSize = field.current.offsetHeight;
+      if (windowHeight < inputPosition.y + calendarSize) {
+        field.current.style.top = -calendarSize + "px";
+      } else {
+        field.current.style.top = inputHeight + "px";
+      }
+      if (windowWidth < inputPosition.x + blockWidth) {
+        field.current.style.left = inputWidth - blockWidth + "px";
+      }
+      field.current.style.opacity = "1";
     }
   }, []);
-  const B = () => {
-    p(n + 1);
-  }, C = () => {
-    p(n - 1);
-  }, w = (e) => !!(f && f.getTime() > e), H = (e) => {
-    w(
+  const next = () => {
+    setYear(year + 1);
+  };
+  const prev = () => {
+    setYear(year - 1);
+  };
+  const isBefore = (activeDate) => {
+    if (before) {
+      const beforeDate = before.getTime();
+      if (beforeDate > activeDate) return true;
+    }
+    return false;
+  };
+  const send = (searchDate) => {
+    if (isBefore(
       (/* @__PURE__ */ new Date(
-        `${n}-${c.Number(2, e)}-${c.Number(2, l.d)}`
+        `${year}-${formating.Number(2, searchDate)}-${formating.Number(2, selecte.d)}`
       )).getTime()
-    ) || $(
+    ))
+      return;
+    onChangeValue(
       /* @__PURE__ */ new Date(
-        `${n}-${c.Number(2, e)}-${c.Number(2, l.d)}`
+        `${year}-${formating.Number(2, searchDate)}-${formating.Number(2, selecte.d)}`
       )
     );
   };
-  return /* @__PURE__ */ o(j, { children: /* @__PURE__ */ u("div", { className: [i["calendar-block"]].join(" "), ref: t, children: [
-    /* @__PURE__ */ u("div", { className: i.h, children: [
-      /* @__PURE__ */ o(
-        v,
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
+    /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
+      /* @__PURE__ */ jsx(
+        Button,
         {
-          isIconButton: !0,
+          isIconButton: true,
           iconName: "DropdownArrowLeft16px",
-          onClick: C,
+          onClick: prev,
           variant: "secondary-gray",
           size: "l"
         }
       ),
-      /* @__PURE__ */ u(
+      /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => s == null ? void 0 : s("years"),
-          className: i.d,
+          onClick: () => onType == null ? void 0 : onType("years"),
+          className: cls["d"],
           "data-testid": "year-button",
           children: [
-            n.toString(),
-            /* @__PURE__ */ o(I, { iconName: "DropdownArrowBottom16px" })
+            year.toString(),
+            /* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
           ]
         }
       ),
-      /* @__PURE__ */ o(
-        v,
+      /* @__PURE__ */ jsx(
+        Button,
         {
-          isIconButton: !0,
+          isIconButton: true,
           iconName: "DropdownArrowRight16px",
-          onClick: B,
+          onClick: next,
           variant: "secondary-gray",
           size: "l"
         }
       )
     ] }),
-    /* @__PURE__ */ o("div", { className: i.monthGrid, "data-testid": "month-picker", children: F.map((e, r) => /* @__PURE__ */ o(
+    /* @__PURE__ */ jsx("div", { className: cls["monthGrid"], "data-testid": "month-picker", children: months.map((i, s) => /* @__PURE__ */ jsx(
       "div",
       {
-        className: w(
-          (/* @__PURE__ */ new Date(`${n}-${c.Number(2, r + 1)}`)).getTime()
-        ) ? i.m : i.a,
-        children: /* @__PURE__ */ o(
+        className: isBefore(
+          (/* @__PURE__ */ new Date(`${year}-${formating.Number(2, s + 1)}`)).getTime()
+        ) ? cls["m"] : cls["a"],
+        children: /* @__PURE__ */ jsx(
           "b",
           {
-            className: h.y === n && h.m === r + 1 ? i.current : "",
-            onClick: () => H(r + 1),
-            children: e
+            className: current.y === year && current.m === s + 1 ? cls["current"] : "",
+            onClick: () => send(s + 1),
+            children: i
           }
         )
       },
-      r
+      s
     )) })
   ] }) });
 }
 export {
-  q as MonthPickerModal
+  MonthPickerModal
 };