@wordpress/components
Version:
UI components for WordPress.
234 lines (232 loc) • 9.68 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/components/src/date-time/date/index.tsx
var date_exports = {};
__export(date_exports, {
DatePicker: () => DatePicker,
default: () => date_default
});
module.exports = __toCommonJS(date_exports);
var import_date_fns = require("date-fns");
var import_i18n = require("@wordpress/i18n");
var import_icons = require("@wordpress/icons");
var import_date = require("@wordpress/date");
var import_element = require("@wordpress/element");
var import_use_lilius = require("./use-lilius/index.cjs");
var import_styles = require("./styles.cjs");
var import_utils = require("../utils.cjs");
var import_constants = require("../constants.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
function DatePicker({
currentDate,
onChange,
events = [],
isInvalidDate,
onMonthPreviewed,
startOfWeek: weekStartsOn = 0
}) {
const date = (0, import_utils.inputToDate)(currentDate ?? /* @__PURE__ */ new Date());
const {
calendar,
viewing,
setSelected,
setViewing,
isSelected,
viewPreviousMonth,
viewNextMonth
} = (0, import_use_lilius.useLilius)({
selected: [(0, import_utils.startOfDayInConfiguredTimezone)(date)],
viewing: (0, import_utils.startOfDayInConfiguredTimezone)(date),
weekStartsOn
});
const [focusable, setFocusable] = (0, import_element.useState)((0, import_utils.startOfDayInConfiguredTimezone)(date));
const [isFocusWithinCalendar, setIsFocusWithinCalendar] = (0, import_element.useState)(false);
const [prevCurrentDate, setPrevCurrentDate] = (0, import_element.useState)(currentDate);
if (currentDate !== prevCurrentDate) {
setPrevCurrentDate(currentDate);
setSelected([(0, import_utils.startOfDayInConfiguredTimezone)(date)]);
setViewing((0, import_utils.startOfDayInConfiguredTimezone)(date));
setFocusable((0, import_utils.startOfDayInConfiguredTimezone)(date));
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Wrapper, {
className: "components-datetime__date",
role: "application",
"aria-label": (0, import_i18n.__)("Calendar"),
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Navigator, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.ViewPreviousMonthButton, {
icon: (0, import_i18n.isRTL)() ? import_icons.arrowRight : import_icons.arrowLeft,
variant: "tertiary",
"aria-label": (0, import_i18n.__)("View previous month"),
onClick: () => {
viewPreviousMonth();
setFocusable((0, import_date_fns.subMonths)(focusable, 1));
const prevMonth = (0, import_date_fns.subMonths)(viewing, 1);
onMonthPreviewed?.((0, import_date.dateI18n)(import_constants.TIMEZONELESS_FORMAT, prevMonth, -prevMonth.getTimezoneOffset()));
},
size: "compact"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.NavigatorHeading, {
level: 3,
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", {
children: (0, import_date.dateI18n)("F", viewing, -viewing.getTimezoneOffset())
}), " ", (0, import_date.dateI18n)("Y", viewing, -viewing.getTimezoneOffset())]
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.ViewNextMonthButton, {
icon: (0, import_i18n.isRTL)() ? import_icons.arrowLeft : import_icons.arrowRight,
variant: "tertiary",
"aria-label": (0, import_i18n.__)("View next month"),
onClick: () => {
viewNextMonth();
setFocusable((0, import_date_fns.addMonths)(focusable, 1));
const nextMonth = (0, import_date_fns.addMonths)(viewing, 1);
onMonthPreviewed?.((0, import_date.dateI18n)(import_constants.TIMEZONELESS_FORMAT, nextMonth, -nextMonth.getTimezoneOffset()));
},
size: "compact"
})]
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Calendar, {
onFocus: () => setIsFocusWithinCalendar(true),
onBlur: () => setIsFocusWithinCalendar(false),
children: [calendar[0][0].map((day) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.DayOfWeek, {
children: (0, import_date.dateI18n)("D", day, -day.getTimezoneOffset())
}, day.toString())), calendar[0].map((week) => week.map((day, index) => {
if (!(0, import_date_fns.isSameMonth)(day, viewing)) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Day, {
day,
column: index + 1,
isSelected: isSelected(day),
isFocusable: (0, import_date_fns.isEqual)(day, focusable),
isFocusAllowed: isFocusWithinCalendar,
isToday: (0, import_date_fns.isSameDay)(day, (0, import_utils.startOfDayInConfiguredTimezone)(/* @__PURE__ */ new Date())),
isInvalid: isInvalidDate ? isInvalidDate(day) : false,
numEvents: events.filter((event) => (0, import_date_fns.isSameDay)(event.date, day)).length,
onClick: () => {
setSelected([day]);
setFocusable(day);
const newDate = (0, import_utils.setInConfiguredTimezone)(date, {
year: day.getFullYear(),
month: day.getMonth(),
date: day.getDate()
});
onChange?.((0, import_date.date)(import_constants.TIMEZONELESS_FORMAT, newDate));
},
onKeyDown: (event) => {
let nextFocusable;
if (event.key === "ArrowLeft") {
nextFocusable = (0, import_date_fns.addDays)(day, (0, import_i18n.isRTL)() ? 1 : -1);
}
if (event.key === "ArrowRight") {
nextFocusable = (0, import_date_fns.addDays)(day, (0, import_i18n.isRTL)() ? -1 : 1);
}
if (event.key === "ArrowUp") {
nextFocusable = (0, import_date_fns.subWeeks)(day, 1);
}
if (event.key === "ArrowDown") {
nextFocusable = (0, import_date_fns.addWeeks)(day, 1);
}
if (event.key === "PageUp") {
nextFocusable = (0, import_date_fns.subMonths)(day, 1);
}
if (event.key === "PageDown") {
nextFocusable = (0, import_date_fns.addMonths)(day, 1);
}
if (event.key === "Home") {
const dayOfWeek = day.getDay();
const daysToSubtract = (dayOfWeek - weekStartsOn + 7) % 7;
nextFocusable = (0, import_date_fns.subDays)(day, daysToSubtract);
}
if (event.key === "End") {
const dayOfWeek = day.getDay();
const daysToAdd = (weekStartsOn + 6 - dayOfWeek) % 7;
nextFocusable = (0, import_date_fns.addDays)(day, daysToAdd);
}
if (nextFocusable) {
event.preventDefault();
setFocusable(nextFocusable);
if (!(0, import_date_fns.isSameMonth)(nextFocusable, viewing)) {
setViewing(nextFocusable);
onMonthPreviewed?.((0, import_date.dateI18n)(import_constants.TIMEZONELESS_FORMAT, nextFocusable, -nextFocusable.getTimezoneOffset()));
}
}
}
}, day.toString());
}))]
})]
});
}
function Day({
day,
column,
isSelected,
isFocusable,
isFocusAllowed,
isToday,
isInvalid,
numEvents,
onClick,
onKeyDown
}) {
const ref = (0, import_element.useRef)(null);
(0, import_element.useEffect)(() => {
if (ref.current && isFocusable && isFocusAllowed) {
ref.current.focus();
}
}, [isFocusable]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.DayButton, {
__next40pxDefaultSize: true,
ref,
className: "components-datetime__date__day",
disabled: isInvalid,
tabIndex: isFocusable ? 0 : -1,
"aria-label": getDayLabel(day, isSelected, isToday, numEvents),
column,
isSelected,
isToday,
hasEvents: numEvents > 0,
onClick,
onKeyDown,
children: (0, import_date.dateI18n)("j", day, -day.getTimezoneOffset())
});
}
function getDayLabel(date, isSelected, isToday, numEvents) {
const {
formats
} = (0, import_date.getSettings)();
const localizedDate = (0, import_date.dateI18n)(formats.date, date, -date.getTimezoneOffset());
const parts = [localizedDate];
if (isSelected) {
parts.push((0, import_i18n.__)("Selected"));
}
if (isToday) {
parts.push((0, import_i18n.__)("Today"));
}
if (numEvents > 0) {
parts.push((0, import_i18n.sprintf)(
// translators: %d: Number of events on the calendar date.
(0, import_i18n._n)("There is %d event", "There are %d events", numEvents),
numEvents
));
}
return parts.join(". ");
}
var date_default = DatePicker;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
DatePicker
});
//# sourceMappingURL=index.cjs.map