@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
185 lines • 9.54 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.List = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const itemRove_1 = require("../../../components/itemRove/itemRove");
const useRoveFocus_1 = require("../../../hooks/useRoveFocus/useRoveFocus");
const provider_1 = require("../../../provider/utils/provider");
const date_1 = require("../../../types/date/date");
const type_1 = require("../../button/types/type");
const constants_1 = require("../constants/constants");
const getAllDaysInMonth_1 = require("../utils/getAllDaysInMonth");
const getFirstDayOfMonth_1 = require("../utils/getFirstDayOfMonth");
const getState_1 = require("../utils/getState");
const groupDaysByWeeks_1 = require("../utils/groupDaysByWeeks");
const handleKeysmoves_1 = require("../utils/handleKeysmoves");
// styles
const list_styled_1 = require("./list.styled");
const state_1 = require("./types/state");
const List = ({ dataTestId = 'item', hasRange, selectedDate, disabledDates = [], ...props }) => {
const { formatDate, dateHelpers, transformDate } = (0, provider_1.useUtilsProvider)();
const currentMonth = props.currentDate.getMonth() + 1;
const currentYear = props.currentDate.getFullYear();
const today = formatDate(new Date(), date_1.NEUTRAL_DATE);
const days = (0, getAllDaysInMonth_1.getAllDaysInMonth)(currentMonth, currentYear);
const dayStarted = (0, getFirstDayOfMonth_1.getFirstDayOfMonth)(currentYear, currentMonth - 1) - (props.sundayFirst ? 0 : 1);
const dayList = [...new Array(dayStarted >= 0 ? dayStarted : 6), ...days];
const emptyDaysList = dayList.filter(day => day === undefined);
const [positionDateRange, setPositionDateRange] = react_1.default.useState(0);
const [ghostDateSelected, setGhostDateSelected] = react_1.default.useState(0);
const handleKeyMoveConfig = {
dayList,
maxDate: props.maxDate,
currentDate: props.currentDate,
minDate: props.minDate,
firstEmptyAndDisabledDays: (0, handleKeysmoves_1.getFirstEmptyAndDisabledDays)(emptyDaysList, props.minDate, props.currentDate),
daysAndEmptyDaysUntilMaxDate: (0, handleKeysmoves_1.getDaysAndEmptyDaysUntilMaxDate)(emptyDaysList, props.maxDate, props.currentDate),
};
const config = react_1.default.useMemo(() => ({
calendarBlankDaysSize: emptyDaysList.length,
size: dayList.length,
keyDownMove: (0, handleKeysmoves_1.handleKeyDownMove)(handleKeyMoveConfig),
keyUpMove: (0, handleKeysmoves_1.handleKeyUpMove)(handleKeyMoveConfig),
keyRightMove: (0, handleKeysmoves_1.handleKeyRightMove)(handleKeyMoveConfig),
keyLeftMove: (0, handleKeysmoves_1.handleKeyLeftMove)(handleKeyMoveConfig),
keyTabMove: handleKeysmoves_1.handleKeyTabMove,
keyPageDownMove: (0, handleKeysmoves_1.handleKeyPageDownMove)(handleKeyMoveConfig),
keyPageUpMove: (0, handleKeysmoves_1.handleKeyPageUpMove)(handleKeyMoveConfig),
currentFocusSelected: (selectedDate[0] ? selectedDate[0].getDate() : new Date().getDate()) +
emptyDaysList.length -
1,
}), [emptyDaysList.length, dayList.length, props.currentDate, props.minDate, props.maxDate]);
const [focus, setFocus, listEl] = (0, useRoveFocus_1.useRoveFocus)(config);
const handleFocus = (index) => {
// when focus is on an empty date at the beginning
if (index) {
if (focus < emptyDaysList.length) {
setFocus(emptyDaysList.length);
}
// when focus is on an empty date at the end
if (focus > dayList.length) {
setFocus(dayList.length - 1);
}
}
return focus === index;
};
const onChangeSelectedDate = (newDate) => {
const [firstDate, secondDate] = selectedDate;
if (hasRange) {
if ((firstDate && secondDate) || (!firstDate && !secondDate)) {
props.setSelectedDate([newDate, 0]);
setPositionDateRange(1);
if (newDate instanceof Date) {
props.onDayClick?.(newDate.getDate().toString());
}
}
else {
props.setSelectedDate([firstDate, newDate]);
setPositionDateRange(0);
if (newDate instanceof Date) {
props.onDayClick?.(newDate.getDate().toString());
}
}
}
else {
props.setSelectedDate([newDate]);
if (newDate instanceof Date) {
props.onDayClick?.(newDate.getDate().toString());
}
}
};
const isGhostSelected = (dayFormatted) => {
if (ghostDateSelected) {
if (ghostDateSelected < selectedDate[0]) {
return dayFormatted > ghostDateSelected && dayFormatted < selectedDate[0];
}
else if (ghostDateSelected > selectedDate[0]) {
return dayFormatted < ghostDateSelected && dayFormatted > selectedDate[0];
}
}
else if (dayFormatted > selectedDate[0]) {
return dayFormatted < selectedDate[1];
}
else if (dayFormatted < selectedDate[0]) {
return dayFormatted > selectedDate[1];
}
return false;
};
const isSelectedToLeft = (dayFormatted) => {
if (!hasRange) {
return false;
}
const selectedIndex = selectedDate?.findIndex(date => date &&
dayFormatted &&
formatDate(date, date_1.NEUTRAL_DATE) === formatDate(dayFormatted, date_1.NEUTRAL_DATE));
if (selectedIndex === 0 && ghostDateSelected) {
return ghostDateSelected < dayFormatted;
}
else if (selectedIndex === 0) {
return dayFormatted > selectedDate[1];
}
else if (selectedIndex === 1) {
return dayFormatted > selectedDate[0];
}
return false;
};
const isSelectedToRight = (dayFormatted) => {
if (!hasRange) {
return false;
}
const selectedIndex = selectedDate?.findIndex(date => date &&
dayFormatted &&
formatDate(date, date_1.NEUTRAL_DATE) === formatDate(dayFormatted, date_1.NEUTRAL_DATE));
if (selectedIndex === 0 && ghostDateSelected) {
return ghostDateSelected > dayFormatted;
}
else if (selectedIndex === 0) {
return dayFormatted < selectedDate[1];
}
else if (selectedIndex === 1) {
return dayFormatted < selectedDate[0];
}
return false;
};
const buildDays = () => {
return (0, groupDaysByWeeks_1.groupDaysByWeeks)(dayList).map((grupo, index) => ((0, jsx_runtime_1.jsx)(list_styled_1.TableRowStyled, { children: grupo.map((day, dayIndex) => {
const dayFormatted = day ? day : 0;
let isDisabled = day
? dateHelpers.isBefore(day, props.minDate) ||
dateHelpers.isAfter(day, transformDate(formatDate(props.maxDate, date_1.NEUTRAL_DATE), date_1.NEUTRAL_DATE))
: true;
if (!isDisabled) {
isDisabled = disabledDates.some(disabledDate => day && dateHelpers.isDatesEqual(day, disabledDate, false));
}
const stateDay = (0, getState_1.getStateDay)({
dayFormatted,
isSelectedToLeft,
isSelectedToRight,
isGhostSelected,
selectedDate,
hasRange,
today,
formatDate,
});
return day ? ((0, jsx_runtime_1.jsx)(list_styled_1.ItemRoveStyled, { "$disabled": isDisabled, "aria-selected": stateDay === state_1.ListDaysStateType.SELECTED ? true : undefined, state: stateDay, styles: props.styles, children: (0, jsx_runtime_1.jsx)(itemRove_1.ItemRove, { ariaDisabled: isDisabled, ariaLabel: formatDate(day, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
}), asElement: list_styled_1.ElementStyled, dataTestId: `${dataTestId}-${dayIndex + constants_1.WEEK_DAYS * index}`, focus: handleFocus(dayIndex + constants_1.WEEK_DAYS * index), index: dayIndex + constants_1.WEEK_DAYS * index, type: type_1.ButtonType.BUTTON, onMouseOver: () => {
if (positionDateRange === 1) {
setGhostDateSelected(dayFormatted);
}
}, onSelectItem: () => {
!isDisabled && onChangeSelectedDate(dayFormatted);
}, children: day.getDate() }) }, `day${dayIndex + constants_1.WEEK_DAYS * index}${dayFormatted}`)) : ((0, jsx_runtime_1.jsx)(list_styled_1.ElementEmptyStyled, { "aria-hidden": true, "aria-label": "empty day" }, `day${dayIndex + constants_1.WEEK_DAYS * index}${dayFormatted}`));
}) }, index)));
};
return ((0, jsx_runtime_1.jsx)(list_styled_1.ListStyled, { ref: listEl, styles: props.styles, children: buildDays() }));
};
exports.List = List;
//# sourceMappingURL=list.js.map