@kubit-ui-web/react-components/dist/cjs/components/calendar/calendarStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalendarStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const role_1 = require("../../types/role/role");
// styles
const calendar_styled_1 = require("./calendar.styled");
const header_1 = require("./header/header");
const list_1 = require("./list/list");
const monthSelector_1 = require("./selector/monthSelector/monthSelector");
const selector_1 = require("./selector/selector");
const yearSelector_1 = require("./selector/yearSelector/yearSelector");
const CalendarStandAloneComponent = ({ dataTestId = 'calendar', maxDate = new Date(), customBackText = 'Back', ...props }, ref) => {
    const [showMonthSelector, setShowMonthSelector] = react_1.default.useState(false);
    const [showYearSelector, setShowYearSelector] = react_1.default.useState(false);
    const [showDaySelector, setShowDaySelector] = react_1.default.useState(true);
    const today = new Date();
    return ((0, jsx_runtime_1.jsxs)(calendar_styled_1.CalendarStyled, { ref: ref, "data-calendar": true, "data-testid": dataTestId, id: props.id, styles: props.styles, children: [(0, jsx_runtime_1.jsx)(selector_1.Selector, { configAccesibility: props.configAccesibility, configCalendar: props.configCalendar, currentDate: props.currentDate, customBackText: customBackText, maxDate: maxDate, minDate: props.minDate, setCurrentDate: props.setCurrentDate, setShowDaySelector: setShowDaySelector, setShowMonthSelector: setShowMonthSelector, setShowYearSelector: setShowYearSelector, showDaySelector: showDaySelector, showMonthSelector: showMonthSelector, showYearSelector: showYearSelector, styles: props.styles, onDaySelectorClick: props.onDaySelectorClick, onLeftIconClick: props.onLeftIconClick, onMonthSelectorClick: props.onMonthSelectorClick, onRightIconClick: props.onRightIconClick, onYearSelectorClick: props.onYearSelectorClick }), (0, jsx_runtime_1.jsxs)(calendar_styled_1.CalendarSelectorStyled, { children: [!showMonthSelector && !showYearSelector && showDaySelector && ((0, jsx_runtime_1.jsxs)(calendar_styled_1.TableStyled, { "aria-label": props.currentDate.toLocaleDateString(props.locale, {
                            timeZone: 'UTC',
                            month: 'long',
                            year: 'numeric',
                        }), role: role_1.ROLES.GRID, children: [(0, jsx_runtime_1.jsx)(header_1.Header, { formatWeekDayOption: props.formatWeekDayOption, isSundayFirst: props.sundayFirst, styles: props.styles }), (0, jsx_runtime_1.jsx)(list_1.List, { currentDate: props.currentDate, dataTestId: `${dataTestId}-item-list`, disabledDates: props.disabledDates, hasRange: props.hasRange, maxDate: maxDate, minDate: props.minDate, selectedDate: props.selectedDate, setSelectedDate: props.setSelectedDate, styles: props.styles?.daysList, sundayFirst: props.sundayFirst, onDayClick: props.onDayClick })] })), showMonthSelector && ((0, jsx_runtime_1.jsx)(monthSelector_1.MonthSelector, { currentDate: props.currentDate, dataTestId: `${dataTestId}-month`, maxDate: maxDate, minDate: props.minDate, setCurrentDate: props.setCurrentDate, styles: props.styles, today: today, onMonthClick: props.onMonthClick })), showYearSelector && ((0, jsx_runtime_1.jsx)(yearSelector_1.YearSelector, { currentDate: props.currentDate, dataTestId: `${dataTestId}-year`, maxDate: maxDate, minDate: props.minDate, setCurrentDate: props.setCurrentDate, styles: props.styles, today: today, onYearClick: props.onYearClick }))] })] }));
};
exports.CalendarStandAlone = react_1.default.forwardRef(CalendarStandAloneComponent);
//# sourceMappingURL=calendarStandAlone.js.map