@transkripid/flowbite-react/lib/components/Datepicker/Datepicker.mjs

Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork

import { jsx as r, jsxs as w } from "react/jsx-runtime";
import { useState as D, useRef as H, useEffect as Q } from "react";
import { HiCalendar as U, HiArrowLeft as X, HiArrowRight as Z } from "react-icons/hi";
import { twMerge as p } from "tailwind-merge";
import { mergeDeep as B } from "../../helpers/merge-deep.mjs";
import { getTheme as _ } from "../../theme-store/index.mjs";
import { DatepickerContext as ee } from "./DatepickerContext.mjs";
import { DatepickerViewsDays as te } from "./Views/Days.mjs";
import { DatepickerViewsDecades as re } from "./Views/Decades.mjs";
import { DatepickerViewsMonth as se } from "./Views/Months.mjs";
import { DatepickerViewsYears as oe } from "./Views/Years.mjs";
import { getFirstDateInRange as ne, Views as t, isDateEqual as ae, getFormattedDate as N, WeekStart as ce, startOfYearPeriod as y, addYears as v, addMonths as ie } from "./helpers.mjs";
import { TextInput as pe } from "../TextInput/TextInput.mjs";
const ue = ({
  title: V,
  open: L,
  inline: b = !1,
  autoHide: P = !0,
  // Hide when selected the day
  showClearButton: g = !0,
  labelClearButton: T = "Clear",
  showTodayButton: M = !0,
  labelTodayButton: j = "Today",
  defaultDate: c = /* @__PURE__ */ new Date(),
  minDate: Y,
  maxDate: C,
  language: f = "en",
  weekStart: A = ce.Sunday,
  className: q,
  theme: R = {},
  onSelectedDateChanged: x,
  ...W
}) => {
  const e = B(_().datepicker, R);
  c = ne(c, Y, C);
  const [I, d] = D(L), [a, O] = D(t.Days), [m, E] = D(c), [o, u] = D(c), l = H(null), h = H(null), k = (s, n) => {
    E(s), x && x(s), P && a === t.Days && n == !0 && !b && d(!1);
  }, z = (s) => {
    switch (s) {
      case t.Decades:
        return /* @__PURE__ */ r(re, { theme: e.views.decades });
      case t.Years:
        return /* @__PURE__ */ r(oe, { theme: e.views.years });
      case t.Months:
        return /* @__PURE__ */ r(se, { theme: e.views.months });
      case t.Days:
      default:
        return /* @__PURE__ */ r(te, { theme: e.views.days });
    }
  }, G = () => {
    switch (a) {
      case t.Days:
        return t.Months;
      case t.Months:
        return t.Years;
      case t.Years:
        return t.Decades;
    }
    return a;
  }, J = () => {
    switch (a) {
      case t.Decades:
        return `${y(o, 100)} - ${y(o, 100) + 90}`;
      case t.Years:
        return `${y(o, 10)} - ${y(o, 10) + 9}`;
      case t.Months:
        return N(f, o, {
          year: "numeric"
        });
      case t.Days:
      default:
        return N(f, o, {
          month: "long",
          year: "numeric"
        });
    }
  }, S = (s, n, i) => {
    switch (s) {
      case t.Days:
        return new Date(ie(n, i));
      case t.Months:
        return new Date(v(n, i));
      case t.Years:
        return new Date(v(n, i * 10));
      case t.Decades:
        return new Date(v(n, i * 100));
      default:
        return new Date(v(n, i * 10));
    }
  };
  return Q(() => {
    const s = (n) => {
      var $, F;
      const i = ($ = h == null ? void 0 : h.current) == null ? void 0 : $.contains(n.target), K = (F = l == null ? void 0 : l.current) == null ? void 0 : F.contains(n.target);
      !i && !K && d(!1);
    };
    return document.addEventListener("mousedown", s), () => {
      document.removeEventListener("mousedown", s);
    };
  }, [l, h, d]), /* @__PURE__ */ r(ee.Provider, { value: {
    theme: e,
    language: f,
    minDate: Y,
    maxDate: C,
    weekStart: A,
    isOpen: I,
    setIsOpen: d,
    view: a,
    setView: O,
    viewDate: o,
    setViewDate: u,
    selectedDate: m,
    setSelectedDate: E,
    changeSelectedDate: k
  }, children: /* @__PURE__ */ w("div", { className: p(e.root.base, q), children: [
    !b && /* @__PURE__ */ r(pe, { theme: e.root.input, icon: U, ref: l, onFocus: () => {
      ae(o, m) || u(m), d(!0);
    }, value: m && N(f, m), readOnly: !0, ...W }),
    (I || b) && /* @__PURE__ */ r("div", { ref: h, className: p(e.popup.root.base, b && e.popup.root.inline), children: /* @__PURE__ */ w("div", { className: e.popup.root.inner, children: [
      /* @__PURE__ */ w("div", { className: e.popup.header.base, children: [
        V && /* @__PURE__ */ r("div", { className: e.popup.header.title, children: V }),
        /* @__PURE__ */ w("div", { className: e.popup.header.selectors.base, children: [
          /* @__PURE__ */ r("button", { type: "button", className: p(e.popup.header.selectors.button.base, e.popup.header.selectors.button.prev), onClick: () => u(S(a, o, -1)), children: /* @__PURE__ */ r(X, {}) }),
          /* @__PURE__ */ r("button", { type: "button", className: p(e.popup.header.selectors.button.base, e.popup.header.selectors.button.view), onClick: () => O(G()), children: J() }),
          /* @__PURE__ */ r("button", { type: "button", className: p(e.popup.header.selectors.button.base, e.popup.header.selectors.button.next), onClick: () => u(S(a, o, 1)), children: /* @__PURE__ */ r(Z, {}) })
        ] })
      ] }),
      /* @__PURE__ */ r("div", { className: e.popup.view.base, children: z(a) }),
      (g || M) && /* @__PURE__ */ w("div", { className: e.popup.footer.base, children: [
        M && /* @__PURE__ */ r("button", { type: "button", className: p(e.popup.footer.button.base, e.popup.footer.button.today), onClick: () => {
          const s = /* @__PURE__ */ new Date();
          k(s, !0), u(s);
        }, children: j }),
        g && /* @__PURE__ */ r("button", { type: "button", className: p(e.popup.footer.button.base, e.popup.footer.button.clear), onClick: () => {
          k(c, !0), c && u(c);
        }, children: T })
      ] })
    ] }) })
  ] }) });
};
ue.displayName = "Datepicker";
export {
  ue as Datepicker
};
//# sourceMappingURL=Datepicker.mjs.map