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

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toolbar = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_icons_1 = require("@fluentui/react-icons");
var react_button_1 = require("@fluentui/react-button");
var ECalendarViews_1 = require("./models/ECalendarViews");
var SelectCalendarView_1 = require("./SelectCalendarView");
var react_tooltip_1 = require("@fluentui/react-tooltip");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var selectDay_1 = require("./selectDay");
var selectMonth_1 = require("./selectMonth");
var SelectWeek_1 = require("./selectWeek/SelectWeek");
var stack_1 = require("./stack");
exports.Toolbar = React.memo(function (_a) {
    var selectedView = _a.selectedView, onSelectedView = _a.onSelectedView, currentDate = _a.currentDate, setCurrentDate = _a.setCurrentDate, onWeekChange = _a.onWeekChange, onMonthChange = _a.onMonthChange, onDayChange = _a.onDayChange;
    var ArrowDown = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.ArrowDownFilled, react_icons_1.ArrowDownRegular); }, []);
    var ArrowUp = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.ArrowUpFilled, react_icons_1.ArrowUpRegular); }, []);
    var onSelectWeek = React.useCallback(function (week) {
        onWeekChange(week.startDate);
        setCurrentDate(week.startDate);
    }, [onWeekChange, setCurrentDate]);
    var onSelectMonth = React.useCallback(function (month) {
        onMonthChange(month);
        setCurrentDate(month);
    }, [onMonthChange, setCurrentDate]);
    var onSelectDay = React.useCallback(function (day) {
        onDayChange(day);
        setCurrentDate(day);
    }, [onDayChange, setCurrentDate]);
    var RenderSelectView = React.useCallback(function () {
        switch (selectedView) {
            case ECalendarViews_1.ECalendarViews.Month:
                return React.createElement(selectMonth_1.SelectMonth, { onSelected: onSelectMonth, value: currentDate });
            case ECalendarViews_1.ECalendarViews.Week:
                return React.createElement(SelectWeek_1.SelectWeek, { onSelected: onSelectWeek, value: currentDate });
            case ECalendarViews_1.ECalendarViews.Day:
                return React.createElement(selectDay_1.SelectDay, { onSelected: onSelectDay, value: currentDate });
            default:
                return React.createElement(selectMonth_1.SelectMonth, { onSelected: onSelectMonth, value: currentDate });
        }
    }, [selectedView, onSelectMonth, onSelectWeek, onSelectDay, currentDate]);
    var RenderToday = React.useCallback(function () { return (React.createElement(react_tooltip_1.Tooltip, { content: "Today", relationship: "label" },
        React.createElement(react_button_1.Button, { shape: "circular", icon: React.createElement(react_icons_1.CalendarTodayRegular, null), size: "medium", onClick: function () { return onDayChange(new Date()); } }, ControlStrings_1.default.CalendarControlTodayLabel))); }, [onDayChange]);
    var handleNavigation = React.useCallback(function (offset) {
        var newDate = new Date(currentDate);
        switch (selectedView) {
            case ECalendarViews_1.ECalendarViews.Month:
                newDate.setMonth(newDate.getMonth() + offset);
                onMonthChange(newDate);
                break;
            case ECalendarViews_1.ECalendarViews.Week:
                newDate.setDate(newDate.getDate() + offset * 7);
                onWeekChange(newDate);
                break;
            case ECalendarViews_1.ECalendarViews.Day:
                newDate.setDate(newDate.getDate() + offset);
                onDayChange(newDate);
                break;
            default:
                break;
        }
        setCurrentDate(newDate);
    }, [
        currentDate,
        selectedView,
        onMonthChange,
        onWeekChange,
        onDayChange,
        setCurrentDate,
    ]);
    return (React.createElement(stack_1.Stack, { width: "calc(100% - 40px)", height: "fit-content", direction: "horizontal", justifyContent: "space-between", alignItems: "center", paddingLeft: "20px", paddingRight: "20px", paddingBottom: "10px", paddingTop: "10px", columnGap: '10px', style: { overflow: 'hidden' } },
        React.createElement(stack_1.Stack, { direction: "horizontal", justifyContent: "start", alignItems: "center", columnGap: '10px' },
            React.createElement(RenderToday, null),
            React.createElement(RenderSelectView, null),
            React.createElement(react_tooltip_1.Tooltip, { content: ControlStrings_1.default.CalendarControlPreviousLabel, relationship: "label" },
                React.createElement(react_button_1.Button, { size: "medium", icon: React.createElement(ArrowUp, { fontSize: 14 }), onClick: function () { return handleNavigation(-1); } })),
            React.createElement(react_tooltip_1.Tooltip, { content: ControlStrings_1.default.CalendarControlNextLabel, relationship: "label" },
                React.createElement(react_button_1.Button, { size: "medium", icon: React.createElement(ArrowDown, { fontSize: 14 }), onClick: function () { return handleNavigation(1); } }))),
        React.createElement(stack_1.Stack, { direction: "horizontal", justifyContent: "start", alignItems: "center", columnGap: '10px' },
            React.createElement(SelectCalendarView_1.SelectCalendarView, { onSelected: onSelectedView, value: selectedView }))));
});
exports.default = exports.Toolbar;
//# sourceMappingURL=Toolbar.js.map