@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
78 lines • 4.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalendarMonth = exports.defaultCalendarMonthStrings = 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 ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var css_1 = require("@emotion/css");
var useCalendarStyles = function () {
return {
root: (0, css_1.css)({
outline: "none",
}),
};
};
exports.defaultCalendarMonthStrings = {
months: [
ControlStrings_1.default.DatePickerMonthLongJanuary,
ControlStrings_1.default.DatePickerMonthLongFebruary,
ControlStrings_1.default.DatePickerMonthLongMarch,
ControlStrings_1.default.DatePickerMonthLongApril,
ControlStrings_1.default.DatePickerMonthLongMay,
ControlStrings_1.default.DatePickerMonthLongJune,
ControlStrings_1.default.DatePickerMonthLongJuly,
ControlStrings_1.default.DatePickerMonthLongAugust,
ControlStrings_1.default.DatePickerMonthLongSeptember,
ControlStrings_1.default.DatePickerMonthLongOctober,
ControlStrings_1.default.DatePickerMonthLongNovember,
ControlStrings_1.default.DatePickerMonthLongDecember,
],
shortMonths: [
ControlStrings_1.default.DatePickerMonthShortJanuary,
ControlStrings_1.default.DatePickerMonthShortFebruary,
ControlStrings_1.default.DatePickerMonthShortMarch,
ControlStrings_1.default.DatePickerMonthShortApril,
ControlStrings_1.default.DatePickerMonthShortMay,
ControlStrings_1.default.DatePickerMonthShortJune,
ControlStrings_1.default.DatePickerMonthShortJuly,
ControlStrings_1.default.DatePickerMonthShortAugust,
ControlStrings_1.default.DatePickerMonthShortSeptember,
ControlStrings_1.default.DatePickerMonthShortOctober,
ControlStrings_1.default.DatePickerMonthShortNovember,
ControlStrings_1.default.DatePickerMonthShortDecember,
],
days: [
ControlStrings_1.default.DatePickerDayLongSunday,
ControlStrings_1.default.DatePickerDayLongMonday,
ControlStrings_1.default.DatePickerDayLongTuesday,
ControlStrings_1.default.DatePickerDayLongWednesday,
ControlStrings_1.default.DatePickerDayLongThursday,
ControlStrings_1.default.DatePickerDayLongFriday,
ControlStrings_1.default.DatePickerDayLongSaturday,
],
shortDays: [
ControlStrings_1.default.DatePickerDayShortSunday,
ControlStrings_1.default.DatePickerDayShortMonday,
ControlStrings_1.default.DatePickerDayShortTuesday,
ControlStrings_1.default.DatePickerDayShortWednesday,
ControlStrings_1.default.DatePickerDayShortThursday,
ControlStrings_1.default.DatePickerDayShortFriday,
ControlStrings_1.default.DatePickerDayShortSaturday,
],
goToToday: ControlStrings_1.default.DatePickerGoToToday,
};
var CalendarMonth = function (props) {
var onDateChange = props.onDateChange, defaultSelectedDate = props.defaultSelectedDate, onDismiss = props.onDismiss, _a = props.strings, strings = _a === void 0 ? exports.defaultCalendarMonthStrings : _a;
var styles = useCalendarStyles();
var _b = React.useState(defaultSelectedDate !== null && defaultSelectedDate !== void 0 ? defaultSelectedDate : new Date()), selectedDate = _b[0], setSelectedDate = _b[1];
var onSelectDate = React.useCallback(function (date, _selectedDateRangeArray) {
setSelectedDate(date);
onDateChange(date);
onDismiss();
}, [onDateChange, onDismiss]);
return (React.createElement(React.Fragment, null,
React.createElement(react_calendar_compat_1.Calendar, { className: styles.root, dateRangeType: react_calendar_compat_1.DateRangeType.Month, highlightSelectedMonth: true, isDayPickerVisible: false, onSelectDate: onSelectDate, value: selectedDate, onDismiss: onDismiss, showGoToToday: false, allFocusable: false, strings: strings })));
};
exports.CalendarMonth = CalendarMonth;
//# sourceMappingURL=CalendarMonth.js.map