@pnp/spfx-controls-react/lib-commonjs/controls/calendar/selectWeek/SelectWeek.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectWeek = exports.defaultSelectWeekStrings = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_calendar_compat_1 = require("@fluentui/react-calendar-compat");
var react_icons_1 = require("@fluentui/react-icons");
var react_components_1 = require("@fluentui/react-components");
var date_fns_tz_1 = require("date-fns-tz");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
exports.defaultSelectWeekStrings = {
    selectWeekPlaceholder: ControlStrings_1.default.CalendarControlSelectWeekLabel,
};
var formatWeekLabel = function (week) {
    var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    var startMonth = (0, date_fns_tz_1.format)(week.start, 'MMM', { timeZone: timeZone });
    var endMonth = (0, date_fns_tz_1.format)(week.end, 'MMM', { timeZone: timeZone });
    var startYear = (0, date_fns_tz_1.format)(week.start, 'yyyy', { timeZone: timeZone });
    var endYear = (0, date_fns_tz_1.format)(week.end, 'yyyy', { timeZone: timeZone });
    if (startYear !== endYear) {
        return "".concat((0, date_fns_tz_1.format)(week.start, 'dd MMM yyyy', { timeZone: timeZone }), " - ").concat((0, date_fns_tz_1.format)(week.end, 'dd MMM yyyy', { timeZone: timeZone }));
    }
    if (startMonth !== endMonth) {
        return "".concat((0, date_fns_tz_1.format)(week.start, 'dd MMM', { timeZone: timeZone }), " - ").concat((0, date_fns_tz_1.format)(week.end, 'dd MMM yyyy', { timeZone: timeZone }));
    }
    return "".concat((0, date_fns_tz_1.format)(week.start, 'dd', { timeZone: timeZone }), " - ").concat((0, date_fns_tz_1.format)(week.end, 'dd MMM yyyy', { timeZone: timeZone }));
};
var getWeekRange = function (date) {
    var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    var zonedDate = (0, date_fns_tz_1.utcToZonedTime)(date, timeZone);
    var start = new Date(zonedDate);
    start.setDate(zonedDate.getDate() - zonedDate.getDay());
    var end = new Date(start);
    end.setDate(start.getDate() + 6);
    return {
        start: (0, date_fns_tz_1.utcToZonedTime)(start, timeZone),
        end: (0, date_fns_tz_1.utcToZonedTime)(end, timeZone),
    };
};
exports.SelectWeek = React.memo(function (props) {
    var onSelected = props.onSelected, value = props.value, _a = props.strings, selectWeekStrings = _a === void 0 ? exports.defaultSelectWeekStrings : _a;
    var dateRangeType = react_calendar_compat_1.DateRangeType.Week;
    var _b = React.useState(value !== null && value !== void 0 ? value : new Date()), selectedDate = _b[0], setSelectedDate = _b[1];
    var _c = React.useState(function () {
        var newValue = value !== null && value !== void 0 ? value : new Date();
        if (newValue) {
            var weekRange = getWeekRange(newValue);
            return formatWeekLabel(weekRange);
        }
        return selectWeekStrings.selectWeekPlaceholder;
    }), selectedWeek = _c[0], setSelectedWeek = _c[1];
    var _d = React.useState(false), open = _d[0], setOpen = _d[1];
    var onOpenChange = React.useCallback(function (_e, data) {
        setOpen(data.open);
    }, []);
    var MonthIcon = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.CalendarMonthFilled, react_icons_1.CalendarMonthRegular); }, []);
    var onSelectDate = React.useCallback(function (date) {
        if (date) {
            setSelectedDate(date);
            var weekRange = getWeekRange(date);
            var weekLabel = formatWeekLabel(weekRange);
            setSelectedWeek(weekLabel);
            onSelected({ startDate: weekRange.start, endDate: weekRange.end });
            setOpen(false);
        }
    }, [onSelected]);
    var firstDayOfWeek = React.useMemo(function () { return 0; }, []);
    return (React.createElement(react_components_1.Menu, { open: open, onOpenChange: onOpenChange },
        React.createElement(react_components_1.MenuTrigger, { disableButtonEnhancement: true },
            React.createElement(react_components_1.MenuButton, { shape: "circular", icon: React.createElement(MonthIcon, null), style: { minWidth: '200px' }, "aria-label": "".concat(ControlStrings_1.default.CalendarControlSelectWeekLabel, ": ").concat(selectedWeek) }, selectedWeek)),
        React.createElement(react_components_1.MenuPopover, { style: { maxWidth: 'fit-content' } },
            React.createElement(react_components_1.MenuList, null,
                React.createElement(react_calendar_compat_1.Calendar, { dateRangeType: dateRangeType, highlightSelectedMonth: true, showGoToToday: true, onSelectDate: onSelectDate, value: selectedDate, firstDayOfWeek: firstDayOfWeek })))));
});
//# sourceMappingURL=SelectWeek.js.map