@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
86 lines (85 loc) • 5.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePicker = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Icon_1 = require("../Icon");
require("./DatePicker.css");
const MONTHS = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
const DAYS = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];
const DatePicker = ({ value: controlledValue, defaultValue, onChange, minDate, maxDate, placeholder = 'Seleccionar fecha', disabled = false, error = false, className = '', }) => {
const isControlled = controlledValue !== undefined;
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
const [viewDate, setViewDate] = (0, react_1.useState)(controlledValue || defaultValue || new Date());
const containerRef = (0, react_1.useRef)(null);
const selectedDate = isControlled ? controlledValue : internalValue;
(0, react_1.useEffect)(() => {
const handleClickOutside = (e) => {
if (containerRef.current && !containerRef.current.contains(e.target)) {
setIsOpen(false);
}
};
if (isOpen) {
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}
}, [isOpen]);
const handleDateSelect = (date) => {
if (!isControlled) {
setInternalValue(date);
}
onChange === null || onChange === void 0 ? void 0 : onChange(date);
setIsOpen(false);
};
const getDaysInMonth = (date) => {
const year = date.getFullYear();
const month = date.getMonth();
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const daysInMonth = lastDay.getDate();
const startingDayOfWeek = firstDay.getDay();
const days = [];
for (let i = 0; i < startingDayOfWeek; i++) {
days.push(null);
}
for (let i = 1; i <= daysInMonth; i++) {
days.push(new Date(year, month, i));
}
return days;
};
const isDateDisabled = (date) => {
if (minDate && date < minDate)
return true;
if (maxDate && date > maxDate)
return true;
return false;
};
const isSameDay = (date1, date2) => {
if (!date1 || !date2)
return false;
return date1.toDateString() === date2.toDateString();
};
const formatDate = (date) => {
if (!date)
return '';
return date.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' });
};
const rootClassName = [
'ds-datepicker',
error && 'ds-datepicker--error',
disabled && 'ds-datepicker--disabled',
className,
]
.filter(Boolean)
.join(' ');
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: rootClassName, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "ds-datepicker__input", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, children: [(0, jsx_runtime_1.jsx)("span", { className: selectedDate ? 'ds-datepicker__value' : 'ds-datepicker__placeholder', children: selectedDate ? formatDate(selectedDate) : placeholder }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "calendar", size: 20 })] }), isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "ds-datepicker__dropdown", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ds-datepicker__header", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "ds-datepicker__nav", onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1)), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-left", size: 20 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "ds-datepicker__month", children: [MONTHS[viewDate.getMonth()], " ", viewDate.getFullYear()] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "ds-datepicker__nav", onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1)), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-right", size: 20 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ds-datepicker__calendar", children: [(0, jsx_runtime_1.jsx)("div", { className: "ds-datepicker__weekdays", children: DAYS.map((day) => ((0, jsx_runtime_1.jsx)("div", { className: "ds-datepicker__weekday", children: day }, day))) }), (0, jsx_runtime_1.jsx)("div", { className: "ds-datepicker__days", children: getDaysInMonth(viewDate).map((date, index) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: [
'ds-datepicker__day',
!date && 'ds-datepicker__day--empty',
date && isSameDay(selectedDate, date) && 'ds-datepicker__day--selected',
date && isDateDisabled(date) && 'ds-datepicker__day--disabled',
]
.filter(Boolean)
.join(' '), onClick: () => date && !isDateDisabled(date) && handleDateSelect(date), disabled: !date || isDateDisabled(date), children: date === null || date === void 0 ? void 0 : date.getDate() }, index))) })] })] }))] }));
};
exports.DatePicker = DatePicker;