@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
63 lines (62 loc) • 3.04 kB
JavaScript
import { HvTypography } from "../../Typography/Typography.js";
import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
import { checkIfDateIsDisabled, dateInProvidedValueRange, isDateRangeProp, isSameDay, isSameMonth } from "../utils.js";
import { useClasses } from "./CalendarCell.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/Calendar/SingleCalendar/CalendarCell.tsx
var HvCalendarCell = (props) => {
const { classes: classesProp, onChange, calendarValue, firstDayOfCurrentMonth, value, isDateSelectionMode, today, locale, minimumDate, maximumDate, rangeMode = false, ...others } = useDefaultProps("HvCalendarCell", props);
const { classes, cx } = useClasses(classesProp);
const buttonEl = useRef(null);
const startDate = isDateRangeProp(calendarValue) ? calendarValue.startDate : void 0;
const endDate = isDateRangeProp(calendarValue) ? calendarValue.endDate : void 0;
const isCellToday = isSameDay(value, today);
const isCellSelected = isSameDay(calendarValue, value);
const inMonth = isSameMonth(value, firstDayOfCurrentMonth);
const isCellAfterStartingDate = rangeMode && value && startDate ? value >= startDate : false;
const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;
const isDateInSelectionRange = calendarValue && rangeMode ? dateInProvidedValueRange(value, calendarValue) : false;
const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);
const startBookend = isSameDay(startDate, value);
const endBookend = isSameDay(endDate, value);
const isSelecting = isDateSelectionMode && isCellAfterStartingDate;
const handleClick = (event) => {
if (value) {
onChange?.(event, value);
if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());
}
};
const renderDate = () => /* @__PURE__ */ jsx(HvButtonBase, {
ref: buttonEl,
className: classes.cellContainer,
onClick: handleClick,
disabled: isDateDisabled || !inMonth,
"data-in-month": inMonth,
...others,
children: /* @__PURE__ */ jsx(HvTypography, {
component: "span",
variant: isCellToday ? "label" : "body",
className: cx(classes.calendarDate, {
[classes.calendarDateSelected]: inMonth && isCellSelected,
[classes.calendarDateNotInMonth]: !inMonth,
[classes.calendarDateInSelectionRange]: inMonth && rangeMode && isDateInSelectionRange,
[classes.calendarDateDisabled]: isDateDisabled,
[classes.startBookend]: inMonth && (startBookend && rangeMode || isCellStartingDate && isDateSelectionMode),
[classes.endBookend]: inMonth && endBookend && rangeMode
}),
children: value?.getDate()
})
});
return /* @__PURE__ */ jsx("div", {
className: cx(classes.dateWrapper, {
[classes.cellsInRange]: inMonth && rangeMode && isSelecting,
[classes.cellsOutsideRange]: rangeMode && !isSelecting
}),
"data-calendar-cell": "calendarCell",
children: renderDate()
});
};
//#endregion
export { HvCalendarCell as default };