react-year-date-picker
Version:
React year month picker
430 lines (380 loc) • 16.5 kB
JavaScript
require("./main.css");
var $jXom6$reactjsxruntime = require("react/jsx-runtime");
var $jXom6$react = require("react");
var $jXom6$reactdom = require("react-dom");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "DatePicker", function () { return $7f60c2f149f17110$export$5109c6dd95d8fb00; });
$parcel$export(module.exports, "MonthCalendar", function () { return $16998ccf5168801d$export$d7a7c85c0f5afc4a; });
$parcel$export(module.exports, "MonthCalendarPortal", function () { return $16626163772526b1$export$508916bcbb4ce3; });
$parcel$export(module.exports, "YearCalendar", function () { return $fc091d5f908a3c49$export$657f9200591b2b71; });
$parcel$export(module.exports, "YearCalendarPortal", function () { return $95aec2b8da9c51c5$export$63c8d736fec2c599; });
$parcel$export(module.exports, "YearMonthCalendar", function () { return $2368af7e001ffece$export$6049eb3343cc8b14; });
$parcel$export(module.exports, "YearMonthCalendarPortal", function () { return $6dbd812fffb9c8ff$export$b67f186b36a1adfa; });
const $f1449fee5fa93a02$export$74ac3cc032b007d5 = /*#__PURE__*/ (0, ($parcel$interopDefault($jXom6$react))).forwardRef(({ title: title = "Pick a date", onClick: onClick, id: id, className: className }, ref)=>{
return /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsxs)("button", {
id: id,
ref: ref,
className: className || "pickerButton",
type: "button",
onClick: onClick,
children: [
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)($f1449fee5fa93a02$var$CalendarIcon, {}),
title
]
});
});
const $f1449fee5fa93a02$var$CalendarIcon = ()=>{
return /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsxs)("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
children: [
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("path", {
d: "M8 2v4"
}),
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("path", {
d: "M16 2v4"
}),
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("rect", {
width: "18",
height: "18",
x: "3",
y: "4",
rx: "2"
}),
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("path", {
d: "M3 10h18"
})
]
});
};
const $16998ccf5168801d$export$d7a7c85c0f5afc4a = ({ axis: axis, open: open, month: month, handleMonth: handleMonth, id: id, className: className, calendarRef: calendarRef })=>{
if (!open) return null;
return /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("div", {
id: id,
ref: calendarRef,
className: className || "calendar round-shadow",
style: {
top: axis?.y,
left: axis?.x
},
children: new Array(3).fill(1).map((_, row)=>/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("ul", {
className: "calendar-row",
children: new Array(4).fill(1).map((_, col)=>/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("li", {
role: "button",
onClick: ()=>{
if (!handleMonth) return;
handleMonth(row * 4 + col + 1);
},
"aria-pressed": row * 4 + col + 1 === month,
className: "calendar-button",
children: row * 4 + col + 1
}, `row${row}col${col}`))
}, `row${row}`))
});
};
const $16626163772526b1$export$508916bcbb4ce3 = /*#__PURE__*/ (0, ($parcel$interopDefault($jXom6$react))).forwardRef(({ axis: axis, open: open, month: month, handleMonth: handleMonth, id: id, className: className }, ref)=>{
return /*#__PURE__*/ (0, $jXom6$reactdom.createPortal)(/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)((0, $16998ccf5168801d$export$d7a7c85c0f5afc4a), {
axis: axis,
open: open,
month: month,
handleMonth: handleMonth,
id: id,
className: className,
calendarRef: ref
}), document.getElementById("root") || document.getElementById("app"));
});
const $fc091d5f908a3c49$export$657f9200591b2b71 = ({ axis: axis, open: open, year: year, handleYear: handleYear, id: id, className: className, calendarRef: calendarRef })=>{
const curYear = new Date().getFullYear() - 100;
const cellRef = (0, ($parcel$interopDefault($jXom6$react))).useRef([]);
(0, ($parcel$interopDefault($jXom6$react))).useEffect(()=>{
if (!open) return;
if (!cellRef.current) return;
if (year) cellRef.current[year - curYear - 4].scrollIntoView({});
else cellRef.current[96].scrollIntoView();
}, [
open
]);
if (!open) return null;
return /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("div", {
id: id,
ref: calendarRef,
className: className || "calendar round-shadow",
style: {
top: axis?.y,
left: axis?.x,
overflowY: "scroll"
},
children: new Array(50).fill(1).map((_, idx1)=>{
return /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("ul", {
className: "calendar-row",
children: new Array(4).fill(1).map((_, idx2)=>{
const _year = curYear + idx1 * 4 + idx2;
return /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("li", {
role: "button",
ref: (el)=>cellRef.current[idx1 * 4 + idx2] = el,
"aria-pressed": year === _year,
className: "calendar-button",
onClick: ()=>{
if (!handleYear) return;
handleYear(_year);
},
children: curYear + idx1 * 4 + idx2
}, `li${idx1 * 4 + idx2}`);
})
}, `ul${idx1}`);
})
});
};
const $95aec2b8da9c51c5$export$63c8d736fec2c599 = /*#__PURE__*/ (0, ($parcel$interopDefault($jXom6$react))).forwardRef(({ axis: axis, open: open, year: year, handleYear: handleYear, id: id, className: className }, ref)=>{
return /*#__PURE__*/ (0, $jXom6$reactdom.createPortal)(/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)((0, $fc091d5f908a3c49$export$657f9200591b2b71), {
axis: axis,
open: open,
year: year,
handleYear: handleYear,
id: id,
className: className,
calendarRef: ref
}), document.getElementById("root") || document.getElementById("app"));
});
const $2368af7e001ffece$export$6049eb3343cc8b14 = ({ open: open, axis: axis, date: date, handleYear: handleYear, handleMonth: handleMonth, title: title = "Pick a Date", id: id, className: className, calendarRef: calendarRef })=>{
const ref = (0, ($parcel$interopDefault($jXom6$react))).useRef(null);
const handleYearExtend = (e)=>{
handleYear(e);
if (e == date?.year) return;
setTimeout(()=>ref.current.style.marginLeft = "-20rem", 300);
};
if (!open) return null;
return /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsxs)("div", {
ref: calendarRef,
id: id,
className: className || "calendar2 round-shadow",
style: {
top: axis?.y,
left: axis?.x
},
children: [
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsxs)("div", {
className: "calendarHeader",
children: [
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("button", {
onClick: ()=>ref.current.style.marginLeft = "0",
className: "dateLeftButton",
children: /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)($2368af7e001ffece$var$ChevornLeft, {})
}),
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsxs)("span", {
children: [
date && date.year ? date.year : title,
date && date.year && date.month && " \xb7 " + date.month
]
})
]
}),
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsxs)("div", {
ref: ref,
className: "calendarWrapper",
children: [
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)((0, $fc091d5f908a3c49$export$657f9200591b2b71), {
year: date?.year && date.year,
handleYear: handleYearExtend,
className: "calendar",
axis: {
y: 0,
x: 0
},
open: true
}),
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)((0, $16998ccf5168801d$export$d7a7c85c0f5afc4a), {
month: date?.month && date.month,
handleMonth: handleMonth,
className: "calendar",
axis: {
y: 0,
x: 320
},
open: true
})
]
})
]
});
};
const $2368af7e001ffece$var$ChevornLeft = ()=>{
return /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
children: /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)("path", {
d: "m15 18-6-6 6-6"
})
});
};
const $6dbd812fffb9c8ff$export$b67f186b36a1adfa = /*#__PURE__*/ (0, ($parcel$interopDefault($jXom6$react))).forwardRef(({ open: open, axis: axis, date: date, handleYear: handleYear, handleMonth: handleMonth, title: title, id: id, className: className }, ref)=>{
return /*#__PURE__*/ (0, $jXom6$reactdom.createPortal)(/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)((0, $2368af7e001ffece$export$6049eb3343cc8b14), {
open: open,
axis: axis,
date: date,
handleYear: handleYear,
handleMonth: handleMonth,
title: title,
id: id,
className: className,
calendarRef: ref
}), document.getElementById("root") || document.getElementById("app"));
});
const $7f60c2f149f17110$export$5109c6dd95d8fb00 = ({ title: title, type: type, locale: locale = "en-US", buttonId: buttonId, buttonClassName: buttonClassName, calendarId: calendarId, calendarClassName: calendarClassName, date: date, year: year, month: month, setDate: setDate, setYear: setYear, setMonth: setMonth })=>{
const buttonRef = (0, ($parcel$interopDefault($jXom6$react))).useRef(null);
const calendarRef = (0, ($parcel$interopDefault($jXom6$react))).useRef(null);
const [isOpen, setIsOpen] = (0, ($parcel$interopDefault($jXom6$react))).useState(false);
const [axis, setAxis] = (0, ($parcel$interopDefault($jXom6$react))).useState({
y: 0,
x: 0
});
const handleOpen = ()=>{
if (!buttonRef.current) return;
const clientRect = buttonRef.current.getBoundingClientRect();
setAxis({
y: clientRect.top + clientRect.height + 5,
x: clientRect.left
});
setIsOpen((cur)=>!cur);
};
const handleYear1 = (clickedYear)=>{
setYear?.((cur)=>{
return cur == clickedYear ? undefined : clickedYear;
});
};
const handleMonth1 = (clickedMonth)=>{
setMonth?.((cur)=>{
return cur == clickedMonth ? undefined : clickedMonth;
});
};
const handleYear2 = (clickedYear)=>{
setDate?.((cur)=>{
if (cur.year === clickedYear) return {
year: undefined,
month: undefined
};
return {
...cur,
year: clickedYear
};
});
};
const handleMonth2 = (clickedMonth)=>{
setDate?.((cur)=>{
if (cur.month === clickedMonth) return {
...cur,
month: undefined
};
return {
...cur,
month: clickedMonth
};
});
};
let _title = year?.toString();
if (month) _title = new Date(2000, month - 1).toLocaleString(locale, {
month: "long"
});
if (date?.month) {
_title = new Date(2000, date.month - 1).toLocaleString(locale, {
month: "long"
});
_title += ", ";
_title += date?.year?.toString();
}
// This code dynamically adjusts the position of a calendar based on the position of a button.
(0, ($parcel$interopDefault($jXom6$react))).useEffect(()=>{
const handleResize = ()=>{
if (buttonRef.current) {
const clientRect = buttonRef.current.getBoundingClientRect();
setAxis({
y: clientRect.top + clientRect.height + 5,
x: clientRect.left
});
}
};
const resizeObserver = new ResizeObserver(handleResize);
if (buttonRef.current) resizeObserver.observe(document.getElementById("root") || document.getElementById("app"));
return ()=>{
if (buttonRef.current) resizeObserver.unobserve(buttonRef.current);
};
}, [
buttonRef
]);
// This code is for closing popup on click outside
(0, ($parcel$interopDefault($jXom6$react))).useEffect(()=>{
const handleClickOutside = (event)=>{
if (!calendarRef.current) return;
if (!buttonRef.current) return;
if (calendarRef.current.contains(event.target)) return;
if (buttonRef.current.contains(event.target)) return;
setIsOpen(false);
};
document.addEventListener("mousedown", handleClickOutside);
return ()=>{
document.removeEventListener("mousedown", handleClickOutside);
};
}, [
calendarRef,
buttonRef
]);
return /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsxs)((0, $jXom6$reactjsxruntime.Fragment), {
children: [
/*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)((0, $f1449fee5fa93a02$export$74ac3cc032b007d5), {
title: _title || title,
id: buttonId,
className: buttonClassName,
ref: buttonRef,
onClick: handleOpen
}),
type === "YEAR" && /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)((0, $95aec2b8da9c51c5$export$63c8d736fec2c599), {
axis: axis,
open: isOpen,
id: calendarId,
className: calendarClassName,
year: year,
handleYear: handleYear1,
ref: calendarRef
}),
type === "MONTH" && /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)((0, $16626163772526b1$export$508916bcbb4ce3), {
axis: axis,
open: isOpen,
id: calendarId,
className: calendarClassName,
month: month,
handleMonth: handleMonth1,
ref: calendarRef
}),
type === "YEAR_MONTH" && /*#__PURE__*/ (0, $jXom6$reactjsxruntime.jsx)((0, $6dbd812fffb9c8ff$export$b67f186b36a1adfa), {
axis: axis,
open: isOpen,
id: calendarId,
className: calendarClassName,
date: date,
handleYear: handleYear2,
handleMonth: handleMonth2,
ref: calendarRef
})
]
});
};
//# sourceMappingURL=main.js.map