@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
131 lines (130 loc) • 4.65 kB
JavaScript
import { jsx as e, jsxs as t, Fragment as L } from "react/jsx-runtime";
import { useRef as O, useEffect as x } from "react";
import { cn as i } from "../../utils/clsx.js";
import B from "../Components/helpers/direction-aware-container.js";
import g from "./Components/range-picker-body.js";
import p from "./Components/range-picker-header.js";
import E from "./Components/range-picker-input.js";
import { RangePickerProvider as F, useRangePicker as H } from "./hooks/useRangePicker.js";
import { LocaleSwitcher as W } from "./Components/locale-switcher.js";
import { isInvalidDateRange as q } from "../../utils/validators.js";
/* empty css */
const _ = (a) => {
const {
shouldShowInput: u = !0,
className: v,
classNames: n = {},
inputProps: r = {},
dAwareConProps: P = {},
onRangeSelect: o,
onVisibilityChange: s,
minDate: d,
maxDate: m,
startingDateRange: R,
endingDateRange: N,
defaultLocale: y = "AD"
} = a, h = (r == null ? void 0 : r.ref) ?? O(null);
let w = () => {
const { rangePickerState: b, updateRangePickerVisibility: k, clearSelection: C, shouldShowSinglePanel: D } = H(), { isVisible: f, startDate: l, endDate: c } = b;
x(() => {
o && l && c && o(l, c);
}, [l, c, o]), x(() => {
s && s(f);
}, [f, s]);
const S = () => {
k(!1);
}, j = () => {
C();
}, I = D(), A = d && m && q(d, m);
return /* @__PURE__ */ e(
B,
{
direction: "bottom",
activateWith: "ref",
activatorRef: h,
onOutsideClick: S,
centerAlignContainer: !0,
active: f,
...P,
children: /* @__PURE__ */ e("div", { className: i(
"flex flex-col gap-4 w-max h-max bg-white p-4 rounded-lg",
"shadow-md",
n.container,
v
), children: A ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-4 text-red-600 text-sm font-medium", children: "Invalid date range: minimum date is greater than maximum date" }) : /* @__PURE__ */ t(L, { children: [
I ? (
/* Single Panel Mode */
/* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ t("div", { className: i(
"flex flex-col gap-2 w-72",
n.leftPanel
), children: [
/* @__PURE__ */ e(p, { panel: "left" }),
/* @__PURE__ */ e(g, { panel: "left" })
] }) })
) : (
/* Dual Panel Mode */
/* @__PURE__ */ t("div", { className: "flex gap-4", children: [
/* @__PURE__ */ t("div", { className: i(
"flex flex-col gap-2 w-72",
n.leftPanel
), children: [
/* @__PURE__ */ e(p, { panel: "left" }),
/* @__PURE__ */ e(g, { panel: "left" })
] }),
/* @__PURE__ */ e("div", { className: "w-px bg-gray-200 my-2" }),
/* @__PURE__ */ t("div", { className: i(
"flex flex-col gap-2 w-72",
n.rightPanel
), children: [
/* @__PURE__ */ e(p, { panel: "right" }),
/* @__PURE__ */ e(g, { panel: "right" })
] })
] })
),
/* @__PURE__ */ t("div", { className: "flex justify-end pt-3 gap-2 ", children: [
l && c && /* @__PURE__ */ e(
"button",
{
onClick: (V) => {
V.stopPropagation(), j();
},
className: i(
"px-3 py-1 text-xs rounded border hover:cursor-pointer",
"hover:bg-gray-50 transition-colors",
"text-gray-600 border-gray-300"
),
children: "Clear"
}
),
/* @__PURE__ */ e(W, {})
] })
] }) })
}
);
};
return /* @__PURE__ */ e(
F,
{
minDate: d,
maxDate: m,
startingDateRange: R,
endingDateRange: N,
defaultLocale: y,
children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-1 w-full", children: [
a.label && /* @__PURE__ */ e("span", { className: "text-m font-medium text-gray-700 text-start", children: a.label }),
u && /* @__PURE__ */ e(
E,
{
ref: h,
...r
}
),
/* @__PURE__ */ e(w, {}),
a.description && /* @__PURE__ */ e("span", { className: "text-sm text-gray-500 text-start", children: a.description })
] })
}
);
};
export {
_ as default
};