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

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectCalendarView = 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 ECalendarViews_1 = require("./models/ECalendarViews");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var SelectCalendarView = function (props) {
    var onSelected = props.onSelected, value = props.value;
    // State for selected view
    var _a = React.useState(value !== null && value !== void 0 ? value : ECalendarViews_1.ECalendarViews.Month), selectedView = _a[0], setSelectedView = _a[1];
    var _b = React.useState({
        view: [value !== null && value !== void 0 ? value : ECalendarViews_1.ECalendarViews.Month],
    }), checkedValues = _b[0], setCheckedValues = _b[1];
    var DayView = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.CalendarDayFilled, react_icons_1.CalendarDayRegular); }, []);
    var MonthView = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.CalendarMonthFilled, react_icons_1.CalendarMonthRegular); }, []);
    var WeekView = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.CalendarWorkWeekFilled, react_icons_1.CalendarWorkWeekRegular); }, []);
    React.useEffect(function () {
        if (value !== undefined) {
            setSelectedView(value);
            setCheckedValues({ view: [value] });
        }
    }, [value]);
    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
    var onOpenChange = React.useCallback(function (_e, data) {
        setOpen(data.open);
    }, []);
    var viewIcon = React.useCallback(function () {
        switch (selectedView) {
            case ECalendarViews_1.ECalendarViews.Month:
                return React.createElement(MonthView, null);
            case ECalendarViews_1.ECalendarViews.Week:
                return React.createElement(WeekView, null);
            case ECalendarViews_1.ECalendarViews.Day:
                return React.createElement(DayView, null);
            default:
                return React.createElement(MonthView, null);
        }
    }, [selectedView]);
    var getViewLabel = React.useCallback(function (view) {
        switch (view) {
            case ECalendarViews_1.ECalendarViews.Month:
                return ControlStrings_1.default.CalendarControlViewMonthLabel;
            case ECalendarViews_1.ECalendarViews.Week:
                return ControlStrings_1.default.CalendarControlViewWeekLabel;
            case ECalendarViews_1.ECalendarViews.Day:
                return ControlStrings_1.default.CalendarControlViewDayLabel;
            default:
                return ControlStrings_1.default.CalendarControlViewMonthLabel;
        }
    }, []);
    var onCheckedValueChange = React.useCallback(function (_e, _a) {
        var name = _a.name, checkedItems = _a.checkedItems;
        if (name === 'view') {
            var newView = checkedItems[0];
            setSelectedView(newView);
            setCheckedValues({ view: checkedItems });
            onSelected(newView);
        }
    }, [onSelected]);
    return (React.createElement(React.Fragment, null,
        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: viewIcon(), style: { minWidth: '150px' } }, getViewLabel(selectedView))),
            React.createElement(react_components_1.MenuPopover, null,
                React.createElement(react_components_1.MenuList, { onCheckedValueChange: onCheckedValueChange, checkedValues: checkedValues },
                    React.createElement(react_components_1.MenuItemRadio, { icon: React.createElement(DayView, null), name: "view", value: ECalendarViews_1.ECalendarViews.Day }, ControlStrings_1.default.CalendarControlViewDayLabel),
                    React.createElement(react_components_1.MenuItemRadio, { icon: React.createElement(WeekView, null), name: "view", value: ECalendarViews_1.ECalendarViews.Week }, ControlStrings_1.default.CalendarControlViewWeekLabel),
                    React.createElement(react_components_1.MenuItemRadio, { icon: React.createElement(MonthView, null), name: "view", value: ECalendarViews_1.ECalendarViews.Month }, ControlStrings_1.default.CalendarControlViewMonthLabel))))));
};
exports.SelectCalendarView = SelectCalendarView;
//# sourceMappingURL=SelectCalendarView.js.map