react-anpicker
Version:
a react date picker for supporting persian dates
218 lines (217 loc) • 11.9 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnPicker = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const days_1 = __importDefault(require("./days"));
const helpers_1 = require("./helpers");
const MainProps_1 = require("./Models/MainProps");
const faLocale_1 = __importDefault(require("./Locales/faLocale"));
const Years_1 = __importDefault(require("./Years"));
const Monthes_1 = __importDefault(require("./Monthes"));
const Sidebar_1 = __importDefault(require("./Sidebar"));
const ChevronIcon_1 = __importDefault(require("./ChevronIcon"));
const react_dom_1 = require("react-dom");
const useControl_1 = __importDefault(require("./Hooks/useControl"));
// function isMobile() {
// if (
// ("navigator" in window && window.navigator.userAgent.match(/Android/i)) ||
// window.navigator.userAgent.match(/webOS/i) ||
// window.navigator.userAgent.match(/iPhone/i) ||
// window.navigator.userAgent.match(/iPad/i) ||
// window.navigator.userAgent.match(/iPod/i) ||
// window.navigator.userAgent.match(/BlackBerry/i) ||
// window.navigator.userAgent.match(/Windows Phone/i)
// ) {
// return true;
// } else {
// return false;
// }
// }
const AnPicker = ({ className = "", onChange, value = "", showTodayBottom = true, locale = faLocale_1.default, showSidebar = true, inputControl: Input, popupParentRef, popupVPosition, popupHPosition, }) => {
const inputRef = (0, react_1.useRef)(null);
const anPickerRef = (0, react_1.useRef)(null);
const popupRef = (0, react_1.useRef)(null);
const { state, tempValue, toggle, handleFocus, handleBlure, setPopupStyles, handleChange, setMode, nextYear, prevYear, nextMonth, prevMonth, onSelectYear, onSelectMonth, onSelectDay, setToday, } = (0, useControl_1.default)({
anPickerRef,
inputRef: inputRef,
locale: locale,
value: value,
onChange,
});
// function getRelativeTop(child: HTMLElement, ancestor: HTMLElement) {
// const childRect = child.getBoundingClientRect();
// const ancestorRect = ancestor.getBoundingClientRect();
// return childRect.top - ancestorRect.top + ancestor.scrollTop;
// }
const adjustPosition = () => {
const popupParent = popupParentRef ? popupParentRef.current : null;
const inputEl = anPickerRef.current;
const popupEl = popupRef.current;
if (!inputEl || !popupEl)
return;
const inputRect = inputEl.getBoundingClientRect();
const mobileMode = document.documentElement.clientWidth < 1200;
const popupHeight = 268 - (showTodayBottom ? 6 : 0);
const popupWidth = mobileMode ? 272 : 422;
//const scrollTop = window.scrollY || document.documentElement.scrollTop;
const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
let spaceAbove;
let spaceBelow;
let parentRect;
if (popupParent) {
parentRect = popupParent.getBoundingClientRect();
spaceAbove = inputRect.top - parentRect.top;
spaceBelow = parentRect.bottom - inputRect.bottom;
}
else {
spaceAbove = inputRect.top;
spaceBelow = window.innerHeight - inputRect.bottom;
}
const showAbove = typeof popupVPosition !== "undefined"
? popupVPosition === "top"
: spaceBelow < popupHeight && spaceAbove > popupHeight;
let top = "auto";
let bottom = "auto";
if (popupParent) {
const relativeTop = inputRect.top - parentRect.top + popupParent.scrollTop;
if (showAbove) {
bottom = parentRect.bottom - inputRect.top;
}
else {
top = relativeTop + inputEl.offsetHeight;
}
}
else {
if (showAbove) {
bottom = window.innerHeight - inputRect.top;
}
else {
top = inputRect.bottom;
}
}
//=== H position
let left = "auto";
let right = "auto";
let spaceOnLeft;
let spaceOnRight;
if (popupParent) {
spaceOnLeft = inputRect.right - parentRect.left;
spaceOnRight = parentRect.right - inputRect.left;
// console.log({
// spaceOnLeft,
// spaceOnRight,
// parentRect: {
// width: parentRect!.width,
// left: parentRect!.left,
// right: parentRect!.right,
// },
// });
}
else {
spaceOnLeft = inputRect.right;
spaceOnRight = window.innerWidth - inputRect.left;
}
// console.log({
// spaceOnLeft,
// spaceOnRight,
// });
const showRight = typeof popupHPosition !== "undefined"
? popupHPosition === "left"
: spaceOnRight > popupWidth && spaceOnLeft < popupWidth;
console.log("showRight", showRight);
// const showOnLeft =
if (popupParent) {
if (!showRight) {
right = parentRect.right - inputRect.right;
}
else {
left = inputRect.left - parentRect.left;
}
}
else {
//const spaceOnLeft = inputRect.right;
if (!showRight) {
right = document.documentElement.clientWidth - inputRect.right;
}
else {
left = inputRect.left + scrollLeft;
}
}
setPopupStyles({
top,
bottom,
left,
right,
visibility: "visible",
});
};
(0, react_1.useEffect)(() => {
if (!state.open)
return;
// Initial adjustment
adjustPosition();
const observer = new IntersectionObserver((entries) => {
const entry = entries[0];
if (entry && entry.isIntersecting) {
adjustPosition();
}
}, {
root: null,
threshold: 0.1,
});
const inputEl = anPickerRef.current;
if (inputEl)
observer.observe(inputEl);
const scrollableParents = [];
// Find scrollable ancestors and attach scroll event listeners
let parent = inputEl === null || inputEl === void 0 ? void 0 : inputEl.parentElement;
while (parent) {
const overflowY = window.getComputedStyle(parent).overflowY;
if (overflowY === "scroll" || overflowY === "auto") {
scrollableParents.push(parent);
parent.addEventListener("scroll", adjustPosition);
}
parent = parent.parentElement;
}
// Also listen to window scroll
window.addEventListener("scroll", adjustPosition, true);
return () => {
if (inputEl)
observer.unobserve(inputEl);
scrollableParents.forEach((p) => {
p.removeEventListener("scroll", adjustPosition);
});
window.removeEventListener("scroll", adjustPosition, true);
};
}, [state.open]);
(0, react_1.useEffect)(() => {
const handleClickOutside = (e) => {
var _a, _b;
if (!((_a = anPickerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
!((_b = popupRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
toggle(false);
}
};
// const onScrolled = function () {
// if (isMobile()) adjustPosition();
// else {
// toggle(false);
// handleBlure();
// }
// };
// document.addEventListener("scroll", onScrolled);
document.addEventListener("click", handleClickOutside);
return () => {
//document.removeEventListener("scroll", onScrolled);
document.removeEventListener("click", handleClickOutside);
};
}, []);
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `anpicker ${className}`, ref: anPickerRef, dir: locale.rtl ? "rtl" : "ltr" }, { children: [Input ? ((0, jsx_runtime_1.jsx)(Input, { ref: inputRef, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlure, value: tempValue !== null && tempValue !== void 0 ? tempValue : "" })) : ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, value: tempValue !== null && tempValue !== void 0 ? tempValue : "", onChange: handleChange, onFocus: handleFocus, onBlur: handleBlure })), state.open
? (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `anpicker-popup${popupParentRef ? "" : " fixed"}`, ref: popupRef, style: state.popupStyle, dir: locale.rtl ? "rtl" : "ltr" }, { children: [showSidebar ? ((0, jsx_runtime_1.jsx)(Sidebar_1.default, { locale: locale, localYear: state.year, localMonth: state.month, localDay: state.day })) : null, (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "main" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "selector-heading" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "monthes" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ className: "next", onClick: nextMonth, role: "button" }, { children: (0, jsx_runtime_1.jsx)(ChevronIcon_1.default, { type: "next", rtl: locale.rtl }) })), (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "button", onClick: () => setMode(MainProps_1.Modes.monthes) }, { children: (0, helpers_1.getMonthName)(locale.convertToDate(state.year, state.month, state.day), locale.name) })), (0, jsx_runtime_1.jsx)("a", Object.assign({ className: "prev", onClick: prevMonth, role: "button" }, { children: (0, jsx_runtime_1.jsx)(ChevronIcon_1.default, { type: "prev", rtl: locale.rtl }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "years" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ className: "next", onClick: nextYear, role: "button" }, { children: (0, jsx_runtime_1.jsx)(ChevronIcon_1.default, { type: "next", rtl: locale.rtl }) })), (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "button", onClick: () => setMode(MainProps_1.Modes.years) }, { children: state.year })), (0, jsx_runtime_1.jsx)("a", Object.assign({ className: "prev", onClick: prevYear, role: "button" }, { children: (0, jsx_runtime_1.jsx)(ChevronIcon_1.default, { type: "prev", rtl: locale.rtl }) }))] }))] })), (0, jsx_runtime_1.jsx)(Years_1.default, { hidden: state.mode !== MainProps_1.Modes.years, locale: locale, pageNumber: state.yearPageNumber, onSelectYear: onSelectYear, localYear: state.year }), (0, jsx_runtime_1.jsx)(Monthes_1.default, { hidden: state.mode !== MainProps_1.Modes.monthes, locale: locale, onSelect: onSelectMonth, localMonth: state.month }), (0, jsx_runtime_1.jsx)(days_1.default, { hidden: state.mode !== MainProps_1.Modes.days, locale: locale, localYear: state.year, localMonth: state.month, localDay: state.day, onSelect: onSelectDay }), showTodayBottom && ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: "today-button", onClick: setToday }, { children: locale.todayButtonText })))] }))] })), (popupParentRef === null || popupParentRef === void 0 ? void 0 : popupParentRef.current) ? popupParentRef.current : document.body)
: null] })));
};
exports.AnPicker = AnPicker;