@pnp/spfx-controls-react/lib-commonjs/controls/calendar/selectDay/SelectDay.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectDay = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
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 react_calendar_compat_1 = require("@fluentui/react-calendar-compat");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
exports.SelectDay = React.memo(function (props) {
    var onSelected = props.onSelected, value = props.value;
    var _a = React.useState(value !== null && value !== void 0 ? value : new Date()), selectedDate = _a[0], setSelectedDate = _a[1];
    var _b = React.useState(function () {
        var initialDate = value !== null && value !== void 0 ? value : new Date();
        return (0, date_fns_tz_1.format)(initialDate, 'dd MMM, yyyy');
    }), selectedLabel = _b[0], setSelectedLabel = _b[1];
    var _c = React.useState(false), open = _c[0], setOpen = _c[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) {
            var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            var zonedDate = (0, date_fns_tz_1.utcToZonedTime)(date, timeZone);
            setSelectedDate(zonedDate);
            setSelectedLabel((0, date_fns_tz_1.format)(zonedDate, 'dd MMM, yyyy'));
            onSelected(zonedDate);
            setOpen(false);
        }
    }, [onSelected]);
    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.CalendarControlSelectDayLabel, ": ").concat(selectedLabel) }, selectedLabel)),
        React.createElement(react_components_1.MenuPopover, { style: { maxWidth: 'fit-content' } },
            React.createElement(react_components_1.MenuList, null,
                React.createElement(react_calendar_compat_1.Calendar, { highlightSelectedMonth: true, showGoToToday: true, onSelectDate: onSelectDate, value: selectedDate })))));
});
//# sourceMappingURL=SelectDay.js.map