triafly-ui-kit 1.0.26 → 1.0.27

package/dist/components/Ui/DateRangePicker/DateRangePicker.stories.js

@@ -0,0 +1,84 @@
+import { jsx as i } from "react/jsx-runtime";
+import { DateRangePicker as a } from "./DateRangePicker.js";
+import e from "../../../_virtual/dayjs.min.js";
+const s = {
+  title: "UIKit/DateRangePicker",
+  component: a,
+  tags: ["autodocs"],
+  argTypes: {
+    disabledBefore: {
+      control: "text",
+      description: "Дизейбл до"
+    },
+    disabledAfter: {
+      control: "text",
+      description: "Дизейбл после"
+    },
+    className: {
+      control: "text",
+      description: "Класс для основного контейнера"
+    },
+    onChange: {
+      action: "dateChanged",
+      description: "Обработчик изменения даты"
+    },
+    placeholder: {
+      control: "text",
+      description: "Текст плейсхолдера"
+    },
+    autoCompleteWithToday: {
+      control: "boolean",
+      description: "Автозаполнение датой, если указали один не полностью"
+    },
+    initialRange: {
+      control: "object",
+      description: "Начальное состояние"
+    }
+  }
+}, d = {
+  args: {
+    placeholder: "Любая дата"
+  }
+}, c = {
+  args: {
+    initialRange: {
+      start: e("2023-01-01"),
+      end: e()
+    },
+    placeholder: "Выберите дату"
+  }
+}, p = {
+  args: {
+    disabledBefore: e(new Date(2023, 0, 1)),
+    disabledAfter: e(new Date(2023, 11, 31)),
+    placeholder: "Выберите дату в 2023 году"
+  }
+}, g = {
+  args: {
+    disabledAfter: e(),
+    placeholder: "Выберите дату"
+  }
+}, h = {
+  args: {
+    initialRange: {
+      start: e("2025-06-01"),
+      end: e("2025-06-15")
+    },
+    placeholder: "Выберите дату"
+  },
+  render: (t) => {
+    const o = {
+      ...t,
+      initialRange: t.initialRange
+    };
+    return /* @__PURE__ */ i(a, { ...o });
+  }
+};
+export {
+  d as Default,
+  h as InitialDate,
+  p as WithDateRange,
+  g as WithDateRangeDisabledMonth,
+  c as WithInitialDate,
+  s as default
+};

package/dist/components/Ui/DateRangePicker/const.js

@@ -0,0 +1,37 @@
+const e = [
+  {
+    label: "Сегодня",
+    key: "today"
+  },
+  {
+    label: "Вчера",
+    key: "yesterday"
+  },
+  {
+    label: "Эта неделя",
+    key: "thisWeek"
+  },
+  {
+    label: "Прошлая неделя",
+    key: "lastWeek"
+  },
+  {
+    label: "Этот месяц",
+    key: "thisMonth"
+  },
+  {
+    label: "Прошлый месяц",
+    key: "lastMonth"
+  },
+  {
+    label: "Этот год",
+    key: "thisYear"
+  },
+  {
+    label: "Прошлый год",
+    key: "lastYear"
+  }
+];
+export {
+  e as selectAutoCompliteDate
+};

package/dist/components/Ui/DateRangePicker/hooks/useCalendarRenderer.js

