@harvest-profit/npk
Version:
NPK UI Design System
39 lines • 3.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const utils_1 = require("./utils");
// Represents a single day in the calendar
// It can be in a selected, hovered, and disabled state
const Day = ({ visibleDate, date, state }) => {
const ref = (0, react_1.useRef)(null);
// With range selection, when selecting the end range we show a hovered selection of all dates between the start and the currently hovered date.
let isHoveredRangeSelected = false;
if (state.range && state.hoveredDate && date <= state.hoveredDate && date > state.value.start)
isHoveredRangeSelected = true;
const onMouseEnter = () => { if (state.range && !state.selectingStart)
state.setHoveredDate(date); };
const isDisabled = false; // Placeholder for disabled state. We can add logic to disable selecting certain dates in the future if the use case arises
const partOfSelected = (0, utils_1.isPartOfSelection)(state, date) || isHoveredRangeSelected; // If the date is selected or between the start and end date of a range selection
const isSelectionStart = partOfSelected && state.range ? (0, utils_1.isSameDay)(date, state.value.start) : false; // Only true if the date is the start of a range selection
const isSelectionEnd = partOfSelected && state.range ? (0, utils_1.isSameDay)(date, state.value.end) : false; // Only true if the date is the end of a range selection
const dateIsSelected = state.range ? (isSelectionStart || isSelectionEnd) : partOfSelected; // The actual selected dates. Only true if it is the selected date or the selected start or end date.
const isOutsideVisibleRange = date.getMonth() !== visibleDate.getMonth(); // True if the date is not within the visible month. We just set the opacity lower to show this.
const isToday = (0, utils_1.isSameDay)(date, (0, utils_1.today)()); // True if the date is today. We can use this to highlight the current date.
let dateState = '';
if (dateIsSelected)
dateState = 'selected';
if (isDisabled)
dateState = 'disabled';
return ((0, jsx_runtime_1.jsx)("td", { "aria-selected": partOfSelected, role: "gridcell", onMouseEnter: onMouseEnter, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, hidden: isOutsideVisibleRange, "data-state": dateState, "data-selection-start": isSelectionStart, "data-selection-end": isSelectionEnd, "data-selection-in": partOfSelected, "data-today": isToday ? 'true' : undefined, onClick: () => {
if (isDisabled)
return;
const newValue = new Date(state.selectingValue || (0, utils_1.today)());
newValue.setDate(date.getDate());
newValue.setMonth(date.getMonth());
newValue.setFullYear(date.getFullYear());
state.onChange(newValue);
}, children: date.getDate() }) }));
};
exports.default = Day;
//# sourceMappingURL=Day.js.map