@@ -0,0 +1,48 @@
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import D from "../../../../_virtual/dayjs.min.js";
+const B = (o, S, d, i) => {
+  const $ = D();
+  return { renderCalendar: (a, C) => {
+    const e = a.startOf("month"), c = a.endOf("month"), O = c.date(), M = (e.day() + 6) % 7, r = [];
+    for (let t = M; t > 0; t--)
+      r.push(e.subtract(t, "day"));
+    for (let t = 0; t < O; t++)
+      r.push(e.add(t, "day"));
+    const N = Math.ceil(r.length / 7) * 7 - r.length;
+    for (let t = 1; t <= N; t++)
+      r.push(c.add(t, "day"));
+    const l = [];
+    for (let t = 0; t < r.length; t += 7)
+      l.push(r.slice(t, t + 7));
+    return /* @__PURE__ */ n("div", { className: "calendar-month", children: /* @__PURE__ */ u("table", { children: [
+      /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ n("tr", { children: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"].map((t) => /* @__PURE__ */ n("th", { children: t }, t)) }) }),
+      /* @__PURE__ */ n("tbody", { children: l.map((t, h) => /* @__PURE__ */ n("tr", { children: t.map((s, b) => {
+        var f, p;
+        if (!s || s.month() !== a.month())
+          return /* @__PURE__ */ n("td", { className: "other-month empty" }, `empty-${h}-${b}`);
+        const y = d && s.isBefore(d, "day") || i && s.isAfter(i, "day"), m = s.isSame($, "day"), j = (f = o.start) == null ? void 0 : f.isSame(s, "day"), k = (p = o.end) == null ? void 0 : p.isSame(s, "day"), v = o.start && o.end && s.isAfter(o.start, "day") && s.isBefore(o.end, "day");
+        return /* @__PURE__ */ u(
+          "td",
+          {
+            className: `
+                        ${y ? "disabled" : ""}
+                        ${m ? "today" : ""}
+                        ${j ? "selected-start" : ""}
+                        ${k ? "selected-end" : ""}
+                        ${v ? "in-range" : ""}
+                      `,
+            onClick: () => !y && S(s, C),
+            children: [
+              s.date(),
+              m && /* @__PURE__ */ n("div", { className: "today-dot" })
+            ]
+          },
+          s.toString()
+        );
+      }) }, h)) })
+    ] }) });
+  } };
+};
+export {
+  B as useCalendarRenderer
+};

package/dist/components/Ui/DateRangePicker/hooks/useChangeDate.js

@@ -0,0 +1,28 @@
+import p from "../../../../_virtual/dayjs.min.js";
+const j = (r, o, m, f, k, D, B, O, y, h, i) => ({ handleDateClick: (t, a) => {
+  if (!(y && t.isBefore(y, "day") || h && t.isAfter(h, "day")))
+    if (B(null), !r.start || r.start && r.end) {
+      if (o({ start: t, end: null }), a === "left") {
+        const s = t.add(1, "month").startOf("month");
+        s.isSame(k) ? f(s.add(1, "month")) : f(s);
+      }
+    } else
+      t.isBefore(r.start, "day") ? o({ start: t, end: r.start }) : o({ ...r, end: t }), i && i({
+        start: t.isBefore(r.start, "day") ? t : r.start,
+        end: t.isBefore(r.start, "day") ? r.start : t
+      });
+}, handleClosePicker: () => {
+  if (D && r.start && !r.end) {
+    const t = p(), a = t.isAfter(r.start) ? t : r.start, s = {
+      start: r.start,
+      end: a
+    };
+    o(s), i && i(s);
+    const n = s.start.startOf("month"), u = a.startOf("month");
+    n.isSame(u) ? (m(n), f(n.add(1, "month"))) : (m(n), f(u));
+  }
+  O(!1);
+} });
+export {
+  j as useChangeDate
+};

package/dist/components/Ui/DateRangePicker/hooks/useDateNavigation.js

@@ -0,0 +1,22 @@
+const m = (e, n, t, c) => ({
+  navigateLeftMonth: (s) => {
+    const a = s === "prev" ? e.subtract(1, "month") : e.add(1, "month");
+    (a.isSame(n) || a.isAfter(n)) && c(a.add(1, "month")), t(a);
+  },
+  navigateRightMonth: (s) => {
+    const a = s === "prev" ? n.subtract(1, "month") : n.add(1, "month");
+    (a.isSame(e) || a.isBefore(e)) && t(a.subtract(1, "month")), c(a);
+  },
+  navigateYear: (s, a) => {
+    if (a === "left") {
+      const r = s === "prev" ? e.subtract(1, "year") : e.add(1, "year");
+      t(r), r.isAfter(n) && c(r.add(1, "month"));
+    } else {
+      const r = s === "prev" ? n.subtract(1, "year") : n.add(1, "year");
+      c(r), r.isBefore(e) && t(r.subtract(1, "month"));
+    }
+  }
+});
+export {
+  m as useDateNavigation
+};

package/dist/components/Ui/DateRangePicker/hooks/useDateRangeState.js

@@ -0,0 +1,24 @@
+import { useState as d, useEffect as u } from "react";
+import M from "../../../../_virtual/dayjs.min.js";
+const a = (t) => {
+  const f = M(), [m, r] = d(f), [n, h] = d(f.add(1, "month")), [s, c] = d({
+    start: (t == null ? void 0 : t.start) || null,
+    end: (t == null ? void 0 : t.end) || null
+  });
+  return u(() => {
+    if (s.start && s.end) {
+      const e = s.start.startOf("month"), o = s.end.startOf("month");
+      e.isSame(o) ? (r(e), h(e.add(1, "month"))) : (e.isSame(m, "month") || r(e), !o.isSame(n, "month") && o.isAfter(e) && h(o));
+    }
+  }, [s]), {
+    leftMonth: m,
+    rightMonth: n,
+    setLeftMonth: r,
+    setRightMonth: h,
+    selectedRange: s,
+    setSelectedRange: c
+  };
+};
+export {
+  a as useDateRangeState
+};

package/dist/components/Ui/DateRangePicker/hooks/useQuickRange.js

@@ -0,0 +1,77 @@
+import b from "../../../../_virtual/dayjs.min.js";
+import { useState as h } from "react";
+const Q = (u, i, o, n, k, d) => {
+  const a = b(), [y, f] = h(null);
+  return {
+    activeQuickRange: y,
+    setQuickRange: (r) => {
+      let t, e = a;
+      switch (r) {
+        case "yesterday":
+          t = a.subtract(1, "day"), e = t;
+          break;
+        case "thisWeek":
+          t = a.startOf("week");
+          break;
+        case "lastWeek":
+          t = a.subtract(1, "week").startOf("week"), e = t.add(6, "day");
+          break;
+        case "thisMonth":
+          t = a.startOf("month");
+          break;
+        case "lastMonth":
+          t = a.subtract(1, "month").startOf("month"), e = t.endOf("month");
+          break;
+        case "thisYear":
+          t = a.startOf("year");
+          break;
+        case "lastYear":
+          t = a.subtract(1, "year").startOf("year"), e = t.endOf("year");
+          break;
+        default:
+          t = a;
+      }
+      if (f(r), u({ start: t, end: e }), d && d({ start: t, end: e }), t && e) {
+        const s = t.startOf("month"), c = e.startOf("month");
+        s.isSame(c) ? (i(s), o(s.add(1, "month"))) : (i(s), o(c));
+      }
+    },
+    isQuickRangeDisabled: (r) => {
+      let t, e = a;
+      switch (r) {
+        case "today":
+          t = a, e = a;
+          break;
+        case "yesterday":
+          t = a.subtract(1, "day"), e = t;
+          break;
+        case "thisWeek":
+          t = a.startOf("week");
+          break;
+        case "lastWeek":
+          t = a.subtract(1, "week").startOf("week"), e = t.add(6, "day");
+          break;
+        case "thisMonth":
+          t = a.startOf("month");
+          break;
+        case "lastMonth":
+          t = a.subtract(1, "month").startOf("month"), e = t.endOf("month");
+          break;
+        case "thisYear":
+          t = a.startOf("year");
+          break;
+        case "lastYear":
+          t = a.subtract(1, "year").startOf("year"), e = t.endOf("year");
+          break;
+        default:
+          return !1;
+      }
+      const s = !n || t.isAfter(n, "day") || t.isSame(n, "day"), c = !k || e.isBefore(k, "day") || e.isSame(k, "day");
+      return !s || !c;
+    },
+    setActiveQuickRange: f
+  };
+};
+export {
+  Q as useQuickRange
+};

package/dist/components/Ui/DateRangePicker/index.js

@@ -0,0 +1,4 @@
+import { DateRangePicker as a } from "./DateRangePicker.js";
+export {
+  a as DateRangePicker
+};

package/dist/main.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType } from 'react';
 import { Context } from 'react';
+import { Dayjs } from 'dayjs';
 import { default as default_2 } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -132,6 +133,38 @@ export declare type Column<T extends object = Record<string, unknown>> = {
 
 export declare const CustomLink: default_2.FC<LinkProps>;
 
+export declare const DatePicker: default_2.FC<DatePickerProps>;
+
+declare interface DatePickerProps {
+    name?: string;
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    placeholder?: string;
+    className?: string;
+    inputClassName?: string;
+    calendarClassName?: string;
+    minDate?: Date;
+    maxDate?: Date;
+}
+
+export declare const DateRangePicker: default_2.FC<DateRangePickerProps>;
+
+declare interface DateRangePickerProps {
+    disabledBefore?: Dayjs;
+    disabledAfter?: Dayjs;
+    onChange?: (range: {
+        start: Dayjs;
+        end: Dayjs;
+    }) => void;
+    initialRange?: {
+        start: Dayjs;
+        end: Dayjs;
+    };
+    className?: string;
+    placeholder: string;
+    autoCompleteWithToday?: boolean;
+}
+
 export declare const DropdownInput: default_2.FC<DropdownInputProps>;
 
 declare type DropdownInputProps = {